FE 업무 작업 절차 (Workflow)

[콘티] 다국어화는 꼭 번역 텍스트를 미리 구성하는 것이 아님, 미리 번역가능한 요소로 빼놓는 것

[콘티] 이런 것들을 다 하고 나면 이제 크롬 Lighthouse 로 성능 체크를 하고 렌더링 스피드, 메모리 사용량 체크, 벤치마크 등을 돌린 후, 서비스워커로 콘텐츠를 자체 캐싱하고, brotli 나 gzip 이 잘 동작하는지도 보고, 이제 웹팩 설정을 잔뜩 바꾸기 시작해야합니다.

[콘티] 웹팩번들 용량 관리는 젠가 같아서 잘 빼면 문제가 없지만 잘못 빼는 순간 조용히 어느 순간 눈치못챈 기능이 마비됩니다. 따라서 유닛테스트와 E2E 테스트용 코드를 각각 Jest 와 QAWolf 같은거로 구성함과 동시에 불필요해보이는 모듈들을 하나씩 제거합니다.

[콘티] 웹페이지를 보는 이용자들의 환경은 매우 다양해서 매우 구형 버전의 경우 요즘 디자인이나 기술들이 동작을 안하고 멈춥니다. 따라서 구형 브라우저에 알맞는 패치를 [http://polyfill.io](http://polyfill.io/) 에서 적절히 뽑아와야합니다. 이과정에서 MDN 스펙과 [http://caniuse.com](http://caniuse.com/) 을 수시로 들어가야합니다. - babel - autoprefix

[콘티] 요즘은 4G 인터넷 환경이 속도가 느린경우도 있고 아예 중간에 오프라인이 되는 경우도 있어서, 속도가 느린 환경에서 이용자가 버튼을 여러번 누르거나해서 요청이 반복적으로 날아가지 못하도록 bounce debounce 처리 검증 코드를 빡세게 곳곳마다 적용해야합니다. 요청당 예외처리도 필수 오프라인 예외처리도 중요

[콘티]op 기술은 1년마다 기술 판세가 확확 바뀌어서 state of js state of css best of js 등의 사이트 들을 매년 체크해가며 정치판 분석처럼 흐름 분석후, 어느 기술이 뜰지 예측해서 배워놓고 써봐야합니다. 하루하루 레거시와 기술부채가 쌓입니다. (빚이라고 다 부정적 빛은 아님을 명시) 리서치 리팩토링)

[콘티] 기획자나 디자이너분들이 완성된 디자인을 본 후 "개발자님!! 애플에서 이거 움직이고 저거 움직이고 요거 날아다니는데 저희도..!!" 와 같이 반응형으로 움직이는 특수효과들 만들어달라는 걸, lottie, framer motion, remotion 등으로 영상처리. (웹에서 만드는데 개발자도 에프터 이팩트를 켜야한다는 점 명시)

[콘티] 이 모든 상황을 넘겼다해도 아직 웹페이지를 지원해줘야하는 대상은 많습니다. 우리한텐 당연한 것들 예를 들면 화면을 보지 못하시는 분, 버튼조작이 힘든 분, 장문 타이핑이 힘든 분들을 위해서 react-aria, react-spectrum 등으로 웹 접근성 작업도 틈틈히 해줘야합니다. (이런건 눈에 보이지 않는 작업들입니다.)

[콘티] 이렇게 한다음 소셜로그인 (애플, 구글, 페이스북, 인스타그램, 네이버, 카카오) 를 지원해서 서비스 사용자가 늘어나게해서 MAU DAU 를 확보 - OAuth, JWT, Token

[콘티] 비즈니스 모델이 생기면 국내 PG결제(토스 페이먼츠, PAYCO, 아임포트) 해외 PG결제(Spreedly, Stripe, Paypal), 본인인증(나이스) 도 달아줘야합니다

[콘티] 이런 작업들은 일회성이 아니라 산발적인 경우가 많고, 안정적 버전관리를 위해선, Github Action (CI/CD) 연동을 통한 자동 테스팅 구성, Sentry 와 Kibana 연동을 통한 오류 로그 수집 및 성공/실패 통계 수집을 한 후, Jenkins 로 자동 배포, Jira & Slack 알림 연동 등도 해줘야 편합니다.

[콘티] 제품 출시전 fullpage, framer motion 로 랜딩페이지 만들고, 페이스북 광고 띄운다음 A/B 테스트도 진행해야합니다. FE에서의 A/B 테스트를 위한 이용자 별 식별 방법은 매우 까다로워서 Creepjs 등이 예시인데 https://abrahamjuliot.github.io/creepjs/ 와 같이 A/B 테스트를 위한 구분점 확보는 FE 역량 제대로 분석을 위해서는 FE도 그로스해킹.. 즉 Clarity 로 유저들이 어디서 마우스를 멈추고 데드클릭 하는지, 클릭량은 얼마나되는지 등을 보고, GA Heatmap 을 이용해서 접근 시간대 등을 분석하고 가장 많은 시간대에 보이는 콘텐츠들에 CDN 캐싱이 잘 이뤄지고 있는지 등도 체크해야합니다.)

- Hybrid - Native