타입스크립트로 넘어온지 3주일이 지났다.
아직 모르는 컴파일 설정이 많고 타입의 분리 및 관리에 익숙하진 않지만 strict모드에서 왠만한 프론트 코딩이 가능하게 되었다.
이제 프로젝트나 다른 공부를 하면서 익숙해지면 좋겠다 싶어 공부할 것들을 모색했다. 그래서 기존에 부족했던 반응형 웹 만들기와 테스트에 눈길을 쏟았다.
우선 반응형 웹을 공부했다. MDN의 Flex, Grid 공식문서를 보면서 책, 블로그 등을 참조한 결과
1. Grid Layout으로 전체 레이아웃을 설계하는 것
2. %와 Flexbox의 적절한 사용으로 반응형을 만드는 것
3. 모바일과 데스크탑까지 처음부터 고려하는 설계
이 세가지를 고려할 수 있게 되었다.
그리고 velopert님의 velog를 기점으로 리액트 관련 테스트를 공부해보았다.
유닛 테스트, 통합 테스트는 이전에 Node.js를 하면서 jest를 끄적여보았기에 어려움이 없었다. Enyzme와 testing-library가 최근 핫한 테스팅 도구들이며, Enzyme는 렌더링 결과는 물론 상태와 props를 테스트하기 좋은 도구고 testing-library는 렌더링된 결과를 중점적으로 테스팅한다는 이론적인 내용은 알겠다.
하지만 테스트란 것은 무작정 공부한다고 되는 것이 아니다. 몇번 가지고 노는 것으론 다음 것들을 알지 못한다.
1. 위에서 언급한 차이를 알고 테스팅 도구로 선택해 도입
2. 커버리지를 높일 수 있도록 빈틈 없이 경우의 수를 파악하는 것
이 둘을 알기 위해선 프로젝트를 해볼 수 밖에 없다고 생각이 들었다. 그래서 기본적으로 테스트 코드를 작성할 수 있다는 것에 만족하고 조만간 참여할 프로젝트에 익숙해질 계획이다.
그 다음으로 공부할 것으로 SSR을 찍었다.
이전에 "리액트를 다루는 기술"책을 보다가 가장 어려운 파트라고 생각이 들어 킵해두었다. 하지만 인터넷 강의로 인해 Next.js를 공부를 시작했고, 참여하고 있는 프로젝트에 Next.js를 도입하게 되면서 본질적인 SSR 공부가 필요했다.
또한, Next.js를 공부하기 위해 공식 문서를 읽고 팀원들과 공유하면서 Next.js tutorial이란 주제로 velog의 첫 글을 장식했었는데, 이 과정에서 프레임워크가 제공해주는 내용들이 기존 React에선 어떻게 할 수 있는지 궁금했다.
어느 정도 Next.js에 익숙해진 이 시점, SSR 기초를 공부하기 위해 책을 폈다.
"리액트를 다루는 기술"의 Chapter20 내용의 코드를 타이핑하면서 공부를 시작했다. CRA 환경에서 SSR전용 webpack.config파일과 build script를 작성하고 index파일에서 렌더링하는 코드를 구현했다. 하지만 빌드하는 과정에서 index에서 App파일을 찾지 못한다는 에러가 계속 발생해 진전이 없었다.
그래서 원인을 분석하다 build script에서 webpack 모듈이 webpack.config를 컴파일하는 과정에서 발생한 것으로 보아 설정 파일이 잘 못 되었고 판단했다.
그래서 이유를 두가지로 꼽았다.
1. CRA의 몇몇 파일의 내용이 책과 달랐다.
2. typescript로 작성해 몇몇 설정이 책과 다르게 하거나 추가해야한다.
CRA 버전이 달라졌거나 cra에 --template typescript 등 옵션을 준 것 때문에 코드 내용이 불일치할 수도 있다. 대표적으로 config/paths.js에 servedPath가 프로젝트에 없었다.
그리고 typescript로 작성한 것 때문일 수도 있었다. 기존의 ssrIndex 등 js 대신 ts 확장자인 파일을 설정한 등 책과 다르게 입력한 설정이 있었다.
그렇다고 다시 ts에서 js로 전환해 타이핑을 해볼 수 있지만, 하나하나가 무엇인지도 모른채 타이핑만 한다는 것 자체가 의미가 없는 행동이라고 생각이 들었다.
이런 생각은 곧 호기심을 불어일으켰다.
Next.js란 프레임워크에 감쳐진 내용들을 알고 싶고, react-router-dom을 사용해 SSR를 구현하는 방법을 알고 싶어졌다.
그래서 구현하는 과정에서 발생하는 내용들을 하나부터 차근차근 알아갈 생각이다.
정리
- Typescript로 넘어왔다.
- 반응형 웹, 이제 알 것 같다.
- 테스팅은 좀 해봐야 될 것 같다.
- SSR, 기초도 모른채 공부하다 막혀버림
- SSR을 기초부터 차근차근 공부하며 velog에 포스팅하겠다.
SSR 내용을 말하기전의 서론이 너무 길었다. ㅜㅜ
