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

리액프 프로젝트를 실제 서버에 배포할 때는 별도의 빌드 작업을 거쳐야 한다. 자바스크립트 파일 안에서 불필요한 주석, 경고메시지, 공백 등을 제거해서 파일의 크기를 최소화하고 jsx문법이나 es6 같은 최신 자바스크립트 문법이 브라우저에서 원할하게 동작하도록 트랜스파일 작업을 하기도 한다. 일반적으로 이 작업은 웹팩(webpack)이라는 도구가 담당하는데 별도의 설정을 하지 않으면 프로젝트에서 사용 중인 모든 자바스크립트 파일과 CSS 파일이 각각 하나의 파일로 합쳐진다. 그런데 CRA(create-react-app)로 생성한 프로젝트의 경우 SplitChunks 라는 기능이 적용되어 있어 빌드시 node_modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간에 공유된 파일을 자동으로 분..

json-server는 간단하게 REST API서버를 구축해주는 라이브러리이다. 상용서비스 용도는 아니고 테스트 용도로 사용하기에 적합하다. 왠지 추후 테스트코드 작성시에도 활용할 수 있을 것 같다. 아래와 같이 json-server 를 설치한다. nvm 을 사용할 경우 제대로 동작하지 않을 수 있다고 하는데 난 문제없이 잘 되었다. 혹시 잘 안된다면 npm i -g json-server 로 설치하자. yarn global add json-server src 디렉토리 하위에 특정 디렉토리를 생성한다. 여기에서는 fake-server 라는 디렉토리를 생성한다. 디렉토리 하위에 todosRest.json 파일을 생성하고 아래와 같이 입력한다. { "todos": [ { "id": 1, "text": "리덕스..

더 좋은 방법도 많겠지만 나는 아래와 같이 사용하고 있다. └── src ├── components ├── containers ├── lib │ ├── redux │ ├── rest │ └── utils └── pages src/components 상태 관리가 이루어지지 않고 그저 props를 받아와서 화면에 UI로 나타나는 프레젠테이셔널 컴포넌트 생성 src/containers 리덕스와 연동되어 리덕스 스토어에서 상태값을 구독하고 디스패치 함수를 정의하는 컨테이너 컴포넌트 생성. 구독한 상태값과 디스패치 함수는 프레젠테이셔널 컴포넌트 에 props로 전달되어 각각 동적데이터를 데이터를 완성하거나 이벤트 함수에 연결된다. src/lib/redux 기능별로 액션 타입, 액션 생성 함수, 리듀서, 사가 코드..

1. NVM(Node Version Manager) 설치 sdkman 과 비슷하게 node 버전을 관리해주는 툴이다. 설치는 아래 공식 github 에 나온 방법을 참고하면 된다. https://github.com/nvm-sh/nvm nvm-sh/nvm Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - nvm-sh/nvm github.com 그런데 실제로 설치해도 아래 명령어가 인식되지 않는 경우가 있다. nvm --version 환경변수가 적용되지 않았기 때문인데 이는 아래를 참고하도록 한다. findmypiece.tistory.com/12 맥북에서 환경변수, PATH 가 자꾸 초기..

컴포넌트 성능 저하는 일반적으로 불필요한 컴포넌트 리렌더링 때문에 발생하는데 리렌더링 되는 상황은 아래와 같다. ​ 1. props 가 변경되었을 때 2. state 가 변경되었을 때 3. 부모 컴포넌트가 리렌더링 될 때 4. forceUpdate 함수가 실행될 때 6. useSelector 로 구독하는 값이 변경되었을 때 ​ 1, 2번은 변경된 상태에 따라 컴포넌트도 변화해야 하기 때문에 당연히 리렌더링 해야 하고 4번은 필요에 의해 강제로 리렌더링을 수행시키는 것이기 때문에 최대한 지양하면 된다. ​ 그런데 3번을 보면 부모컨포넌트가 리렌더링 된다고 해도 어떤 자식 컴포넌트는 변경되는 것이 없이 때문에 리렌더링이 필요하지 않을 수 있다. 바로 부모 컴포넌트에서 받아오는 props 가 바뀌지 않은 경우..

1. 함수형 컴포넌트에서 DOM을 직접 참조할 수 있는 방법을 제공하며 전역적으로 동작하는게 아니라 컴포넌트 내부에서만 작동한다. ​ 2. 기본적인 사용법은 useRef()를 통해 ref 인스턴스를 만든 뒤에 DOM의 ref로 해당 인스턴스 변수를 지정하면 된다. ​ 3. 이렇게 ref에 연결된 DOM은 ref.current 로 접근할 수 있다. ​ 4. 주의할 점은 useRef()로 만들어지는 인스턴스는 처음에는 아무것도 참조하지 않는 undefined 상태이고 DOM의 ref 키워드로 useRef() 로 만든 변수를 지정해야 그제서야 해당 DOM을 참조하게 된다. 즉, 일단 정상적으로 초기 렌더링이 되어야 해당 DOM을 ref.current 으로 접근할 수 있다. ​ 5. 한번 연결된 ref는 Rea..

컴포넌트 리렌더링이라 함은 함수형 컴포넌트 기준 JSX문법으로 작성된 view를 리턴하는 함수가 다시 수행되는 거라고 생각하면 된다. 그렇다면 컴포넌트 업데이트는 뭘까? 결국 같은 말 아닌가? 업데이트가 결국 리렌더링으로 연결되기 때문에 그냥 비슷한 의미로 해석하고 있었으나 가끔 이를 혼용해서 쓰는 글들이 보이기 시작하니 좀 헷갈려서 정리해놓는다. ​ 일단 업데이트가 더 큰 의미로 말그대로 컴포넌트가 업데이트되는 것을 말하고 그 과정에 리렌더링이 발생한다. 즉, 순서상 업데이트->리렌더링 이 된다. ​ 컴포넌트가 업데이트 되는 상황은 아래와 같다. ​ 1. props 가 변경되었을 때 2. state 가 변경되었을 때 3. 부모 컴포넌트가 리렌더링 될 때 4. forceUpdate 함수가 실행될 때 6...

intellij 를 통해 react 프로젝트를 생성하면 index.js -> 컴포넌트에 자동으로 감싸고 있다. 이는 감싼 컴포넌트 내의 잠재적인 문제를 알아내기 위한 도구로 해당 컴포넌트와 자손들에 대한 부가적인 검사와 경고를 활성화한다. 꼭 index.js에 쓰지 않아도 되고 부분적으로도 사용할 수 있다. 제거해도 상관없지만 개발모드에만 영향을 끼치니 굳이 사용하지 않을 이유는 없다.

""로 묶는 문자값이 아닌 경우(예: true, false, 0, 1) 반드시 {}로 감싸줘야 한다. 정리중..