JSX란 무엇이며 어떻게 사용할까요? 리액트 프로젝트를 시작하며 새롭게 생성된 파일을 열어보면 익숙하면서도 다소 생소한 구문으로 작성된 것을 확인할 수 있습니다. 이를 JSX라고 하는데요. JSX란? JSX는 JavaScript XML을 의미하며, 자바스크립트를 확장한 문법입니다. 리액트에서 요소를 생성하고 제어하는 데 사용합니다. 먼저, 간단한 예시를 살펴보도록 하겠습니다. // JSX를 사용한 코드 return ( Let's get started! ); // JSX를 사용하지 않은 코드 return React.createElement( 'div', {}, React.createElement('h2', {}, "Let's get started!"), React.createElement(Expense, ..

리액트 신규 프로젝트 생성 리액트로 신규 프로젝트를 생성하는 방법은 다음과 같습니다. 먼저, 리액트를 사용하기 위해서는 Node.js가 필요합니다. Node.js를 다운로드하여 설치합니다. 다음으로 커맨드 창을 열고 다음 명령어로 새로운 리액트 프로젝트를 시작합니다. npx create-react-app my-app cd my-app npm start 아래와 같이 브라우저에 새로운 리액트 앱이 실행되면 성공입니다. 리액트 작동 방식의 이해 create-react-app을 통해 리액트 프로젝트를 시작했다면 다양한 파일들이 자동으로 생성된 것을 볼 수 있습니다. 참고로 create-react-app은 리액트 프로젝트를 간편하게 시작할 수 있는 라이브러리입니다. 즉, 다른 방식으로도 리액트 프로젝트를 시작할 ..

리액트란? 리액트(React.js)는 자바스크립트 라이브러리로 보다 편리한 웹 개발을 위해 만들어졌습니다. 페이스북, 디스코드, 페이팔, 넷플릭스 등에서 대규모 애플리케이션을 리액트로 개발하여 운영 중인데요. 리액트는 반응형 웹 유저 인터페이스를 만드는 데 용이하며 확장성이 좋습니다. 리액트와 컴포넌트 리액트는 재사용 가능한 컴포넌트(component)를 통해 각 요소를 구현합니다. 컴포넌트란 무엇일까요? 컴포넌트는 리액트의 핵심 개념으로 자바스크립트 함수입니다. 컴포넌트를 통해 관심사를 분리할 수 있으며 이를 원하는 곳에서 재사용할 수 있습니다. 각 컴포넌트는 하나의 정확한 역할을 수행하는데요. 이렇게 컴포넌트를 분리하면 유지 보수와 관리가 용이합니다. 정리하자면 리액트의 모든 UI는 개별 컴포넌트(빌..

"그럼 대체 그 많은 돈으로는 무얼 하시나요?" "자유. 자유를 사고, 내 시간을 사요. 그게 가장 비싼 거죠. 인세 덕에 돈을 벌 필요는 없게 됐으니 자유를 얻게 됐고, 그래서 글 쓰는 것만 할 수 있게 됐죠. 내겐 자유가 가장 중요해요." 베스트셀러 작가가 되면 돈을 많이 번다. 세계적인 베스트셀러 작가가 되면 더 많은 돈을 번다. 일본의 작가 하루키 이야기다. 그런데 애초부터 돈을 많이 벌기 위해 작가가 되고 싶어하는 사람이 있을까? 작가가 되면 90% 이상은 춥고 배고프고 가난한 삶을 이어가기 마련이다. 그런데 그런 시간이 하나의 단어가 되고, 문장으로 연결되어, 결국 좋은 이야기가 되기도 한다. 좋은 글을 쓰기 위해 고통이나 결핍이 필수적이니 것은 아니지만 모든 것이 만족스럽고 여유로운 상황에서..

하고 싶은 일이 있는데도 아무 것도 하지 못하는 때가 있죠. 처음에는 그것이 정말 하고 싶은 일이 아니기 때문이라고 생각했어요. 음, 그런데요. 가만히 살펴보니 한편으로는 그것이 정말 하고 싶은 일이기 때문이라는 생각도 들더라고요. 무슨 말인가 싶으신가요? 어떤 일이 정말로 하고 싶다면 그것을 거창하게는 꿈, 소박하게는 목표라고 부를 수 있을 거예요. 대부분 꿈이나 목표를 달성하기 위해 노력하지 않는 이유를 실패를 두려워하는 것에서 찾곤 하죠. 그런데 정말 그럴까요? 제 생각에는 실패가 두려운 것이 아니라 성공하지 못하는 것을 두려워하는 거 같아요. 보다 정확하게는 성공하지 못해서 자신이 간절히 바라는 그 꿈이 영영 사라지게 되는 것은 아닐까 두려워하는 것이죠. 마음 속에 꿈을 품고 있는 동안에는 적어도..

조건부 삼항 연산자란 무엇이며 또 어떻게 사용할까요? 조건부 삼항 연산자는 자바스크립트에서 세 개의 피연산자를 사용할 수 있는 유일한 연산자로 보통 if 문을 간결하게 표현하기 위해 사용합니다. 조건부 삼항 연산자 예시 조건부 삼항 연산자는 어떻게 사용할까? 다음은 삼항 연산자를 사용한 함수의 예시입니다. 아래에서는 isWin이 true일 경우 10이 출력되고, false일 경우 0이 출력됩니다. function getScore(isWin) { return (isWin ? 10 : 0); } console.log(getScore(true)); // 10 console.log(getScore(false)); // 0 조건부 삼항 연산자 사용 방법 조건부 삼항 연산자는 condition ? exprIfTru..

비구조 할당(destructuring assignment)이란 배열 또는 객체의 속성을 변수에 연결하는 방식입니다. 비구조적 할당 문법은 어떻게 사용하며, 왜 사용하는 것일까요? 비구조적 할당 사용 방법 자바스크립트에서는 배열이나 객체를 사용하여 일련의 데이터를 간편하게 저장할 수 있죠. 비구조적 할당은 이와 유사한 문법을 사용합니다. 차이점은 왼쪽에 값이 오고 오른쪽에 기존의 배열 또는 객체 변수 이름이 온다는 것입니다. 아래의 예시 코드를 참고해보세요. const numbers = [1, 2, 3, 4, 5]; const [firstNumber, secondNumber, ...restNumbers] = numbers; console.log(firstNumber); // 1 console.log(sec..

바벨(Babel)은 ES6 이상의 자바스크립트나 JSX 또는 타입스크립트 코드를 ES5 형태의 코드로 변환해주는 역할을 합니다. 최신 문법으로 작성된 코드를 이전 버전의 코드로 변환하는 이유는 무엇일까요? 이는 웹브라우저와의 호환성을 위해서입니다. 최신 브라우저는 각 언어의 최신 문법을 지원하지만 구버전의 브라우저는 그렇지 않을 수도 있습니다. 따라서 바벨과 같은 트랜스 파일러를 사용하여 호환성을 높입니다.