전체 글

오늘은 HTTP 요청을 테스트할 수 있는 API 테스트 도구인 Postman 사용에 대해 간략하게 작성해보겠다. Postman 을 시작하기 전 회원가입과 프로그램 설치가 필요하다 . 설치가 다 되었으면 Workspaces 에서 My Workspace 를 클릭한 후 + 를 눌러 테스팅을 시작하면 된다. 기본적으로 코드스테이츠에서 제공하는 메세지 서버 주소로 HTTP 요청을 실습해볼예정이다. URL http://3.36.72.17:3000/ parameter 형식 id 숫자 고유한 아이디 username 문자열 사용자 이름 text 문자열 본문 내용 roomname 문자열 방 이름 date 문자열 작성한 시간 GET 요청 ( 메세지 조회 ) GET 요청 후 응답으로 200 OK 즉 정상적으로 처리되었고 위와..

지난 포스트에서 클라이언트는 작성된 API를 통해 리소스를 요청할 수 있음을 알 수 있었다. 이번 포스트에서는 API의 대표적인 아키텍처인 REST API에 대해 알아볼 것이다. REST API ? 웹에서 사용되는 데이터나 자원을 HTTP URI 로 표현하고 HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 REST API 를 디자인하는 방법 로이 필딩이 논문에서 제시한 REST 방법론을 보다 실용적으로 적용하기 위해 레오나르도 리차드슨은 REST API 를 잘 적용하기 위한 4단계 모델을 만들었다. 2단계까지만 적용해도 좋은 API 디자인 = HTTP API REST 성숙도 모델 - 0단계 단순히 HTTP 프로토콜을 사용 ex) 요청 POST / appointment HTTP/1.1 응답 HTTP/..

오늘은 HTTP에서 사용하는 클라이언트 - 서버 아키텍처와 클라이언트와 서버가 통신하는 방법인 API 에 대해 정리해보겠다. 클라이언트-서버 아키텍처란 ? 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것 리소스를 제공 : 서버 리소스를 사용 : 클라이언트 + ) 클라이언트-서버 아키텍처를 2 티어 아키텍처라 하며 추가로 리소스를 저장하는 공간인 데이터베이스까지 추가 된 형태는 3티어 아키텍처라 한다. 따라서 현재 내가 꿈꾸는 프론트엔드 개발자는 클라이언트 영역에서 이루어지는 개발을 주로 한다. 사용자가 직접 눈으로 보고 터치하는 상호작용을 주로 개발하게 된다. 이렇듯 클라이언트와 서버 간 통신을 통해 리소스를 요청하고 응답받게 되는데 마음대로 원하는 방식대로 통신하는 것이 아닌 통신 규약인 프..

리액트를 사용할 때 HTML 의 태그 처럼 페이지를 이동해야 경우에는 React Router 를 사용해야 합니다. 오늘은 리액트에서 페이지 이동을 처리하는 방법인 React Router 대해 공부해보겠습니다 ! 먼저 라우팅이라는 용어가 익숙하지 않을텐데 쉽게 설명하자면 사용자가 요청한 URL에 따라 다른 뷰를 보여주는 것으로 React Router 는 리액트에서 가장 많이 쓰이는 라우팅 라이브러리 입니다. (리액트 자체에는 이 기능이 내장되어 있지 않음 ) 리액트는 SPA 방식을 채택하고 있어 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태입니다. 이러한 특징을 고려하여 React Router 는 페이지를 새로 로드하지 않고 하나의 페이지 내에서 렌더링 해줍니다. SPA..

