본문 바로가기

[PROJECT] 내일의 집

(7)

#7. 회원가입 유효성 검사 (react-hook-form) #7-0 들어가는 말 기존에 작성한 회원가입 폼의 유효성 검사기능을 보완하려던 차에 react-hook-form이 있다는걸 알게 되었다. react-hook-form을 이용하는게 기존 코드의 양도 줄일 수 있고, 좀 더 잘 짜여진 기능을 빠르게 가져다 쓸 수 있을거 같아 한번 적용시켜 보았다. #7-1 react-hook-form 이용후기 먼저 npm install react-hook-form을 하여 설치한 후에 공식 홈페이지(https://react-hook-form.com/kr/get-started/)에 안내된 대로 실행해 보았으나 "Uncaught TypeError: path.split is not a function" 란 에러가 떴다.검색해보니 여러 해결방법 중 react-hook-form 버전을..

#6. 로그인 기능 구현 (1차) #6-0 들어가는 말 이전에 포스팅 했던대로(https://white-salt.tistory.com/26) JWT 방식으로 로그인 기능을 구현해보았다. jwt 개념을 이해하는 것도 조금 어려웠는데 실제로 코드 짜는건 더 어려웠다 (^_^;;). 일단 지금까지 짠 코드를 한번 정리 후 백엔드 친구와 회의를 진행해보자. #6-1 로그인 기능 로직 1. 아이디와 패스워드를 서버로 전송하여 accessToken과 refreshToken 받기. 입력받은 id와 password 값을 서버로 보내면, 서버는 유저확인 후 등록된 유저가 맞다면 accessToken, refreshToken을 발급해준다. (Q1. 이때 발급 받은 refreshToken을 httpOnly cookie로 서버단에서 바로 저장해주고, 이후 클..

#5. 약관동의 체크박스 기능 구현 #5-0 들어가는 말 회원가입 페이지에 들어갈 약관동의 체크박스 기능을 구현했다. 처음엔 왠지 조금 어려울꺼 같아서 일단 혼자 시도해보고 안되면 구글링 해보자 싶었다. 근데 웬걸 성공했다. 콩나물 처럼 나도 조금씩 자라고 있나보다. 뿌듯! #5-1 약관동의 체크박스 기능 설계 1) 전체동의 체크 시 세부항목 3개 모두 자동체크 2) 전체동의 체크해제 시 세부항목 3개 모두 자동 체크해제 3) 세부항목 3개 모두 체크 시 전체동의 자동체크 4) 전체동의 + 세부항목 3개 모두 체크된 상태에서 세부항목 1개 체크해제 시 전체동의 자동 체크해제 #5-2 약관동의 체크박스 기능 구현 1) 체크박스의 checked 속성값인 true / false 를 useState를 이용하여 저장 및 변경함. 2) 기능 1번과 ..

#4. 캐로셀(Carousel) 구현하기 #4-0 들어가는 말 메인 홈페이지 상단영역에 들어갈 캐로셀 기능을 직접 자바스크립트로 기능을 만드려다가 react-slick 라이브러리를 이용해 구현해보았다. 처음 사용해보는 라이브러리였는데 다행히 잘 적용되어 기뻤당. #4-1 Carousel 만들기 (https://react-slick.neostack.com/docs/get-started) 1) 먼저 react-slick과 slick-carousel 설치하기 npm install react-slick npm install slick-carousel 2) Carousel.js 파일에 아래의 코드를 임폴트 하기 import Slider from 'react-slick'; import "slick-carousel/slick/slick.css"; impor..

#3. 모달창 구현( feat. 영역 밖 클릭 시 닫기) #3-0 들어가는 말 Header 영역을 작업하던 중 모달창 닫기 부분에서 잠시 막혔었다. 모달창 닫기 버튼이 따로 없고, 모달창 영역 밖을 클릭했을 시 모달창이 닫히는 구조였기 때문이다. 구현하기 쉬운 기능이라고 생각했는데 생각보다 조금 시간이 걸렸다. 그래도 해내었다는 것에 기쁨을 느꼈다. #3-1 useRef 이용하기 특정한 Element를 선택하고 싶을 때 자바스크립트로 getElementById나 querySelector 등을 사용하듯이, 리액트에선 어떻게 사용할 수 있을까? 정답은 useRef Hook 함수 사용하기! 모달창 영역 밖에 해당하는 부분을 useRef를 통해 선택한 후, 해당 Element가 클릭 되었을 때만 모달창이 닫히도록 이벤트를 주면 된다. *예시 코드 import Reac..

#2. 로그인 기능 개념잡기 #2-0 들어가는 말 내일의 집 프로젝트의 로그인 기능을 토큰방식으로 구현하기로 결정했다. 그래서 토큰방식이 어떤 것인지, 또 코드를 어떻게 짜야할지 검색 해보았다. 먼저 개념부터 이해해보자. #2-1 JWT (JSON Web Token) JWT는 클라이언트와 서버 간에 정보를 주고 받을 때 HTTP 리퀘스트 헤더에 JSON 토큰을 넣은 후 서버는 별도의 인증 과정없이 헤더에 포함되어 있는 JWT 정보를 통해 인증 처리하는 방식이다. 클라이언트와 서버 간의 인증 절차는 아래와 같다. 1) 클라이언트가 서버에 ID와 비밀번호를 보낸다. 2) 서버가 ID와 비밀번호를 검증하고 Access Token과 Refresh Token, Access Token의 만료시간을 반환해준다. 3) 클라이언트는 반환받은 Acc..

#1. 첫 프로젝트 시작과 준비 #1-0 들어가는 말 그동안 여러 강의들을 통해 HTML, CSS, JavaScript, React를 배웠다. 아직 완벽히 마스터 했다라고 말하긴 어렵지만, 그래도 그동안 열심히 공부했으니 이젠 나만의 프로젝트를 시작하여 진짜 내 것으로 만들어 보자! 나는 '사람들이 컴퓨터로 가장 많이 하는 게 무엇일까?'를 생각했을 때, 인터넷 검색, 게임, 그리고 쇼핑이라고 생각했다. 그래서 첫 프로젝트로 인테리어 쇼핑몰인 '오늘의 집' 사이트를 클론코딩 해보고자 한다. 기존에 '오늘의 집' 사이트는 크게 커뮤니티, 스토어, 인테리어 시공이란 주제로 나뉘는데 , 나는 이 중 스토어를 중심으로 메인 페이지, 상품 디테일 페이지, 로그인 페이지 등을 제작할 것이다. 나는 프론트 작업을 진행하고, 백엔드 작업은 친한 친구..

이전 1 다음

티스토리툴바