[제로초 Slack 클론 코딩] 백엔드 준비 + 초기설정 (Day-1)

백엔드 준비과정과 관련되어서는 안되면 다시 한번 영상을 보는 것이 좋을 것 같다.

처음 초기설정 및 세팅을 수동으로함으로써 어떠한 부분이 어떠한 역할을 하는지 알 수 있었다.

아래 내용은 그 중 궁금한 사항 및 새롭게 알게 된 내용을 간단히 정리해보았다.

 

1. package.json vs package.lock.json

package.json은 라이브러리를 설치하게 되면 dependencies에 추가되게 되는데 이와 관련되어서 dependencies에 추가 된 라이브러리가 사용하고 있는 또 다른 라이브러리에 대해서 package.lock.json에 나타나게 된다 

=> 부모와 자식같다고 생각함 될 것 같다. 연관성 많고 package.lock.json 없으면 안되겠다는 생각이 들고 이거는 엄청 길어질것 같다는 생각도 든다.

 

2. 검사도구인 eslint 와 정렬도구인 prettier 

 

3. tsconfig.json 에서 절대경로를 설정하는 방법

tsconfig.json > 

"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@hooks/*": ["hooks/*"],
    "@components/*": ["components/*"],
  },
}

>webpack.config.ts

const config: Configuration = {
  resolve: {
    alias: {
      '@hooks': path.resolve(__dirname, 'hooks'),
      '@components': path.resolve(__dirname, 'components'),
    },
  },

각각 파일안에서 이렇게 설정을 하면 된다 다만 vite나 cra에서 설정하는 부분은 다를 수가 있다.

tip) Vite에서 절대경로 설정하는 방법

tsconfig.json 과 vite.config.ts 부분에서 해주면 되고 자세한 것은 밑에 url을 참고

https://velog.io/@hunmok1027/vite-%EC%97%90%EC%84%9C-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

 

4. babel의 역할

프론트 개발을 할때에는 여러 요소들이 있는데 바벨이 뛰어남을 보여줌 모든 것을 다 js로 변환 할 수 있다 

이미지나 css같은 파일도 다 가능함 그래서 타입스크립트가 바로 변환하지 않고 바벨이 중간에 낀다

하지만 vite의 경우에는 ES build라는 빠른 번들러를 사용함으로써 조금 더 상위호완인 느낌이 있다

(CRA는 webpack에 들어가 있을 것임 아마도?)

 

5. layout설정 간 특이점

레이아웃설정하는 과정에서

switch라는 것을 router에서 사용

redirect사용 

 

5. 코드스플리팅 기법

필요한 페이지만 불러오게 하는 것으로써 불필요한 랜더링을 막을 수 있어 최적화에 좋다.

1. 페이지를 분리한다

2. ssr이 필요없는경우 editor texteditor 같은 것들을 분리한다 (뭔소리인지??)

@loadable/component

 

6. css in js 라이브러리

emotion과 styled-component를 비교해서 사용해보자.

styled-component를 좀 더 쉽게 사용할 수 있는 것이 emotion이다.