회고록을 작성하기 앞서 나는 이미 전체 강좌의 60%정도를 수강한 상태였다.
그 와중에 제로초님의 유튜브 라이브방송을 보게 됐고, 각 강좌별로 타임어택을 한다기에 슬랙 클론코딩 타임어택에 지원하여 처음 강좌부터 재복습 하기로 했다.

1. 기본셋팅

일단 백엔드 코드는 이미 작성되어있는 코드를 사용하므로 백엔드를 먼저 연결해주었다.
강좌에서는 dev mysql 에서 다운로드하여 셋팅 하였지만 나는 bitnami wamp를 사용하였다.
백엔드 시각화를 이용하기 위한 툴은 workbench보단 heidiSql을 먼저 사용하고 있어서 heidiSql을 그대로 사용하기로 했다. 둘다 써보긴 했지만 내 입장에서 사용하기엔 heidiSql가 더 편했다.

bitnami : https://bitnami.com/stack/wamp/installer
heidiSql : https://www.heidisql.com/download.php

2. TypeScript, Prettier, EsLint 설정

이 강좌를 듣기전에 nextjs를 활용해 포트폴리오를 리뉴얼하다 지금은 회사업무로 잠시 멈춰둔 토이 프로젝트가 하나 있다.
그 전까지 prettier, eslint, typescript를 써본적이 없어 해당 토이프로젝트에 셋팅하는법을 공부하며 정리해보자 하여 정리한 부분이 있다. 그 부분을 참조하자.

nextjs, typescript 설정 : https://velog.io/@dvisign/%EB%B8%94%EB%A1%9C%EA%B7%B8-%ED%98%95%EC%8B%9D-%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4-%EA%B0%9C%EB%B0%9C%EA%B8%B0-1%EC%9D%BC%EC%B0%A8
ESLint와 Prettier 설정 : https://velog.io/@dvisign/%EB%B8%94%EB%A1%9C%EA%B7%B8-%ED%98%95%EC%8B%9D-%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4-%EA%B0%9C%EB%B0%9C%EA%B8%B0-2-%EC%B4%88%EA%B8%B0-%EC%85%8B%ED%8C%852

3. 폴더 구조

폴더 구조는 프로젝트마다 다를 수 밖에 없다. 강좌에서는 프론트 서버와 백엔드 서버가 분리 되어있기 때문에 해당 프로젝트의 폴더트리는

컴포넌트, 훅스, 데이터타입, 빌드된 파일등으로 나누어져 있다.
하지만 위에서 언급했듯이 프로젝트마다 다를 수 있다.
내가 작업했던 한 프로젝트는 백엔드와 프론트엔드가 한개의 서버에서 돌아갔기 때문에 폴더구조 거의 비슷하지만 조금 다르다.

나도 퍼블리셔를 벗어나 개발에 발을 담그면서 처음 고민했던 것이 폴더트리이고 솔직히 리덕스 툴킷을 공부하면서 slice를 어떻게, 뭘 기준으로 나누는게 더 좋겠는가 에 대한 고민이 남아 있다. 하지만 결국 프로젝트를 진행하는 팀 or 개인이 구분하기 편한것이 답이라 결론을 지었다.(그래도 더 나은 폴더트리를 만들기 위해 고민은 항상 해보자.)

4. 코드스플리팅

코드스플리팅은 실제로 눈에 보이지 않아 독학하다보면 얻어걸리지 않는 이상 알 수가 쉽지 않다 생각한다. (내가 그랬다..)
리액트를 처음 독학하면서 그냥 무작정 state, setState, props, router 등등.. 최적화는 단지 memo와 useMemo정도면 끝이라 생각했다.
하지만 nextjs를 새로 공부하면서 자동으로 코드스플리팅을 지원해준다는 내용을 보고 그것이 무엇인지 찾아보았다.

코드스플리팅이란 당장에 필요한 코드들만 부분적으로 분리시켜 필요한 곳에서만 불러와 사용 할 수 있도록 나누는 작업이다.

일반 사용자들은 개발자도구를 잘 켜지도 않아 파일이 나누어져있는지 확인 할 이유도, 필요도 없고, 개발자들도 작은규모의 프로젝트에 리액트로 개발하여 속도에 그렇게 큰 영향을 주지않는다면 작업하지 않고 넘기는 경우가 많다.
해당 강좌에서는 loadable-components를 사용했지만, 그 대안으로 무엇이 있었고, 문제점이 무엇이 있는지 한번 비교해보았다.

