나의 코딩일지

OAuth의 Redirect URL이 향하는 곳

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

Axios에 익숙해져서 Fetch를 믿지 말자

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는 일단 예의상 그려줬다.처음에는 점을 어떻게 놔야 최댓값을 구할 수 있는지 생각안하고 일단 옆으로 길게 놨다가 최대한 공통변을 이용해야 최댓..

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

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