state, effect, ref hooks 친구들을 모두 활용할 수 있는 즐거운 sticky!window scroll이 아니니까 ref로 target를 지정한다. target의 움직임을 감지하는 함수를 만들고 움직일 때마다 함수를 실행한다. state값에 일정 y값
지도를 띄우자 내 마음에 지도를 띄우자 시작 키 발급은 생략하고 먼저 지도를 담을 컴포넌트를 만든다. 지도를 넣을 곳에 id를 준다. useEffect으로 api를 호출하는데  소개 hourplace라는 장소 렌탈 플랫폼을 클론 코딩 백엔드와 프론트엔드의 협업을 통해 실질적으로 웹이 만들어지는 플로우를 이해 hourplace
Hook은 state와 생명 주기를 hook into(연동)하게 해주는 함수다. 컴포넌트 간 상태와 관련된 오직을 재사용하기 위해서 (HOC, render props)복잡한 컴포넌트들을 이해하기 어려워서class는 사람과 기계를 혼동시킨다(왜죠?)state와 라이플 사
Coffe 컴포넌트는 데이터를 받아오고 CardList에 데이터를 뿌린다.Coffee 컴포넌트 내부.일단 CDM으로 데이터를 가져오는데 LIMIT이란 상수를 준다. 그리고 이제 button을 ruturn하는데 버튼에 fetchCoffee라는 함수가 있다. limit과
Monsters가 부모 컴포넌트고 CardList에 데이터를 뿌린다. CardList에는 Card컴포넌트가 있다. 이제 Monsters에서 Card를 클릭하면 각 카드에 맞게 이동해야 한다. Card 컨테이너에 onClick을 한다. 그리고 함수 실행. 함수에는 his
Vanilla Javascript로 프로그래밍했던 인스타그램을 React.js로 리팩토링CRA를 사용하여 초기 세팅git을 사용한 첫 번째 협업Fetch를 이용하여 외부 데이터 사용2020.10.05 ~ 2020.10.13 총 9 일HTML,CSSJavaScriptR
조지자 애니메이션!scss에서 애니메이션은 다르게 쓰는 줄 알고 찾아봤는데 저렇게 커스터마이징이 가능하다. 하지만 난 기본 애니메이션도 아직은 서툴기에 기본에 확실할 것이다!키프레임 + 애니메이션으로 간단하게 효과를 줄 수 있다. 요렇게 li안에 animation을 정
search 리액트로 검색 기능을 어떻게 하는지 알아보자! 기본 세팅 먼저 Monster.js가 부모 컴퍼넌트고 fetch로 데이터를 받아온다. CardList, SearchBox 컴포넌트가 있다. ?
세팅 formatCount 함수는 값이 zero인지 체크해준다. 버튼을 누르면 state 값이 증가하는 기본적인 리액트 기능 신기술 state