이제는 정말 대세가 돼버린 타입스크립트를 당연히 리액트에서도 쓸 줄 알아야 한다. 타입스크립트 도입의 장점은 IDE를 더 잘 쓸수있고, 실수를 방지할 수 있기 때문이다. 특히 프로젝트의 규모가 커질수록 타입스크립트의 이점이 커진다. 1. 컴포넌트 생성하기 2. 상태 관리하기​ 가. useState 취지는 'useState로 만들 상태는 으로 타입 지정해주면 된다' 였으나 타입추론이 되는 마당에 굳이 쓸 필요가 있을까? 타입 추론이 안되는 경우에나 신경써서 달아주자. 아래처럼 null이 올 수 있는 경우처럼. type Information = { name: string; description: string }; const [info, setInformation] = useState(null); 나. use..

서버 사이드 렌더링이란 UI를 서버측에서 렌더링한 후 사용자에게 페이지를 보여주는 것을 말한다. 1. SSR 장단점 1) 장점 High SEO (Serach Engine Optimization) : 구글, 네이버, 다음 같은 검색 엔진들은 html 파일의 타이틀, 메타태그, 링크 등등을 분석하면서 페이지 정보 수집과 검색엔진 등록을 수행한다. 그런데 CSR의 경우 html은 공허한 무언가일뿐 본체는 JS파일이라 검색 엔진들이 이 페이지가 대체 뭔지 제대로 알아먹질 못한다(물론 구글신께선 일정부분까지 가능하긴 함) 유저경험 : 사용자가 페이지에 접속했는데 로딩창만 한 세월 처다보고있으면 불-편할 것이다. CSR의 경우 JS파일까지 전부 보내야 화면이 나타나므로 초기 로딩시간이 길어지나, SSR은 당장에 화..

쉽게말해 파일을 분리하는 작업을 코드 스플리팅이라고 한다(code spliting) 자바스크립트로 애플리케이션을 개발하게 되면, 기본적으로는 하나의 파일에 모든 로직들이 들어가게 된다. 리액트도 비슷한 맥락으로 npm run build로 웹팩을 통한 배포용 파일을 만드는데, CRA 기본 웹팩 설정에 SplitChunks라는 기능덕분에 적당히 분리가 되긴 하지만 내가 직접 짠 코드들은 하나의 파일에 대부분 담기게 된다. 이처럼 당장에 필요하지 않은 컴포넌트일지라도 불필요하게 한 파일에 담기게 되면서 파일 용량도 커지고, 페이지 로딩 속도도 느려진다. 그리고 이러한 문제를 해결하고자 나온 것이 코드 비동기 로딩이다. 1. React.lazy & Suspense 리액트 v16.6 부터 도입된 유틸 함수로 컴포..

1. 리덕스 사가 Redux를 기반으로 돌아가는 애플리케이션을 생각해보자. 유저가 애플리케이션과 인터렉션하면서 이거저거 누르게 될 것이고, 이 인터렉션에서 액션이 동시다발적으로 발생될 것이다. 뿐만 아니라 Redux 액션과 더불어 일반 로직이나 Ajax 요청 등 온갖 것들이 실행될텐데, 이러한 요청들을 어떻게 보장하고 실행시켜줄 수 있을까? 이러한 상황에서 고려해볼만한 라이브러리가 Redux-Saga이다. 단순히 '비동기 처리에 이점이 있다' 라는 설명 하나로 광고되는 경우가 많지만, Redux 설계를 잘 해뒀다면 사실 비동기 처리 하나만으론 어려운 일이 아니다. Redux-Saga의 진짜 의미는 리덕스의 액션이 여러 의미를 가지게 되고 그에 맞춰 기능이 확장, 액션과 액션 사이의 체이닝이 발생하기 시작..

액션 디스패치시 리듀서에서 액션을 처리하기에 앞서 원하는 작업을 실행해주는 중간자. 사실 미들웨어를 직접 만들어 쓸 일은 별로 없고, Redux Thunk, Redux Saga 등을 사용하면 된다. 1. 미들웨어 기본 구조 미들웨어의 기본적인 구조를 파악해보기 위해 간단한 미들웨어를 만들어보자. 뭔가 대단한게 있을 것 처럼 소개는 됐지만 미들웨어는 그냥 함수를 반환하는 함수다. 1) next 다만 next라는 새로운 함수가 등장한다는 것 뿐인데, 기능적으로는 store.dispatch와 유사하나 차이점은 next(action)을 호출하면 그 다음 미들웨어에게 액션을 넘겨준다는 것 뿐이다(만약 그 다음 미들웨어가 없다면 최종적으론 리듀서에게 액션을 넘겨준다) 만약 미들웨어에서 next를 사용하지 않으면 액..

6. 리덕스를 더 편하게 지금까지 봐서 알겠지만 리덕스가 결코 보기 편한 라이브러리는 아니다. 그나마 redux-actions와 immer 라이브러리를 활용하면 지금보단 훨씬 편하게 사용할 수 있다. 6.1 redux-actions 액션 생성 함수를 더 짧은 코드로 작성할 수 있게해주고, 리듀서도 switch ... case 문이 아니라 handleActions라는 함수로 좀더 직관적으로 만들 수 있다. ㅇcreateAction( type, payloadCreator, metaCreator ) action = { type : 어쩌구, payload : 저쩌구 } 처럼 생긴 object를 뱉어내는데, 이를 활용하면 액션을 쉽게 만들 수 있다. 특히, 원하는 데이터를 추가로 싣고싶으면 payload자리에 넣..