코드스테이츠44기 프론트엔드

오늘은 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티어 아키텍처라 한다. 따라서 현재 내가 꿈꾸는 프론트엔드 개발자는 클라이언트 영역에서 이루어지는 개발을 주로 한다. 사용자가 직접 눈으로 보고 터치하는 상호작용을 주로 개발하게 된다. 이렇듯 클라이언트와 서버 간 통신을 통해 리소스를 요청하고 응답받게 되는데 마음대로 원하는 방식대로 통신하는 것이 아닌 통신 규약인 프..

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)=> ..

어제 프로토타입에 대해 공부했었다. 오늘 공부한 프로토타입 체인을 우리가 자주 사용하는 배열을 예로 설명해보겠다. 프로토타입은 객체의 원형으라고 했다. 그래서 우리가 배열을 생성할 때 let arr = [] 이런식으로 배열을 생성해도 내부적으로는 new Array() 같이 생성자 함수로 선언되었다는 것을 알 수 있었다. 이렇게 생성된 인스턴스 arr 은 생성자 함수에게서 메소드를 상속받는다. arr 배열 객체의 원형은 Array 임을 알 수 있다. 그럼 객체는 프로퍼티일까 ? 정확히는 아니라고 할 수 있다. 함수 객체가 가지는 프로토타입이라는 특수한 형태의 객체 프로퍼티를 통해 상속받는 것이다 ! 따라서 Array.prototype 객체를 살펴보면 배열에서 사용한 메소드들을 찾아볼 수 있는 것이다. Ar..

프로토타입이라는 단어는 매우 생소했다. 또한 공부하기도 어려웠다 .. 잘 이해가 안됐던 거같다 ㅜ.ㅜ 조금 더 공부가 필요할 것 같다 !! 그래도 공부해본 프로토타입과 클래스에 대해 정리해보겠다 . 프로토타입(Prototype) 프로토타입은 원형 객체를 의미하며 자바스크립트는 프로토타입 기반 언어이다. 프로토타입 기반 언어 ? 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미 프로토타입 객체도 또 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수 있고 그 상위도 마찬가지이다. 이를 프로토타입 체인이라고 하며 이에 관한 내용은 다음 블로깅때 정리하겠다. 즉 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어있..

클래스와 인스턴스에 대해 배우고 이를 포함한 큰 개념인 객체 지향 프로그래밍에 대해 배웠다. 예전 처음 코딩을 접했을 때 c언어를 배웠었는데 그 후 자바를 배웠을 때 확실히 사용하기 편했던 것이 기억이 난다. 그 기억을 떠올려가며 오늘 공부한 객체 지향 프로그래밍에 대해 작성해보겠다 ! 절차적 언어 vs 객체지향 언어 절차적 언어는 별개의 변수와 함수로 순차적으로 작동한다 하지만 객체지향 언어는 데이터의 접근과 , 데이터의 처리과정에 대한 모형을 만들어 데이터와 기능이 별개로 취급되지 않고 한 번에 묶어 처리할 수 있다. OOP ? Object Oriented Programming 의 약자로 프로그램 설계 철학을 의미한다. 모든 것을 객체로 그룹화 하고 4가지 주요 개념을 통해 재사용성을 얻을 수 있다...

어제부터 섹션2가 시작되고 많이 허둥댔다. 내가 전공자가 맞나 ? 싶을정도로 어려운 개념이었던 거같다. 그래서 더 노력해야겠다는 생각이 들었다. 오늘은 클래스와 인스턴스에 대해 배웠다. 다행히 예전에 자바를 공부한 적이 있어서 클래스와 인스턴스에 대한 개념들은 머릿속에 잘 들어왔던 거같다. 예전 자바스크립트를 독학할 때 따로 책을 사서 차근차근 공부한 것이 아니라 공식문서를 찾아보고 유튜브를 통해 실전에 사용시 모르는 부분만 공부를 했어서 개념에 대한 이해가 조금은 부족했었다. (배열을 생성할 때 바로 let arr = [] 라고 선언하는 것과 new 키워드를 사용하여 선언하는 것이 같은 것인지 오늘 알게되었다. ㅎㅎ ! ) 서론 끝! 지금부터 클래스와 인스턴스에 대해 공부한 부분을 정리해보겠다 ! 객체..

오늘은 섹션 1을 모두 마무리하고 회고 시간을 갖게 되었다. 회고란 지난일을 돌이켜 생각해보는 것인데 정말 회고라는건 어떤일을 하기에 꼭 필요한 습관인 거같다. KPT 회고 방식으로 회고록을 작성해보았다. 내가 이루고자하는 목표를 향해 끝없이 달려나갈 것이다 !! 🤔목표 상기하기 😶‍🌫️ 부트캠프에 들어오기 전 나는 생각했었다. 정말 누구보다도 열심히 하자 . 달라 지자 . 내 선택이 후회없는 선택이 되도록 노력하자 이 세가지였다. 섹션 1이 끝난 지금의 나는 사실 저 세가지를 모두 지켰다고는 말 할 수는 없다. 하지만 한가지 확실한 것은 하루하루 성장하고 있다는 것이다. 사실 살아오면서 목표라는 것을 세우고 지켜본적이 없는 것 같다. 예전에 MBTI 검사를 했었는데 P가 90프로 이상이 나왔었다. 이렇..