TS도 Sass도 처음 써봐서 초기 세팅이 전반적으로 오래 걸렸다.
Redux + TypeScript template
npx create-react-app my-app --template redux-typescript
TypeScript
tsconfig.json 파일에서 컴파일옵션 "outDir" : “./dist” 을 보았다. 검색해보니 typescript가 javascript로 컴파일된 파일이 위치하는 곳을 설정하는 옵션이다.
이게 꼭 필요한 옵션인지 없어도 되는지 확신이 없어서 계속해서 찾아보았다. react에서는 필수가 아니라고 판단해서 사용하지 않았다.
Scss(Sass)
Scss를 css로 컴파일 시키는 과정이 필요하다.
sass extension을 받고, scss파일을 만든 후에 VScode의 watch Sass를 누르면 scss파일이 css파일로 컴파일된다.
이때 scss파일이 변할때마다 업데이트를 시켜주어야 한다.
node-sass [옵션] <입력파일경로> [출력파일경로]
명령어를 처음부터 script부분에 적어주려고 했는데, 터미널에서 입력을 하니까 실행이 됐다. 처음엔 터미널에서 입력을 해주어야만 script로 나중에도 써먹을 수 있는지 그건 의문이다.
코드가 바뀔때마다 매번 node-sass [옵션] <입력파일경로> [출력파일경로] 하기 힘들기 때문에 package.json의 script부분에 sass를 만드는 것이다.
"sass": "node-sass -w src/styles/main.scss src/style.css"
-w 옵션을 붙여주면 watch라는 뜻으로, scss파일이 변하는걸 감지해서 매번 알아서 컴파일된 css파일을 업데이트해준다.
import 남용보다는 use와 forward를 사용하자
@import
- 같은 파일을 여러번 import하면 코드 충돌과 중복 코드로 인해서 컴파일 속도가 느려질 수 있다.
- 어디서 가져온 변수, 함수인지 직관적으로 알 수 없다
- 모든 변수와 함수가 전역으로 관리되기 때문에 같은 이름의 변수나 함수를 사용하면 먼저 선언된 것들이 무시된다.
@use
- 모듈시스템과 동일하게 동작하기 때문에 컴파일중 단 1번만 import된다.
- use를 사용하면 모듈별로 별도의 namespace를 가져서 각 변수와 함수는 독립적으로 사용된다.
- 변수나 함수를 사용할때는
namespace.function()과 같이 사용하기 때문에 어디서 가져온 요소인지 직관적으로 알 수 있다
@forward
@use와 @forward는 비슷한 기능을 한다. 둘다 각 파일의 모든 요소를 import한다. 실제로 컴파일된 CSS 결과물도 같다. 그러나 가장 큰 차이점이 하나 있는데, 바로 @use와 다르게 @forward를 사용하면 페이지 내에서 forwad한 모듈의 요소(variables, functions, mixins)를 사용할 수 없다는 점이다. @forward는 단지 전달만 할뿐이다. 만약 forward한 모듈의 요소를 사용하려면 forward로 모듈을 가져온 파일을 @use를 사용해 import하면 된다.
참고
