코드스테이츠부트캠프 (70) 썸네일형 리스트형 Section2 Unit8 [HTTP/네트워크] 실습 - REST API Section2 Unit8 [HTTP/네트워크] 실습 - REST API 📌 Chapter1. REST API • REST(Representational State Transfer)는 로이 필딩(Roy Fielding)의 박사학위 논문에서 처음 소개되었다. 발표 당시 웹이 HTTP의 설계상 우수성을 제대로 사용하지 못하고 있는 상황을 보고 웹의 장점을 최대한 활용할 수 있는 아키텍처로서 REST를 소개하였고 이는 HTTP 프로토콜의 의도에 맞게 디자인하도록 유도하고 있다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful이라고 한다. • 로이 필딩이 논문에서 제시한 REST 방법론을 보다 더 실용적으로 적용하기 위해 레오나르드 리처드슨(Leonard Richardson)은 REST API.. Section2 Unit7 [HTTP/네트워크] 기초 Section2 Unit7 [HTTP/네트워크] 기초 📌 Chapter1. 웹 애플리케이션 아키텍처 • 클라이언트는 인터넷에 연결된 사용자의 디바이스, 또는 웹에 접근할 수 있는 소프트웨어를 뜻한다. 대표적인 예로 브라우저가 있다. 브라우저는 HTML, CSS, JavaScript 등으로 작성된 코드를 내부 엔진으로 해독하여 사용자가 쉽게 이해할 수 있는 형태의 콘텐츠로 보여주는 역할을 한다. • 서버는 클라이언트가 어떤 자원을 요청하면 해당 요청을 적절하게 처리하는 역할을 한다. 클라이언트느 서버의 자원을 어떻게 사용할 수 있는지 명시해 둔 인터페이스 API에 따라 요청을 전송한다. • 이렇게 클라이언트와 서버가 서로 요청과 응답을 주고받을 수 있는 것은 HTTP 통신 규약 덕분이다. 📌 Chapter.. Section2 Unit6 [React] React State & Props - 과제 Twittler State & Props Section2 Unit6 [React] React State & Props - 과제 Twittler State & Props ⭐️ 과제. React Twittler State & Props → 기본 레이아웃과 css는 코드스테이츠에서 준비한 코드를 fork해서 몇가지 기능만 덧붙이며 학습하는 과제였다. → 상세 컴포넌트를 구현하고, map()을 사용해 리스트를 출력하고, React Router를 적용해 SPA를 구현했으며, state와 props를 이용해 Tweet 전송 Form을 구현했다. 📌 구현 과정 중 Memo 1. defaultValue와 value → defalutValue와 value는 함께 쓰면 둘 중에 하나만 쓰라고 경고가 남. Warning: Tweets contains an inpu.. Section2 Unit6 [React] React State & Props Section2 Unit6 [React] React State & Props 📌 Chapter1. React State & Props • 리액트는 단방향 데이터 흐름(one-way data flow)을 가진다. 따라서 React에서 데이터를 다룰 때는 컴포넌트들 간의 상호 관계와 데이터의 역할, 데이터의 흐름을 고려하여야 한다. • state와 props 모두 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 가지고 있다. props는 함수의 매개변수처럼 컴포넌트에 전달되는 반면 state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다. 즉, props는 컴포넌트를 사용하는 외부자를 위한 데이터이고, state는 컴포넌트를 만드는 내부자를 위한 데이터이다. • 이번 챕터에서 React의 기본 개념인.. Section2 Unit5 [React] React SPA Section2 Unit5 [React] React SPA 📌 Chapter1. React SPA • SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말한다. • SPA의 장점 1. 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 업데이트하기 때문에 SPA는 사용자의 행동에 빠르게 반응한다. 2. 서버 입장에서는 요청받은 데이터만 넘겨주면 되기 때문에 과거와 같은 과부하 문제도 현저히 줄일 수 있다. 3. 화면 전체를 새로 렌더링할 필요가 없기 때문에 보다 나은 사용자 경험을 제공한다. • SPA의 단점 1. 브라우저는 첫 화면 로딩 .. Section2 Unit4 [React] Intro Section2 Unit4 [React] Intro 📌 Chapter1. React Intro • React는 자바스크립트의 UI 라이브러리 • 리액트를 사용하면 UI를 보다 쉽게 구현할 수 있으며, 자바스크립트 문법을 그대로 사용하기 때문에 따로 공부할 문법들이 적다. 또한 현재까지 많은 사용자가 있기 때문에 참고할 레퍼런스가 많으며, 컴포넌트 기반으로 개발을 할 수 있기 때문에 재사용이 용이하게 코드 개발을 할 수 있다. 뿐만 아니라 리액트를 알고 있다면, React-Native를 통해 모바일 개발도 할 수 있다는 장점이 있다. • React의 특징 1. 컴포넌트 기반의 UI 라이브러리 (재사용가능) 2. 선언형 프로그래밍 3. 범용성 4. Virtual DOM (가상돔) ↓ React에서 사용되는 .. Section2 Unit3 JS/Node 비동기 - fetchAPI Section2 Unit3 [JS/Node] 비동기 - fetchAPI 📌 Chapter4. fetch API • Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공한다. Fetch API를 사용해 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. 몇 번 사용해봐도 어렵다고 생각되었던 부분이라 여러 자료들과 수업내용을 바탕으로 Fetch API와 fetch() 메소드를 정말 간단하게 정리해보았다. 간단하게 알아보는 Fetch API 👾 Fetch API 자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 fay-story.c.. Section2 Unit3 JS/Node 비동기 - 비동기처리 Section2 Unit3 [JS/Node] 비동기 - 비동기처리 (callback, promise, async/await) 📌 Chapter2. 비동기 • 동기(synchronous)는 순차적으로 실행되며, 어떤 작업이 수행 중이면 다음 태스크는 대기하게 된다. • 비동기(asynchronous)는 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 즉시 다음 태스크를 실행한다. • 자바스크립트는 싱글 스레드 기반의 동기적으로 작동하는 언어이지만, 비동기 처리가 가능하다. • 비동기 처리를 위해 콜백함수, Promise, async/await 등을 사용할 수 있다. → Promise, async/await를 따로 정리를 해보았다. ES6, 비동기 처리를 위한 프로미스 (Promise) 자바스크립트는 .. 이전 1 ··· 3 4 5 6 7 8 9 다음
