잡초처럼 버틴 인턴십 후기

추후 업데이트 '직방' 이란 부동산 정보 중개 플랫폼을 모티브로 개발 프로젝트를 진행하였습니다.

state, effect, ref hooks 친구들을 모두 활용할 수 있는 즐거운 sticky!window scroll이 아니니까 ref로 target를 지정한다. target의 움직임을 감지하는 함수를 만들고 움직일 때마다 함수를 실행한다. state값에 일정 y값

지도를 띄우자 내 마음에 지도를 띄우자 시작 키 발급은 생략하고 먼저 지도를 담을 컴포넌트를 만든다. 지도를 넣을 곳에 id를 준다. useEffect으로 api를 호출하는데 ![](https://images.velog.io/images/dongha1992/po

props는 둘 다 사용 가능하다. state는 함수에선 hook으로 사용한다. props를 준다. function 에선 이렇게 비구조 할당으로 값만 받으면 된다. 클래스에서 이벤트가 발생하면 setState를 하고 setState가 되면 render가 된다. 함수에서

프로젝트 영상 https://www.youtube.com/watch?v=aPFeH9Arw9Q 프로젝트 요약 1) 소개 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 컴포넌트가 있다. ![](https://images.velog.io/images/

궁금한 것 import 할 때 컴포넌트를 그냥 가져오기, {}로 가져오기 Provider? React.createContext()?

세팅 formatCount 함수는 값이 zero인지 체크해준다. 버튼을 누르면 state 값이 증가하는 기본적인 리액트 기능 신기술 ![](https://images.velog.io/images/dongha1992/post/0a4c7f86-5959-4904-947

npm install 할 때 --save해야 함. exact는 정확하게 한 곳만을 렌더하게 해주는 것이다. 예를들어 "/"는 3개의 Route 모두 들어있어서 exact가 없으면 다 렌더될 수 있다.Route 컴포넌트 세팅을 끝냈다면 이제 Route를 이동해야 한다.

세팅 및 클릭 이벤트는 1편 참조!https://velog.io/@dongha1992/react-tic-tac-toeBoard에서 state를 관리할 때 배열을 복사했다. 불변성을 지키기 위해서다. 배열, 객체 수정하기그럼 불변성이 가진 이점을 알아보장!특정

react로 만드는 신나는 틱택토다. 이런 신나는 게임이다. 게임 룰 https://namu.wiki/w/%ED%8B%B1%ED%83%9D%ED%86%A0 > 링크 참고 세팅 먼저 리액트로 세팅하기 전에 바닐라 자바스크립트로 틱택토를 어떻게 만드는지 알아보

state 값에 isLoading이 있고 화면이 렌더 되자마자 바로 실행되는 componentDidMount를 이용해 setTimeout으로 setState를 변경했다. 내가 클론하는 니콜라스는 fetch대신 axios를 쓴다고 한다. 이유는 안 알려준다. 그래서 나도

리액트에서 가장 중요한 개념으로 props와 state가 있다. props는 속성, 프로퍼티로 부모컴퍼넌트에서 자식컴퍼넌트로 전달해주는 데이터다. 자식 컴퍼넌트에서는 수정이 불가능하고 수정을 하기 위해서는 최상위 부모컴퍼넌트에서 해야한다(state를 이용해서)state