Code Playground

< h1 > Code Playground </ h1 >

오늘은 React의 Context에 대해서 공부해보려고 한다. 이 블로그 포스트는 React documents의 Context 챕터를 번역하고 예시를 따라해 본 글이니 굳이 내 블로그 글을 안보고 아래 링크를 봐도 된다. https://reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces reactjs.org Summary Context는 모든 레벨의 컴포넌트 트리에 props를 통하지 않아도 데이터를 전달할 수 있는 방법을 제공해준다. 대부분의 리액트 어플리케이션은 데이터를 위에서부터 아래로 (부모에서 자식까지) props를 통해 전달한다. 그리고 이것을 top-down 방식이라고 부른..

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를 제공한다는 장점이 있어 요즘은 클래스 컴포넌트보다 함수형 컴포넌트를 사용하는 추세로 변하였다. 그래서 오늘은 간단한 예제 코드를 만들..

컴포넌트 생명주기 모든 리액트 컴포넌트는 여러 종류의 Life Cycle Method를 가진다. Life Cycle이란 컴포넌트가 생성되어 소멸될 때까지의 일련의 과정들을 일컫는다. 이러한 Life Cycle 안에서 특정 시점에 코드가 호출되도록 설정할 수 있는데, 이 때 사용되는 메소드를 Life Cycle Method라고 한다. 1. Render() 다른 life cycle method는 상황에 따라 사용할 수도, 사용 안할 수도 있는 선택사항이지만 render 메소드는 모든 클래스 컴포넌트에서 반드시 있어야 하는 필수사항이다. render는() 보통 JSX를 사용하여 사용자가 작성한 엘리먼트들을 DOM 노드로 변환해준다. class App extends React.Component { render(..

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