React의 Portal을 이용해 모달을 구현하였습니다.

회원가입과 로그인 모두 좌측에 공통되는 영역이 있으므로, useState에 true/false값을 부여해
버튼 클릭에 따라 우측의 회원가입/로그인의 화면이 스위칭될 수 있도록 구현하였습니다.

또한 화면이 스위칭될 때 기존의 input에 입력했던 값이 초기화될 수 있도록 하였습니다.

input에 입력하는 onChange값을 실시간으로 감지하여 정규표현식을 통해 유효성 검사를 진행했고,
해당 값이 유효한지의 여부가 안내메시지를 통해 바로 확인될 수 있도록 하였습니다.

필수값인 아이디, 비밀번호, 닉네임 중 하나라도 값이 입력되지 않았거나,
모든 값은 입력했으나 하나라도 유효성 검증을 통과하지 못할 경우
button의 disabled 속성을 이용해 회원가입 버튼이 비활성화되도록 구현하였습니다.

비밀번호는 flask_bcrypt를 이용해 암호화하여 DB에 저장하였습니다.

입력한 ID가 DB에 존재하는지 중복 체크를 진행해 중복일 경우 에러 메세지를 출력했고,
동시에 ID input을 초기화시켜 사용자가 명시적으로 알 수 있도록 구현하였습니다.

입력한 ID/PWD가 DB에 존재하지 않는다면 에러 메세지를 출력하고,
해당하는 input을 초기화하여 사용자가 명시적으로 알 수 있도록 하였습니다.

입력한 비밀번호 값 역시 bcrypt를 이용해 암호화된 값이 일치하는지 확인하였습니다.

로그인 시 값이 모두 일치할 경우하여 로그인에 성공했을 경우만 jwt 토큰을 발급하였습니다.

서버에서 발급한 토큰은 react-cookie 라이브러리를 이용해 cookie에 저장하고,
response로 받은 id와 nickname은 Local Storage에 저장하였습니다.

로그아웃 시 unset_jwt_cookies로 발급한 토큰을 삭제하고,
해당 요청이 성공했을 경우 클라이언트에서도 cookie와 storage에 저장된 값을 삭제하였습니다.

모든 화면에 공통적으로 출력되는 Header에서 useEffect를 통해 렌더링이 될 때마다
storage와 cookie에 있는 값이 유효한지 검증할 수 있도록 하였습니다.

사용자가 하나라도 데이터를 임의로 삭제했을 경우 유효하지 않다는 alert를 보내고
로그아웃 될 수 있도록 구현하였습니다.

게시글 작성 시에는 모든 토큰과 저장된 값이 유효한지 먼저 체크했고,
작성 도중 로그아웃하거나 정보를 임의 삭제할 때도 해당 인가가 유효하지 않도록 처리했습니다.

react-md-editor를 이용해 마크다운으로 게시글을 작성 및 출력할 수 있도록 구현하였습니다.

작성 API 호출 전 모든 입력값이 존재하는지 유효성 검증을 진행했습니다.

특히 썸네일을 담당하는 이미지 URL의 경우 값을 입력할 때마다
new Image()의 이미지 객체를 이용해 해당 url로 이미지를 로딩할 수 있는지 체크하여
유효하지 않은 이미지 URL값의 입력을 제한했습니다.

사용자가 게시글 작성 페이지에 진입했을 때 바로 토큰과 저장된 정보를 체크하여
토큰 및 정보가 유효하지 않을 경우에도 로그아웃 처리를 진행하지만,
서버단 코드에서도 사용자가 작성 시 보낸 토큰과 DB에 존재하는 유저 정보를 대조하여
유효한 토큰으로 접근하고 있는지, 해당 토큰에 저장된 값이 존재하는지 이중으로 인가를 확인했습니다.

페이지 진입 시 게시글 작성인지, 수정인지 넘어오는 데이터를 통해 확인하여
게시글 작성, 수정 두 개의 기능을 한 개의 컴포넌트로 재사용하였습니다.

게시글 수정, 삭제는 로그인 후 storage에 저장된 id값과 게시글 작성자의 id값을 비교하여
일치할 경우에만 수정, 삭제 버튼이 출력되도록 하였습니다.

게시글 수정 시에는 useLocation의 state를 이용해 기존 데이터를 수정 페이지로 넘겨주었으며,
설정한 flag값으로 작성, 수정 기능을 구분하여 한 개의 컴포넌트를 재사용하였습니다.

게시글 삭제 후에는 메인페이지로 랜딩시킴과 동시에
invalidateQueries를 이용해 삭제된 내역이 반영되어 다시 보여질 수 있도록 하였습니다.

수정, 삭제에도 서버로 넘어오는 토큰의 검증 및 해당 토큰에 담긴 값이
DB에 담긴 작성자의 id값과 일치하는지 인가 확인을 진행했습니다.

사용자가 주소창에 유효하지 않은 주소를 입력할 경우
route의 path=”*”를 이용해 404 에러 페이지로 랜딩되도록 처리하였습니다.

사용자가 주소창에 유효하지 않은 게시글 번호를 입력해 조회를 시도할 경우
유효하지 않은 주소라는 alert를 띄우며 메인페이지로 다시 랜딩 처리하였습니다.

서버와 연결 중 로딩이 있을 경우 로딩 스피너를 구현하여
조회 대기 중임을 사용자가 명시적으로 알 수 있도록 하였습니다.