<노마드 10주 스터디> 공부 일지

Cleanup function 에 해당하는 부분은 useEffect 안에서 return하는 곳!위의 코드에서는 버튼을 눌러서 컴포넌트가 사라질 때 실행되게 하는 함수이다.

block 요소에 width 가 있는 경우, margin에 auto를 주면 가운데로 자리 잡는다.transform: skewX(-14deg) -14도 만큼 (우측으로) 기울이게 함.box-sizing: border-box => 보더나 패딩이 들어가도 요소의 px를 정확

5와 6버전 차이를 참고할 링크.https&#x3A;//reactrouter.com/en/6.11.1/upgrading/v5

만든 html, css, javascript로 웹사이트로 만들어줌npm i gh-pages 로 설치한다2\. npm run build 명령어 입력 => 코드 압축, 최적화한 build 폴더 생김package.json 에서 "scripts": 내부에 deploy와 pre

App : BrowserRouter 사용Movie : Home API에서 props로 api 받아서 jsx 구성해서 보여줌Home :(Route path="/") & Movie 컴포넌트 사용\- api를 fetch해서 useState에 값 저장...Detail : (R

제출했던 과제를 다듬어서 기록할 공간.

overloading 외부 라이브러리는 오버로딩을 많이 쓰기에 알아두면 좋다함수가 여러개의 콜 시그니처를 가졌을 때 발생함.매개 변수와 변수 타입 또는 리턴 타입이 다른 여러 버전의 함수를 만들고 콜 시그니처를 작성하여 다양한 방식으로 호출 가능.

인터페이스클래스제네릭 (콜시그니처함수 확장판 느낌)콜 시그니처를 작성시 타입을 미리 알 수 없을 때!타입스크립트가 타입을 유추하고 콜 시그니처를 만듬.즉 선언 시점이 아니라 생성 시점에 들어온 값에 따라 타입을 유추해서 자동으로 명시해서 다양한 타입을 사용할 수 있도록

TS PlaygroundURL 단축 사이트https&#x3A;//huchu.link/

정리해야하지만 일단 기록~다른 클래스가 상속받을 수 있는 클래스. 인스턴스 생성은 불가하다.공통된 틀을 가질 수 있는 장점이 있다.constructor 내부에 접근제한자, 프로퍼티: 타입을 입력한다추상클래스 활용1\. 다른 클래스가 가져야 할 프로퍼티와 메소드 명시해줌

한두가지 스타일만 다른 컴포넌트, 코드 중복 피하는 방법1\. 구현 부분에 props 설정 \- 컴포넌트에 데이터를 보내는 방식2\. 컴포넌트 확장(extends) \- 스타일 컴포넌트 생성시 html el 대신 상속 받고싶은 컴포넌트 이름 입력. ex

라우터를 배열 형식으로 표현 가능DOM History API 사용해서 URL 업데이트, 기록 스택을 관리.📂 index.jsrender 대상 변경&lt;App /> 대신에 RouterProvider render&lt;RouterProvider router={route

라우터 구성/ 홈화면/:id -> /btc -> Coin Detail /:coinId 에 url 파라미터가 뭐로 들어왔는지는 useParmas로 캐치createGlobalStyle : 전역 스타일을 처리하는 특수 Styled Component를 생성하는 helper 함

coin traker 간단히 만들어보기.npm 패키지 명령어\--save란?\--save는 npm 패키지를 프로젝트의 package.json 파일의 dependencies 섹션에 자동으로 추가하도록 지시하는 옵션입니다. 이 옵션을 사용하면 패키지를 설치할 때, 패키지

코인 트래커부분 코드 작성해보기...

상태 관리 >상태관리 라이브러리를 쓰지 않았을 때 상황 다크모드 토글 함수와 그 불린값이 📂 App 에 있음. 📂 Router 에서 `` 컴포넌트에서 다크모드 토글 함수의 값이 필요함 📂 App -> 📂 Router -> 📂 Coins props 보내줘야

input마다 setState, onChange Fn 만들어야 함form validation 많더라도 유효성 검사가 더 편리함register 함수가 다 함. setState, onChnage 이벤트 핸들러 필요 없다.form의 onSubmit은 handleSubmit이

애니메이션 시작 명시 Prop -> initail.애니메이션 최종 Prop -> animate.mation 사용은 컴포넌트에 바로 prop를 쓰거나 variants 객체를 만들어서 속성값을 주거나.transition:1\. type: 기본적으로 "spring". "tw

MotionValue애니메이션 내의 수치를 트래킹. 방향과 값에 따라 다른 모습을 보여줄 수 있음.MotionValue는 React State가 아니기 때문에 Motion Value값이 바뀌어도 리랜더링이 일어나지 않는다useMotionValue의 x와 와 연결.애니

원하는 로고의 svg를 카피해와서 path를 motion.path로 변경한다.fill과 stroke 값을 바꿔서 테두리만 보이게 할 수 있다.fill="transparent" : 투명, fill="currentColor" : Svg의 color를 갖겠다stroke="w

헤더 파트motion.nav로 생성position을 fixed로.스크롤이 감지하기. const { scrollY } = useScroll();스크롤이 내려가면 투명색으로 변경시키기. scrollY.get() > 80 이 조건!const navAnimation = use

홈파트 간단하게 메모하기.이미지 배경으로 둘 때.

다른 모양새의 무비앱...https&#x3A;//codesandbox.io/s/react-js-master-final-challenge-3hct77더 다듬을 부분1\. 모달창 스크롤바(기본 크롬 border-radius 깨지고 못생김)참고할 블로그https&#x3A;/

NextJs 소개 글 전부 읽어보기...https&#x3A;//nextjs.org/learn/foundations/about-nextjs강의 일단 듣자

layout 패턴 _app.js 에서 공통 컴포넌트 사용할 때 전체 화면의 청사진 같은 파일. NavBar를 먼저 그려지고, ``에 각 컴포넌트들이 불러와진다. coutom app component를 사용할 때 쓰는 layout 패턴을 알아보자 children: