Front

프롤로그 4년 전 React.js를 처음 알게 되면서 학습 목적으로 만들었던 MBTI 테스트 프로젝트를 Next.js로 마이그레이션한 경험을 적어보려 한다. 단순한 기술 전환을 넘어 프로젝트를 한 단계 업그레이드하는 과정에서 배운 점과 그리고 예상치 못한 도전과 해결

성능 측정 개선 이전 개선 이후

NextJS 14에서 안전한 OAuth 토큰 관리하기 🔐 0. 들어가기 전에 이전 글에서 NextJS 14에서 라이브러리 없이 카카오 OAuth를 구현하는 방법을 다뤘습니다. 이번에는 액세스 토큰을 안전하게 관리하는 방법을 알아보겠습니다. 1. 기존 방식의 문제

프로젝트에서 소셜 로그인을 구현하게 되었는데, 실제로 구현하면서 복잡한 부분들이 많았다. 특히 OAuth 플로우를 이해하고 구현하는 게 처음에는 계속 헷갈렸다.쉽게 설명하면 "다른 서비스의 인증을 빌려쓰는 것"OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른

인턴쉽 중 알림 이메일 템플릿 작업을 맡았는데... 은근히 문제가 있는 친구였다. 왜 고통인가?Outlook은 flexbox를 지원 안 함 (2024년인데)Gmail은 되는데 Apple Mail에선 안 되고모바일은 또 따로 노는...근데 이걸 정상화 하는 방법을 찾아냈

프로그래밍 프로그래밍이란 뭐라고 생각하나요? 프로그래밍은 프로그램을 만드는 일. 우리가 가진 문제를 해결하기 위해 문제를 정의하고, 해당 문제를 분석하고 파악한 이후에 프로그램을 설계하여 해당 문제를 프로그래밍 언어를 도구로 활용하여 문제를 해결하는 것. 컴파일러는

this가 뭔가요? 🔥this는 함수를 호출한 객체이다.this는 어떤 일반 함수에서 어떻게 호출하느냐에 따라서 동적으로 결정되기 때문에 주의해야 함this 바인딩이란? 🔥JavaScript에서 bind() 함수는 주어진 함수의 this 키워드 값을 전달된 값으로

리액트는 라이브러리인가요 프레임워크인가요 제어의 역전 내가 코드를 컨트롤 한다. vs 누군가의 규칙을 따라야 한다. 예를 들어 Next.js에서의 라우팅 처리와 리액트의 react-router-dom을 이용한 라우팅 처리. 또한 Next.js의 정해진 디렉토리 구조와