FE BE 개발 메모장
Node.js 에 대해 자세히 알아보자
Node.js를 처음에 맛보기로만 배웠을 때 단순히 백엔드 개발자에만 맞춰진 런타임이라고 생각했었다. 그러나 Node.js란? 이라는 글을 보고 생각이 조금 바뀌게되었다. 그래서 우선 가장 기본적인 내용만 정리해보려고 한다. Node.js란 무엇일까? Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다. 단순히 이렇게 해석해서는 잘 이해가 되지 않는다. 여기서 런타임이란 프로그래밍 언어가 구동되는 환경을 말하는데, Node.js가 나오기전 까진 크롬, 파이어폭스 같은 브라우저(browser)에서만 동작했다. 그러한 한계를 극복하고 탄생한 것이 바로 Node.js이다. 브라우저 외부 즉 컴퓨터 로컬 내에서도 다양한 용도로 확장하기 위한 JavaScript R..
구조 분해 할당
만약 함수에 객체나 배열을 전달해야하는 경우가 생기거나, 객체나 배열에 저장된 데이터의 일부만 필요한 경우가 생길 때에 어떤 문법을 사용해야 효과적일지 고민이라면 '구조 분해 할당' 이라는 것을 한번 알아보자 배열 분해 let ramen = ["Jin Ramen", "Shin Ramen"] //구조 분해 할당을 이용해 Aline에는 ramen[0]을 //Bline에는 ramen[1]을 할당했다. let [lineA, lineB] = ramen; console.log(lineA); // Jin Ramen console.log(lineB); // Shin Ramen spread Syntax로 나머지 요소 가져오기 배열 앞쪽에 위치한 값 몇개만 필요하고, 나머지는 한곳에 모아서 저장하고 싶다면, '...' 을..
REST API에 대해 이해하기
REST, RESTful하다가 뭐야? 보통 프론트엔드나 백엔드나 학습과정에서 RESTful 한, REST API 설계 라는 말을 많이 들어봤을 것이다. 이 개념에 대해 너무 혼동이 찾아와 가끔은 이상한 소리를 할 때가 있는데 더이상 해메지말고 본격적으로 알아보자. REST(Representational State Transfer) REST는 단어 REST가 아닌 Representational State Transfer의 줄임말이다. 이 개념은 2000년 Roy Fielding이 박사 학위 논문에 정의한 개념이며, 프로토콜이나 통신 규약을 말하는 것이 아닌 아키텍쳐 스타일을 말한다. REST의 궁극적인 목표는 성능, 확장성, 단순성, 수정 가능성, 가시성, 이식성 및 안정성을 높이는 것이다. REST AP..
교차 출처 리소스 공유(CORS)
모든 웹 관리자, 서버 개발자, 프론트엔드 개발자를 위한 필독서 CORS : developer.mozilla.org/ko/docs/Web/HTTP/CORS cors는 쉽게 말하자면 악의를 가진 해커로부터 인터넷을 보하하기 위해 만들어졌다. node.js의 http 모듈을 이용하여 웹 서버를 만드는 시간을 가졌다. HTTP 모듈, HTTP 트랜잭션 해부라는 Node의 공식 가이드를 참고 하여, 페어와 상의하며 코드를 짰었다. 어느정도 완성했다고 생각하고, nodemon이라는 편리한 API를 통해 테스트를 거쳤는데 콘솔 로그에서는 아래와 같은 경고창을 띄어 어지럽게 만들어줬다. Access to fetch at 'http://localhost:5000/line' from origin 'null' has be..
HTTP 메세지
HTTP(Hypertext Transfer Protocol) 웹 브라우저와 웹 서버 간 서로 통신하기 위한 규약이다. 서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜(Protocol)을 뜻한다. HTTP는 계속 발전하여 HTTP/2 까지 등장한 상태 어떤 종류의 데이터도 전송할 수 있도록 설계되어있다. HTTP 통신과정 HTTP는 서버/클라이언트 모델을 따른다. 클라이언트(client) -> 요청(request) -> 서버(server) -> 응답(response) -> 클라이언트 비연결 지향(Connectionless): 클라이언트가 요청을 서버에 보내고, 서버가 요총에 맞는 응답을 보내면 바로 연결을 끊는다. 무상태(Stateless) : 연결을 끊는 순간 클라이언트와 서버의 통신은 ..
Promise 메소드들...
Promise 메소드 Promise.all() Promise.all()은 요소 전체가 프로미스인 배열을 받고 새로운 프로미스를 반환한다. 모든 프로미스가 이행될 때 까지 기다렸다가 그 결과값을 담은 배열을 반환하지만, 주어진 프로미스중 하나라도 실패하면, Promise.all이 거부되고, 이행된 결과는 무시한다. let promise = Promise.all([....promises...]) Promise.allSettled() 최근에 추가된 메소드로, 모든 프로미스가 처리될 때까지 기다렸다가 그 결과(객체)를 담은 배열을 반환한다. let urls = [ 'https://api.github.com/users/iliakan', 'https://api.github.com/users/remy', 'https..
JSON에 대하여
JSON이란? JSON(Javascript Object Notation) 은 값이나 객체를 나타내주는 범용 포맷으로, 본래에 자바스크립트에서 사용할 목적으로 만들어졌다. 라이브러리를 사용하면 자바스크립트가 아닌 언어에서도 JSON을 충분히 다룰 수 있다고한다. 그래서 JSON을 데이터 교환 목적으로 사용하는 경우가 많다. 자바스크립트에서 제공하는 JSON 관련 메소드이다. JSON.stringify : 객체를 JSON으로 바꿔줍니다. JSON.parse : JSON을 객체로 바꿔준다. JSON.stringfy mySystem 이라는 객체에 JSON.stringfy를 적용해 보았다. let mySystem = { CPU: 'R7-3700x', RAM: 'DDR4 32GB', VGA: 'RX 6800', P..
fetch API
fetch API AJAX란 무엇일까? AJAX는 (Asynchronous Javascript And XML, 비동기적 자바스크립트와 XML)의 약자로 XMLHttpRequest(XHR)과 Javascript와 DOM을 이용하여 서버에서 추가 정보를 비동기적으로 가져올 수 있게 해주는 포괄적인 기술을 나타내는 용어다. 하지만 만들어진지 오래되었고 jQuery와 보다 쓰기 쉬운 표준 API가 등장했다. 별도의 라이브러리 대신 최신 브라우저에서 모두 내장되어있는 함수이며 사용이 쉽고 Promise 값을 반환하는 fetch API이다. fetch API는 다양한 주문 전송, 사용자 정보 읽기, 서버에서 최신 변경분 가져오기 등등 다양한 일을 페이지 새로고침 없이 수행한다. fetch 사용법 fetch() 함수..