Immersive Course TIL

Run Time Environment런타임 환경이란 프로그래밍 언어가 구동되는 환경을 말하며, web browser나 node.js는 대표적인 JavaScript 런타임 환경입니다.Node Version ManagerNVM은 다양한 node version을 설치하고 관

자료 출처: 코드스테이츠(CodeStates) 경우에 따라 차이가 있기는 하지만 대부분의 프로젝트 개발은 아래의 Git Workflow를 따르게 됩니다.본격적인 새로운 기능 개발을 하기전에 우선 upstream repository로 부터 나의 remote reposit

화살표 함수는 일반적인 함수 표현(선언)식을 축약한 형태로 표시하는 것으로 ES6에서 새로 도입된 방법입니다. 클로저함수를 표현할 때 특히 강점이 있습니다.

call, apply 호출은 명시적으로 this를 지정하고 싶을 때 사용합니다. 그리고 이 때 첫번째 인자로 전달되는 객체가 this객체가 됩니다.

코드를 분석하여 문제점을 발견해 내고, 안전하고 정돈된 코드를 작성하는 데 도움을 주는 도구를 Lint 또는 Linter라고 합니다. Linting과 관련된 다양한 패키지가 존재하는데 그 중에서 가장 대표적인 것이 ESLint입니다.설치(Local 설치): 프로그램 구

Destructing Assignment(분해 할당)Rest Parameter(나머지 매개변수)Spread Operator(전개 연산자)코드 및 자료 출처: 코드스테이츠(CodeStates)

