WEB Dev/StudyNote
-
[React] 원티드 프리온보딩 프론트엔드 Day3WEB Dev/StudyNote 2023. 3. 13. 21:37
😃 원티드 프리온보딩 프론트엔드 Day3 3월 프론트엔드 챌린지 로그인 기능 구현, 하나부터 열까지! 실제 동작하는 서버를 바탕으로 프론트엔드에서 로그인 기능을 구현해 봅니다. 배포된 서버와 로컬 서버 등을 호출해 보면서 인프라와 백엔드에 대해서도 알아봅니다. 보안이나 프로젝트 디렉토리 구조 등 현업에서 조금 더 나은 프로젝트를 위해 해볼만한 고민들을 함께해 봅니다. 📍 개요 지난 시간 리뷰 JWT는 Json Web Token 토큰에 대한 명칭, 토큰을 만드는 기술 Json으로 받아서 로컬스토리지에 저장해놨다가 헤더에 담아 요청을 보낸다. cURL은 터미널에서 커맨드라인으로 url을 호출하는 기능으로 Command line url이라는 뜻 3강. 세션기반 로그인 구현과 JWT와의 비교 및 인프라스트럭쳐 ..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 07WEB Dev/StudyNote 2023. 3. 12. 21:52
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-03-12 21:00 7일차 안내 -금일 진도 150p 책 요약 정리 4장 프로젝트 개발 명장면 스키마 설계 CutResolver는 cuts 쿼리 필드를 가지고 해당 필드는 filmId를 인자로 받아 해당 영화의 filmId를 지닌 Cut 배열을 반환한다. resolver 에 CutResolver 추가 명장면 목록 정보 UI 구성 타입 만들고 리졸버 만들고... 요청 훅과 타입 정의를 생성하고 명장면 목록 컴포넌트를 구성 yarn codegen 을 통해 생성한 useCutsQuery에 쿼리 변수로 부모 컴포넌트로 부터 받아온 filmId를 넘겨준다. 그리고 응답된 데이터와 ..
-
[React] 원티드 프리온보딩 프론트엔드 Day1WEB Dev/StudyNote 2023. 3. 6. 21:43
😃 원티드 프리온보딩 프론트엔드 Day1 3월 프론트엔드 챌린지 로그인 기능 구현, 하나부터 열까지! 실제 동작하는 서버를 바탕으로 프론트엔드에서 로그인 기능을 구현해 봅니다. 배포된 서버와 로컬 서버 등을 호출해 보면서 인프라와 백엔드에 대해서도 알아봅니다. 보안이나 프로젝트 디렉토리 구조 등 현업에서 조금 더 나은 프로젝트를 위해 해볼만한 고민들을 함께해 봅니다. 📍 개요 1강. 로그인의 개념과 어플리케이션 구조 알아보기 - 로그인의 기술적 정의와 실제 서비스에서의 사용도 - 직접 로그인 화면과 Mock API를 세팅 - 구성해본 로그인 로직이 실제 서비스에 적용되기 위해서 필요한 부분 확인 ➕ 로그인이란? 📌 로그인의 정의 알아보기 1) 시스템에 엑세스 하기 위해 2) 제한된 파일과 시스템에 엑세스..
-
[React] Udemy 강의 노트 11-2WEB Dev/StudyNote 2023. 2. 26. 01:41
리액트 Portal 을 통해 모달 추가하기 - 리액트 포털로 컴포넌트를 내가 원하는 DOM 트리의 특정 위치에서 렌더링 하여 사용할 수 있다. - 포털을 이용하기 위해 public 폴더에 index.html에서 수정을 해주어야 한다. -div.root 위에 overlays라는 id를 갖는 div를 추가해 모달과 백드롭을 포털한다. 카트 및 모달 State 관리 - 장바구니가 보이는 state와 보이지 않는 state가 있다. - state 가 둘 이상이면 리액트로 state를 관리해야 한다. - 리액트가 이 컴포넌트에 대해 state를 관리하고 최신 state 스냅샷에 접근한다. - 함수를 갖는 프롭스 이름에 대한 규약은 on으로 시작하는 것이다. 장바구니 컨텍스트 추가 - 장바구니 데이터를 컨텍스트로 ..
-
[React] Udemy 강의 노트 11-1WEB Dev/StudyNote 2023. 2. 20. 01:22
설정 시작하기 - 이전까지 useEffect, useReducer 등의 훅을 살펴보았다. - 모든 핵심 리액트 기능을 활용하여 음식 주문 앱을 만든다. - 일반적인 ui를 위한 UI 폴더와 header등을 넣는 Layout 폴더, 아이템을 담는 Meals 폴더와 장바구니인 Cart 폴더를 만든다. "헤더" 컴포넌트 추가하기 - 헤더는 상단에 있는 툴바 - 이미지도 import 할 수 있다. import mealsImage from '../../assets/meals.jpg'; , - 임포트 하면 완성된 애플리케이션에 이미지가 포함되도록 반환된다. - 서버에 배포하여 해당 이미지에 대한 링크를 만들 수 있고 그 링크는 만들어진 코드에 동적으로 삽입된다. "장바구니" 버튼 컴포넌트 추가하기 - "식사" 컴포..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 06WEB Dev/StudyNote 2023. 2. 12. 22:18
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-02-12 21:00 6일차 안내 - 책 요약 정리 4장 프로젝트 개발 4.2 레이아웃 네비게이션 바 chakra-ui를 이용해 네비게이션 바 UI 생성 4.2 개별 영화 상세 정보 영화 상세 정보 리졸버 영화의 자세한 개별 정보를 보여주기 위해서는 목록이 아닌 각 영화 하나에 대한 요청을 처리하는 필드가 필요 이를 위해 film 쿼리 필드를 생성 개별 영화 페이지 구성 영화 개별 UI를 보여주기 위해 영화별 페이지 구성 react-router의 URL 파라미터를 통해 동적으로 구성하고 파라미터 값으로 film 필드에 대한 쿼리를 실행 react-router의 컴포넌트에서 ..
-
[React] Udemy 강의 노트 10-2WEB Dev/StudyNote 2023. 2. 9. 22:56
useReducer & useEffect - 입력은 전체 폼의 일부이다. - 코드가 너무 일찍 실행된 경우에는 useEffect는 state 업데이트 후에만 실행됐었다. - 의존성은 state 전체이지 유효성이 아니다. - 객체의 특정 속성을 추출하는 객체 디스트럭처링을 이용할 수 있다. - const { isValid: emailIsValid } = emailState; 로 emailState의 isValid state를 emailIsVaild라는 상수로 별칭할당을 할 수 있다. 중첩 속성을 useEffect에 종속성으로 추가하기 - useEffect()에 객체 속성을 종속성으로 추가하기 위해 distructuring을 사용 const { someProperty } = someObject; useEff..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 05WEB Dev/StudyNote 2023. 2. 5. 23:52
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-02-05 21:00 5일차 안내 - 책 요약 정리 4장 프로젝트 개발 4.2 레이아웃 페이지 처리 SPA의 경우 ( MPA: 멀티페이지 (여러 개의 페이지를 받아오는 경우))실제 페이지를 이동시키지 않고, 새로운 페이지를 화면상에 렌더링 할 수 있도록 한다. react-router-dom으로 사용 (책과 다르게 react-router-dom을 v5 -> v6 으로 올리고 문법도 수정해야함 https://discord.com/channels/905448761218699295/1045647017440968704/1071780891753455616 Discord - A New ..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 04WEB Dev/StudyNote 2023. 1. 29. 22:25
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-01-29 21:00 4일차 안내 - 3일차 115페이지까지는 별도로 따라왔음 책 요약 정리 4장 프로젝트 개발 4.1 영화 목록 페이지네이션 커서 기반 페이지네이션 / 오프셋 기반 페이지네이션 커서 기반 페이지네이션 오프셋 기반 페이지네이션 방법은 DB의 처리 방식과 관련이 깊고 대중적으로 사용되고 있지만 데이터가 많아지면 많아질수록 DB에 부하가 커진다. 커서 기반 페이지네이션은 클라이언트에서 특정 데이터의 고유 정보를 서버로 전송하고, 서버는 그 특정 고유 정보 이후의 데이터만 가져온다. 고유 아이디와 같은 인덱스를 기준으로 데이터를 비교하므로 전체 데이터베이스를 스캔..
-
[React] Udemy 강의 노트 10-1WEB Dev/StudyNote 2023. 1. 26. 23:38
모듈 소개 - 세 가지 매우 중요한 개념이자 고급 기능 - 이펙트, 리듀서, 컨텍스트 "Side Effects"이란 무엇이며 useEffect를 소개합니다 - 이펙트 == 사이드이펙트 - 리액트 앱의 컴포넌트는 주요한 임무가 하나 있다 -> UI를 렌더링 - 화면에 무언가를 가져오고 사용자가 상호작용하게 하는 것 -> 버튼이 클릭되거나 텍스트가 입력되는 것 - 사용자 이벤트에 리액트를 사용하여 컴포넌트를 재평가하고 실제 DOM을 조작한다. - 이펙트는 앱에서 일어나는 모든 것을 말한다. - http 리퀘스트를 보내거나 브라우저 로컬 스토리지에 무언가를 저장하거나 하는 작업들은 화면에 무언가를 그리는 것과는 관계가 없다. 이것은 리액트가 화면에 무언가 그릴 필요가 없기 때문에 리액트와 관련이 없다. - 일..