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 요청을 보내는 문제가 아니라, 인증 정보(토큰)를 안전하게 저장하..

WAI-ARIAWAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications)는 웹 콘텐츠의 접근성을 높이기 위해 W3C WAI에서 개발한 기술이다. 웹이 단순한 문서 연결을 넘어 복잡한 사용자 경험(UX)을 제공하는 리치 인터넷 애플리케이션(RIA) 시대로 발전하면서 등장했다. 초기 웹은 정적이었으나, JavaScript와 Ajax 같은 기술로 웹 페이지가 동적으로 변하고 다양한 UI 컴포넌트가 등장하면서 기존 HTML만으로는 그 의미를 보조 기술(스크린 리더 등)에 정확히 전달하기 어려워졌다. 예를 들어, 나 태그로 만든 컴포넌트의 기능과 상태를 보조 기술이 파악할 수 없는 문제가 발생했다. WAI-ARIA는 이러한 문제를..

웹표준(Web Standards)웹사이트를 제작할 때 지켜야 하는 국제적인 기술 규약이다. W3C(World Wide Web Consortium) 라는 국제 기구가 주도하며, 웹 개발의 기본 언어인 HTML, CSS, JavaScript의 기술과 규칙을 정의한다.웹 표준이 중요한 이유호환성사용자가 어떤 운영체제, 브라우저를 이용하든지 웹페이지를 동일하게 보이도록 만들 수 있다.효율적인 유지보수표준화된 코드는 다른 개발자들이 쉽게 이해할 수 있으며 협업이 수월해진다.검색 엔진 최적화(SEO)구글, 네이버 같은 검색 엔진은 웹 표준을 지킨 웹사이트의 콘텐츠를 더 잘 이해하고 분석할 수 있다. 이는 검색 결과에서 웹사이트가 더 높은 순위로 노출될 가능성을 높여준다.HTML, CSS, JavaScript와 웹 ..

브루노프로젝트를 시작하기전에 API 요청을 재현할 수 있도록 테스트하기 위해 브루노를 사용하였다.팀에게 필요한 대략적인 API 요청을 페이지별로 분리하여 Collection을 설계하였다.설계한 폴더와 참고사항을 팀원에게 공유하고 각자의 로컬에서 테스트해 볼 수 있도록 하였다.먼저 환경변수로 API 서버 URL과 API를 사용할 수 있게 허가된 ID를 설정하였다.API 요청을 보낼 때 어디서 보냈는지 확인할 수 있게 헤더에 Client-Id를 설정하였다.로그인 API 요청 시 성공하면 응답으로 토큰을 발급받아 환경 변수에 토큰을 저장하도록 설정하였다.이렇게 스크립트를 작성해두면 다른 사용자들이 로그인을해도 각자의 토큰이 환경 변수에 저장된다.발급받은 토큰은 로그인한 사용자의 고유의 값으로 Baerer To..

프로젝트 구조📁 final-team-project/│├── 📁 app/ # App 라우트 그룹│ ├── 📁 (auth)/ ## 인증 관련 라우트 그룹│ │ ├── 📁 login/│ │ │ └── 📄 page.tsx ### 로그인 페이지│ │ ├── 📁 signup/│ │ │ └── 📄 page.tsx ### 회원가입 페이지│ │ └── 📄 layout.tsx ### 로그인/회원가입 전용 레이아웃 (헤터/푸터 X) (로고 홈 링크)│ ││ ├── 📁 mypage/ ..