Data(자료)를 의미있게 정리하여 Information(정보)를 만들 수 있습니다. Data Type(자료 타입): 데이터를 어떻게 해석할지를 정의Primitive Type정수, 실수문자논리(참, 거짓)Custom Type구조체클래스Data Structure(자료 구

Stack(스택)특징: Last In, First Out메소드: push, popBig O 표기가져오기: O(n)추가하기: O(1)삭제하기: O(1)Queue(큐)특징: First In, First Out메소드: enqueue, dequeue속성: back(또는 rea

Linked List(연결 리스트) Hash Table(해쉬 테이블)

Graph(그래프)특징: Node(노드 또는 정점(Vertex)), 그리고 노드와 노드를 연결하는 Edge(간선)으로 구성되는 자료 구조종류방향성: Undirecte(무방향성), Directed(방향성)구현방식: Adjacency Matrix(인접 행렬), Adjac

Tree(트리)특징: Node(노드)로 구성된 계층적 자료 구조

자료 출처: bigocheatsheet.com

OOP(Object Oriented Programming, 객체지향 프로그래밍) 기본 개념 및 특징Encapsulation(캡슐화)Abstraction(추상화)Inheritance(상속)Polymorphism(다형성)Instantiation PatternsFunctio

객체지향 프로그래밍에서 Instantiation Patterns를 통해 '캡슐화'와 '추상화'에 대해 어느 정도 이해할 수 있게 되었습니다. 이번에는 Inheritance Patterns를 통해 '상속'과 '다형성'에 대해 살펴보겠습니다.Pseudoclassical에서

ES6에서 객체지향 프로그래밍코드 출처: 코드스테이츠(CodeStates)

Algorithm(알고리듬)이란 주어진 문제를 해결하기 위한 일련의 절차들을 정의한 것이라고 할 수 있습니다. 알고리듬을 생각해내고 코드로 구현하는 것은 개발자에게 반드시 필요한 능력이지만 고통스러운 과정이기도 합니다. 따라서 능력 개발을 위해 자주 경험하고 훈련해보는

자료 출처: Javascript and Asynchronous Magic — Explaining the JS Engine and Event Loop

비동기 처리 방식이 동기 처리 방식보다 좋은 점이 많지만 어느 함수가 먼저 완료되는지 알 수 없다면 coding flow를 구성하는데 어려움이 발생할 수 밖에 없습니다. 결국 비동기 처리의 순서를 제어하기 위한 방법이 필요한데 그 중에서 대표적인 방식이 Callback

콜백 함수의 이용은 많은 비동기 처리가 발생될 경우 자칫 Callback Hell에 빠질 가능성이 높습니다. 이는 가독성을 떨어 뜨리고 개발자에게 혼란을 가중시키게 됩니다. 따라서 이러한 중첩된 콜백 함수의 실행을 효과적으로 제어하기 위해 Chaining 개념을 도입

Promise Chaining 또한 지나치게 길게 늘어지게 되면 Promise Hell에 빠질 가능성이 있습니다. 이러한 경우를 효과적으로 제어하기 위해 비동기 처리 함수를 마치 동기 처리 함수처럼 다룰 수 있도록 구현해 주는 것이 async 와 await 입니다.아

Client (Web Browser) : HTML, CSS, JavaScript로 작성된 코드를 컴퓨터가 알 수 있게 하여 PC에서 해당 정보를 볼 수 있게 해주는 프로그램 - "손님"Server : 웹 상에 존재하는 정보를 제공하는 주체 - "스타벅스"API : 자원

HTTP : Client와 Server가 통신할 때 사용하는 규약, 규칙 항상 요청(Request) 응답(Response)으로 이루어진다. 요청에 대한 응답이 없을 경우 오류가 발생한다. 요청은 기본적으로 헤더와 바디를 가진다. ** Header Origin :

Dynamic Web Page과거의 웹 페이지상에서 이루지는 요청과 그에 따른 응답은 페이지를 전환(새로운 페이지 전체를 로딩)하여 처리하였습니다. 하지만 오늘날의 SPA(Single Page Application)에서는 서버의 응답에 따라 페이지의 일부만 업데이트(페

XHR(XML HTTP Request)jQuery ajaxFetch APIXHR이나 jQuery ajax 보다 간단하고, 통신을 포함한 리소스 취득을 위한 편리한 인터페이스를 제공하는 것이 바로 fetch API입니다. 기본적인 기능면에서는 큰 차이가 없어 보이지만 f

CORS(Cross-Origin Resource Sharing)오늘날 대부분의 웹 페이지들은 CSS style sheet, 각종 images, 그리고 scripts files이 다양한 출처들로 부터 읽혀져 로딩이 됩니다.이 때 처음 전송되는 리소스의 도메인과는 다른 도

node.jsJavaScript를 기계어로 컴파일 해주는 Chrome V8 Engine으로 빌드된 JavaScript 언어가 구동되는 환경(RTE, RunTime Environment)유저의 클릭이나 네트워크에 리소스를 요청하는 등의 이벤트가 Non-Blocking으로

package.jsonnpm을 활용하기 위한 정보와 프로젝트 전반에 관한 정보가 모여있는 파일(1) "scripts": Command Line Interface에서 실행할 수 있는 코드들 \- npm start: 서버 start로 세팅 \- npm build: p

Create Server또는Node Server of Example코드 및 자료 출처: nodejs.org, 코드스테이츠(CodeStates)

Create Express SeverExpress Sever Example코드 및 자료 출처: expressjs.com, 코드스테이츠(CodeStates)

ReST(Representational State Transfer)웹 서비스를 만드는데 사용되는 제약(constraint) 모음 웹을 망가뜨리지 않고 HTTP를 개선하기 위해 리소스마다 서로 다른 API 규칙을 적용ReST에서 정보의 가장 핵심적인 추상화는 Resour

Props and StateProps Drilling and Lifting State Up 자료 출처: props drilling diagram 자료 출처: lifting state up diagramLife Cycle Method

In-memory : 전원이 꺼지면 데이터가 날라가버림File I/O : 원하는 데이터만 가져올 수 없고 모든 데이터를 가져와 필터링 과정을 거쳐야 함Database : 필터링 뿐만 아니라 File I/O로 구현이 힘든 여러 기능을 가지고 있는 데이터에 특화된 서버St

Object Relational Mapping(ORM) \- 관계형 데이터베이스와 객체지향 프로그래밍 언어간의 간극을 좁히고 호환성을 높이기 위해 고안된 프로그래밍 기법 \- Sequelize: Promise 기반의 대표적인 Node.js ORMModel-V

HTTPS(HyperText Transfer Protocol over Secure): HTTP 요청을 SSL(Secure Socket Layer) 또는 TLS(Transport Layer Security)를 이용해 통신 과정에서 내용을 암호화하여 데이터를 전송Hashi

Cookie: stateless(무상태성)의 HTTP에서 정보를 유지할 수 있게 서버가 일방적으로 클라이언트에 전달하는 작은 데이터서버가 웹 브라우저에 정보를 저장하고 불러올 수 있게 하는 수단해당 도메인에 대해 쿠키가 존재하면 웹브라우저는 도메인에게 HTTP요청 시

Session: 서버가 클라이언트에게 유일하고 암호화된 ID를 부여하고 중요 데이터를 서버에 저장하여 관리사용자의 인증 정보를 session object에 저장하고, 쿠키에는 인증정보 대신 session ID를 저장로그아웃 요청시 세션 아이디가 담긴 쿠키는 브라우저 탭

Token서버 또는 데이터베이스에 사용자 정보를 담는 경우 인증이 필요한 요청 때마다 서버와 데이터베이스를 살펴보아야 하는 부담을 가지게 되는데, 이 부담을 클라이언트에 넘기기 위해 고안기존의 쿠키나 세션과 달리 토큰은 유저정보를 암호화한 상태로 담기 때문에 안전하게

Open Authentication(OAuth): 보안화된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 개방형 표준 프로토콜(open standard protocol)이미 사용자의 정보를 가지고 있는 웹 서비스(Google, Facebo

Deployment with Amazon Web Service(AWS)Simple Storage Service(S3): 빌드된 SPA(Single Page Application)을 배포Elastic Compute Cloud(EC2): 작성된 Node API Server