개발자를 희망하는 초보의 자기개발 이야기

최근 프로젝트에서 useEffect 안에 비동기 함수를 쓰는 부분이 있었는데, ESLint가 loadAnimation() 호출 밑에 경고를 띄웠다. bird 변수를 선언하는 부분에서 birdNameMap[birdName]을 사용하고 있는데, ESLint는 birdName을 의존성 배열에 추가하라고 요구했다.경고에서 어떤 값 때문인지도 다 알려주기 때문에 만약 놓친부분이 맞다면 의존성 배열에 추가하면 될 것이다. 하지만 나의 경우 이 useEffect는 컴포넌트가 마운트될 때 한 번만 실행되면 되기 때문에, 의도적으로 의존성 배열을 빈 배열로 두고 있었다.대략적인 문제의 코드는 아래와 같다. useEffect(() => { const loadAnimation = async () => { t..

카카오 로그인 구현하기 - 프론트엔드 (3)이전 글에서는 인가 코드 처리 및 스토리지를 활용한 JWT 토큰 저장을 다루었다. 하지만 스토리지에 저장하는 것은 보안상 문제가 생기기 때문에 최종적으로는 쿠키방식을 적용해야 한다. 이번 글에서는 withCredentials 설정과 HttpOnly 쿠키를 통한 로그인 유지 방식을 설명한다.  1. withCredentials: true 설정의 의미withCredentials이란?withCredentials: true를 설정하면, 클라이언트와 서버 간 쿠키를 포함한 요청을 주고받을 수 있다.또 백엔드 설정에 따라 헤더에 기본적으로 브라우저는 CORS 요청에서 쿠키를 전송하지 않는다. 이를 활성화하려면 프론트엔드와 백엔드 모두에서 설정해야 한다.// withCred..

카카오 로그인 구현하기 - 프론트엔드 (2)이전 글에서는 카카오 로그인 버튼을 만들고 로그인 페이지로 이동하는 과정을 다루었다. 이번 글에서는 인가 코드 처리 및 백엔드 연동을 이어서 다룬다. 1. 인가 코드 가져오기 (useSearchParams)카카오 로그인 후 사용자는 인가 코드(authorization code) 를 Query String으로 받게 된다.http://localhost:3000/callback?code=nuAFZmJvzl2a5Oz5acQckm8RzTmfSTea9y1SiczkbKjZNN9XyVDNeQAAAAQKPCPnAAABlXhW9uSi-KZYUq23DA이제 이 인가 코드(nuAFZmJ...)를 백엔드에 전달하여 JWT 토큰을 받아야 한다.import { useSearchParams..

카카오 로그인 구현하기 - 프론트엔드 (1)카카오 로그인을 구현하려면 OAuth 2.0의 인증 흐름을 이해해야 한다. 이 글은 Kakao Developers 설정에 이어 카카오 로그인 개념 및 기본적인 프론트엔드 설정을 다룬다.프론트엔드가 앱 등록과 카카오 로그인 활성화, 앱 키 등을 준비하기로 되어있다면 아래의 글을 먼저 확인한다.2025.03.05 - [프론트엔드(Front-end)] - [카카오 로그인] Kakao Developers 설정 1. 카카오 로그인 흐름카카오 로그인의 흐름은 다음과 같다.카카오 로그인 버튼 클릭 → 카카오 인증 페이지로 이동사용자가 로그인 및 동의 → 카카오가 인가 코드 발급인가 코드(Query String으로 전달됨) 확인백엔드에 인가 코드 전달 → 백엔드에서 카카오 A..

Kakao Developers 설정카카오 로그인을 구현하려면 Kakao Developers 콘솔에서 설정이 필요하다. 이 글에서는 카카오 로그인 기능을 활성화하는 방법과 필요한 설정 과정을 설명한다. 백엔드 개발자가 모든 처리를 담당하면, 프론트엔드에서 직접 설정할 필요가 없다. 하지만, 어떻게 동작하는지 이해하는 것이 중요하다. 1. 내 애플리케이션 등록Kakao Developers 콘솔에 접속한다."애플리케이션 추가하기" 버튼을 클릭한다.앱 이름과 사업자명을 등록한다.실제 서비스가 아닐 경우, 사업자명은 임의로 등록해도 된다. 2. 카카오 로그인 설정카카오 로그인 기능을 사용하려면 아래의 설정이 필요하다.1) 카카오 로그인 활성화내 애플리케이션 -> 제품 설정 -> 카카오 로그인 메뉴로 이동한다."카..

문제의 발단다른 개인 프로젝트에서 이전에 커밋 이력 합치기를 해봤던 경험으로 작업 브랜치에서 커밋 이력을 합쳐봤다.그런데 당연히 main도 같이 수정될거라 생각했지만 main은 변하지 않았다. (찾아보니 별도의 해시값으로 관리된다고..) 어차피 비공개 레포라 다시 원상복구 했었다.그런데 이번에도 vercel 배포 자동화와 관련해 yml 파일과 build.sh 파일 연동을 시도하다가 의미없는 커밋이 10개가량 발생했다.문제는 이미 merge까지 끝내고 난 후 생각이 났다는거.. 이번 케이스도 추후 발생할 수 있을 것 같아 기록을 남긴다.상황abc 브랜치(가상의 작업 브랜치명)의 10개 커밋을 하나로 합친다.main 브랜치에서도 해당 10개 커밋을 하나로 정리한다.리모트 저장소(GitHub/Vercel)에서..

혼공학습단 13기, 나의 6주간 도전기새해가 되면 으레 새로운 목표를 세운다. '올해는 다이어트!' 같은 결심처럼 말이다. 올해 나는 새로운 도전을 선택했다. 바로 '혼자 공부하는 학습 습관'을 만들기 위해 혼공학습단 13기에 지원한 것. 그리고 1월 6일부터 시작된 여정은 6주 동안 꾸준히 이어졌고, 마침내 2월 23일에 마무리되었다 무엇을 원하는가혼공학습단에 선정되었을 때 가장 기뻤던 건, 내가 좋아하는 윤인성님의 책으로 공부할 수 있다는 점이었다. 혼공 시리즈를 이미 여러 권 가지고 있었지만, 제대로 완독한 적은 없었다. 국비학원을 다니면서 바쁘게 공부하느라 책들은 한쪽에 쌓여만 갔다. 그런데 이번에는 다르게 해보고 싶었다. 취업 준비가 길어지면서 학습했던 것들이 희미해졌고, 다시 집중력을 끌어올리..

기본 미션p. 315의 을 실행한 후 출력되는 고양이 이미지 캡처하기사이트가 https://www.placecats.com으로 변경되었음. 선택미션p. 352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡처하기 학습 기록문서 객체 모델 문서 객체 모델(Document Object Model), 줄여서 DOM이라고 부른다.문서 객체는 HTML 요소를 의미한다.문서 객체 모델은 자바스크립트를 통해 HTML 요소를 조작할 수 있게 해주는 객체들의 집합이다.DOMContentLoadedhtml에서 querySelector()document 객체를 통해 HTML 문서 내의 태그에 접근할 수 있다.querySelector()는 해당 조건에 맞는 첫 번째 태그만 선택한다.다양한 선택자를 태그로 선택할..

한글판 제목은 '게으름이 습관이 되기 전에' 이지만 원제는 '미루는 습관을 끊는 법'이다. 누구나 한 번쯤 "나중에 해야지"라고 생각하며 일을 미뤄본 경험이 있을 것이다. 각종 업무를 맡아놓고 감당이 안되서 미루게 되는 경우나, 거대한 프로젝트를 맡아 어디서부터 시작해야 할지 모를 막막함에 미루게 되는 경우 등. 하지만 미루는 습관은 성공을 방해하고 삶의 질을 낮춘다. 스티브 스콧의 The Anti-Procrastination Habit에서는 이러한 습관을 깨는 실용적인 방법을 소개한다. 미루는 습관의 원인왜 우리는 미룰까? 이유를 알면 해결책도 찾을 수 있다. 책에서 설명하는 대표적인 이유는 다음과 같다.완벽주의: 너무 높은 기준을 세워 시작조차 하지 못한다.무기력감: 실패 경험과 피로로 동기가 부족하..

기본 미션객체, 속성, 메소드가 무엇인지 설명하기 객체객체는 속성과 메소드를 가지고 있는 데이터 타입이다. 중괄호 {}를 사용하여 만들 수 있다. 배열처럼 여러가지 자료형을 담을 수 있다.속성객체의 특징을 나타내는 값이다. 객체의 속성은 키와 값으로 이루어져 있다.속성의 키는 문자열이다.메서드객체의 속성 중 함수인 속성을 메서드라고 한다.선택미션p. 288 확인 문제 3번 풀고, 풀이 과정 설명하기 Math.sin()은 매개변수로 radian에 대한 사인 값을 반환한다.radian은 각도의 도(°)와 다르게, 원의 반지름과 원주를 기준으로 각도를 측정하는 단위 중 하나다.degree는 90으로 주어졌으니, radian은 (degree * Math.PI) / 180로 계산된다.따라서, console.l..