전체 글122 원하는 페이지에서만 nav와 footer 라우팅 및 잘못된 경로는 404 페이지 라우팅하기 이번 홈페이지에서는 nav와 footer가 모든 화면에서 다 보여지고 있어서 다른 설정을 해주지 않아도 되었는데 404페이지를 만들자는 의견이 나오면서 라우팅을 손을 봐주어야했다. 404페이지 path 404페이지는 정해지지 않은 path를 입력하는 경우 무조건 떠야하기 때문에 아주 간단하게 path에 *를 입력해주면 된다. 근데 이렇게만 코드를 넣어주니 nav와 footer가 같이 보이거나 에러가 나는 상황이 생겼다. react-router-dom 의 outlet 그래서 알게 된 방법이 컴포넌트를 분리해 라우팅을 해주면 되는 것이었다. Layout이라는 컴포넌트 안에서 Nav와 Footer를 불러오고 그에 따라 달라져야하는 부분을 Outlet으로 처리해주었다. const Layout = () => { .. 2023. 7. 16. 쿼리스트링 이용해 원하는 정보만 가져와 list 페이지 구현하기 우리의 홈페이지에는 문구, 리빙 등등의 카테고리가 있고 버튼을 누를 때마다 그에 맞는 데이터만 보여줄 수 있도록 구현을 해야했다. 그래서 이번엔 Location 객체를 리턴하는 useLocation hook을 사용해 쿼리스트링을 적용해보려고 한다. useLocation과 쿼리스트링 사용하기 먼저 useLocation hook을 사용하기 위해 import를 해온다. 그리고 변수를 location 으로 선언해 useLocation()을 불러온다. 이때 useLocation의 serch라는 키의 값이 우리가 사용할 쿼리스트링이기 때문에 변수로 그 값을 선언해주어 간단하게 사용할 예정이다. 쿼리스트링은 백엔드 쪽에서 미리 작업을 해주어야 serch 안에 값이 들어가고 그 값을 우리가 불러올 수 있다. impor.. 2023. 7. 15. 토큰 유무에 따라 로그인/로그아웃 구현하기 프로젝트를 시작하기 전 로그인/회원가입을 백엔드와 함께 구현해보았지만 백엔드에서도 jwt 토큰 발급을 제대로 구현해보지 못해 토큰 관리는 이번 프로젝트에서 처음 해보았다. 그래서 이번 포스팅에는 토큰 관리와 그에 따른 ui가 바뀌는 것에 대해 이야기해보려고 한다. response로 오는 token을 localstorage에 저장하기 백엔드에게 post method로 로그인 페이지에서 email과 password를 보내면 백엔드 쪽에서 회원가입이 되어있는 사람이라면 로그인 성공 메세지와 함께 jwt 토큰을 보내준다. 이 때 개발자에 따라서 status code 또는 메세지 또는 두개 다 없이 토큰만 보내줄 수도 있다. 토큰이 localstorage에 들어오면 로그인이 된 상태로 유지된다. login.js .. 2023. 7. 15. 정규표현식을 이용한 sign up 구현하기-2 이전에 포스팅했던 계산된 속성명과 navigate는 제외하고 포스팅을 하려고 한다. 이번 포스팅에는 정규표현식을 이용한 이메일, 비밀번호 관리, 모달창 관리에 대해 이야기하려고 한다. 먼저 이메일과 비밀번호의 정규표현식은 아래와 같다. 이메일에는 앞에 영어가 들어가고 @ 이후 영어가 3글자 들어가고 끝난다. 이후 .을 찍으면 영어를 3글자를 더 써줘야 정규표현식에 맞춰 작성이 가능하다. 비밀번호는 10-16자로 이루어져 있고 영어, 특수문자, 숫자를 넣어줘야 정규표현식에 맞춰 작성할 수 있다. let emailRegular = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; let pwRegular = .. 2023. 7. 13. 전체동의, 부분동의가 있는 Sign Up 구현하기-1 모티브로 삼았던 페이지의 회원가입이 두 페이지로 나눠져있어 우리도 동일하게 진행을 하기로 했다. 회원가입도 금방하겠지라고 생각을 했었는데 약관동의가.. 엄청나게 큰 산이었다. 하나의 state로 관리를 하지만 체크박스 하나하나가 따로 작동을 해야하고 전체동의 체크박스를 누르면 또 같이 연동되어 움직어야하는 부분이 너무 어렵게 느껴졌었다ㅜㅜ 그래서 멘토님의 말씀대로 손코딩을 하면서 진행해보았다. 최종적으로 첫번째 페이지에서 내가 구현해야하는 내용을 글로 적어보자면 아래와 같다. 1. 전체동의 체크박스 클릭 시 모든 체크박스가 체크 될 것 2. 하나라도 해제하면 전체동의 체크박스가 해제 될 것 3. 필수 체크박스만 체크하더라도 버튼이 활성화 될 것 일단 먼저 state로 체크박스를 관리해준다. 계산된 속성명.. 2023. 7. 11. 간단하게 Sign In 구현하기 로그인 페이지로 생애 첫 프로젝트를 시작했다. 로그인 페이지는 기존에 하던것과 다른 부분이 GET 요청 뿐이라서 어려움없이 진행할 수 있었던 것 같다. 기획 단계에서 로그인 페이지에 아이디 저장을 하자고 해서 localstorage를 이용해 아이디를 저장해두고 그 값을 defalut value로 불러와 구현을 하였다. 하지만 실제 프로젝트에는 제외하게 된 이유가 2가지가 있다. 첫번째는 추가로 defalut value에 있는 값과 한 글자라도 바뀌게 되면 아이디저장 체크박스가 해제되도록 하고 싶었는데 구현하기가 너무 까다로웠다. 두번째로는 defalut value로 관리를 하다보니 백엔드에게 데이터를 보낼때 인식을 못해서 값이 안 가는것이었다. 두번째 이유로 결국 아이디저장을 추후에 구현하는 것으로 했고.. 2023. 7. 11. 이전 1 ··· 12 13 14 15 16 17 18 ··· 21 다음
