Code Playground

< h1 > Code Playground </ h1 >

Ajax에 관해 공부할때 REST라는 단어를 한번쯤을 들어봤을 것이다. 여기저기에 굉장히 자주 쓰이는 단어인데 문제는 REST가 그래서 뭔데? 라고 말했을때 설명하기 굉장히 어렵다는 것이다. 그래서 오늘은 REST를 처음 접하는 사람도 이해하기 쉽게 REST 개념에 대해서 정리를 해보려고 한다. REST라는 개념은 2000년에 Roy Fielding이라는 사람이 논문을 내면서 알려졌다. 네트워크 시스템의 아키텍쳐 스타일에 대해 처음 소개하면서 나온 용어이다. Roy Fielding이란 사람은 HTTP(HyperText Transfer Protocol)의 주요 저자 중 한 사람이기도 하다. HTTP란 www, 즉 웹 상에서 정보를 주고받을 때 쓰이는 전송 규약, 규범이다. 매우 매우 중요한 개념이고 지금 ..

GET이나 POST는 매우 자주 쓰는 HTTP 메소드들이다. 아마 제일 많이 쓰지 않나 싶다. 근데 정확히 두 개가 어떻게 다른지, 어떤 특징을 가지고 있는지 잘 모르겠어서 정리해보려고 한다. 아래 글들은 영문 블로그 내용을 번역한 것이고 원문 글에 대한 출처는 글 하단에 있다. GET GET 메소드는 주로 데이터를 읽거나(Read) 검색(Retrieve)할 때에 사용되는 메소드이다. 만약에 GET요청이 성공적으로 이루어진다면 XML이나 JSON과 함께 200 (Ok) HTTP 응답 코드를 리턴한다. 에러가 발생하면 주로 404 (Not found) 에러나 400 (Bad request) 에러가 발생한다. HTTP 명세에 의하면 GET 요청은 오로지 데이터를 읽을 때만 사용되고 수정할 때는 사용하지 않는..

프로그래밍 공부를 하다보면 오픈 API에 요청보내고 응답받는 일을 굉장히 많이 하게 된다. 그러다보면 CORS 에러도 필연적으로 만나게 되는데, 대체 CORS란 무엇인가? Cross-Origin Resource Sharing (CORS) 많은 웹 어플리케이션들이 이미지 파일이나 폰트, css 파일 같은 리소스들을 각각의 출처로부터 읽어온다. 만약에 웹 어플리케이션이 자기 자신이 속하지 않은 다른 도메인, 다른 프로토콜, 혹은 다른 포트에 있는 리소스를 요청하면 웹 어플리케이션은 cross-origin HTTP 요청을 실행한다. 만약에 프론트엔드 자바스크립트 코드가 https://domain-a.com에서 https://domain-b.com/data.json으로 json 데이터 요청을 보낸다면 이것이 바..

과거에 리액트 함수형 컴포넌트(Functional Component)는 클래스 컴포넌트(Class Component)와 달리 state나 life cycle method들을 사용할 수 없어 Stateless Component라고 불렸으며 단순히 props를 받아서 렌더링해주는 역할로만 사용되었다. 그러나 React 16.8에 Hook이란 새로운 기능이 추가되면서 함수형 컴포넌트에서도 state나 다른 여러 기능들을 사용할 수 있게 되었다. Hook은 props, state, context, refs, lifecycle과 같은 여러 React 개념에 좀 더 직관적인 API를 제공한다는 장점이 있어 요즘은 클래스 컴포넌트보다 함수형 컴포넌트를 사용하는 추세로 변하였다. 그래서 오늘은 간단한 예제 코드를 만들..

Promise에 이어서 오늘은 Async/Await에 대해서 정리해보려고 한다. Async/Await Async/await은 ES8에서 새롭게 도입되었다. async/await은 promise를 좀 더 이해하기 쉽게 사용하기 위해서 탄생하였다. 그러니까 promise와 전혀 다른 별개의 개념이 아니라 promise를 간단하게 사용하기 위한 문법인 것이다. 그래서 async/await은 기존에 우리가 알던 promise 구문보다 훨씬 간단한 구조로 되어있다. function makeWordPlural (word) { return new Promise((resolve, reject) => { setTimeout(() => { word += "'s "; resolve(word); }, 1000); }); } ..

