[항해] 실전 프로젝트

유저의 편의성을 높이기 위해 버튼 클릭을 최소화한 깔끔한 UI의 회원가입 폼을 만들어보았다. 결과물부터 먼저 보자! 기능 설명 ✔️ 가입하기 버튼을 누르지 않아도 사용자가 입력할 때 마다 유효성 검사 실패 에러메시지가 노출된다. ✔️ 아이디 중복 확인 버튼 없이 사용

먼저 Kakao Developer에서 애플리케이션을 만들고 몇가지 설정을 해줘야 한다.이 작업은 프론트엔드 개발자, 백엔드 개발자 누가 해줘도 상관없다.위와 같이 설정하고 Redirect URI를 입력한다.앱키가 자동으로 발급되는데, 우리는 REST API키가 필요하다

위와 같은 구성으로 마이페이지 닉네임 입력 기능을 구현해보고자 한다!1\. 연필 버튼을 클릭하면 span 태그가 input으로 바뀌고 edit모드가 실행된다.2\. 닉네임 입력 도중 연필 버튼이 아닌 외부 영역을 클릭(또는 터치)하면 edit모드가 종료된다.3\. 닉네

어마어마한 삽질과 함께 로그아웃 기능 구현에 성공했다. 아래 로그아웃 버튼을 누르면 쿠키를 삭제하고 로그인 페이지로 리다이렉트된다.로그아웃 실행 시 서버에서 쿠키를 삭제하고, 클라이언트로 "로그아웃 완료"라는 메시지를 반환한다. 즉, 서버 로직에는 문제가 없다. 하지만

유저가 이미지를 업로드할 때 이미지가 서버에 전송되고 실제 화면에 표시되기까지 약간의 시간이 걸린다. 유저의 사용성 개선을 위해 이 대기 시간 동안 로딩페이지를 보여주려고 한다.여기에서 useMutation 훅을 사용하여 isLoading이 true인 동안 로딩페이지를

마이페이지에서 프로필 이미지를 업로드할 때 사용자가 원하는 부분만 크롭하여 업로드할 수 있도록 구현해보려고 한다.yarn add react-cropper나는 서버에 이미지를 파일 형식으로 전송해야해서 위와 같이 Data Url을 Blob형태로 변환하는 작업을 했지만,

오류1오류 원인이 문제를 이해하기 위해서는 React의 Context API 작동 원리에 대한 기본적인 지식이 필요합니다.Context API의 작동 원리:React의 Context API는 상위 컴포넌트에서 하위 컴포넌트까지 데이터를 전달하는 방법을 제공합니다. 데이

Recoil을 사용하여 실시간으로 알림 목록과 개수를 업데이트하는 기능을 구현해보려고 한다! 1. Atom 생성 먼저, 알림 데이터와 알림 개수를 관리하기 위한 두 개의 atom을 생성한다. 2. 상태 설정 및 데이터 처리 useSocketManager라는 커스