실무 웹사이트 리메이크 일대기 2화
1. 무슨 기술스택을 쓸까?
프론트엔드
항상 느끼는거지만 처음 서비스를 설계할 때, 어떤 기술스택을 쓸 것인지 미리 정하고 시작하는게 정신건강에 이로워요.
처음에 생각나는대로 프로젝트 하나 만들어서 주먹구구식으로 적용시켜놓으면, 결국 나중에는 다 뜯어고쳐야하는 매우 위험한 상황이...
먼저 프론트엔드는 기존에 항상 잘 쓰고 있던 '리액트' 라이브러리를 사용하기로 했어요.
상태관리로는 가벼운 상태관리 툴인 zustand으로!
그리고 타입스크립트로 만들어버리면, 개발 시간이 조금 더 걸릴 수 있으므로 바닐라JS 차용!
* 체계적인 프로젝트 혹은 대형 프로젝는 Redux-toolkit이 좋다고 하던데 여기서는 패스
*여기서 잡팁!
프레임워크
- 개발자가 작업을 하기 위한 전체적인 tool 을 제공. 그 틀안에서 개발자가 작업을 하는 것!
라이브러리
- 전체적인 틀이 아닌 하나의 기능만을 도구처럼 제공하기때문에, 개발자는 단지 그 도구(라이브러리)를 가져와서 사용함
즉 앵귤러와 뷰는 웹 개발을 할 때 필요한 모든 기능과 툴을 포함하고 있기 때문에 프레임워크이며,
리액트는 UI를 만드는 기능만을 제공하기 때문에 라이브러리임!
사용이유
시장 점유율이 높은 라이브러리라 구글링하기도 쉽고, 워낙 잘 만들어놓은 UI 라이브러리라서 빠르게 서비스를 만들어서 보여줄 수 있기 때문에 선택을 했습니다~
그리고 이번 개발은 평소에도 지향하는 '애자일 방법론'을 그대로 적용해서 개발을 진행할 것이기 때문에, 빠른 개발 속도가 필요해서 이 라이브러리를 사용하는 것이기도 해요!
- 애자일(Agile)은 '기민한, 민첩한'이라는 뜻으로 일정한 주기를 가지고 빠르게 제품을 출시하여 고객의 요구사항, 변화된 환경에 맞게 요구를 더 하고 수정해나가는 탄력적인 방법론
추가적인 라이브러리 및 CSS
역시나 빠른 개발속도를 위해 정말 편한 CSS 라이브러리인 tailwind CSS를 사용하기로 했고,
UI 컴포넌트를 잘 지원해주는 antd 라이브러리를 사용하기로 정했어요.
총 정리하자면!!
백엔드
프론트로 스크립트 기반의 리액트를 사용할 것이기 때문에, 이번 백엔드는 JAVA 대신, 같은 스크립트 언어인 NodeJS를 쓰기로 결정했어요.
아무래도 같은 스크립트 기반이니까 적용시키는게 훨신 빠르고, Express라는 편리한 라이브러리가 있어서 서버 띄우기도 쉽더라구요.
DB는 항상 MVP로 무난한 공짜 MYSQL로!
이렇게 초기 틀만 잡아놓고 시작하려는데, 벌써부터 좀 기대가 되네요!
이런 어지러운 사이트를 제 나름대로 공부한 내용을 적용시켜서 변모시키고, 지인분이 좋아할 것을 생각하니까 동기부여가 되는 것 같아요 :)
그럼 다음엔 이 기술스택들로 바꿔버린 웹사이트 사진을 샘플로 들고 와보도록 하겠습니다~
