모듈 소개 - 세 가지 매우 중요한 개념이자 고급 기능 - 이펙트, 리듀서, 컨텍스트 "Side Effects"이란 무엇이며 useEffect를 소개합니다 - 이펙트 == 사이드이펙트 - 리액트 앱의 컴포넌트는 주요한 임무가 하나 있다 -> UI를 렌더링 - 화면에 무언가를 가져오고 사용자가 상호작용하게 하는 것 -> 버튼이 클릭되거나 텍스트가 입력되는 것 - 사용자 이벤트에 리액트를 사용하여 컴포넌트를 재평가하고 실제 DOM을 조작한다. - 이펙트는 앱에서 일어나는 모든 것을 말한다. - http 리퀘스트를 보내거나 브라우저 로컬 스토리지에 무언가를 저장하거나 하는 작업들은 화면에 무언가를 그리는 것과는 관계가 없다. 이것은 리액트가 화면에 무언가 그릴 필요가 없기 때문에 리액트와 관련이 없다. - 일..

GraphQL과 타입스크립트로 개발하는 웹서비스 작업 중 클라이언트 측 graphql - GraphQL Code Generate 세팅에서 visitFn.call is not a function 에러 발생 기존 GraphQL 버전 16.6.0에서 15.7.2로 다운그레이드 하고 해결 현재 GraphQL 및 Codegen의 버전은 아래와 같음 "dependencies": { "@apollo/client": "^3.7.3", "@chakra-ui/react": "^2.4.6", "@emotion/react": "^11.0.0", "@emotion/styled": "^11.0.0", "@graphql-codegen/add": "^2.0.2", "@graphql-codegen/cli": "^1.21.8", "@g..

냥이집사님의 Web-animation 노션을 보고 CSS Animation을 공부합니다. Transition 이란? transtion이란 CSS 속성값이 변할 때, 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것 transition: transition-property transition-duration transition-timing-function transition-delay Transition의 속성들 transition - property property 속성이란 뜻으로 어떤 속성에 transition 효과를 줄 지 설정해줄 수 있음 속성값(all, none, property, initial, inherit)으로 all: 기본값으로 모든 속성에 transition 효과를 적용 none: 속성들..

⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-01-01 21:00 2일차 대비 프로젝트 준비 과정 3장 프로젝트 준비 3.1 프로젝트 소개 무료로 배포된 지브리의 명장면 사진, 포스터를 감상하고 장면에 대한 "좋아요" 및 감상평을 남길 수 있는 간단한 서비스 제작 기능 요구사항 - 회원가입과 로그인이 가능해야 합니다. - 유저는 영화 목록을 확인할 수 있어야 합니다. - 유저는 특정 영화의 명장면 목록을 확인할 수 있어야 합니다. - 유저는 명장면에 "좋아요"를 누를 수 있고, 감상평을 남길 수 있어야 합니다. "좋아요" 누르기와 감상평 남기기는 로그인 상태에서만 가능해야 합니다. - 유저는 프로필 사진을 업로드할 수..

모듈 소개 - 더 많은 문제를 해결하게 해주는 리액트 툴인 프래그먼트, 포털, ref에 대해 알아본다. JSX 제한 사항 및 해결 방법 - JSX는 컴포넌트에서 반환하는 코드이다. - JSX는 제한 사항이 있다. - 루트 수준에서 JSX 요소가 인접해 있으면 오류가 발생한다. 루트 수준에서는 하나의 JSX요소로 래핑되어있어야 한다. - div 같은 HTML 요소 대신 사용자 정의 컴포넌트를 이용할 수도 있다. - div를 이용할 때는 div 수프라는 문제가 생긴다. 시맨틱 의미를 갖지 않는 불필요한 div가 실제 DOM으로 렌더링 된다는 점이다. 컴포넌트 감싸기(wrapper) 만들기 - div soup를 해결하는 트릭을 만든다. - 별도의 파일로 Wrapper.js 컴포넌트를 만들고 props.chil..

"사용자" 컴포넌트 추가하기 - 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에 ..