저번에 event loop 포스팅에서 언급했듯이 싱글 스레드 언어인 자바스크립트는 한 번에 한 가지 일 밖에 못한다. 그래서 모든 작업을 동기로 처리하면 데이터를 받아와서 화면에 렌더링할 때 데이터 받아오는 작업을 완료하기 전까지는 렌더링을 할 수 없기 때문에 화면이 블록(block)되어 버린다. 그래서 비동기란 것이 생겨났다. 비동기란 일종의 예약 시스템이다. 작업을 동기(Synchronous)로 처리하게 되면 어떤 작업이 끝날 때까지 다음 작업을 진행할 수 없지만 비동기(Asynchronous)로 처리하게 되면 이야기가 달라진다. 어떤 요청을 보내서 응답이 올 때까지 기다려야되는 작업이나 사전에 지정한 시간을 기다려야하는 작업들을 예약을 걸어놓고 지금 당장 처리할 수 있는 작업들을 진행하는 것이다. ..

디자인 패턴이란 무엇일까? 소프트웨어 개발을 하면서 발생하는 다양한 이슈들을 해결하는데 도움을 주는 일종의 증명된 기술들이다. 이미 많은 개발자들이 자바스크립트를 개발하면서 겪은 다양한 경험들을 바탕으로 만들어진 것들이다. 즉, 이런 상황에서는 이런 패턴을 사용하면 좋을거라는 일종의 방향성을 제시해준다. 패턴들은 정확한 해결책을 제공해주는 것이 아니다. 프레임워크나 라이브러리, 패턴 등은 그저 우리가 자바스크립트로 개발하는데 있어서 도움을 주는 도구일 뿐이고 이 패턴들을 어떻게 활용해서 어떤 식으로 개발한 것인지는 순전히 개발자의 역량에 달려있는 것이다. Modules Modules are an integral piece of any robust application's architecture and t..

Object 자바스크립트의 Object, 즉 객체는 여러가지의 자료(Data)들과 함수(Function)들의 집합이다. 자바스크립트에서는 원시 데이터 타입인 Number, String, Boolean, Null, Undefined를 제외한 모든 것들을 다 Object type이라고 한다. 함수도, 배열도 모두 Object라는 큰 범주 안에 속한다. const dessert = { dessertName: 'chocolate cake', sweetness: 6, ingredient: ['flour', 'eggs', 'chocolate', 'sugar', 'butter'] }; 객체는 new Object()나 Object.create(), 혹은 literal notation을 사용하여 초기화될 수 있다. 위와..

for...in for...in문은 객체에 있는 Non-symbol, enumerable한 프로퍼티를 순회할 때 사용한다. (The for...in statement iterates over all non-Symbol, enumerable properties of an object.) 자바스크립트에는 원시타입(Primitive data type)인 Boolean, String, Number, Undefined, Null과 객체타입(Object type)인 Object가 존재한다. 여기에 ES6에서 새롭게 7번째 type이 추가되었는데 그게 바로 심볼(Symbol)이다. enumerable이란 "열거가능한"이란 뜻으로 자바스크립트의 객체 속성 중 하나이다. 자바스크립트에서 모든 객체는 Enumerable(..

뭔가 모호하게 이해했었는데 다시 확실하게 개념을 정리하려고 쓰는 글이다! -아래 예제는 바닐라코딩(Vanilla Coding) 수업 시간에 쓰인 예제 코드 중 일부입니다.- function Car (owner) { this.owner = owner; } Car.prototype.soldTo = function (newOwner) { this.owner = newOwner; }; 여기 자동차를 만드는 Car라는 이름의 constructor 함수가 있다. 이 생성자 함수에는 owner라는 인자를 받아서 할당한 owner 속성을 가지고 있다. Car의 prototype에는 soldTo라는 메소드가 존재한다. function ElectricCar (owner) { Car.call(this, owner); thi..