⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-05-14 21:00 12일차 안내 -금일 진도 182p 부터 189p 책 요약 정리 5장 프로젝트 개발 2 회원가입 요청 react-router-dom에서 사용하던 useHistory 사용법이 변경되어서 useHistory -> useNavigate 로 바꿔서 사용. https://kangdanne.tistory.com/167 [React-Router]리액트 라우터 v5 → v6 (useHistory → useNavigate) 리액트 라우터 v6에서는 기존의 useHistory 대신 useNavigate를 사용해야합니다. 공식문서 : https://reactrouter.c..

⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-05-07 21:00 11일차 안내 책 요약 정리 5장 프로젝트 개발 Ⅱ 회원가입 UI react-hook-form 설치하고 useForm을 이용해서 유효성 검사를 만든다.

📌 들어가며 리액트 라우트 패키지의 기본인 react-router-dom을 이용해 리액트 페이지에 라우팅을 만드는 방법을 알아보자. 📌 react-router-dom란 리액트 라우터 돔은 클라이언트에서 페이지 라우팅을 가능하게 한다. 서버 사이드에서 보내지는 페이지들은 일반적으로 디렉터리에서 파일 단위로 이동하게 되는데 리액트와 같은 클라이언트 사이드 렌더링(Client-Side-Rendering)의 경우는 하나의 파일에서 화면만 변경되는 구조이기 때문에 url에서 보여지는 경로를 변경한다고 해서 화면이나 파일이 변경되지 않는다. 하지만 필요에 의해 (구글 등에서 검색, 딥 링크 등의 필요) url에서 페이지를 지정해주어야 하고, 유저도 그것으로 화면의 변화를 인지하는 경우도 있기 때문에 라우팅이 필요하..

⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-04-23 21:00 11일차 안내 - 10일차 글이 어디로 갔지 책 요약 정리 5장 프로젝트 개발 Ⅱ User 리졸버 create까지는 유저가 메모리에만 머무르고 insert 메서드를 통해 실제 디비에 작성된다. argon2로 안전하게 비밀번호를 해시 함수로 변경한다. class-vaildator로 유효성 검사 데코레이터로 email과 username, password의 유효성을 검사한다. 도커 mysql 시간대가 로컬과 맞지 않아서 docker run --name mysql-container -d -p 3306:3306 -e MYSQL_ROOT_PASSWORD=qwer1..

드디어 리덕스를 공부하기 시작했다. 유데미 강의에서 나온 리덕스의 간단한 개요를 짧게 정리해본다. 📌 들어가며 리액트는 그야말로 '상태 관리'가 로직의 핵심이다. 이 상태 관리는 애플리케이션이 작을 때는 props 로 관리가 가능하지만 무한히 늘어나는 페이지(컴포넌트)와 그에 따른 상태들을 관리하다보면 한 컴포넌트 안에서도 엄청나게 많은 props를 생성해서 내려보내주어야 하고, 개발하다보면 c 컴포넌트에서 d 컴포넌트로 props를 내려주면 될 줄 알았는데 실은 b에서 내려줘야 해서 그냥 a 컴포넌트로 state를 올려버리는 경우도 생긴다. 이런 경우들을 해결하기 위해 리액트에서는 자체적으로 상태관리를 위해 context 라는 메소드를 가지고 있지만 아쉬운 부분이 있다. State를 사용하는 범위에 따..

⛔ 에러 코드 //error __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal is not a function __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal is not a function 💊 해결 방법 import ReactDOM from 'react-dom/client'; 문을 import ReactDOM from 'react-dom' 으로 변경해주면 오류는 사라진다. 하지만 콘솔에 from "react-dom" which is not supported. You should instead import it from "react-dom/client". 에러가 나고 있다. 리액..