나의 코딩일지

프로젝트 구조 변경하기

디벨롭을 해야하는데, 아무리봐도 프로젝트 구조가 거슬렸다. 일단 component부터 시작해서, 그 안에 도메인별로 폴더를만들어 놓은게 은근히 계속해서 신경쓰이게 만들었다. 그냥할까 고민하다가 리팩토링 결정~   페이지 정리도 안된 상태에서 도메인을 넣어버리니까 페이지 이름변경하는게 뭔가 전체적으로 힘들었다. 특히 두명이서 각자 페이지를 작업하다보니 login과 signin처럼 못보고 직접 만드는 경우도 많아서 단일화해줘야했다. 심지어 로그인페이지는 login이고 회원가입페이지는 signup인 난리도 피워놨다.const RoutesList = [ { path: Paths.Landing, element: }, { path: Paths.Login, element: }, { path: Paths.Re..

댓글 달아줘요1. Redirect URL이 백서버를 향하는 경우  Redirect URL이 백서버를 향하는 순간, 프론트 => 백 => 구글 => 백으로 향했기 때문에, 구글에서 백으로 리다이렉트 되는 시점에서 프론트와 연결이 끊긴다고 볼 수 있다. 따라서 토큰을 발급한 후에 토큰을 담아 리다이렉트를 시켜주어야 한다. 만약 추가정보를 입력하지 않고 구글의 code만으로 유저 생성이 가능하다면, 그대로 로그인 성공을 할 수 있다. 다만 그렇게 되면 로그인 요청을 하면 무조건 생성이 된다는 단점이 있다.2. Redirect URL이 프론트를 향하는 경우Redirect URL이 프론트로 리다이렉트되는 경우, 백서버와의 HTTP 통신으로 요청과 응답이 가능하다.처음에 잘 협의해야하는 이유이게 생각보다 서로의 입..

request은 application/json으로, images는 image/jpg, image/png으로 Content-type을 지정해주고 form-data를 통해 전달해달라는 요청을 받았다. 근데 아무리 해봐도 Blob 없이 Content-type을 지정해주는 방법은 없었다. const formData = new FormData(); formData.append( "request", new Blob([JSON.stringify(payload)], { type: "application/json" }) ); if (image && image.length > 0) { const file = image[0]; const imageBlob = new Blo..

어쩌다보니 경영, 외경, 일어, 응화 친구들을 만나 창업 캠프에 참여하게 되었다. 심지어 외경친구는 예전에 VC 캠프에서 같이 룸메이트를 했던 친구였다. 다양한 학과 사람들 만나는건 늘 새롭게 즐겁다.  아이템이 조금 창업보다는 해커톤스러웠지만 그래서 더 해커톤의 기획 방향성을 다시 생각해볼 수 있었다.지금까지는 보통 기획을 할때 개발 위한 기획서였기 때문에, 진짜 사업은 어떻게 기획을 하게 되는지 궁금해서 참여한 것도 있었다. 그런데 확실히 듣길 잘한게, PM의 마인드를 이해할 수 있었다. 특히 멘토링 담당자분이 실제 창업을 할 때 IT 동아리에서 했다가, 개발은 직접하지 않고 아이템을 가져가게 되었는데, 여기서 개발보다 기획이 먼저인 이유를 크게 깨달을 수 있었다. 개발자들끼리 PM이 있으면 기획으로..

마우스로도 쌈뽕하게 그릴 수 있을 줄 알았지만 전혀 아니었다. 원래 처음에 푸는 거 공유하는 맛이라 정신승리했지만 다시보니 그림판은 너무 선넘었다.. 문제풀이 공유스터디 첫날에 쫓겨날 판이다. 앞으로는 태블릿을 사용해야지.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 패키지 안에 여러 구성 요소가 들어있다. 이 구성 요소들이 모듈 시스템..