질문
- 멘토님은 테스트 케이스를 어떻게 진행하시는지 궁금합니다.
- 유저라고 생각하고 어떤 동작을 기대하는지 생각하고 테스트 케이스를 짠다.
- 기대 동작이 나왔는지 테스트를 진행한다.
- TDD를 하지는 않고, 개발 도중 혹은 끝날 때 진행한다.
답변
CSS 과제 관련 피드백
Node Sass와 Dart Sass
두 Sass의 차이점은 내부 컴파일 방식이 다른 점이다. 문법은 같다. 현재 Node Sass를 잘 안쓰고, Dart Sass를 사용한다.
번들러로 parcel은 잘 사용되지 않고, webpack을 많이 사용한다. vite도 요즘 뜨고 있는 번들러이다.
webpack에는 로더가 있기 때문에 스타일도 컴파일해줄 수 있다.
매번 커맨드라인을 쓸 수 없으니까 통일을 시키기 위해 빌드 툴을 사용한다.
개발 환경과 배포 환경을 분리하여 생각하면 좋을 것 같다.
- 배포 환경에는 파일 압축, 암호화, 해시 처리 등이 필요하다.
- 새로 만든게 반영되어야 하기 때문에 캐싱이 되지 않도록 해시 처리가 되도록 해줘야 한다.ㅈ
폰트는 import해서 사용하는 것보다 link로 사용하는 것이 좋다.
스타일을 적용할 때, 브라우저 서포트를 신경써야 한다.
리액트 styled component ( CSS in JS )를 멘토님 회사에서는 사용하지 않고 있다. CSS 파일과 JS 파일을 따로 나누어 사용한다. 그냥 css import를 하면 번들러가 알아서 넣어준다. 또 다른 방법은 css module을 사용하여 import를 사용하면 className에 해시 값?을 붙여서 중복을 막아준다.
Vue 과제 관련 질문
state가 2 Depth 이상으로 가면 store를 사용하나, store를 많이 사용하는 것은 좋지 않다고 생각한다. 글로벌한 state는 store로 관리하는 것이 좋다. 로컬 state와 글로벌 state를 적절히 분배해서 사용하자.
현업에서 환경변수 관리 방법
회사에서 배포환경별로 세팅할때 사용하는 라이브러리이다.
이 라이브러리를 사용해서 로컬에서는 api base url를 환경변수로 감추고,
.env-cmdrc.js
환경변수 파일을 .gitignore에 추가해도 된다.
eslint는 오류를 찾는 역할, prettier는 코드 포맷팅 역할을 한다.
