- API 요청 함수, 응답 타입을 자동으로 생성해주는 OpenAPI Generator 같은 개념이 현업에서도 잘 활용되는지 궁금합니다. (현업에서 API 문서가 어떤 방식으로 관리 및 유지되고 FE+BE 팀간 공유되는지도 궁금합니다.)
- 아틀라시안에 위키같은 문서로 공유하기도 하고.. RestDocs or Swagger를 많이 사용.
- BE에서 양식만 맞춰주면, graphql이나 axios로 바로 떨궈줌.
- FEConf 발표, 회사 기술블로그 등등.. 많은 자료..
- (자동 생성 퀄리티가 별로여서 반대론도 있음.. 타입 생성 이상하게 한다..)
- Swagger API대로 했더니 안되는 경우도 있음.. 회사마다 API 관리하는 방법이 다양.
- 노션도 있음!
- CSR 인 리액트 환경에서도 SEO 최적화를 할 수 있는 방법이 어떤 것들이 있나요? 일단 메타데이터+오픈그래프 작성을 해놨습니다
- 구글 서치 콘솔, 사이트맵, robot.txt(?), 네이버 웹 마스터, 시맨틱 태그 표준
- 타겟을 구글 vs 네이버 중 정해지면 나아짐 (각 서비스에서 지원되는 것들이 있음)
- API 응답 데이터에 따른 조건부 렌더링을 한 눈에 확인하기 위해서 스토리북에 MSW를 적용해서 사용했었는데 적합했을지 궁금합니다. (테스트 코드는 UI가 변경되면 쉽게 깨질 것 같아서.. 살짝 사람 눈으로 메뉴얼로 체크하는 느낌을 생각했었습니다.)
- 정답은 없음.
- 프론트엔드에서의 테스트 << 키워드로 검색
- 팀만의 테스트 규칙.
- 비개발자 분들한테도 유의미하게 느껴지는 테스트
- 수많은 전자제품도 QC라고하는 테스트가 있음. (100% 통과 못해도 판매하긴 함.)
- 팀 내에서 중요시되는 부분들을 테스트, 팀에게 안심이 되는 관점에서
- 사진 인증 시 정확한 시간을 위해서 서버타임을 가져오는데요. 현재 1분마다 가져오고 있습니다. 1분마다의 시간을 가지고 1분 타이머를 돌리고, 인증 시간이 되면 버튼이 활성화되도록 구현하려고 하는데요 이렇게 구현하는게 맞는지? 타이머를 돌려도 결국 오차가 생기는데 사용자가 그냥 시간에 맞춰서 해당 인증 페이지를 새로고침 하도록 하게 해야하는지 궁금합니다.
- 티켓팅 서비스도 아니고, 트래픽이 우려될 상황은 아니어서 아직 걱정할 단계는 아닐 수 있음. (MAU 규모가 큰게 아니면, tanstack-query의 refetchInterval 만으로도 우선 충분하다고 생각.)
- FE단에서 고민해볼만한건 timeout, web socket, webRTC 등 실시간성을 위해서 고민해볼 만한 것들.
- 정말 실시간성이 중요하다면 web socket.
빌드 속도가 느려서첫 페이지 로드 속도가 느려서 .. ! 코드 스플리팅에 대해 고려하고 있습니다. 찾아 보니 React.lazy 로 라우트 별로 스플리팅을 하는 것에는 큰 효과가 없어서, rollup 이라는 번들러를 추가해서 페이지 내의 사용된 모듈까지 스플리팅하는 방법이 있다고 하더라구요! 빌드 속도를 개선하기 위해 어떤 방식을 사용하는 것이 좋을까요?- 번들링: 여러 개의 모듈을 하나의 파일로 합침.
- HTTP 1.1 에서는 리소스 요청할 때마다 네트워크 요청이 발생.
- 코드 스플리팅: 당장 사용하지 않는 파일까지 한번에 번들링되면 그것도 리소스 낭비이니,
- 코드 스플리팅은 빌드할 때 하는 것이지만 발동은 런타임에서 일어남.
- 따라서, 빌드 속도와 코드 스플리팅은 큰 연관이 없음
- 빌드 속도 개선 방법
- vite는 rollup으로 구성되어 있음.
- bundle analyzer 어느 구간이 느린지 체크. ex) CI 과정이 느린지, 어느 번들 구간이 느린지 등등
- 최적화를 하려면 근거와 목적이 중요 !