나의 코딩일지

CSS Custom Hightlight APIJavaScript를 사용하여 범위를 만들고 CSS와 함께 해당 텍스트의 범위를 스타일링하는 API텍스트 편집기에서 오타, 문법 오류, 구문 오류 등 강조 가능 현재 Firefox 외의 브라우저에서 지원한다. 적용 방법1. Range 생성하기JavaScript의 Range 객체를 사용하여 시작 범위와 종료 범위를 설정한다.const parentNode = document.getElementById("foo");const range1 = new Range();range1.setStart(parentNode, 10); // 10번의 위치(offset)부터range1.setEnd(parentNode, 20); // 20번의 offset까지 range1const ..

컴파운드 컴포넌트 패턴을 사용해보고, 비즈니스 로직 분리하는 것 때문에 몇번을 갈아엎었던 모달 컴포넌트다. 하지만 z-index 관점에서 한번 더 리팩토링을 해야한다. 모달을 어디서 불러야하는가? 현재 모달의 위치일단은 React의 컴포넌트 루트인 아래에,ReactDOM.createRoot(document.getElementById("root")!).render( }> ,); 라우팅되어 아래에,const router = createBrowserRouter([ { path: "/", element: , errorElement: 잘못된 접근입니다, children: [ ..

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

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도 굳이 공통 관리 할 필요 없겠다 싶어 점차 추가되었고 페이지별로 구분하기 쉬웠다. 하지만 여전히, 페이지를 본다고 해서 페이지의 구성이 직관적으로 와닿지 않았다. 리액트는 선언..