저조한 컨디션 속에서도 프로젝트를 성공적으로 마쳤다.
배운 것들
- 클라이언트 측과 서버 측에서 하는 작업(문자열 단순 validate는 클라이언트에서, valid한 사이트가 호출되는지는 서버에서)을 나눠 생각해볼 수 있었다.
- 해시태그 기반 추천사이트 노출 기능을 위해 클라이언트 측에서 바로 검색결과를 받아올 수 있도록 네이버 API를 쓰려고 했는데, CORS 때문에 프록시를 통해 우회해야 한다는 것을 알았다.
- 이를 해결하지 못해서 그냥 서버에서 작업했는데, 다행히 굳이 API에서 의도한대로 서버에서 하면 되는 작업을 클라이언트에서 할 필요는 없다는 피드백을 받았다.
블로그 포스팅 스터디
- 웹폰트로 인한 깜박임 현상을 방지하고 최적화하는 방법(셀프호스팅)이 인상깊었다.
- 최적화된 font format 로컬 파일 설정: 한글은 특히 용량이 크므로 일상생활에서 많이 쓰이는 글꼴만 담은 서브셋 폰트를 만들어 경량화
- CSS파일
@font-face의src속성에 최적화를 위한 설정local지정: local에 있는 폰트라면 local에서 가져오기url에 폰트 자원을 가져올 주소 외에format()을 통해 포맷을 입력하면 이를 인식할 수 있는 브라우저에 맞춰 해당 자원만 다운로드된다.unicode-range로 필요한 언어 유니코드 지정해주기src외에도font-display에swap이라는 값을 주면 FOIT(Flash of Invisible Text) 대신 폰트 로드되는 중 내용을 볼 수 있게끔 FOUT(Flash of Unstyled Text)이 발생하도록 할 수 있다.- 이 때 fallback이나 시스템 폰트와 이후 로드되는 폰트 사이에 자간이나 글자 너비의 차이로 레이아웃이 다시 그려지지 않도록 fontStyleMatcher로 글꼴 서식을 통일감있게 맞춰줘야 한다.
- preload: 브라우저에게 가장 높은 우선순위로 다운로드하도록 지정하는 html의
rel속성값, 그러나 무조건 다운로드하므로 해당 페이지에 꼭 필요한 경우에만 지정해야.- React-helmet으로 head 태그에 접근해서 link 태그를 넣어줄 수 있다.
- 원래 위 작업들을 다 해주는 것이 구글 웹폰트인데 2020년도부터 크롬이 캐시 정책을 캐시 파티셔닝으로 바뀌면서 더이상 구글 웹폰트의 특장점인 1년동안의 캐싱을 통한 빠른 렌더링이 다른 페이지에서 접속할 시 해당 캐시 접근을 허용하지 않는다. 구글 측에서 차라리 자체 로컬파일 이용하라고 안내했다는 게 흥미롭다.
느낀 점
- 컨디션이 저조해서 프로젝트 스트레스가 컸는데, 그래도 끝나니까 너무 기분이 좋았다.
- 마음의 여유를 가지는 방법을 찾아야 할 것 같다. 프로젝트 특성 상 몰입만 하니까 오히려 에러가 잡히지 않고 단순한 기능 구현도 큰 부담이 되었다.
- 네이버 카카오 인턴 멘토링이 있었는데, 코딩테스트를 더 열심히 공부해야겠다는 생각이 들었다.
