말은 쉽지, 코드를 보여줘!

Next.js를 시작하기에 앞서 개발환경을 셋팅해본다. 기준 환경은 맥북, vscode 이다. 1. Node 설치 https://nodejs.org/ko/ 에서 다운로드해서 설치하자. 그럼 기본적으로 Node.js와 npm이 설치된다. 설치가 완료되었으면 아래 명령어로 버전을 확인하며 정상 설치 확인 node -v npm -v node 는 구글 크롬의 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이다. 일반적으로 자바스크립트 엔진은 브라우저에 내장되어 있고 이에 자바스크립트를 사용하기 위해서는 기본적으로 브라우저가 필요하다. Node.js 를 설치하게 되면 해당 로컬환경에서도 자바스크립트를 사용할 수 있게 된다. npm 은 웹에 업로드된 재사용 가능한 코드들을 모듈로 만들어놓은 노드 패키지들을 사..

관련 코드는 아래를 참고 하도록 한다. github.com/mypiece/react-example mypiece/react-example CRA 리액트+리덕스+리덕스사가 예제. Contribute to mypiece/react-example development by creating an account on GitHub. github.com 리덕스의 개념 자체는 아래와 같이 그리 어렵지 않다. 상태 저장을 위한 스토어가 있고 컴포넌트에서는 여기에 있는 특정 상태를 구독한다. 초기상태와 이를 변경하는 액션타입을 미리 정의해놓고 이를 토대로 액션을 만들어줄 액션생성함수도 미리 만들어놓고 사용한다. 상태를 변경하기 위해 디스패치를 통해 액션 발생되면 리듀서에서는 이를 감지해서 상태를 업데이트 한다. 다만 이를..

우선 크롬 웹 스토어 로 접속해서 React Developer Tools, Redux DevTools 를 브라우저에 설치한다. 설치를 완료하고 크롬 개발자모드(F12)를 확인하면 Redux, Components, Profiler 탭이 추가된 것을 볼 수 있다. 리액트는 단적으로 보면 결국 렌더링을 효율적으로 해주는 라이브러리이다. 이에 대부분의 전역적인 설정은 최초 렌더링을 시작하는 src/index.js 에서 해주면 된다. 이 중 크롬 개발자 도구와의 연동 설정을 하면 어플리케이션에서 사용되는 리덕스의 상태와 컴포넌트 렌더링 등의 주요정보를 디버깅 할 수 있다. 이를 위한 설정이 src/index.js 파일의 아래 내용이다. createStore를 통해 리덕스 상태를 보관할 스토어를 만드는데 compo..

velog.io/@gwak2837/React-%EC%BD%94%EB%94%A9-%EA%B7%9C%EC%B9%99 React 코딩 규칙 페스타에서 인턴하면서 개인적으로 느낀 React, Next, Apollo, JavaScript, CSS 코딩 규칙아래에서 언급된 규칙 외에도 좋은 저명한 레퍼런스 사이트가 있으면 추가해주세요 😎 velog.io

1. 디버깅을 위한 크롬 브라우저 확장 프로그램 설치 크롬 웹 스토어 로 접속해서 React Developer Tools, Redux DevTools 를 브라우저에 설치한다. 설치를 완료하고 크롬 개발자모드(F12)를 확인하면 Redux, Components, Profiler 탭이 추가된 것을 볼 수 있다. Redux 탭에서는 어플리케이션에 적용된 Redux의 상태정보를 실시간으로 확인할 수 있다. Components 탭에서는 컴포넌트의 트리구조를 확인할 수 있다. Profiler 탭을 통해 프로파일링을 해볼 수 있다. 추가로 이벤트에 따라 리렌더링 되는 컴포넌트 영역을 실시간으로 확인하려면 아래 설정을 추가해 진행해야 한다. 위 설정을 하면 아래와 같이 리렌더링 되는 컴포넌트를 화면상에서 실시간으로 확..

