VSCode 터미널에서 Claude Code CLI를 사용하여 로그인과 회원가입에 대한 리팩토링을 진행해보았다.우선 UX, 접근성, 기능 구현, 에러 처리, 보안쪽으로 개선 사항을 부탁했다.내가 생각했던 부분과 생각하지 못한 부분을 다방면으로 생각하여 수정을 해주었다.하지만, 팀프로젝트가 끝난 상황에서 진행한 상태여서 정확한 정보를 제공해주지 않은 측면에서는 Claude가 가정해서 수정을 진행한 부분도 있었다. 로그인 기능 개선 사항 정리하드코딩된 테스트 자격증명 제거파일 : components/auth/LoginForm.tsx이유 : 프로덕션 코드에 개발용 계정이 그대로 노출되어 있어, 누구나 소스코드를 통해 테스트 계정을 알 수 있는 보안 위험이 있었음.// ❌ 이전 코드const [email, se..

PortOne 본인인증 연동PortOne API를 활용하여 회원가입 시 휴대폰 본인인증 기능을 구현하기 위해 위의 공식 문서를 참고하였다. PortOne SDK 설치우선 PortOne 본인인증을 사용하려면 브라우저 SDK를 먼저 설치해야 한다.npm i @portone/browser-sdk설치 후에는 컴포넌트에서 import해서 사용할 수 있다.import * as PortOne from '@portone/browser-sdk/v2'; PortOne 관리자 콘솔 연동PortOne 관리자 콘솔에서 회원가입을 진행한 후에 테스트 채널을 생성하면 Store ID와 Channel Key를 발급받을 수 있다.이후 서버에서 PortOne REST API를 사용하기 위해 API Secret Key를 발급받으면 사전 ..

프로젝트의 회원가입 기능을 구현하며 왜 그런지 이해하며 전반적인 흐름을 정리해 보았다. 회원가입 서버 / 클라이언트 컴포넌트 분리회원가입 페이지도 로그인 페이지와 같이 페이지의 레이아웃과 metadata는 서버에서 렌더링하고, 입력 상태 관리(useState), 폼 제출(useActionState), 페이지 이동(useRouter)이 필요한 폼 영역만 Client Component로 분리하여 작업하였다. 회원가입 인증 흐름 설계클라이언트 입력 검증 UX 설계브라우저에서 사용자가 인풋에 데이터를 입력 시 정해놓은 형식에 맞게 작성할 수 있도록 UI를 설계하였다.export default function SignupForm() { const [name, setName] = useState(''); con..

Kakao Developers 문서카카오 로그인을 사용하기 위해 위의 공식 문서를 참고하였다.우선 카카오 로그인 과정에 대해서 쉽게 이해할 수 있는 이미지를 확인할 수 있었다.간단하게 설명하자면,사용자가 카카오 로그인 버튼을 누르면, 카카오 인증 서버로 이동한다.로그인 및 동의를 완료하면, 카카오는 인가 코드를 포함한 Redirect URI로 다시 돌려보낸다.서비스 서버는 이 인가 코드로 카카오에 토큰 발급을 요청한다.발급받은 토큰으로 사용자 정보를 조회한 뒤, 기존 회원 여부를 확인한다.회원 가입 또는 로그인 처리를 완료하고, 서비스 세션을 생성한다.즉, 클라이언트는 인가 코드만 받고 실제 로그인 완료 처리는 서버에서 진행된다. 카카오 개발자 콘솔에서 앱 설정우선 카카오 로그인을 사용하기 위해서는 카카..

프로젝트의 헤더에 네비게이션을 로그인 상태에 따라 다르게 설정하였다. 로그인 되지 않은 상태라면 : "로그인 / 회원가입"로그인 된 상태라면 : "마이페이지 / 구독하기" 하지만 로그인이 된 상태일 때, 새로고침을 하면 아주 짧은 순간 "로그인 / 회원가입" UI가 먼저 렌더링 되고 잠시 후에 "마이페이지 / 구독하기" UI로 바뀌는 현상이 발생했다. 이 현상은 Hydration 과정에서 발생한 문제이다. Hydration이란서버에서 미리 생성된 HTML에, 브라우저에서 내려받은 JS가 실행되며 이벤트 리스너와 상태를 연결해 인터랙션 가능한 리액트 애플리케이션으로 완성하는 과정이다.동작 과정빌드 시작성한 JSX(TSX) 코드는 SWC에 의해 JS로 변환된다.이후 서버에서 실행될 코드와 브라우저에서 실행될..

프로젝트의 로그인 기능을 구현하며 왜 그런지 이해하며 전반적인 흐름을 정리해 보았다. 로그인 서버 / 클라이언트 컴포넌트 분리App Router 환경에서 기본은 Server Component이다.로그인 페이지의 레이아웃과 metadata는 서버에서 렌더링하고, 입력 상태 관리(useState), 폼 제출(useActionState), 페이지 이동(useRouter)이 필요한 로그인 폼 영역만 Client Component로 분리하였다.그리고 Server Component는 Client Component를 import해서 사용할 수 있다. 하지만 반대의 상황은 허용되지 않는다. 로그인 인증 흐름 설계서버 액션 구현로그인 기능은 단순히 API 요청을 보내는 문제가 아니라, 인증 정보(토큰)를 안전하게 저장하..