이번 작업에서는 회원가입 및 로그인 기능 구현 과정에서 발생한 여러 문제를 정리하고, 해결 방법 및 코드 리팩토링 진행하였습니다. 1. 회원가입 기능 구현✅ 주요 구현 내용비밀번호 유효성 검사비밀번호 입력값이 비어 있으면 “값을 입력하세요” 에러 출력입력이 되어 있는 상태라면 “형식 오류” 에러 출력아이디 중복 확인“중복 확인” 버튼 클릭 시, 서버에서 해당 아이디의 존재 여부 확인이미 존재하면 “이미 존재하는 아이디입니다” 메시지 표시존재하지 않으면 “사용 가능한 아이디입니다” 메시지 표시비밀번호 암호화 처리비밀번호 입력 필드를 단일화하고, 내부적으로 비밀번호와 비밀번호 확인 필드 모두 암호화 처리회원가입 경로별 Role 구분의사용/일반 사용자용 회원가입 페이지가 분리되어 있으므로location.pa..

최종 UI병원 페이지의 리뷰 무한 스크롤 이벤트 동작 정의하기리뷰 데이터는 한 페이지에 20개씩 표시되며, 사용자가 화면의 마지막 데이터에 도달하면 자동으로 다음 데이터를 불러와 이어서 표시되도록 구현했습니다. 이벤트 동작 구현하기 📗 참고자료 useInfiniteQuery로 무한스크롤 구현하기 | 올리브영 테크블로그무한스크롤 구현 방법과 뒤로가기 시 스크롤 유지하는 방법을 소개합니다.oliveyoung.tech useInfiniteQuery | TanStack Query React Docstsx const { fetchNextPage, fetchPreviousPage, hasNextPage, hasPreviousPage, isFetchingNextPage, isFetchingPreviousPage..

내비게이션 바에서 특정 키워드로 검색을 시도하면, 검색 페이지로 이동한 뒤 해당 키워드에 맞는 데이터를 화면에 표시하는 기능을 구현했습니다.이번 포스트에서는 사용자가 입력한 검색어를 기반으로 API 요청을 보내고, 응답 데이터를 화면에 출력하는 과정에서 마주쳤던 문제들과 이를 통해 얻은 인사이트를 정리하겠습니다. 최종 UI검색 과정이벤트 동작 정의하기입력 값에 따른 병원 정보 출력사용자가 input 태그에 값을 입력한 뒤 검색 버튼을 클릭하거나 Enter 키를 누르면, 해당 이벤트를 기준으로 페이지가 이동하고 입력한 키워드를 이용해 API 요청이 수행되어 특정 병원 데이터를 검색합니다. 이벤트 처리 구현하기 데이터 입력하기 📗 참고 자료 input 태그 사용 시 form 태그 사용 여부 - 인프런 |..

최종 UI이벤트 동작 정의하기 파란색: start / end노란색: 조건 초록색: 조건 성공 시 수행되는 작업빨간색: 조건 실패 시 수행되는 작업 비밀번호 암호화 비밀번호 입력 시 자동으로 암호화가 진행되고 옆의 체크박스 클릭 시 입력한 비밀번호가 보이도록 합니다. 클라이언트 에러 출력1. 아이디 및 비밀번호 미입력미입력 후 로그인 시도 시 아래와 같이 빨간 경고문이 출력되도록 구현할 예정입니다. 2. 존재하지 않은 아이디 & 비밀번호 불일치 존재하지 않은 아이디이거나 올바르지 않은 비밀번호로 로그인 시도 시 아래와 같이 빨간 경고문이 출력되며, 비밀번호 입력란에 있던 데이터가 초기화됩니다. 💡 경고문이 “아이디 또는 비밀번호 불일치”인 이유 아이디 존재 여부를 공격자에게 노출하지 않..

프론트엔드와 백엔드를 모두 구현하는 풀스택 프로젝트를 진행하며 기초 학습을 하고 있습니다.이전까지는 UI 구현에만 집중했고 이제 백엔드와의 연동 작업을 시작하려고 합니다. HTTP 요청 처리를 위해 Fetch와 Axios 중 둘의 특징을 비교한 결과 Axios를 통해 개발하기로 결정했습니다. Axios를 선택한 이유는 다음과 같습니다. 1. 자동 직렬화 및 에러 처리JSON 데이터 자동 변환 및 자동 에러 처리로 코드 길이를 단축할 수 있습니다. 2. 다양한 기능 지원요청 타임아웃 설정이 가능합니다. 요청/응답 인터셉터를 통해 요청 전 후로 작업 처리를 제어할 수 있습니다. 3. 학습 단계에 적합설치만 한다면 복잡한 설정 없이도 바로 사용 가능합니다.이미 구현된 자동화 기능을 통해 실수를 줄일 수 있습니..

Fetch란?Fetch API는 네트워크 요청을 위해 fetch()라는 메서드를 제공하는 브라우저 내장 인터페이스입니다. 모던 브라우저에 기본 내장되어 있어 별도의 설치가 필요 없습니다. 비동기 작업을 쉽게 처리할 수 있도록 Promise기반로 요청 및 응답을 처리합니다. HTTP의 404 or 500 에러를 자동으로 처리하지 않기 때문에 응답 객체의 ok속성을 확인한 후 수동으로 처리해주어야 합니다. (. catch 사용)응답 본문은 기본적으로 스트림 형태로 제공되기 때문에 수동으로 데이터 직렬화를 해야 합니다. 💡 Promise더보기자바스크립트에서 비동기 작업을 처리할 때 사용하는 객체입니다. [네트워크 요청]성공 시 resolve promise 응답 실패 시 reject promise 응답 ..