본문 바로가기

Sparta x 이노베이션 캠프

 (69)
WIL: Axios Axios 인스턴스, 인터셉터란? 인스턴스 만들기 사용자 지정 config로 새로운 Axios 인스턴스를 만들수 있다. axios.create([config]) const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); 인스턴스 메소드 다음은 사용 가능한 인스턴스 메소드입니다. 지정된 config가 인스턴스 config와 결합됩니다. axios#request(config) axios#get(url[, config]) axios#delete(url[, config]) axios#head(url[, config]) axios#optio..
TIL : API란 무엇인가요? API는 손님(프로그램)이 주문할 수 있게 메뉴(명령 목록)를 정리하고, 주문(명령)을 받으면 요리사(응용프로그램)와 상호 작용하여 요청된 메뉴(명령에 대한 값)를 전달합니다. 쉽게말해 API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체. API의 역할 1. API는 서버와 데이터베이스에 대한 출입구 역할을 한다. 데이터베이스에 저장된 정보들이 모든 사람들에게 접근되지 않기 위해 서버와 데이터베이스에 대한 출입구 역할을 하며, 허용된 사람들에게만 접근성을 부여해준다. 2. API는 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다. 여기서 애플리케이션은 우리가 흔히 아는 스마트폰 어플, 프로그램을 말한다. API는 애플리케이션과 기기가 데이터를 원활히 주고받을 수 있도록 돕는 역할을 한다. ..
TIL)React 키워드 🔐 리덕스에서 미들웨어 청크의 역할은 뭘까요? 미들웨어는 액션이 디스패치 된 다음 리듀서에서 액션을 처리하기 전에 액션을 받아와서 액션을 취소시키거나 다른 종류의 액션을 추가적으로 디스패치하는 등 업데이트 이전에 추가적인 작업을 할 수 있도록 도와주는 역할이다. 즉 리듀서 내 로직이 실행되는 사이의 중간다리 역할을 해줄 함수들을 작성하는 공간이다. thunk의 역할 1) thunk를 사용하면 우리가 dispatch를 할때 객체가 아닌 함수를 dispatch 할 수 있게 해준다. 즉 dispatch(객체)가 아니라 dispatch(함수)를 할 수 있게 되는 것. 2) 그래서 중간에 우리가 하고자 하는 작업을 함수를 통해 넣을 수 있고, 그것이 중간에 실행이 되는 것이다. 그래서 아래 흐름과 같이 실행이 되..
TIL) 논리 연산자 || OR 자바스크립트에는 세 종류의 논리연산자 ||(OR) , &&(AND), !(NOT) 가 있다. 논리 연산자는 피연산자로 불린형 뿐만 아니라 모든 타입의 값을 받을 수 있다. 연산 결과 역시 모든 타입이 될 수 있다. || (OR) 불린 값을 조작하는데 쓰인다. 인수 중 하나라도 true면 true를 반환하고, 아닐 시 false를 반환한다. OR연산자는 이항 연산자이므로 아래와 같이 네가지 조합이 가능하다. alert( true || true ); // true alert( false || true ); // true alert( true || false ); // true alert( false || false ); // false 피연산자가 불린형이 아니면, 평가를 위해 불린형으로 변환된다. 예를 들어..
TIL) React : DOM, 서버리스 DOM이란? Document Object Model의 줄임말로서, 문서 객체 모델이다. 즉, HTML문서를 객체화 한 것이다. 이 객체는 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여, 문서구조나 스타일, 내용 등을 변경 할 수 있게 해준다. DOM은 nodes, objects로 문서를 표현하는데 DOM의 객체지향 표현이며, 이는 Javascript와 같은 스크립트 언어로 접근이 가능하다. DOM을 수정하는데 사용되는 property, method, event는 모두 objects로 표현이된다. DOM이 있기 때문에, javascript가 웹페이지 or XML에 관련된 정보를 가질 수 있다. 또한 DOM은 프로그래밍 언어와 독립적으로 디자인 되어, javascript뿐만 아니라 pytho..
TIL) async & await async와 await 라는 특별한 문법을 사용하면 프로미스를 좀 더 편안하게 사용할 수 있다. async함수 asyncs는 fuction 앞에 위치한다. async function f() { return 1; } function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스 (resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다. 아래 예시의 함수를 호출하면 result가 1인 이행 프라미스가 반환된다. async function f() { return 1; } f().then(alert); // 1 명시적으로 프라미스를 반환하는 것도 가능한데, 결과는 동일하다. async function f() { re..
TIL) Promise Promise란? -Promise는 주로 웹서비스를 구현 할 때 원활한 데이터 통신을 위해 활용됩니다. -웹 페이지에서 서버로 데이터를 요청했을 때, 데이터를 모두 받기 전에 웹에 출력하려고 하는 경우를 방지하기 위해 활용 -Promise를 사용하지 않고 실행시키면 먼저 로직이 끝나는 순서로 출력이 되지만, Promise를 사용하면 순서대로 출력을 시킬 수 있습니다. 프로미스의 3가지 상태 Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태 2-1) Pending new Promise(); new Promise((resolve, rej..
4주차 : React로 Redux를 활용한 My To Do List 만들기. map is not a function Goal: My Todo List 만들기 React 입문 주차 개인 과제를 react-router-dom, styled-components, redux를 사용해서 My Todo List를 다시 만들어봅니다. features : 구현해야 할 기능 Create Todo Read Todos, Todo Update Todo Delete Todo Requirement : 과제에 요구되는 사항 공통 todos 데이터는 리덕스를 사용해서 전역으로 상태를 관리합니다. todos 모듈은 **Ducks 패턴**으로 구현합니다. 컴포넌트 구조는 자유롭게 구현하되, 본인이 그렇게 나눈 이유에 대해서 README에 작성합니다. 메인 페이지 디자인과 화면 구성은 자유롭게 구현합니다. Todo의 상태에 “완료” 그룹과 “진행중" ..
반응형

티스토리툴바