나의 코딩일지

마지막날에 자바스크립트의 타입으로 시작해서 상태관리 임시 로직으로 끝나는 강의안을 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 ..

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

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