what gets sent back over to us from the API you'll notice that every single one of these objects has an IP property that uniquely identifies it.API를 통

if you don't still see this "console.log" you can pull open the image definition by doing a another search and then go into the network tag and findin

검색한 이미지가 searchbar 밑에 나올 수 있게 Funtional component 만들기<App.js>somehow communicate our list of images that we just fetched down to the image list.we'

now we've got to provide that autorization thing and that's really long url. all that stuff that propably should not belong directly inside of our app

=> 당장은 가져온 이미지의 갯수를 보여주고 싶다.so to add in state to my app component i need to first initialize my state at the top of this class내 앱 구성요소에 상태를 추가하려면 먼저

이 네트워크 요청은 비동기식 요청이다. Whenever we make a request with axios returns an object called a promise. A promise is a request that will essentially give us

검색했을 때 해당 단어에 해당되는 사진 나오게 하는 법 sementic-ui사용한 레이아웃과 axios를 사용한 fetching data. unsplash API 사용 two of the most commonly used options in react app.

61cba33dd4fa9d53cf0ec9bb0dd1b694.jpg input 상태 관리 :: 이벤트에 등록하는 함수는 이벤트 객체 e 를 파라미터로 받아와서 사용 할 수 있는데 이 객체의 e.target 은 이벤트가 발생한 DOM 인 input DOM 을 가르킴. 그래서 e.target.value를 조회하면 그 값을 알게 됨. input 에 입력하는 ...

f997641c556cf36fb76bb5b632c5d756.jpg useState 를 통해 컴포넌트에서 바뀌는 값 관리 :: 함수형에서의 state관리하기 숫자를 카운트하는 예제.... 여기서 동적으로 바뀌게 하려면..? 함수형 업데이트..?

773b7cd7c12a574146a45bbb27539462.jpg 조건부 렌더링 ::특정 조건에 따라 다른 결과물을 렌더링 "*"표시가 특정조건인 경우에만 붙게 하려면..? 스크린샷 2020-01-05 오후 4.34.04.png

cca0801657fe1ca2c56ddb35594f3e3b.jpg props 를 통해 컴포넌트에게 값 전달하기 :: props 는 properties 의 줄임말 가령, App.js에서 Hello컴포넌트의 name에 접근하려면,,? props이용해서 색상바꿔주려면..? 컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다...

b1807ef62c0d61018abbcd91147e60dd.jpg DOM (Document Object Model) 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하...

82a61c8da3d9d05e9b9955ff80cf828c.jpg Data Structure 데이터에 편리하게 접근하고, 변경하기 위해서 데이터를 저장하거나 조직하는 방법. 모든 목적에 맞는 자료구조는 없음. 데이터를 담고 있으면 자료구조라고 보면 됨 (example ; file) Array [배열] >가장 자주 사용되는 자료구조중 하나 실제로 메모...

f047c57b2c97c5ed7961520e1d24e9fc.jpg es5-> es6로 넘어오면서 많이 사용되는 문법 중 일부를 소개하고자 한다:) 화살표 함수 (Arrow Function) 'function' & 'return' 키워드가 빠지고 ()소괄호로 변경! 인자가 하나일 때는 소괄호 생략이 가능. 인자가 두 개일 때는 생략 xxx.. arrow...

1f14f230cfa0db741e517d94100322db.jpg LifeCycle 컴포넌트 life cycle에 따라 각자 Method가 호출됨 Mounting: 컴포넌트가 mount 되었을 때 , 아래의 순서대로 method가 호출 (1) constructor 컴포넌트가 mount 되기전에 실행되어야 할 부분을 실행되게끔 하는 역할. 처음 한번만...

322f5938302b15d10c43b94c25ee3bb3.jpg AJAX (Asynchronous JavaScript and XML) 자바스크립트를 이용해 비동기식으로 서버와 통신하는 프로그래밍 방식.(구현하는 방식) 사용자가 원할 때만 데이터를 가져오게 api를 호출할 수 있도록 프로그래밍하는 것이 AJAX. 페이지가 열리자마자 절차대로 하나하나 코...

9891be28b09a8a21f766b0f4bfaa52a8.jpg 콜백함수에 대해 알아보던 중.. 별안간 동기/ 비동기를 많이 접하게되는 데- 대체 동기/비동기 그리고 콜백함수는...?! >동기 & 비동기의 비유방식으로는 커피숍의 진동벨로 들 수 있다. 커피숍에가서 음료 주문을 하고 진동벨을 받아와서 자리에 앉아 업무를 본다. 그 사이 진동벨이 울리...

e6cf612f71a97e9e443a351aef4cc935.jpg RESTful API [Representational State Transfer] 이해하기 쉽고 사용하기 쉬운 서비스 API를 제공하기 위해 REST원리에 따라 구현한 것. REST API를 제공하는 웹서비스를 'RESTful 하다'고 할 수 있다. 근데 그 전에... API???? >A...

93ee962ea10e584040cc592512236c94.jpg [javascript] Scope 변수의 범위/영역. 함수를 호출 시, 그 함수가 실행되는 동안 Scope만들게 됨. 그리고 함수가 끝나면 Scope는 사라지는 데 동일 함수를 두 번 호출하면, 두 번째가 실행되는 동안 새로운 다른 Scope를 생성하고 그 후에 두 번째 Scope도 사라...

272d626ab0a1a4b451d9c5150942fc60.jpg [javascript] Class >클래스는 수많은 변수와 함수 중 중복되는 변수/ 함수 하나로 묶을 때 사용하는 문법. 이렇게 클래스로 묶는 이유는 객체 단위로 코드를 그룹화 할 수 있으며 코드를 재사용하기 위함. 클래스는 { xxx: 100 } 처럼 생긴 객체(object)를 잘 설...