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

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

프론트개발을 할 경우 대부분 css, js 파일들은 퍼블리싱 팀에서 전달받는다. 이런 파일들은 일반적으로 cdn을 통해 전달 받는데 대략 아래와 같은 것들이다. 리액트에서 이를 적용하는 가장 간단한 방법은 Index.html 에 직접 추가하는 것이다. 하지만 페이지별로 필요한 js, css 파일이 다를 것이기 때문에 각 화면의 최상위 컴포넌트에 아래와 useEffect 를 선언해서 index.html에 동적으로 element 를 추가할 수 있다. useEffect(() => { const script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js..

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

findmypiece.tistory.com/16?category=966881 코드 스플리팅(spliting) 리액프 프로젝트를 실제 서버에 배포할 때는 별도의 빌드 작업을 거쳐야 한다. 자바스크립트 파일 안에서 불필요한 주석, 경고메시지, 공백 등을 제거해서 파일의 크기를 최소화하고 jsx문법이 findmypiece.tistory.com 위에서 포스팅 했듯이 리액트 빌드시 웹팩에서 기본적인 코드 스플리팅은 해주지만 프로젝트에서 작성하는 코드들도 한 파일로 합쳐지지 않도록 코드 스플리팅이 필요하다. 그 방법으로 컴포넌트 자체를 지연로딩 하는 방법이 있다. 이를 통해 초기 렌더링에 필요없는 컴포넌트들은 로딩 하지 않아 로딩시간도 짧아지고 트래픽도 절약할 수 있다. 그리고 이렇게 지연로딩 되는 컴포넌트는 웹팩..

리액프 프로젝트를 실제 서버에 배포할 때는 별도의 빌드 작업을 거쳐야 한다. 자바스크립트 파일 안에서 불필요한 주석, 경고메시지, 공백 등을 제거해서 파일의 크기를 최소화하고 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..