나의 코딩일지

pnpm run dev를 하면 잘 보이던 레이아웃이, build해보니 안보였다. 처음에는 혼란이었는데 적용된 스타일을 보니 header가 display: none으로 잡히고 있었다. 그래서 코드를 다시 살펴보니 module.scss를 그냥 import해오고 있어서 스타일 충돌이 있었다.. 해결은 했지만 사용자 에이전트 스타일시트는 어디서 오는건가에 대한 궁금증이 들어서 찾아보았다.css는 Cascading Style Sheets의 약자이다. 그리고 캐스케이딩은 한 영역에서 일어난 변화가 연쇄적으로 다른 영역으로 전파되는 현상을 의미한다. CSSOM이 트리 구조로 생성되어 상위 요소의 스타일이 하위 요소의 스타일에 영향을 주는 개념으로 보면 된다. 이건 단순한 케이스이고, 일단 HTML element는 하..

컴파운드 컴포넌트 패턴으로 컴포넌트를 만들면서, 가장 큰 강점인 확장성과 재사용성을 가져가기 위해서 여러 케이스를 인지한 상태에서 컴포넌트를 구성해야한다는 점을 이해했다. 사실 이해하진 못했고, 처음에 만들어 놓고 나중에 가서 다른 케이스가 나오니까 해당 컴포넌트를 사용한 부분을 다 뒤집어야했다. 역시 일단 양으로 승부해야한다..모달 자체도 처음에는 그냥 페이지 이동 없이 띄우는게 닫는게 다 모달이라 생각했는데, 찾아보니까 모달 안에서도 많은 구성 요소가 있었다. 처음에 Modal.OpenButton, Modal.ContentsBox 이런식으로 이름지었다가 구성 요소 파악하고 이름을 다 바꿨다. 개발자들끼리 소통하기 위해서 UI 구성 요소의 정의도 알아야겠따.모달모달 이해하기웹에서 새 창을 띄우는 팝업창..

아토믹 패턴으로 프로젝트 구조를 설정했을 때, atom과 mocule에서 가져오면서 계속해서 이 organism이나 template이 굳이 src/components 아래에서 관리해야하는지에 대해 끊임없는 의문이 들었다. 막상 페이지 단위에는 이 끝이라서 다시 src/components에서 해당 파일을 찾아야했고 페이지 단위에서 그래서 이 페이지가 어떻게 구성되어있는건데? 라는 생각이 들었다. 그래서 이번에는 src/pages 아래에 각각의 재사용없는 componets를 두고 그 안에서 불러왔다. UI, styles, utils도 굳이 공통 관리 할 필요 없겠다 싶어 점차 추가되었고 페이지별로 구분하기 쉬웠다. 하지만 여전히, 페이지를 본다고 해서 페이지의 구성이 직관적으로 와닿지 않았다. 리액트는 선언..

사이드 프로젝트로 진행하다보면 최적의 상황에서만 테스트를 하게 된다. 데이터가 없거나, 에러가 생기는 상황 등은 먼저 이 상황을 생각해서 대비해야한다. 그냥 진행하다보면 놓치기 쉽상이다. 내부 로직은 다 구현해놓고 상상도 못하게 계정이 없는 케이스에서 에러가 생긴 날부터, 최악의 상황을 대비해야한다는 생각에 사로잡혔다. useEffect로 데이터를 가져오는 동안 데이터를 건들지 못하게 하기 위해 lock을 설정해야한다는 지점에서, 프론트엔드의 보안적인 예외상황에 대해 관심이 가기 시작했다. XSS(Cross Site Scripting) 개발자가 아닌 제 3자가 삽입한 스크립트를 통해 공격하는 기법이다. 즉, 개발자가 작성하지 않은 스크립트를 입력값을 통해 서버에 보내 실행하는 것이다. 따라서 모든 입력값..

가끔씩 폰트가 뒤늦게 적용되는 적이 꽤나 많았는데, 다른거 먼저 하느라 내 인터넷이 느린거라고 못본척하면서 지나갔다. 그러면서 맨날 신경쓰였는데 리팩토링하다보니 이유가 궁금해져서 찾아보았다. 개발입문 3달차쯤에 찾아봤을 때는 이해를 못했었는데, 이제 그래도 기술 블로그들을 읽을 수는 있게 됐나보다. Font Flash 페이지가 로드되는 시점에 폰트 다운로드가 완료되지 않아 일단 기본 폰트로 보이고, 다운로드가 완료된 후에 적용되면서 깜박거리는 현상이 나타난다. 이 현상을 폰트 플래시 또는 폰트 퍼실레이션이라고 칭한다. 이는 레이아웃의 변경으로 인해 사용자에게 불편함을 주는 Layout Shift이다. 글꼴 로딩 전략 FOUT(Flash of Unstyled Text) 폰트가 다운로드되지 않았다면 로컬 폰..

web-vitals 라이브러리와 구글 라이트하우스로 지표를 통해서 웹 성능을 측정할 수 있다고 하지만, 애초에 성능을 어떻게 따져야하는지도 알지 못하는 상태에서 지표를 알아보려니까 와닿지가 않는다. 개발자 도구를 통해서 성능을 분석할 수 있다곤 하는데, 본다고 해도 이게 뭘 분석한건지 자체를 모르겠다. Performance 웹 페이지의 성능을 분석하고 최적화하는 데 도움이 되는 기능을 제공 웹 페이지가 로드되는 데 걸리는 시간, 자원 사용량, 네트워크 요청 등을 모니터링 가능 로딩 시간 분석: 웹 페이지가 얼마나 빨리 로드되는지를 측정하고 분석하여 웹 페이지의 전반적인 성능을 평가 네트워크 요청: 웹 페이지가 가져오는 각 리소스(이미지, 스타일시트, 스크립트 등)에 대한 네트워크 요청을 추적. 각 요청의..