React.Lazy, React-loadable vs loadable-components

React.Lazy는 코드스플리팅을 위한 방안으로 만들어졌지만 결정적인 문제가 있다. ssr을 지원하지 않는다.

React-loadable은 몇년전 내가 리액트 코드스플리팅에 대해 처음 알았을 때 사용해 보았던 라이브러리다. 하지만 더 이상 사용 할 수가 없다. Webpack v4+ 및 Babel v7+와 호환이 되지 않기 때문이다.

그 밖에 에러

원래 나는 강좌를 먼저 수강하여 듣다 처음부터 다시 시작했다. 원래 회사pc로 강좌를 듣다 이번에 새로산 노트북으로 프로젝트를 옴겨서 서버를 켰는데 알 수 없는 에러가 발생했다.

응? 백엔드 서버는 곧 잘 켜졌으나 프론트서버에서 에러가났다. 그래서 얼마전 웹팩 설정이 업데이트 되었다는 내용이 생각나 코드를 수정해보았으나 똑같이 -4092에러 구글링해도 잘나오질 않는다 에러번호가 대부분 달랐다. 그래서 웹팩설정에서 3000포트 4000포트 5000포트 다 바꿔봐도 도무지 열릴 생각이 없었다.
그래서 하루 종일 구글링해본 결과 몇가지 문제점으로 좁혀졌다.

1. 해당 포트를 사용하고 있는가?
2. 해당 포트가 제외되었는가?
3. vs code의 터미널에 문제가 있는가?
4. 웹팩 서버설치에 문제가 있는가?
5. 해당 pc에서 사용 가능한 포트가 더 이상 남아있지 않은가?
6. "권한과 방화벽에 문제가 있는가?"

1. 해당 포트를 사용하고 있는가?

netstat - ano

가동중인 3090포트가 없다.

2. 해당 포트가 제외 되어있는가?

net stop winnat

net start winnat

윈도우 nat드라이버를 껏다 켜보았다.
그래도 서버가 가동하지 않는다.

3. vscode의 터미널 문제인가?

vscode의 터미널을 관리자로 열기위해 vscode를 관리자 권한으로 실행해보아도 안되고 기본 설정에 관리자로 열기를 체크해보아도 증상은 같았다.

4. 웹팩 서버설치에 문제가 있는가?

npm에서 global을 설치 하기위한 곳을 다른 루트로 이동시킨다(루트에 국문이 껴있은것을 인식했을수도 있다는 의심)
하지만 여전히 서버가 켜지지 않는다.

5. 해당 pc에서 사용 가능한 포트가 더 이상 남아있지 않은가?

사용중인 포트와 사용 할 수 있는 포트의 갯수를 체크해보았다.

netsh int ipv4 show dynamicport tcp

아직 사용을 더 할 수 있으나 혹시 모르니 포트 수를 늘려주었다.

netsh int ipv4 set dynamic tcp start=10000 num=20000

그래도 서버가 안켜진다.

6. 권한과 방화벽에 문제가 있는가?

결론은 방화벽과 권한 2개 모두 문제였다. 위에서 언급한 vscode 권한만으로는 해결이 안된것이 바로 방화벽이었다. 타입스크립트로 진행한 토이프로젝트는 잘켜지는데 강좌 프로젝트만 켜지지않는다? 같은 타입스크립트인데? 구글링을 해가며 얼핏 방화벽 내용을 보고 방화벽 내용으로 구글링 해봤다. 그리고 2개의 프로젝트의 차이점은 프록시에 있었다. 토이프로젝트는 서버와 프론트가 한개 서버에서 같이돌아가지만 강좌프로젝트는 서버는 3095, 프론트는 3090 프록시 설정이 포함되어있다. vscode 권한은 관리자로 해두었으니 방화벽을 보러가자.

이곳에서 vscode를 찾아 허용을 해주었다.

드디어 서버가 켜졌다.

이 이외에도 여러가지 이유로 서버가 켜지지 않는 내용들을 다수 발견했지만 너무 많기도 하고 복잡한 내용들도 있어 비교적 수월하게 체크 할 수 있는 방안들만 작성해 보았다.