나의 코딩일지

컴포넌트를 작성하다가 여러 util 함수를 만들었는데, 뭔가 다른 개발자분들도 쉽게 쓸 수 있게 인자랑 결과를 포함해서 알려주고 싶었다. 물론 다른 사람의 코드를 열심히 읽는게 중요하긴 하지만, 그냥 편하게 가져다 쓰게 하고 싶은 util 함수도 꽤나 많았다. JSDoc으로 어떤 함수인지, 어떤 인자를 받는지 알려주고는 있었지만, 부족함이 있었고 구구절절 다 쓰면 주석이 너무 커졌다. 그래서 처음에는 주석으로 따로 빼야하나 생각했다. 공통 컴포넌트를 스토리북으로 공유하면서 이해가 편해졌던 것처럼, 코드만으로 설명을 해주고 싶었다. 사실 스토리북도 결국 테스트를 위한건데, 이게 테스트라는 것을 인지하지 못해서 꽤나 고민을 많이 했다. 어쨌든 util 함수를 테스트 코드를 통해 상황을 알려주고 해당 상황의 ..

사실 이 프로젝트는 고민을 하다가 코드 리뷰랑 설명을 너무 잘해주셔서 더 많이 경험해보고, 재밌어서 더 참여했던 기억이 있던 코치님이 맡아주신다고 하셔서 참여했다. 사실 중간고사 기간에다가, 보통 시험기간 끝나자마자 과제 폭탄이 들어오기 때문에 진짜 고민을 많이 했다. 그래서 못하겠다고 결론을 내렸을 때쯤, 코치님이 등장하셔서 바로 참여했다. 그리고 역시나 그때와 같이 열정적으로 알려주셨고 방향을 잡을 수 있었다. 역시나 통학 시간이나 과제 등으로 시간을 뺏기는 바람에 코드에 부족한 부분이 많았지만, 그럼에도 내 코드의 잘못된 점을 알아갈 수 있는 기회였기 때문에 자발적으로 잠 줄여가면서 코드를 쳤다는 사실에 만족한다. 일단 3시간 통학, 3시간 수업, 3개의 팀플에 치이고 체력적으로 지쳐서 마지막주엔 ..

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: 웹페이지의 문서를 제어하기 위한 객체모델..