나의 코딩일지

3월 6일tanstack query의 상태, 정아현 [FE테크톡] TenStack Query (tistory.com) [FE테크톡] TenStack QueryTanStack Query makes fetching, caching, synchronizing and updating server state. new QueryClient로 인스턴스를 생성하고 QueryClientProvider를 통해 전역에서 생성한 QueryClient에 접근 가능하도록 만든다. QueryClient 내에는 Quea-honey.tistory.com 좋은 상태 관리란 무엇인가, 한우준좋은 프로젝트 구조, 서건혁PWA 개요, 송민석 3월 13일npm, yarn, pnpm의 차이, 정아현프론트엔드 성능 최적화, 한우준타입스크립트의 a..

일단 무슨 이유든 라이브러리를 열게 되면, 어떻게 구성되는건지 이해가 안가서 보통 특정 메서드를 잡고 타고 들어가면서 해당 메서드를 이해했다. 하지만 그건 라이브러리의 극히 일부이기 때문에, 연결고리를 파악하기 어려운 지점도 있고 패키지 모듈로 들어가버리면 쉽게 길을 잃어버린다. 처음에야 라이브러리를 열어본다는 만족감으로 한 두개 메서드 이해하고 나가면 그만이지만, 점점 극히 일부만 알고 있다는 느낌이 생기거나 라이브러리를 만들고 싶은데 어떻게 해야할지 방법을 못찾게 된다. 일단은 pakcage 폴더안으로 진입해야한다. 또한 라이브러리 packag.json에서 바벨을 이용해 여러가지 의존성을 가지고 있음을 알 수 있다. 하나의 npm 패키지 안에 여러 구성 요소가 들어있다. 이 구성 요소들이 모듈 시스템..

마지막날에 자바스크립트의 타입으로 시작해서 상태관리 임시 로직으로 끝나는 강의안을 PDF로 주시고 떠나신 코치님..광주 내려가는 길에 버스에서 간단하게 정리하려고 했는데,  생각보다 클로저 이후의 useState 구현하는 곳에서 진도가 안나갔다.. 그대로 집까지 가져와서 마무리한 이야기..불변성(Immutability)불변성은 한번 생성된 데이터가 변경되지 않는 특성을 의미한다. 즉, 데이터의 상태를 변경할 수 없도록 하여 코드의 예측 가능성과 안전성을 높이는 것이다.상수 사용상수에 원시값을 할당하면, 값이 변경되지 않기 때문에 불변성이 지켜진다.Object.freeze객체의 경우 주소값이 저장되는 것이기 때문에 참조 값은 변경될 수 있다. 따라서 Object.freeze를 통해 불변성을 유지해야한다.클..

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 ..

농장주인 분들이 주로 사용하기 때문에, 나이대가 있을 것이라 생각되어 SSR을 위해 Next.js를 선택하였다. 저사양 기기에서도 빠른 렌더링을 하고 싶었다. SSR을 하자고 생각하다보니 더 나아가 서버 컴포넌트를 활용하여 효율적으로 렌더링하고 싶기도했다. 그러다가 알아보니 Next.js의 fetch가 캐싱 기능을 도와준다고 한다. 사실 tanstack-query가 너무 시장 지배적인거 아닌가 하는 생각이 있었기 때문에 api 라이브러리를 따로 쓰지 않고 fetch를 활용해보기로 했다. 사실 애초에 서버에서 api 요청을 끝내고 올 것이기 때문에 굳이 클라이언트에서 캐싱을 처리할 필요가 없다. 또한 CSS-in-JS 기반의 styled-components 또한, "use client"가 선언되면서 클라이..

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

엘리스 수료가 끝나고 6개월이 지나서야 발견한 대감동의 피드백이다. 그리고 정확히 최근에 내가 하는 생각이기도 하다. 사실 개발을 시작할 때부터 당시까지는 늘 코치님이 계셨기 때문에, 빨리 코드를 보여주고 피드백을 받으려는 경향이 강했다. 1차에서는 API를 주고받는 웹을 이해했고, 2차에서는 리액트가 어떻게 굴러가는가를 이해했다. 3차에서는 내가 작성한 코드에 대해서 제안을 많이 받았기 때문에, 좀 더 편해지는 코드를 보는게 재미있었다. DDD에서 계속 느끼고 스트레스를 받았던 게 내 코드가 상대적으로 가벼워보인다는 거였다. 그때는 이게 어디서 오는 불편함인지 몰랐다. 그냥 코드에 대해 토론하는 다른 사람들이 신기할 뿐이었다. 그러다가 잠깐 있다가 해커톤을 나가면서 또 하나 프로젝트를 헤치우고, 회의감..

처음에 배울 때 가장 많이 사용하는 리액트로 배우게 되었고, 이후에는 자연스럽게 혹은 당연하게 리액트의 상태관리 라이브러리나 Next.js에 관심을 갖고 배워나갔다. 그러다가 react-hook-form을 사용하면서 상태관리가 완전한 답이 아니라는 것을 알고 나니, virtual DOM도 완전한 답이 아니겠다는 생각이 들었다. 게다가 사실상 페이지 라우팅만 있고, 데이터의 변화로 리렌더링 필요가 없는 이 프로젝트는 굳이 리액트를 쓸 필요가 없었다. 그러면, 리액트 외에 뭘 선택해야하는가?React와 Vue리액트와 뷰는 컴포넌트 기반이며, Virtual DOM 방식을 사용하는 점에서 같다. 모두 웹 UI를 작은 컴포넌트 단위로 구성하여 재사용과 확장성을 이용하여 개발이 가능하다. 또한 Virtual DOM..

react-hook-form을 사용해보면서 ref, forwardRef를 계속해서 만나다보니, useRef가 어떤 역할을 하게 되는건지 궁금했다. 그런데 생각보다 Hook의 전체적인 관점에서 이해해야 했다. 사실 그냥 즉흥적으로 궁금해보이는 코드 들어가서 구경하다가 꽂히는 P 인간의 삽질일지도.. 금방 끝날 줄알고 잡았지..useRefresolveDispatcher를 통해 현재 활성화된 dispatch를 가져오고, dispatch의 useRef를 호출하여 useRef의 반환값인 current를 속성으로 가진 객체를 반환한다.export function useRef(initialValue: T): {current: T} { const dispatcher = resolveDispatcher(); retu..

Date 객체라고는 그냥 변수명에 대한 생각도 안한 상태에서 getFullYear 호출안하고 쓰던 자바스크립트 시절이나 getMonth() + 1 안해줘서 급하게 추가했던 기억뿐이라서 date 어렵다고 난리인건 다른 사람들 이야기였다. 늘 그렇듯이 내가 안 쓴거뿐이다~const formatDateTime = (date) => { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); const hours = String(date.getHours()).padStart(2, '0'); const ..