오늘은 리액트를 사용하면서 암기해둬야할 JSX 문법에 대해 작성 할 것이다. (리액트 공식 문서를 참조하여 작성할 것이다 ! ) JSX란? const element = Hello, world!; 위의 코드를 보면 저게 된다고 ...? 자바스크립트 변수에 어떻게 HTML 태그를 할당할 수 있지 ? 하는 생각이 들 수 있지만 가능하다 !! JSX 이기 때문 ! JSX 는 자바스크립트를 확장한 문법으로 한마디로 자바스크립트와 HTML 을 합쳐놨다고 할 수 있다. 리액트의 특징인 컴포넌트를 통해 관심사를 분리하는 것 즉 html ,js ,css 파일을 만들어 기능들을 모두 한 곳에 작성하는 것이 아닌 컴포넌트를 생성하고 그 안에 js,html,css 를 모아 하나의 컴포넌트로 작성할 수 있도록 해주기 위해선 J..

fetch 를 이용하면 HTTP 요청을 보내고 응답을 받을 수 있다. 페어프로그래밍으로 진행된 fetch API 실습 중 Promise.all 을 이용한 부분이 가장 헷갈리고 어려웠다. 이 부분에 대해 글을 작성해보겠다. const newsURLs = 'http://localhost:4999/data/latestNews'; const weatherURLs = 'http://localhost:4999/data/weather'; function getNewsAndWeatherAll() { // TODO: Promise.all을 이용해 작성합니다 let result ={}; return Promise.all([fetch(newsURLs),fetch(weatherURLs)]) .then((response)=> ..

지난 포스트까지 콜백함수를 통해 비동기를 처리하는 것을 알아보았다. 오늘은 비동기로 작동하는 코드를 제어할 수 있는 방법 중 Promise 를 활용하는 방법에 대해 정리해보겠다 ! 또한 프로미스 사용을 간결하게 하기 위한 Async/Await 에 대해서도 정리해보겠다 ! Promise 를 공부하면서 헷갈리는 부분이 정말 많았다 . 헷갈렸던 부분, 새롭게 알게된 사실과 개념을 중심으로 글을 작성해갈 예정이다. Promise Promise 는 클래스이므로 new 키워드를 통해 Promise 객체를 생성할 수 있다 . 인자로는 비동기 처리를 수행할 콜백 함수 ( executor) 를 전달 받는데 이 콜백 함수는 resolve, reject 함수를 인자로 전달받는다. Promise 객체가 생성된 후 -> exe..

저번 포스트에서 공부하면서 비동기의 문제점에 대해 알게되었다. 비동기적으로 실행하는데 실행할 때마다 실행되는 순서가 달랐다. 이렇듯 예측 불가능한 코드는 작성하고자 하는 의도와 다르게 동작할 수 있다. 따라서 이를 제어하기 위한 여러 방법중 Callback 함수를 통해 순서를 제어하는 방법에 대해 알아볼것이다 ! 사실 비동기 코드를 작성해 사용해본적이 없었다. 그래서 처음 공부할 때 비동기적 코드는 실행 순서가 멋대로인데 다시 실행순서를 제어해줄거면 동기적 코드를 사용하면 되지 않나 ? 라는 생각을 했던 거같다. 그런데 어쨌든 !! 5개의 일이 있다고 가정하면 1-2-3-4-5 순으로 일이 진행되어야 한다고 가정할 때 동기적인 것은 1이 끝나고 2 ..3 ..4 ..5 이런식으로 진행되는데 비동기는 1,..

비동기 중 타이머 API 에 대해 공부했다. 비동기라는게 실감이 잘 안났었는데 여러가지 예제 코드를 보며 이해 할 수 있었다 ! 자바스크립트에서 비동기는 타이머 관련 API 를 통해 구현할 수 있다 . 해당 API 는 브라우저에서 제공하는 Web API이며 비동기로 작동하도록 구성되어 있다. 그럼 예제 코드를 살펴보면서 타이머 API 를 공부해보자 ! setTimeout( callback , millisecond) 일정 시간 후에 함수를 실행한다. 매개변수로는 실행할 콜백함수 , 콜백함수 실행 전 기다려야 할 시간 ( 밀리초) 을 받으며 리턴값은 임의의 타이머 ID이다. setTimeout(function () { console.log('2초 후 실행'); }, 2000); clearTimeout(tim..