나의 코딩일지

마우스로도 쌈뽕하게 그릴 수 있을 줄 알았지만 전혀 아니었다. 원래 처음에 푸는 거 공유하는 맛이라 정신승리했지만 다시보니 그림판은 너무 선넘었다.. 문제풀이 공유스터디 첫날에 쫓겨날 판이다. 앞으로는 태블릿을 사용해야지.2차원 평면의 정사각형 개수의 최댓값을 구하는 문제다. 조건은 딱히 얻어갈 것은 없고 1개 이상이다. 일단 정사각형을 하나 만들기 위해 최소한이 4개 이기 때문에 1~3개의 케이스인 경우 0을반환해야 한다. 일단 가장 작은 값으로 문제를 이해해했다.사실 처음에 문제 제대로 안읽어서 이따구로 점찍어놓고 정사각형이 어떻게 되는가를 고민했다. 바보..4는 일단 예의상 그려줬다.처음에는 점을 어떻게 놔야 최댓값을 구할 수 있는지 생각안하고 일단 옆으로 길게 놨다가 최대한 공통변을 이용해야 최댓..

프리지 링크와 스타트업 밸리에서는 PM과 디자이너가 있을 때, 프론트엔드 개발자가 어떤 역량을 강화해야하는지에 대해서 의문이 들었다. 그때는 굉장히 뛰어난 PM, 디자이너, 백엔드 개발자들을 만나서 내가 크게 신경쓸 일이 없었다. 게다가보통 혼자서 기획, 디자인, 프론트를 주로 담당했어서, 개발만 해도 된다는거에 굉장히 당황했었다. 개발 초반에는 요청을 하지 않아도 되는 현상이 너무 어색해서 내가 뭔가 잘못하고 있는건가하는 생각까지 들었다. 익숙해지면서 개발에 집중할 수 있다는거에 굉장히 빠져들었고, 개발 로직에 집중하게 되면서 재미있었다.  그런데 이번에는 기획을 꽤나 단기에 잡고 디자인으로 넘어가서, 기획에서 빠진 부분이 많았다. 디자인이 나오기까지 기다리는건 그냥 당연한 거라고 생각해서 어떤 라이브..

데이터를 fetch해온 값들을 전달할 때 fetch 함수에서 선언한 타입들을 그대로 이용하기 위해서 자식 컴포넌트에 그대로 전달하고, 자식 컴포넌트에서 UI에 맞춰서 수정하는 편이었다. 그런데 UI를 선언할 때 값을 변경하는 것은 권장하지 않는다는 피드백을 받았다. 처음에는 UI의 반환값을 선언형으로 맞춰놔야하기 때문에 반환값안에서 변경하지 않고 로직을 통해 변경 후 UI에 그대로 담아놔야하는 것이라고 생각했다. 하지만 더 찾아보니 리액트에서 props는 변경을 지양해야한다는 원칙이 있었다. 그 이유가 궁금해져서 props가 전달되는 렌더링 과정을 찾아보았다. 사실 실상은 리액트 문서보면서 이전에 내가 만든 state, useState 좀 더 구체화하는 이야기다.초기 렌더링의 경우렌더링 단계앱을 시작할 ..

??: 배포 해주세요.나: vercel...??: 저희 도메인 쓰십시다.나: vercel.??: 이미지 추가하고 싶어요나: vercel + s3나: 백엔드분들이 cs 뭔가 잘알던데, 백엔드를 내가 해보겠따..!??: 클라우드 때문임. 클라우드 공부ㄱㄱ사실 지금까지 인프라에 대해서 크게 관심이 간 건 아니었다. VM아니면 vercel로 대충 배포하면 알아서 해주기 때문에, 나는 애플리케이션에만 집중하면 될거라고 생각했다. 하지만 HTTP 완벽 가이드를 읽으면서 계속이해된다기 보다는 그냥 텍스트를 읽는 경향이 강해졌다. 백엔드를 직접 만들어보면 되지 않을까 싶어서 그냥 기본적인 서비스와 컨트롤러로 CRUD만 구성해보기도 했지만, 백엔드를 만들 줄 안다고 해서 통신 과정을 이해할 수 있는 건 아니었다. 아직 ..

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를 통해 불변성을 유지해야한다.클..