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

도커에 대한 학습 및 개념 정리는 아래 강의를 통해 진행하였습니다. 비전공자도 이해할 수 있는 Docker 입문/실전| JSCODE 박재성 - 인프런 강의현재 평점 4.9점 수강생 13,976명인 강의를 만나보세요. 비전공자 입장에서도 쉽게 이해할 수 있고, 실전에서 바로 적용 가능한 Docker 입문/실전 강의를 만들어봤습니다! Docker 기본 개념, Spring Boot를www.inflearn.com 도커(Docker)란? – 로컬 환경 문제 해결과 이식성 확보프로젝트를 진행하다 보면 같은 코드라도 로컬 환경에 따라 오류가 발생하는 경우가 종종 있습니다.하지만 도커를 사용하면, 한 번의 명령어로 일관된 환경을 구성하고 프로그램을 실행할 수 있습니다.또한 도커는 독립적으로 실행되어 충돌 위험이 적기 ..

배열 (Array)연속 공간에 값이 채워져 있는 형태의 자료구조입니다. 인덱스를 통해 참조할 수 있으며, 선언한 자료 값만 저장 가능합니다.배열 선언 시 크기를 지정하고 이후 크기를 조정할 수 없습니다. 조회 및 수정에는 O(1), 삽입 및 삭제에는 O(n)으 복잡도를 가집니다. 리스트 (Lincked List)값과 포인터들을 묶은 노드라는 것을 포인터로 연결한 구조입니다. 선언 시 크기를 별도로 지정하지 않아도 됩니다. (가변적) 포인터를 저장할 공간이 필요하므로 배열보다 구조가 복잡합니다. 값의 접근을 위해서는 Head(처음)부터 순서대로 접근해야 하므로 O(n) 복잡도가 걸립니다.포인터로 연결이 되어 있어 데이터를 삽입하거나 삭제하는 데에는 O(1) 복잡도가 걸립니다. 배열과 리스트를 다..

최종 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. 존재하지 않은 아이디 & 비밀번호 불일치 존재하지 않은 아이디이거나 올바르지 않은 비밀번호로 로그인 시도 시 아래와 같이 빨간 경고문이 출력되며, 비밀번호 입력란에 있던 데이터가 초기화됩니다. 💡 경고문이 “아이디 또는 비밀번호 불일치”인 이유 아이디 존재 여부를 공격자에게 노출하지 않..