리사트 파밍챌린지 프론트엔드 개발자편 4기 문제 위와 같은 형태로 된 타이머 만들기 레이아웃 우선 HTML과 CSS로 기본 틀을 잡는다. form-fieldset-input을 추가하여 입력 창을 만들고, placeholder로 00을 입력했다. placeholder는 실제 입력 시 사라진다. 3개의 버튼은 동일한 디자인으로 만들었고, flex를 이용하여 space-between으로 간격을 맞췄다. box-shadow로 멋을 좀 부려 보았다. 기능 만들어야 하는 기능은 다음과 같다 - START 버튼을 누르면 시간, 분, 초 단위로 카운트 다운 작동 (시간, 분, 초를 입력하는 영역이 사라진다) - STOP 버튼을 누르면 카운트 다운을 정지한다. - RESET 버튼을 누르면 모든 항목 0으로 초기화 되면서..

⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-06-12, 2023-06-19 20:30 15, 16일차 안내 - 월요일로 바뀌고 기록하는 것을 깜빡 ;ㅁ; access token에서 생긴 에러가 재부팅하니까 깔끔하게 사라졌다 충격 - refresh 토큰 설정

⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-05-28 21:00 14일차 안내 - 204p부터~ Apollo 클라이언트 링크 Apollo 링크는 아폴로 클라이언트와 GraphQl 서버 간의 데이터 흐름에 대한 커스터마이징을 돕는다. 링크를 통해 토큰을 관리하거나, 통신 관련 에러 처리, 소켓 통신, 로깅 등과 같은 클라이언트-서버 간 통신 시 발생되는 행동들을 제어할 수 있다. 기본적으로 구성할 수 있는 onError 링크와 HttpLink를 구성해준다. Authorization 이라는 헤더를 이용해 액세스 토큰이 있으면 넣어서 서버와 인증하는 구조를 만들어 준다. Apollo 서버 Context 요청과 응답 객체를..

⌈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을 이용해서 유효성 검사를 만든다.