🤔 보이는 대로 "잘" 만드는 것이 중요!
✨ 완벽보단 완성이 더 낫다!
⛳️ 작업 순서
- 📐 Component Design
- 📦 Component Programming
- 📏 Responsive Design
- 🔗 Reactive Programming
- ☁ API Mocking
- ⛓ Data Fetching
- 🏷 Semantic Tagging
- 🚀 Documentation & Deploy
- 🔮 UX & Feature R&D
- ⚗️ Asset Management
- 🌏 Pre-Internationalization
- 🔐 Fix Vulnerability
- 🛠 Performance Optimizing
- 🪚 Reduce Size
- 📜 Fill Polyfill
- 📡 Prepare Offline
- 💣 Reduce Technical debt
- 🎬 Apply Motion Effect
- 💡 Web Accessibility
- 🌐 Auth & OAuth
- 💳 Payment Gateway
- 🚦 CI/CD
- 🚧 A / B Testing & Growth Hacking
- 🔭 Cross Platform
1. 📐 Component Design
재사용 가능한 디자인을 설계하거나, 디자인 활용 계획을 세웁니다.
2. 📦 Component Programming
재사용 가능한 디자인을 코드로 구현합니다.
- 🏷 태그 사용시 <div> 태그가 아닌 최대한 알맞는 시멘틱 태그를 부여하려 노력합니다. <Cheat>
- 📏 콘텐츠에서는 최대한 rem 을 사용합니다. 사용하는 px 는 4배수에 맞도록 노력합니다. <Why>
- 📐 디자인 상 명시된 px 는 rem 으로 변환해서 노력합니다. <Calculator>
- 🎛 컴포넌트 Properties 를 다른 개발자들이 쉽게 이해할 수 있게 만드는데 노력합니다. <Storybook>
- 🛠 컴포넌트 내 비즈니스 로직은 서비스 의존성을 줄이고, 최대한 외부에서 변경 가능하도록 노력합니다. <DI> <IoC>
- 🎨 컴포넌트 속성이 변경되었을때 렌더링 갱신이 발생하지 않는 현상을 방지하기 위해서 컴포넌트 프롭의 갱신이 잘 이뤄지는지 항상 체크합니다.
3. 📏 Responsive Design
화면 크기가 서로 다른 여러 장비들도 지원 가능하도록 합니다.
4. 🔗 Reactive Programming
데이터가 변경될 때 화면 상에 항상 갱신된 데이터가 표시되도록 합니다.
- <State> 상태 값이 바뀌면, 해당 값이 사용되는 페이지나 컴포넌트가 자동으로 갱신되도록 노력합니다. 서버에서 보여지는 데이터나 변경될 수 있는 데이터는 최대한 상태 값으로 구성합니다.
- <Mutation> 단순히 상태를 바꾸는 작업에 비동기 작업이 포함되지 않도록 노력합니다.
- <Action> 어떤 작업의 결과가 나올때까지 상태가 바뀌지 않게 한 후 결과 값을 반영하도록 노력합니다.
- <Memoization> 으로 특정 결과 값이 상태가 바뀔때만 재계산되게 해서 재계산 량을 줄이도록 노력합니다.
5. ☁ API Mocking
이용자가 요청을 보내면 실제처럼 응답을 주는 테스트용 서버를 만듭니다.
- API 개발이 완료되지 않은 경우, API 모킹 라이브러리로 API 의 요청 규격과 응답 규격을 가상으로 상상해서 만든 후 정상적으로 호출되는지 테스트 합니다. <Mock Service Worker> <Hoppscotch>
- 벡앤드 개발자가 이후 이를 설계할 때 참조할 수 있도록 노션 등으로 구성된 목업 규격을 정리해서 실시간으로 공유합니다.
- 모킹 API 를 통해 구성되는 API 는 데이터 구조가 바뀔 수 있으므로 TODO 주석을 단 뒤 TODO Tree 를 이용해서 추적할 수 있게 해놓고, 네이밍을 모두 쉽게 교체 가능하도록 해놓습니다. <TODO Tree>
6. ⛓ Data Fetching
이용자 요청을 서버로 보내서 응답 값을 받아온 후 이를 활용합니다.
7. 🏷 Semantic Tagging
검색엔진 최적화 및 데이터 분석에 용이하게끔 문서 내 데이터를 태깅합니다.
- SEO (Search Engine Optimization) 를 위해서 무의미한 <div> 사용을 줄이고, 각 태그에 시멘틱적그로 알맞는 명칭을 사용하려 노력합니다.
- SEO 를 위해서 <meta> 태그와 OG태그 (Open Graph) 를 이용해서 HTML 문서에 대한 설명들이 최대한 수집되기 용이하도록 노력합니다.
- 트래픽 분석 등을 위해서 각 페이지에 최초 접속 시 GA (Google Analytics) 에 통계 수집 코드가 작동하도록 해놓고, 여러 버튼들을 누를때 GA 에 의해 최대한 이용자의 상호작용 등이 수집되도록 하려 노력합니다.
- SSR (Server Side Rendering) 모드와 CSR ( Client Side Rendering) 모드에서 시멘틱 태깅 작업이 누락되거나 유실되지 않도록 노력합니다.
8. (작성 중) 🚀 Documentation & Deploy
프로젝트 개발 문서를 작성하고, 서비스를 관계자 또는 이용자들이 사용할 수 있게 배포합니다.
- 문서화 & 체인지로그 & 랜딩 페이지
- 디플로이는 출시를 의미하지 않고, 코드가 실제 환경으로 옮겨서 보면서 출시 전 테스트적 의미도 가짐
- S3 like (static build) / EC2 like & Fargate Like (pm2 cluster) / Lambda Like (serverless.js)
- CDN / NginX & Redis (HTTP2)
- 캐시 컨트롤과 bfcache, 서비스 워커도 관리
9. (작성 중) 🔮 UX & Feature R&D
프로젝트 내에서 개선할 수 있는 UX 요소들이나, 새롭게 사용될 기술들을 찾아서 여러가지를 비교한다음 적용하거나 개발합니다.
10.(작성 중) ⚗️ Asset Management
프로젝트 내에서 사용하는 이미지, 파일들을 괸리합니다.
11. (작성 중) 🌏 Pre-Internationalization
프로젝트가 다국어를 지원할 수 있도록 텍스트들을 미리 번역가능한 요소로 분리합니다.
[콘티]
다국어화는 꼭 번역 텍스트를 미리 구성하는 것이 아님, 미리 번역가능한 요소로 빼놓는 것
12. (작성 중) 🔐 Fix Vulnerability
서비스 및 프로젝트의 오남용을 방지하고, 상시적으로 취약점을 찾아서 고칩니다.
13. (작성 중) 🛠 Performance Optimizing
브라우저 상에서 작동하는 성능을 개선하고, 프로그램을 더 빠르게작동하도록 합니다.
[콘티]
이런 것들을 다 하고 나면 이제 크롬 Lighthouse 로 성능 체크를 하고
렌더링 스피드, 메모리 사용량 체크, 벤치마크 등을 돌린 후,
서비스워커로 콘텐츠를 자체 캐싱하고, brotli 나 gzip 이 잘 동작하는지도 보고,
이제 웹팩 설정을 잔뜩 바꾸기 시작해야합니다.