나의 코딩일지

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

더이상 무작정 프로젝트를 늘리는 것이 효과적이지 않았기 때문에, 이제는 기존의 프로젝트를 보완하려고 한다. 처음에는 그 성능 개선을 어떻게 측정해야하는지 막막했는데, 일단 가볍게 LightHouse를 체크해보기로 했다. 아주 초창기에 다들 개선하려면 LightHouse 100점 맞으면 된다고 얘기해서 체크했다가 뭐가 뭔지 몰라서 그냥 점수만 보고 만족했던 경험이 있다. 이번에 다시 체크해보니, 이제는 그래도 굳이 찾아보지 않아도 어떤 개선사항이 필요한지 이해할 수 있어서 공부한 보람을 느꼈다. 그리고 기본이 가장 중요하고 아직 멀었다는 걸 느낄 수도 있었다,,1. 화질이 엄청나게 중요하지 않는 이상 이미지는 최대한 Webp로 변환하자2. 이미지의 사이즈를 지정해주자현재는 Image/next를 활용하고 있..

댓글 달아줘요1. Redirect URL이 백서버를 향하는 경우  Redirect URL이 백서버를 향하는 순간, 프론트 => 구글 => 백으로 향했기 때문에, 구글에서 백으로 리다이렉트 되는 시점에 프론트와 연결이 끊어진 상태라고 볼 수 있다. 요청 주체가 구글이라서 응답에 토큰을 넣어준다고 해서 클라이언트가 받는게 아니다. 구글이 받고, 아무것도 안한다. 따라서 토큰을 발급한 후에 토큰을 담아 리다이렉트를 시켜주어야 한다. 유저가 없는 경우 디스코드 요청한 유저임을 확인하기 위한 토큰(로그인 토큰X)을 발급해서 클라이언트로 넘어가야 한다. 유저가 있는 경우 로그인 토큰을 가지고 메인 페이지로 이동해야한다.  만약 추가정보를 입력하지 않고 구글의 code만으로 유저 생성이 가능하다면, 그대로 로그인 성..

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