2022 11 22

👨‍💻 오늘 한 일

프로젝트를 진행하기 앞서 툴체인을 구성하고 어떤 도구들을 사용할지 고민해보며 이것저것 시도

• 테스트 디렉토리에 server - express, client - next.js 프레임워크 설치
• express 서버에서 사용할 cors, jwt, dotenv 등 라이브러리 설치
• 서버와 클라이언트 디렉토리 eslint, 프리티어 설치 및 세팅
• next에 tailwind 스타일 도구 설치
• css module 과 tailwind를 활용한 페이지 테스트
• tsconfig의 baseUrl과 paths를 활용한 절대 경로 지정
• svgr 라이브러리 설치
• 테스팅 프레임워크 storybook 설치

🤩 새로운 / 몰랐던 점

css 의 발전에 대하여…

과거의 웹 서비스는 복잡하지 않았고, 프론트엔드 영역이 따로 존재하지 않았으며 대부분의 페이지가 정적이였고, 약간의 JS를 사용하여 동적 웹을 구현하였다. 하지만 점점 발전해가며 인터렉티브한 웹이 주목받으며 JS, CSS의 사용 빈도가 급증하였고, 성능과 효율을 위한 다양한 기술들이 등장하였다.

웹을 바라보는 관심사가 바뀌고 컴포넌트 기반 개발이 주축을 이루면서 css의 방법론도 점점 다양해 졌고, css-in-js가 등장하며 프론트앤드 개발자의 입장에서 JS에서 HTML, CSS를 함께 관리할 수 있는 장점이 생겼고, 이로인해 기존의 css 방식의 사용량이 줄어들 것으로 생각했으나 JS 파일을 CSS로 해석하는 과정에서 복잡하고 큰 웹 서비스에서는 성능이 저하되는 문제가 발생하였고, CSS 모듈 방식 등 다른 대안들도 많이 사용되는 편이라고 한다.

스타일 방식의 정답은 정해져있지 않지만 웹 페이지의 특성을 잘 이해하고 적절한 도구를 사용하여 개발하는 것이 좋다고 한다!

🌙 하루를 마치며…

• 아직 어떤 서비스를 구현할지 추상적으로만 생각해본 단계이기 때문에 어떤 도구들을 사용할지에 대한 고민을 해보았다. 스타일 방식에 대한 고민도 해보았는데 만들어보고 싶은 서비스에 이미지가 포함되고 어느정도의 애니메이션도 사용될 것으로 생각해보았을 때 물론 큰 규모의 페이지를 만드는 것은 아니지만 성능상의 이점이 있는 css 모듈과 tailwind를 사용하여 프로젝트를 진행해볼 생각이다! 모험적이긴 하지만 css 만족도 설문조사에서도 보여주듯 tailwind도 준수한 만족도를 보이고 있어 활용하는 방법을 익혀놓으면 좋을 것 같다!
• next.js와 express 프레임워크를 활용하여 서버와 클라이언트를 구현할 생각인데…리액트도 처음 사용해보는 마당에 타입스크립트, DB, storyBook, Recoil, react-query 등 너무 많은 기술들을 사용하여 진행하려고 하니 엄두가 안나지만…혼자서 차근차근 공부하며 만들어나가기로 마음먹은 만큼 이 프로젝트를 진행하며 얻는 지식을 바탕으로 더 나은 코드를 작성하고, 협업에 이바지할 수 있도록 완성도 높은 프로젝트를 만들고 싶다!