JavaScript17 [Javascript] Fetch API ✨ Fetch API 란? 원격 API를 호출할 수 있도록 하는 함수이며, 전달인자로 url 과 options 를 받는다. url 에는 API 주소를 입력하고, options 에는 request 내용을 세부적으로 추가한다. let url = 'http://something.com' let options = { method: 'POST', body: JSON.stringify({ username:"아이스", text:"아메리카노" }), headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' } } fetch(url, options) .then((response) => console.log("response:", respons.. 2021. 5. 27. [Javascript] Promise (프로미스) ✨ Promise 란? 향후 사용하게 될 비동기 연산의 결과값을 처리하도록 도와주는 JS 객체이다. 비동기 메서드에서 동기 메서드처럼 값을 반환할 수 있다. 예제) const testing = new Promise((resolve, reject) => { if (something) resolve(something) else reject(error message) }) testing .then(() => return something2) .catch(() => return error) .finally(() => return final) ✨ Promise 의 3가지 상태: Fulfilled: 연산이 성공적으로 완료된 상태이다. Rejected: 연산이 실패한 상태이다. Pending: Resolve 나 Re.. 2021. 5. 27. [Javascript] 비동기, 동기 함수 (Asynchronous, Synchronous) 란? ✨ Synchronous vs Asynchronous 동기식: 코드의 execution 이 요청과 동시에 일어나며, 순차적으로 실행된다. 비동기식: 코드의 execution 이 요청과 동시에 일어나지 않으며, 병렬적으로 실행된다. 예시) 작업 목록: 1. 화면에 영상 목록을 띄워라 2. 첫 번째 영상을 틀어라 3. 하단에 추천 영상 목록을 띄워라 동기식: 1 실행 -> 2 실행 -> 영상 정보 요청 -> 영상 정보 수신 -> 영상 출력 -> 3 실행 비동기식: 1 실행 -> 2 실행 -> 3 실행 |_ 영상 정보 요청 -> 영상 정보 수신 -> 영상 출력 동기식 방법을 따르면 첫 번째 영상의 데이터가 모두 들어오고, 끝까지 재생되기 전까지는 3을 실행할 수 없다. 비동기식 방법을 따를 경우, 2가 실행되.. 2021. 5. 27. [React] React 의 생명주기(Life Cycle) 란? ✨ Life Cycle 이란? 컴포넌트가 브라우저상에 나타나고(Mount), 업데이트 되고(Update), 사라지는 일련의 과정을 칭한다. 이러한 과정에서 호출되는 메서드를 Life Cycle Method 라고 부르며, 클래스형 컴포넌트에서만 사용할 수 있다. (함수형 컴포넌트는 React 16.8 버전부터 도입되었으며, 현재는 useState 나 useEffect로 더욱 많이 활용된다) 각 단계별로 호출되는 메서드의 순서와 종류가 다르다. ✨ 1. Mount : DOM 에 엘리먼트를 넣는 작업 constructor: 컴포넌트 클래스의 생성자 함수이자, 컴포넌트가 생성될 때 호출되는 함수이다. State와 다른 값들의 초기값을 지정할 때 사용한다. 또한, props 를 매개변수로 받고, super(pro.. 2021. 5. 27. [React] React 에서 이미지(Image) 첨부하기 ✨ Img tag 란? 이미지를 불러올 수 있는 HTML 태그를 의미하며, DOM을 통해서도 작동 가능하다. React 에서의 img 태그는 기본적으로 HTML 태그와 동일한 attribute 를 가지며, class 만 className (리액트 문법) 으로 변경하여 지정해주면 된다. ✨ React 에서 이미지 불러오기: 웹 url 을 통해 이미지를 불러오고자 한다면 src='###' 안에 url 을 문자열로 작성해주면 된다. 로컬 디렉토리에 저장되어 있는 이미지를 불러오기 위한 방법으로는 두 가지가 있다. 1. React App 의 Public 폴더 내에서 불러오는 방법 2. 상대 경로와 import문을 활용하여 불러오는 방법 ✨ 1. Public 폴더 내에서 불러오기 React App 최초 생성 시 .. 2021. 5. 9. [React] React 의 상태 (State) 와 이펙트 훅(Effect Hook) ✨ State 란? 컴포넌트 내에서 동적으로 변경되는 값이다. ✨ State 의 특징은? 컴포넌트 내부에서 제어(관리)된다. State 업데이트는 비동기적(Asynchronous)이다. DOM 은 State 가 변경될 때마다 re-rendering 되지 않으며, 여러 차례의 setState 가 있다면 전부 통합하여 한 번에 re-rendering 한다. State 를 props 로 자식 컴포넌트에 전달할 수 있다. (캡슐화 되었기 때문이다.) ✨ State 를 사용하는 방법은? 함수형 컴포넌트에서는 useState 라는 훅(Hook)을 통해 사용할 수 있다. useState 를 활용하여 state 의 초기값을 지정해줄 수 있으며, 초기값은 어떠한 자료형이든 될 수 있다. (문자열, 배열, 객체 등) se.. 2021. 5. 9. [React] 리스트의 Key ✨ React 에서 Key란? 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트이다. React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. function NumberList(props) { return ( 1 2 3 ) } Key 의 특징은? 고유한 값이어야 하며, 형제 노드인 다른 아이템과의 중복된 키 값은 허용되지 않는다. 또한, 컴포넌트의 구성요소로 전달되지 않는다. (따라서 props 에 key 가 포함되었다 해도 props.key 로 사용 불가하다) 주의할 점 컴포넌트 하나를 여러 차례 반복해서 나열할 경우 컴포넌트 자체가 하나의 list 가 된다. 이 경우, 컴포넌트 자체의 key 값을 변경해주어야 한다. function ListItem(props) { .. 2021. 5. 9. [Javascript] 함수 : Currying (커링) ✨ Curry 함수란? 함수를 반환(return)하는 고차함수의 일종이다. 이때, 반환되는 함수를 클로저(Closure)라고 칭하기도 한다. function curry(func) { // curry() 는 커리함수이다 return (function closure(something){ // callback() 는 클로저이다 return (console.log(something)) }) } ✨ Currying(커링)이란? 여러 개의 매개변수를 단일 호출에 처리하는 함수를, 각각의 매개변수가 개별로 호출될 수 있도록 변환하는 작업을 커링(Currying)이라고 한다. function sum(a, b) { // 일반 함수 sum() 을 커링하여 변환해보도록 한다. return a + b; } function c.. 2021. 5. 9. 이전 1 2 다음