hani hani

본 글은 Next.js에서 NextAuth 사용해 카카오톡 로그인 구현했던 방법에 대해 다룬 내용입니다. 목차 1. 도입 이유 2. NextAuth란? 3. 사용 방법 1. 도입 이유 최근에 진행한 프로젝트에서 보안성 때문에 Token을 SessionStorage에 저장했었다. SessionStorage의 경우 Cookie에 비해 보안성이 좋지만, 브라우저 탭 별로 로그인을 해야한다는 점이 굉장히 불편했다. 팀원들과 논의한 결과, Token 저장하는 방법을 바꾸기로 결정했고, 이후 다양한 방법에 대해 찾아봤다. 쿠키에 저장 후 암호화하여 보안성 높이기 NextAuth 사용해서 관리하기 우리는 2번 방법을 채택했고, 그 이유는 아래와 같다. NextAuth는 다양한 인증 및 식별 공급자를 지원해 인증 흐름..

본 글은 Next.js로 프로젝트를 진행하면서 발생했던 Hydration failed 에러를 해결한 방법에 대해 다룬 내용입니다. 목차 1. 에러 발생 2. 원인 3. 해결 방법 1. 에러 발생 소개 페이지에서 로그인 유무에 따라 버튼을 다르게 보이도록 처리하는 과정중에 아래 에러가 발생했다. 2. 원인 에러 원인을 한 줄로 간단하게 정리하자면, 서버와 클라이언트에서 렌더링된 HTML이 일치하지 않아서이다! 위의 내용을 이해하기 위해서는 Next.js가 서버 사이드 렌더링(SSR)이라는 것을 잊지 말아야 한다. SSR은 클라이언트와 서버의 렌더링 사이의 일관성을 유지하기 위해 hydrate 과정을 사용한다. hydrate 서버에서 생성된 HTML과 클라이언트 측 JS 코드 간의 일치 여부를 확인 후, 그..

본 글을 자바스크립트의 이벤트 전파에 대해 다룬 내용입니다. 목차 1. 이벤트 전파(Event Propagation)란? 2. 이벤트 전파의 종류 (버블링, 캡처링) 프론트엔드 개발자가 이벤트 전파에 대해 이해하면 사용자와의 상호작용을 관리하고, 효율적으로 이벤트를 처리할 수 있다. 1. 이벤트 전파(Event Propagation)란? 이벤트 전파에 대해 간단하게 정리하면 아래와 같다. HTML 문서 내에서 이벤트가 발생하면, 해당 이벤트가 어떻게 처리되는지를 설명하는 개념 위에 내용만 읽어봤을 때는 무슨 말인지 이해 못할 수도 있다. 아래 과정을 통해 이벤트 전파가 어떻게 일어나는지 알아보자! 이벤트 처리 과정 사용자의 상호작용(예: 클릭, 마우스 오버 등)으로 인해 이벤트 발생 → 이벤트 타깃(Ev..

본 글을 자바스크립트에서 자료형 변경하는 방법에 대해 다룬 내용입니다. 목차 1. 정수 2. 실수 3. 문자 (문자열) 4. 논리 1. 정수 // 1. Number // 주어진 값을 숫자로 변환, 부동 소수점 숫자로 인식 console.log(Number("123")); // 123 console.log(Number("123.45")); // 123.45 console.log(Number(true)); // 1 console.log(Number("123")); // NaN (숫자로 변환할 수 없는 경우) // 2. parseInt // 주어진 값 하나하나를 정수로 추출, 부동 소수점 이후 숫자는 무시 // 두 번째 매개변수로 기수(진수)를 지정, 생략 시에는 10진수 console.log(parseInt..

본 글은 배열과 집합을 다룬 내용입니다. 목차 1. 배열과 집합을 차이점 2. 성능 3. 배열 4. 집합 1. 배열과 집합의 차이점 개발자는 데이터를 효율적으로 다루고 관리하기 위해 다양한 상황에 적절한 자료구조를 선택하고 활용할 수 있어야 한다. 데이터를 어떻게 관리하는지에 따라 프로그램의 성능이 달라진다. 그래서 우리는 늘 적절한 선택을 해야한다. 데이터 구조의 특징을 잘 기억해야지 적절한 선택을 할 수 있다는 점을 잊지 말고 공부하면 좋겠다! 이제 본론으로 돌아와 배열과 집합의 차이점을 정리하면 아래와 같다. 집합은 중복을 허용하지 않는 고유 값들의 모임 배열은 중복을 허용하고, 순서를 갖는 값들의 모임 여기서 기억해야 할 키워는 중복과 순서이다. 집합은 중복 X, 순서 X 배열은 중복 O, 순서 ..

본 글을 Next.js에서 카카오 지도 오픈 API를 사용법을 다룬 내용입니다. 지도 만들기 순서를 간단하게 요약하면 아래와 같다. 카카오 지도 Key 발급 Next.tsx 파일 초기 설정 지도 그리기 카카오 지도 Key 발급 순서: 카카오 지도 페이지 접속 > 카카오로 로그인 > 내 애플리케이션 선택 > 애플르케이션 추가 및 선택 > JavaScript 키 복사 (꼭 JavaScript 키 복사해두기!) Next.tsx 파일 초기 설정 _document.tsx에서 카카오 지도 API 스크립트를 로드해야 한다! (해당 파일에서 스크립트를 로드하면 모든 페이지에 해당 스크립트가 포함되어 초기 로딩 시간 개선, 필요한 경우에만 API 활성화 가능) JavaScript 키는 아까 사이트에서 복사한 값 넣어주..

본 글은 React에서 Websocket & STOMP 를 사용해 실시간 채팅을 구현한 내용입니다. Websocket, STOMP 모두 프로토콜이다. (자세히 알고 싶다면 링크를 타고 들어가서 확인해보면 될 거 같다.) 두 가지 프로토콜이 어떤 특징을 가지고 있어서 실시간 채팅을 구현할 수 있는지 간단하게 정리해봤다. Websocket 양방향 통신을 지원하며, 지속적인 연결을 통해 실시간 데이터 전송을 가능하게 해줌 STOMP 메시지 기반의 프로토콜로 쉬운 구현과 클라이언트-서버 간의 효과적인 양방향 통신을 제공 실시간 채팅 구현 두 프로토콜의 특징을 알아봤으니 이제 실제로 활용해서 기능을 구현해보려고 한다. 먼저 단계를 설명하자면 아래와 같다. SockJS 객체를 생성합니다. (웹소켁 연결을 위한 객체..

여러 가지 프로젝트를 진행하면서 내가 제일 많이 했던 고민이 바로 "상태 관리"이다. 상태 관리를 신경써야 하는 이유는 다양하지만 내가 중요하게 받아드리는 이유는 아래와 같다. 중앙 상태 관리를 통해 컴포넌트 간의 데이터 흐름을 쉽게 관리 가능 코드 유지 보수성 향상 상태의 불변성을 유지함으로서 예측 가능하고 안정적인 어플리케이션 구현 가능 어떻게 상태를 관리하는지에 따라 프로젝트의 성능이 달라진다. 위와 같은 이유로 프론트엔드 개발자는 특히 상태 관리를 잘해야 한다고 생각한다. (직접적인 영향이 있기 때문에) 그래서 오늘은 상태 관리가 뭔지, 어떤 방법으로 하는지에 대해 자세히 알아보려고 한다. 상태란? 우선 상태에 대해 찾아봤다. 어플리케이션 내에서 변경 가능한 데이터 리액트에서는 컴포넌트 내에서 관..