[React/TS] Slack 클론코딩 1주차 - 프론트엔드 초기 세팅하기

리액트+타입스크립트 공부를 위해 스터디를 시작했다!

Slack 서비스를 클론코딩하는 강좌를 들으며 익혀볼 예정

(Slack도 리액트를 이용해 개발되었다고 한다)

첫 주차는 섹션0. 프론트엔드 초기 세팅부터 시작하는데, 본격적인 파트는 아니어도 알아두면 좋을 것 같은 부분들이 있어 정리 겸 적어보려고 한다.

 

---

 

 

1.

tsx 파일을 typescript가 변환을 해주고, 그거를 webpack이 받아서 babel로 처리해서 js파일로 만듦.

브라우저는 항상 html, css, javascript를 인식하기에 그로부터 프론트엔드 개발이 시작된다는 것을 기억하자

babel이 html파일 만들어주는거 아님, index.html이 리액트로 개발할 때(SPA)에도 매우 중요.

성능 개선, 검색 엔진 최적화할 때에도 영향이 크다. 검색엔진의 경우에도 서버에 들어와서 처음 보는 파일이 index.html이기 때문. 그래서 핵심 css도 여기에 설정해주고, 덜 중요한 css는 js로 처리하는 것을 권장함.

 

 

2.

요즘 프론트 개발은 초기에 세팅할 것이 많고 복잡해서 제로초가 깃허브에 올려놓은 코드 (setting/ts) 사용하면 좋음. npm i로 설치만 해주면 됨. npm run build 해주면(webpack 실행, package.json에 webpack 실행 관련 명령어를 build scripts로 작성해주었기 때문) dist 폴더가 생기고 그안에 app.js가 생기는데, 이는 작성했던 App.tsx가 js파일로 바뀐 것임. 따라서 index.html을 실행해보면 App.tsx에 작성했던 내용이 화면에 보이는 것을 확인해볼 수 있음.

 

 

3.

hot reloading을 수동으로 설정하는 방법(원래는 CRA = create-react-app가 다 해주긴 함)

webpack dev server 필요 - npm i webpack-dev-server -D

 

 

4.

webpack.config.ts 파일 안에서 alias 작성

이렇게 설정해두면

상대경로 지저분하게 쓸 필요 없이 절대경로로 깔끔하게 import가 가능하다.

 

 

5.

react-router-dom과 Switch, Redirect

react-router-dom의 switch

Switch : 여러가지 상태 중에 하나를 선택하면 다른 나머지는 꺼지는 라우터 (자식 들 중 하나만 화면에 보여지고 나머지는 없는 셈이 됨) - 예전 버전에 있었던거라서 지금은 Routes 쓰면 되는 것 같당..

Redirect : Router는 컴포넌트들을 화면에 띄워주는 역할을 하는 반면, Redirect는 다른 페이지로 돌려주는 역할을 함. 

path가 /이면 /login으로 옮겨준다.

이건 진짜 첨 봐서 신기

나중에 써먹어봐야징

 

 

6.

코드 스플리팅

어떤 기준으로 분리?

- 페이지 단위로

- SSR 필요없는 것들

 

 

7.

Emotion

사용방법은 styled-components와 거의 유사함

import styled from '@emotion/styled';

사용 예시는 다음과 같다.

& > span처럼 sass 문법 사용하는 것도 유사하다.

이렇게 사용할 컴포넌트들에 스타일을 입혀놓고,

import해서 태그로 사용하면 된다.

 

 

이렇게 대충 정리해놓고 보니 사실 styled-components랑 뭐가 다른지 궁금해져서 찾아봤는데

사실 엄청난 차이점은 없는 것 같고 그나마

 

1. Form의 자식으로 Label이 감싸져있으면 다음과 같이 적용 가능

export const Form = styled.form`
	margin: 0 auto;
    width: 400px;
    max-width: 400px;
    
    & ${Label} {
    	// ... 스타일링 ...
    }

 

2. css props 구현이 좀 더 용이하다.

 

이정도가 느껴지는 차이점인 것 같다. 내가 읽어본 블로그인데 참고할 분들은 보시길

https://velog.io/@bepyan/styled-components-%EA%B3%BC-emotion-%EB%8F%84%EB%8C%80%EC%B2%B4-%EC%B0%A8%EC%9D%B4%EA%B0%80-%EB%AD%94%EA%B0%80

styled-components 과 emotion, 도대체 차이가 뭔가?

https://blog.logrocket.com/styled-components-vs-emotion-for-handling-css/

Styled-components vs. Emotion for handling CSS - LogRocket Blog

 

 

 

---

 

열시미 들어야징

리액트 스터디를 6기 때 처음 내가 열었었는데 나름대로 끝까지 마무리 했던 것도 좋았지만

그때보다 더 더 많이 얻어갈테다 ...

파이팅