관련 코드는 아래를 참고 하도록 한다. github.com/mypiece/react-example mypiece/react-example CRA 리액트+리덕스+리덕스사가 예제. Contribute to mypiece/react-example development by creating an account on GitHub. github.com src/index.js 파일에서 최상위 컴포넌트인 src/App.js 를 라우터 태그로 감싼다. src/App.js 에서는 실제 라우팅 설정을 한다. 태그로 url별 호출한 컴포넌트를 지정한다. path 는 위와 같이 배열형태로 여러개를 지정할 수도 있다. /, /page1 과 같이 경로가 겹치는 부분을 처리하기 위해 exact={true} 설정이 필요하다. 태그를 ..

전체 코드는 아래를 참고 하도록 한다. github.com/mypiece/react-example mypiece/react-example CRA 리액트+리덕스+리덕스사가 예제. Contribute to mypiece/react-example development by creating an account on GitHub. github.com 리액트에서 상태를 관리하는 방법은 두가지가 있다. 전역적으로 관리가 필요하거나 상태를 관리하는 과정에서 api호출을 통해 외부데이터와 동기화 되어야 하는 경우에는 리덕스를 사용하고 컴포넌트 내부에서만 관리하면 되거나 외부데이터와 동기화가 필요없다면 State를 사용한다. 아래 Counter가 State를 이용해 상태관리를 한다. Counter.js 파일이 최종 렌더링..

jQuery 라면 selector로 Element를 찾아서 직접 DOM을 조작해야 한다. 하지만 리액트는 실제 DOM 변경 전에 내부적으로 가상 DOM이라는 개념이 사용되기 때문에 직접적으로 DOM을 조작하지 않고 HTML과 비슷한 JSX 문법을 통해 View를 정의하되 특정 상태값에 따라 컴포넌트를 어떤식으로 렌더링할지 선언하는 방식이다. 이러한 상태와 컴포넌트는 옵저버 패턴처럼 연결되어 있어서 컴포넌트는 참조하는 상태값의 변화할때마다 자동으로 리렌더링 된다. 렌더링 과정에서 내부적으로 가상DOM 에 페이지 자체를 새로 만들고 실제 DOM 과 비교하여 변경된 부분만 적용한다. 리액트에서는 이를 위한 상태관리가 필요하다. 이러한 상태는 기본적으로 State 가 있는데 이는 컴포넌트 내부에서만 사용되는 상..

리액트에서 다른 js 파일을 import 할때 기본적으로 아래와 같이 상대경로로 지정해야 한다. import { startLoading, finishLoading } from '../../modules/loading'; 이것도 좀 지져분한데 Depth 가 더 깊어질 경우 ../../../ 이 굉장히 길어진다. 하지만 몇가지 설정으로 절대경로로 import 할 수 있는 방법을 제공한다. 프로젝트 root에 jsconfig.json파일을 생성하고 아래와 같이 입력한다. { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } 이제 src 디렉토리를 기준점으로 해서 아래와 같이 import 할 수 있다. import { startLoading, fi..

useEffect 함수를 통해 함수형 컴포넌트가 업데이트 될때마다 특정 작업을 수행할 수 있다. 예를 들어 컴포넌트 초기렌더링 시 필요한 상태값을 생성할 수 있다. 첫번째 인자의 함수 내부 로직으로 렌더링시 수행할 작업을 정의할 수 있고 해당 함수의 리턴값으로 업데이트 or 언마운트시 수행할 작업을 정의할 수 있다. 참고로 첫번째 인자의 return 은 선택적으로 정의할 수 있는데 초기상태값이 특정 조건에 따라 다르게 할당되어야 한다면 return 에 반드시 상태값을 초기화하는 디스패치 로직이 추가되어야 한다. 그렇지 않으면 컴포넌트 렌더링시 아주 짧은 시간동안 이전 상태값이 나타나는 깜빡임 현상이 발생한다. 사용법은 대략 아래와 같은데 리덕스를 사용하는 환경에서 dispatch(getTodos());로..