#3 FE 개발 준비
이제 실제의 개발에 들어가기 전 개발을 준비하는 단계까지 왔다.
이 단계에서부터는 사실상의 개발의 시작이라고 봐도 무방하다.
하지만 실제의 개발 업무에 집중하기 전에 필요한 사항들을 미리 체크해 봐야하는 부분들이 있기에
개발의 준비 단계를 따로 빼두었다.
필자의 경우 프론트 엔드 개발자 Front End Developer 이기 때문에
FE 개발자의 관점에서 개발을 하기 전 준비해야 될 내용들에 대해서 정리해볼 것이다.
- 개발 환경 설정하기
- 아키텍처 구축하기
- 업무 협업 및 소통 하기
#3-1 개발 환경 설정하기
- 업무 범위 확인
- 개발 환경 설정
- 외부 라이브러리
업무 범위 확인하기
FE 의 업무 범위는 CSR - Client Side Rendering 을 기본 골자로 한다.
클라이언트의 환경에서 일어나는 일에 대해서 개발을 하는 것이다.
다만 최근들어 풀스택의 구분이 어느정도 희미해지고,
FE 에서 또한 Next.js 등을 통해서 SSR - Server Side Rendering 의 영역을 하기도 한다.
서버에서 하는 업무들 중의 일부를 FE 에서 그 역활을 맡아서 진행하게 되는 것이다.
이렇게 서버의 역활을 맏다보면 SEO - Search Engine Optimization를 위한 여러 작업들을 (Sitemap, OG Tag, …) 부수적으로 처리하게 될 수도 있다.
당연한 부분들은 당연하게 넘어가면 안 된다.
개발을 진행하기 위해서는 당연한 것이라도 명시적으로 확정하여 결정하고 공유하여
서로가 정확하게 각자의 롤을 어떻게 나누었는지에 대해서 이해해야한다.
개발자는 사람이기에 자신의 경험을 토대로 묵시적으로 결정하여 넘어가는 것들이 있다.
하지만 서로 다른 사람들끼리 모이다보면 이러한 이해에서 서로 차이가 날 수 있다는 것을 알아야한다.
그렇지 않다면 오픈하기 직전에서야 해당 역활을 서로가 할 줄 알 것으로 기대하였기에 아무도 하지 않는 불상사를 미연에 예방할 수 있다.
아는 것을 명시적으로 확정지어라.
이는 다른 기획에서 또한 마찬가지로 적용된다.
기획서를 읽고 기능 분석을 하여서 업무 목록으로 작성을 하였다고 하더라도
해당 기획이 정확하게 어떤 기능을 구현하려는 의도인지를 기획자에게 물어봐야 한다.
기술적인 이유나 환경적인 이유로 구현이 불가능한 것들이 있을 수 있다.
또는 일부분에만 적용이 가능할 수도 있다.
그러한 것들에 대해서 기획과 모든 문서의 페이지에 대해서 이야기를 하면서 짚고 넘어가는
기획 리뷰가 반드시 필요하다.
그를 통해서 정확히 어디서부터 어디까지 개발을 해야하는지에 대한 업무 범위가 확정 될 수 있기 때문이다.
개발 환경 설정
개발 환경은 프로젝트의 요구사항과 개발 팀의 기술 스택, 업무 환경에 따라서 달라질 수 있다.
아래의 사항들은 개발 환경을 구축할때 결정해야 될 요소들에 대해서 간략하게 정리해본 내용이다.
회사에서 비슷한 개발 스택을 사용한다면 해당 개발 환경을 boiler-plate 로 만들어주는 것도 좋은 방법이다. 매번 구축을 해야하는 부담을 줄여줄 수 있기 때문이다.
개발 환경
- FE
- React, Vue, Angular, Vanilla
- State management - Redux, MobX, Recoil - BE
- API Proxy 서버 구축 여부
- 연동 프로토콜
- HTTP
- HTTPS
- 연동 방식
- HTTP
- Restful
- GraphQL - Server
- SSR
- SEO
- Next.js - Language
- JavaScript, TypeScript - UI & UX
- Animation
- SVG, MP4, GIF
- Material UI - Bundler
- Webpack, babel
- grunt, gulp, tsc, rollup, … - Editor
- VS Code, WebStorm, IntelliJ - Code
- Lint, Prettier
- Code Convention - SVC
- Branch 전략
- Commit 작성 규칙
- PR 규칙 - Code Review
외부 라이브러리
외부 라이브러리를 사용할 경우에는 반드시 라이센스를 확인해야 한다.
해당 라이센스가 기업용으로 사용 가능한지 그리고 그에 따른 책임이나 규약이 있는지 알아야 한다.
라이센스를 고지해야하는지, 코드를 공개해야 하는지, 상업적으로 사용이 가능한지
이러한 부분들을 체크해야 된다.
만약 외부 라이브러리를 가져와 사용하였는데 수정이 필요한 부분이 있어서 해당 부분을 수정해서 사용했다고 하자.
그렇다면 단순히 수정된 코드를 사용하는 것에 그치지 않고 수정이 가능한지, 수정 한 후에 코드를 공개해야는지, 어떻게 하는지 등을 확인해야 한다.
만약 그것이 어렵다면 해당 라이브러리를 사용하지 않고 다른 라이브러리를 알아보거나, 해당 라이브러리를 래핑해서 기능을 구현한다거나 하는 식의 방법이 필요할 수도 있다.
