[FrontEnd] 프로젝트 일지 (1)

글 쓰게된 계기

한 4월?부터 친구들과 AI 모델을 활용한 웹서비스를 개발하고 있다. 3명이서 진행중이고 나는 FrontEnd를 맡고있다. 써보고 싶은 기술이 많아서 이것저것 다 써보는 중이다. 그리고 이 글은 개발일지의 시초랄까?ㅎㅎ 오늘은 어떤 기술을 썼고, 왜 선택했는지를 적어보려고 한다.

무엇을 만드나요?

우리가 만들기로 한 주제는 AI 모델을 활용한 취업 서포트 웹서비스 이다. 원티드, 잡코리아 등 유사 서비스가 있지만 우리만의 특별한 서비스가 있기도 하고, 모델링부터 FE/BE까지 우리 손으로 개발하기 때문에 좀 더 특별하달까 ㅎㅎ

기술스택은?

• ReactJS
  Vue에 익숙하지만 ReactJS를 종종 써본 입장으로서 확실히 선택지가 넓고, 코드가 더 깔끔해진달까? 그래서 ReactJS를 선택하게 되었다.
• vite
  이전 프로젝트에서 빠르다는 이야기 때문에 번들링 툴로 사용해봤는데, 정말 빠르더라!! FE 개발을 할 때는 서버 구동시간이 개발하는 데에 큰 영향을 준다고 생각하는 편이라 빠른 건 큰 장점이었다. 또 쓸법해서 이번에도 쓰는중!
• scss
  css 전처리기이다. 난 css에 익숙한 편이라 금방 배웠었고, 회사에서도 쓰고 있어서 이번 프로젝트에서도 사용하기로 결정했다.
• Storybook
  이건 내가 사용해보고 싶던 컴포넌트 단위의 UI 개발 환경을 지원하는 툴이다! UI 컴포넌트를 직접 시각적으로 테스트하면서 개발할 수 있다는 장점을 보고 도입하였다.
• cypress
  아무래도 테스트가 중요하니까 E2E 테스트 툴인 Cypress 도 도입해보는게 어떠할까? 싶어서 이것도 줍줍.. 이 툴도 써본 적이 있어서 큰 문제는 없었다!
• pnpm
  기존에는 yarn 과 npm만 사용해봤다. 그런데 yarn 과 npm은 사용하지 않는 dependency 또한 설치하여 오류가 나는 케이스가 종종있기 때문에 전역 저장소에서 패키지를 공유하는 구조를 가진 pnpm을 사용해보기로 했다. 그리고 패키지 설치시간이 감소할 수 있다는 점도 마음에 들었다!
• zustand
  일단 굉장히 많이 사용하는 상태관리 라이브러리이고, 러닝커브가 낮다고 생각했기 때문에 사용해보기로 마음을 먹었다!
• react-query
  zustand 와 함께 사용되는 상태관리 라이브러리인 것 같아서 server state 상태관리 툴로 도입하였다.

그리고 궁금한 것들

1. vite는 왜 빠를까?

Vite가 빠른 이유는 esbuild를 사용하여 기존 javascript 코드에 대해서 사전번들링을 했기 때문이다. 그리고 JSX, Vue, React 등의 컴포넌트와 같이 컴파일링이 필요하고, 수정 또한 매우 잦은 Non-plain JavaScript 소스 코드에 대해서는 Native ESM을 이용해 소스코드를 제공한다브라우저가 번들러의 작업의 일부를 차지할 수 있도록 하여 Vite는 브라우저가 요청하는 대로 소스 코드를 변환하고 제공하기만 하면 된다.

2. SCSS, SASS 무엇이 다를까?

SCSS와 SASS 모두 CSS 전처리기로서 복잡한 작업을 쉽게 할 수 있게 도와주고, 코드의 재활용성과 가독성을 높여서 유지보수를 쉽게 해준다. 두가지의 차이점으로는 표기 방법의 차이 가 가장 크다고 말할 수 있다.
[SASS 예시]

.hello
	width: 200px
    li
    	color: red

[SCSS 예시]

.hello {
	width: 200px;
    li {
    	color: red;
    }
}

마지막

앞으로 할 일들이 태산이지만 프로젝트 일지도 꼼꼼히 쓰고, 개발도 열심히해서 좋은 결과물을 만들어봐야겠다! 화이팅!!!