나의 코딩일지

form 내부의 데이터를 하나씩 상태관리하던 첫번째 프로젝트를 보다가, 하나의 객체로 관리하는 방식으로 변경했던 다음 프로젝트를 보면서, 더 좋은 방법이 있는데 내가 놓치고 있는게 아닐까 하는 생각이 들었다. 그때도 이런 생각을 했던건지 다음 프로젝트를 보니, react-hook-form을 통해 좀 더 쉬운 방법으로 상태관리를 하고 있었다. 하지만 코드를 보면 볼수록 이 라이브러리의 취지를 전혀 모르고 그냥 단순히 타입용으로만 사용하고 있는 것 같다는 생각을 했다.  아~ 타입추론 편하다~ 이게 이 라이브러리의 효용이라고 생각하고 그렇게 까지 좋은지 모르겠던데? 라고 생각했던 지난날,, 그래서 이번에 더 잘 사용해볼까 싶어서 react-hook-form을 다시 사용하고, 비제어라서 사이드이펙트가 없다는 ..

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 웹 페이지의 성능을 분석하고 최적화하는 데 도움이 되는 기능을 제공 웹 페이지가 로드되는 데 걸리는 시간, 자원 사용량, 네트워크 요청 등을 모니터링 가능 로딩 시간 분석: 웹 페이지가 얼마나 빨리 로드되는지를 측정하고 분석하여 웹 페이지의 전반적인 성능을 평가 네트워크 요청: 웹 페이지가 가져오는 각 리소스(이미지, 스타일시트, 스크립트 등)에 대한 네트워크 요청을 추적. 각 요청의..

카카오맵 api를 구현하는데, 타입스크립트로 작성하다보니 window객체에 kakao가 없어서 자꾸 에러가 생겨서 따로 window 객체에 추가해줘야했다. 그러다가 window 객체에 대해 궁금해졌다. 콘솔에 찍어보면 알 수 없는 속성들만 몇백개라 스크롤 내리기도 버겁다. Widow 객체 브라우저의 요소들과 자바스크립트 엔진, 그리고 모든 변수를 담고 있는 객체 브라우저 전체를 담당하는 건 Window 객체이고, 웹사이트만 담당하는 건 Document 객체 window 객체는 모든 객체가 포함된 최상위 객체이며, 전역변수와 전역스코프에서 선언된 함수는 window 객체의 property이고, 식별자 window를 통해 접근가능하며 호출 시 생략할 수 있음 DOM: 웹페이지의 문서를 제어하기 위한 객체모델..

아무도 보여주고 싶지 않은 첫 프로젝트에서 styled-components를 사용했다가, CSS-in-JS는 현업에서 선호하지 않는다는 말을 듣고, DM으로 물어봤다가 장문의 답장을 받은 이후 강박적으로 styled-components는 사용하지 않았다. 그러다가 chakra UI 같은 UI 컴포넌트 라이브러리를 사용하면 편하다는 말을 듣고 프로젝트에 도입해 사용하고 있었다. 하지만 사용하면 할수록 styled-components보다 느리겠다는 생각을 하게 되었다. 그리고 생각해보면 이것도 CSS-in-JS 아닌가 싶었다. 그리고 해커톤에서 다른 레포를 살펴보면 거의 styled-components를 사용하고 계셨다. 울면서 styled-components 떠나보냈는데 다시 품 안으로 데려와야하나싶다. ..

API 응답으로 쿠키가 오기는 하는데, 그 쿠키를 읽을 수도 없고 브라우저에 자동으로 저장되지도 않았다. 프리지링크 때도 refresh token을 헤더로 받아왔지만 클라이언트에서 접근 불가능했던 이슈가 있었는데, 같은 맥락으로 발생한 듯 했다. 결국 도메인이 달라서 그렇다고 판단을 하고 서브 도메인을 추가하고 vercel에 도메인을 등록하여 해결할 수 있었다. 멀고 어려운 도메인의 세계다. CS가 없어서 인프라를 건들지도 못하겠고 봐도 전혀 모르겠다. 역시 프로젝트는 그만하고 CS 공부해야하는거겠지.. 도메인 인터넷 상에서 고유한 식별자를 가지는 웹사이트나 네트워크의 주소 일반적으로 도메인은 웹사이트의 주소로 사용되며, 인터넷 사용자들이 해당 웹사이트에 엑세스할 때 사용됨 도메인은 DNS(Domain ..