WEB Dev/StudyNote
-
[리사트파밍챌린지] day02 타이머 만들기WEB Dev/StudyNote 2023. 10. 24. 16:25
리사트 파밍챌린지 프론트엔드 개발자편 4기 문제 위와 같은 형태로 된 타이머 만들기 레이아웃 우선 HTML과 CSS로 기본 틀을 잡는다. form-fieldset-input을 추가하여 입력 창을 만들고, placeholder로 00을 입력했다. placeholder는 실제 입력 시 사라진다. 3개의 버튼은 동일한 디자인으로 만들었고, flex를 이용하여 space-between으로 간격을 맞췄다. box-shadow로 멋을 좀 부려 보았다. 기능 만들어야 하는 기능은 다음과 같다 - START 버튼을 누르면 시간, 분, 초 단위로 카운트 다운 작동 (시간, 분, 초를 입력하는 영역이 사라진다) - STOP 버튼을 누르면 카운트 다운을 정지한다. - RESET 버튼을 누르면 모든 항목 0으로 초기화 되면서..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 14WEB Dev/StudyNote 2023. 5. 28. 22:04
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-05-28 21:00 14일차 안내 - 204p부터~ Apollo 클라이언트 링크 Apollo 링크는 아폴로 클라이언트와 GraphQl 서버 간의 데이터 흐름에 대한 커스터마이징을 돕는다. 링크를 통해 토큰을 관리하거나, 통신 관련 에러 처리, 소켓 통신, 로깅 등과 같은 클라이언트-서버 간 통신 시 발생되는 행동들을 제어할 수 있다. 기본적으로 구성할 수 있는 onError 링크와 HttpLink를 구성해준다. Authorization 이라는 헤더를 이용해 액세스 토큰이 있으면 넣어서 서버와 인증하는 구조를 만들어 준다. Apollo 서버 Context 요청과 응답 객체를..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 13WEB Dev/StudyNote 2023. 5. 21. 22:29
⌈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으로 바꾸지 않아서 에러메시지가..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 12WEB Dev/StudyNote 2023. 5. 14. 22:04
⌈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..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 10WEB Dev/StudyNote 2023. 4. 23. 22:23
⌈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..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 09WEB Dev/StudyNote 2023. 4. 9. 20:19
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-04-02 21:00 9일차 안내 - 책 요약 정리 5장 프로젝트 개발 Ⅱ 회원가입 typeORM : 관계형 데이터베이스 모델 연결해주는 TypeORM으로 mysql을 연결한다. server 폴더 아래에 yarn add typeorm mysql2 로 typeorm과 mysql2 설치한다. 도커가 안돼서 오늘은 이만..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 08WEB Dev/StudyNote 2023. 3. 26. 22:50
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-03-26 21:00 8일차 안내 -금일 진도 161p -다음부터는 5장 서버에서 엔티티 만들고, 리졸브 만들고 리졸브를 가지고 올 수 있는 쿼리를 만들고 codegen으로 제너레이트 해주고 프론트에서 가져다 쓴다. 책 요약 정리 4장 프로젝트 개발 명장면 자세히보기 모달 ui를 구현하기 위해서 명장면 쿼리 필드를 구성한다. cutId를 이용해서 동일한 명장면을 반환하고 필드 리졸버를 구성해서 film 필드를 구성. @Root() 데코레이터로 상위 필드인 Cut에 접근하여 filmId값을 기준으로 id값이 일지하는 영화를 찾아 반환. 명장면 상세 정보 모달 창 구현 cut...
-
[React] 원티드 프리온보딩 프론트엔드 Day4WEB Dev/StudyNote 2023. 3. 16. 21:31
😃 원티드 프리온보딩 프론트엔드 Day4 3월 프론트엔드 챌린지 로그인 기능 구현, 하나부터 열까지! 실제 동작하는 서버를 바탕으로 프론트엔드에서 로그인 기능을 구현해 봅니다. 배포된 서버와 로컬 서버 등을 호출해 보면서 인프라와 백엔드에 대해서도 알아봅니다. 보안이나 프로젝트 디렉토리 구조 등 현업에서 조금 더 나은 프로젝트를 위해 해볼만한 고민들을 함께해 봅니다. 📍 개요 지난 시간 리뷰 로그인이란? 사용자 식별, 인증, 권한 부여. 클라이언트에서 전달한 사용자 정보를 식별하고 서버에서는 인증한 정보를 세션이나 토큰에 담아 돌려 준다. 더보기 저작권으로 인하여 추후 손그림으로 변경할 예정입니다. 세션이란? 사용자가 로그인하고 로그아웃 할 때까지의 시간. 이것을 세션 id를 이용해 쿠키로 저장을 한다...