⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-05-21 21:00 13일차 안내 - 204p 까지 진행 액세스 토큰 발급 기능 추가 jwt 이용하여 토큰 발급 로그인 UI 완성 signup 처럼 로그인 UI 완성 로그인 요청 로그인 뮤테이션 만들고 로그인 진행 mutation login($loginInput: LoginInput!){ login(loginInput: $loginInput) { errors{ field message } user{ id username email } accessToken } } 유저 확인 로직에서 에러 메시지 field 파라미터를 emailOrUsername으로 바꾸지 않아서 에러메시지가..

⌈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를 사용하는 범위에 따..