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

최근에 GitHub에서 레포지토리를 만들어서 사용하다가 오타가 있는 것을 확인하고 Rename으로 수정했다.이후 로컬에서 커밋을 푸시하려고 하니까 아래와 같은 에러가 발생했다.fatal: repository 'https://github.com/username/이전레포명.git/' not found알고 보니, 로컬에서 연동된 Git remote 주소가 여전히 이전 레포지토리 이름을 가리키고 있었기 때문이었다. 해결 방법: remote set-url 명령어Git은 remote set-url 명령어를 통해 원격 저장소 주소를 바꿀 수 있다.git remote set-url origin https://github.com/username/새로운레포명.git위의 명령어로 origin이라는 이름의 원격 저장소 주소를..

최근 유튜브 '코딩알려주는누나'에서 진행하는 리액트 스터디 3기에 참여하고 있다. 데일리 과제를 구현하고, GitHub 브랜치를 나눠서 Vercel에 프리뷰 배포한 뒤 해당 URL을 제출하고 있는데 문제가 발생했다. 하루는 열심히 과제를 구현해서 Vercel 프리뷰 배포 링크를 제출했는데, 피드백에 이렇게 적혀 있었다:나는 분명히 실제 배포 주소를 제출했는데, 왜 이런 피드백을 받았을까? 테스트해본 결과 나한텐 잘 열리는 페이지였지만 다른 사람에게는 로그인하라는 화면이 출력된 것이다.원인은 바로 Vercel의 프리뷰 배포 보호 기능Vercel은 GitHub 등과 연동하면 각 브랜치마다 자동으로 프리뷰 배포를 만들어준다. 이 프리뷰 배포는 매우 유용한 기능이지만, 기본 설정으로는 보호(Protection)..

최근 프로젝트에서 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()는 해당 조건에 맞는 첫 번째 태그만 선택한다.다양한 선택자를 태그로 선택할..