WEB Dev/StudyNote
-
[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 리퀘스트를 보내거나 브라우저 로컬 스토리지에 무언가를 저장하거나 하는 작업들은 화면에 무언가를 그리는 것과는 관계가 없다. 이것은 리액트가 화면에 무언가 그릴 필요가 없기 때문에 리액트와 관련이 없다. - 일..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 Pre02WEB Dev/StudyNote 2023. 1. 2. 00:35
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-01-01 21:00 2일차 대비 프로젝트 준비 과정 3장 프로젝트 준비 3.1 프로젝트 소개 무료로 배포된 지브리의 명장면 사진, 포스터를 감상하고 장면에 대한 "좋아요" 및 감상평을 남길 수 있는 간단한 서비스 제작 기능 요구사항 - 회원가입과 로그인이 가능해야 합니다. - 유저는 영화 목록을 확인할 수 있어야 합니다. - 유저는 특정 영화의 명장면 목록을 확인할 수 있어야 합니다. - 유저는 명장면에 "좋아요"를 누를 수 있고, 감상평을 남길 수 있어야 합니다. "좋아요" 누르기와 감상평 남기기는 로그인 상태에서만 가능해야 합니다. - 유저는 프로필 사진을 업로드할 수..
-
[React] Udemy 강의 노트 9WEB Dev/StudyNote 2022. 12. 27. 00:28
모듈 소개 - 더 많은 문제를 해결하게 해주는 리액트 툴인 프래그먼트, 포털, ref에 대해 알아본다. JSX 제한 사항 및 해결 방법 - JSX는 컴포넌트에서 반환하는 코드이다. - JSX는 제한 사항이 있다. - 루트 수준에서 JSX 요소가 인접해 있으면 오류가 발생한다. 루트 수준에서는 하나의 JSX요소로 래핑되어있어야 한다. - div 같은 HTML 요소 대신 사용자 정의 컴포넌트를 이용할 수도 있다. - div를 이용할 때는 div 수프라는 문제가 생긴다. 시맨틱 의미를 갖지 않는 불필요한 div가 실제 DOM으로 렌더링 된다는 점이다. 컴포넌트 감싸기(wrapper) 만들기 - div soup를 해결하는 트릭을 만든다. - 별도의 파일로 Wrapper.js 컴포넌트를 만들고 props.chil..
-
[React] Udemy 강의 노트 8WEB Dev/StudyNote 2022. 12. 26. 01:18
"사용자" 컴포넌트 추가하기 - for은 class처럼 htmlFor로 사용해야 한다. - form의 기본 제출 동작을 막기 위해 e.preventDefault()를 사용한다. - useState에서 객체의 state를 업데이트 할 때는 setUserDate((prev)=>{ return {...prev, name: e.target.value} }) 처럼 함수 return 값으로 기존 정보 prev를 Deep copy 해주고 key로 업데이트 한다. 재사용 가능한 "카드" 컴포넌트 추가하기 - props.children를 통해 컴포넌트의 여닫는 태그 사이의 JSX코드에 접근할 수 있다. - 사용자 정의 컴포넌트들은 이 className이라는 속성과 어떻게 작업해야 하는지 모른다. - 그래서 props에 ..
-
[React] Udemy 강의 노트 7WEB Dev/StudyNote 2022. 12. 21. 00:59
모듈 소개 - 오류에서 자유로운 코드를 작성할 수는 없다. - 오류를 찾아서 수정하는 것은 개발자의 덕목이다. - 리액트 오류 메시지를 이해하고 디버그하고 분석하는 방법과 코드를 이해하는 방법을 배운다. 리액트 오류 메시지 이해하기 - 스스로 오류를 파악하기 - 오류가 발생한 곳과 몇번째 줄인지도 확인할 수 있다. - IDE도 오류를 탐색할 수 있다. 코드 흐름 및 경고 분석 - 콘솔이나 IDE에 경고나 나타나지 않는 오류는 코드 순서를 따라가면서 확인해 볼 수 있다. 중단점(breakpoint) 작업하기 - 개발자 센터의 sources 탭에서 현재 웹페이지에서 사용중인 소스 파일을 찾아볼 수 있다. - npm start 스크립트는 브라우저에 코드를 보내서 실행될 수 있도록 하고 브라우저에 추가적인 정보..
-
[React] Udemy 강의 노트 6WEB Dev/StudyNote 2022. 12. 20. 00:22
모듈 소개 - 리액트로 웹앱을 구축하는 것은 컴포넌트를 만들고 로직이 동작하도록 하는 것이다. - 그리고 앱을 스타일링 하는 것이기도 하다. - 조건부로 혹은 동적인 방법으로 스타일을 설정하는 방법을 알아보자 - 스타일을 적용하는 컴포넌트의 범위를 정하기 위해 전역스타일로 추가하지는 않는다. - Styled Components 사용 - css 모듈이라는 개념 살펴보기 동적 인라인 스타일 설정하기 - 스타일이 적용된 방식 - 일반적인 class 선택자로 css 설정 - trim() 메소드는 과도하게 설정된 공백을 지워준다. - inline style 속성에 객체로 조건문을 설정해 줄 수 있다. style={{ borderColor: !isValid ? 'red' : 'black', color: !isVal..
-
[React] Udemy 강의 노트 5WEB Dev/StudyNote 2022. 12. 12. 00:03
모듈 소개 - 목록과 조건부 컨텐츠를 어떻게 렌더링 하는지 알아보기 - 페이지에서 데이터 배열을 출력하고 다양한 조건에서 다양한 컨텐츠 보여주기 데이터의 렌더링 목록 - 배열의 요소별로 하나씩 expense 아이템을 렌더링 하기 - JSX코드에서 자바스크립트를 실행하기 위해 JSX코드 안에 {} 중괄호를 사용 - 표준 자바스크립트 배열 메소드인 .map() 메소드 - map은 다른 배열을 기반으로 새로운 배열을 생성하는데, 원본 배열에 있는 모든 요소들을 변환한다. - 이 변환 작업을 적용하기 위해 함수 형태로 함수가 실행되면 배열의 모든 아이템에 map 을 호출해 새로운 배열에 추가한다. - JSX코드의 일부로 JSX요소의 배열을 가졌다면 리액트는 JSX요소를 나란히 렌더링 할 것이다 ([, , ]) ..
-
[React] Udemy 강의 노트 4-2WEB Dev/StudyNote 2022. 11. 30. 23:06
양식 입력 추가하기 - 양식 입력을 위한 form 태그를 별도로 분리한다. - input[type="number"]는 step을 설정할 수 있고 - input[type="date"]는 날짜 선택기를 제공하고, 날짜의 범위를 min과 max로 지정할 수 있다. 사용자 입력 리스닝Listening - 입력에서 발생하는 이벤트를 가지고 와서 저장하기 - 우선 요소에게 리스너를 추가해야 한다. - onInput이나 onChange는 같은 타입의 input에 사용할 수 있다. - onChange={함수} 로 붙일 수 있고 onChange={함수()}처럼 실행하지 않는다. - addEventListener를 사용했 던 것처럼 event를 인자로 주게 되면 자동적으로 변경 이벤트가 발생했을 때 이벤트 객체를 받을 수..
-
[React] Udemy 강의 노트 4-1WEB Dev/StudyNote 2022. 11. 29. 18:35
모듈 소개 - 리액트의 중요한 기본 개념 - 컴포넌트, props - 사용자와 상호작용에 대해 공부 - 사용자 이벤트 다루기 - state - 리액트는 선언적인 접근 방식을 사용. - 원하는 목표 상태를 정의하고 리액트가 그 상태에 도달하도록 처리 이벤트 리스닝 및 이벤트 핸들러 수행하기 - 이벤트가 상태의 변화를 촉발 - 클릭했을 때 리액트가 반응하도록 하는 것은 내장된 HTML 요소에서 수신할 수 있는 모든 DOM 이벤트에 접근할 수 있다. - JSX요소에서 props를 추가해서 이벤트 리스너를 적용한다. ex) onClick과 같이 on으로 시작 - 이런 on props는 함수가 필요하고 on props로 함수를 실행한다. - 함수를 전달할때는 return 전에 함수를 선언하고 ()를 빼고 실행한다..