우선 설명에 앞서 개인 프로젝트를 진행하면서, 왜 Next.js를 사용하려는지에 대해서 서술해보려고 합니다. 기존 팀 프로젝트를 진행하면서 Node.js, Express를 사용했고 SSR이 좋다고 생각했습니다. CSR, SSR에 대해서는 별도로 게시글을 작성해보도록 하겠습니다. 왜 Next.js를 사용하는가? 우선 SSR을 쉽게 구현하도록 도와주는 프레임워크가 Next.js입니다. 별도의 설정없이 SSR, SEO부터 최근 저를 괴롭히는 TypeScript까지 제공해주는 React Framework입니다. 그럼 Node.js, Express (Back-End Part)를 맡으면서 왜 Next.js를 사용하는가? 음.. 가장 큰 이유는 함께할 동료를 구하지 못했고, 기초적인 Front 지식이 있었으면 좋겠다는 생각이 들어 개인 프로젝트를 진행하게 됐습니다. 아무튼 SSR에 특화된 프레임워크가 Next.js입니다. Next.js 작동원리 > Client에서 Ser
React에서의 데이터 흐름 React의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점입니다. 컴포넌트를 만들고, 페이지를 조립해 나가는 것이 React의 특징입니다. 상향식(Bottom-Up)으로 앱을 만듭니다. > Bottom-Up (상향식)의 장점 테스트가 쉽고 확장성이 좋습니다. 컴포넌트는 바깥에서 props를 이용해 데이터를 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있습니다. 즉 데이터를 전달하는 주체는 부모 컴포넌트가 됩니다. 데이터의 흐름은 (top-down)입니다. 데이터는 단방향으로 흐르고(one-way data flow)고 React를 대표하는 설명 중 하나입니다. 사용자 입력은 이벤트에 따라 얼마든지 변할 수 있습니다
상태란? UI에 동적으로 표현될 데이터입니다. (상태는 변하는 데이터입니다.) Side Effect란? 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인 React의 주요 개발 원칙 중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것입니다. 따라서 컴포넌트 우선 개발 방식에 익숙해져야 합니다. 상태 관리에 앞서 React로 사고하기 읽어보기 1단계: UI를 컴포넌트 계층 구조로 나누기 새로운 함수나 객체를 만들 때 처럼 만들면됩니다. 중요한 점은 단일 책임 원칙입니다. 하나의 컴포넌트는 한 가지 일을 하는게 이상적이라는 뜻입니다. 하나의 컴포넌트가 커지게 될 경우 이때 작은 하위 컴포넌트로 분리되어야 합니다. 2단계: React로 정
CDD (Component Driven Development) 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행 할 수 있습니다. Storybook CDD를 지원하는 도구 중 하나가 Component Explorer입니다. UI 개발도구가 다양하게 있고 그 중 하나가 Storybook 입니다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업할 수 있습니다. 전체 UI를 한눈에 보고 개발할 수 있습니다. Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션 할 수 있는 다양한 테스트 상태를 확인할 수 있습니다. (버그를 사전에 방지할 수 있도록 도와줍니다.) 테스트 및 개발 속도를 향상시키는 장점이 있으며, 의존성을 걱정하지 않고 빌드할 수 있습니다. Storybook 설치 및 세팅법 CSS의 발전 인터넷의 발전으로 CSS
React 데이터 흐름 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작하는 것입니다. 상향식(bottom-up)으로 앱을 만듭니다. 가장 큰 장점은 테스트가 쉽고 확장성이 좋습니다.(컴포넌트 계층 구조로 나누는 것이 가장 우선순위가 됩니다.) 컴포넌트는 트리 구조입니다. 컴포넌트 외부에서 props를 이용해 데이터를 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있습니다. 데이터를 전달하는 주체는 부모 컴포넌트가 됩니다. 이때 데이터의 흐름은 하향식(top-down)을 의미합니다. 단방향 데이터 흐름(one-way data flow)는 React를 대표하는 설명 중 하나입니다. 변하는 값과, 변하지 않는 값이 있습니다. 사용자
React 함수 컴포넌트 (React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있습니다. React Component에 props를 전달할 수 있습니다. State란? 살면서 변할 수 있는 값을 뜻합니다. (일반적으로 상태)라고 얘기합니다. 컴포넌트 사용 중 변할 수 있는 값 State hook, useState React에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공합니다. useState를 사용하기 위해서는 React로부터 useState를 불러와야 합니다. (import 키워드를 통해) import 후 useState를 컴포넌트 안에서 호출해 줍니다. useState를 호출한다는 것은 "state"라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무렇게나 지어도 됩니다. state 변수는 React에 의해 함수가 끝나도 사라지지 않습니다. *
웹, 데스크탑, 모바일 등 다양한 플랫폼에서 활용할 수 있는 프론트엔드 라이브러리, React에 대해서 공부하겠습니다. React의 3가지 특징에 대한 이해 JSX가 왜 명시적인지 이해하고 작성하기 React Component의 필요성에 대한 이해 React 란? 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리 React를 사용하는 이유는 3가지 특징 때문입니다. 선언형 컴포넌트 기반 범용성 선언형이란? 페이지를 보여주기 위해서 HTML, CSS, JS로 나누기보다 하나의 파일에 명시하여 작성할 수 있게 도와주는 선언형 프로그래밍입니다. (HTML, CSS, JS 왔다갔다 할 필요가 없다.) 컴포넌트 기반이란? 하나의 기능 구현을 위해 여러 조건을 묶어놓은 것을 뜻합니다. 컴포넌트를 분리하면 서로 독립적이고 재사용 가능합니다. (기능 자체에 집중하여 개발이 가능하다.) 범용성 리액트는 Jav