Dev Blog

HTTPS Hashing CSRF Cookie Session Token OAuth HTTPS 프로토콜 1) HTTPS 란? Hyper Text Transfer Protocol Secure Socket layer HTTP over SSL(TLS) HTTP over Secure HTTPS는 HTTP 요청을 *SSL 혹은 *TLS라는 알고리즘을 이용해, HTTP 통신을 하는 과정에서 내용을 암호화하여 데이터를 전송하는 방법. 인증에서 HTTPS 프로토콜을 사용해야만 하는 이유는 HTTP보다 상대적으로 안전한 방법이고, 인증서를 기반으로 데이터 제공자의 신원을 보장받을 수 있다. *SSL (Secure Sockets Layer, SSL) : SSL은 웹사이트와 브라우저(혹은, 두 서버) 사이에 전송된 데이터를 ..

Structured Query Language with Database Server with Database Achievement Goals Learn SQL SQL과 Schema가 무엇인지 스스로 정의할 수 있다. 1:N, N:N 관계를 이해하고, 데이터베이스에서 테이블을 조작할 수 있다. Learn SQL에서 다루는 SQL을 사용 혹은 활용할 수 있다. Chatterbox Database Database가 무엇인지 스스로 정의할 수 있다. persistance의 개념을 이해하고, 데이터베이스의 필요성을 인지한다. schema를 설계할 수 있다. 클라이언트의 http 요청에 따라 CRUD API를 구현할 수 있다. (CRUD: Create, Read, Update, Delete) Database & S..

Achievement goals 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다. Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다. Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다. Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다. Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다. Redux 란? 상태 관리 라이브러리 목적? React 특성인 불필요한 렌더링을 보완하기 위함. React 렌더링 조건이라 하면, 1. State 가 변경된 경우 2. State 변경으로 인해 Prop..

Must know concepts recast.ly 스프린트에 등장하는 컴포넌트에 대해 컴포넌트 트리를 그려볼 수 있나요? recast.ly 스프린트에서 App이 클래스 컴포넌트인 이유가 무엇인가요? recast.ly 구조 상 어떤 컴포넌트가 서로 상호작용을 하고 있나요? React 에서의 데이터 흐름 1. 프로토타입에서 컴포넌트 찾기 리액트는 컴포넌트 단위 기준으로 상향식으로 앱을 만든다. 이는 테스트가 쉽고 확장성이 좋다. 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일 2. 트위틀러 예시로 진행 1) 컴포넌트 컴포넌트 단위로 나누는 이유? 단일 책임 원칙 즉, 하나의 컴포넌트에 하나의 일만 시키기 위함. 컴포넌트는..

Must know concepts JSX 문법을 도입하게 된 이유가 무엇일까요? 어떤 장점이 있나요? JSX를 사용하지 않고 React를 사용할 수도 있나요? (advanced) JSX에 JavaScript 표현식을 쓰려면 어떤 방법으로 써야 하나요? import / export 구문은 어떤 식으로 사용할 수 있나요? DOM을 처음 배울 때 페이지 단위로 작업하는 방법과 비교해서, 컴포넌트 단위로 개발할 때의 장점은 무엇인가요? 하나의 컴포넌트에서 여러 개의 엘리먼트를 리턴할 수도 있나요? 나의 새 트윗이라는 컴포넌트 사용 방법이 있다고 가정할 때, 컴포넌트 내에서 나의 새 트윗이라는 문자열은 어떻게 접근할 수 있나요? props를 다룰 때에 지켜야 하는 엄격한 규칙이 하나 있습니다. 무엇인가요? pro..

Achievement Goals 1. 어떤 경우에 중첩된 callback이 발생하는지 이해할 수 있다. 2. 중첩된 callback의 단점, Promise 의 장점을 이해할 수 있다. 3. Promise 사용 패턴과 언어적인 특징들을 이해할 수 있다. 3-1. resolve, reject의 의미와, then, catch와의 관계를 이해할 수 있다. 3-2. Promise 에서 인자를 넘기는 방법에 대해 이해할 수 있다. 3-3. Promise의 세가지 상태를 이해할 수 있다. 3-4. Promise.all 의 사용법을 이해할 수 있다. 4. async/await keyword에 대해 이해하고, 작동 원리를 이해할 수 있다. 5. node.js의 fs 모듈의 사용법을 이해한다. 목차 1. why Async..

Complexity Analysis? 알고리즘 문제를 풀 때 시간과 공간을 얼마나 차지하는지 보여주는 지표 이는 곧 효율성을 의미한다. About time complexity... 문제가 커질수록 걸리는 시간이 빠르게, 천천히 또는 거의 변화가 없을수도 있다. n개의 요소들 중에서 가장 큰 수와 작은 수의 차이를 찾는다. 1. 모든 가능성을 시도할 경우. n^2 2. 가장 큰 수와 작은 수를 찾아 시도할 경우. 2n 3. Sort를 이용하여, 첫번째요소, 마지막요소, 빼기연산 => constant * 시간복잡도 = 3 Big-O Notation gives an approximation of time complexity 함수 T(n)인 시간복잡도에서 가장 영향력이 큰 부분이 어디인지 따져보는것. 영향력이 ..

목표 __proto__, constructor, prototype 이 각각 어떤 관계를 가지고 있는지 조사해봅니다. Object.create 메소드에 대해 이해합시다. ES6 class 키워드 및 super 키워드 이용 방법을 알아봅니다. 1. 용어 정리 Subclassing : 부모로부터 상태(constructor)와 행위(method)를 상속받고 자기 자신의 고유 특성도 추가할 수 있는 상속 방법. Prototype : 자바스크립트의 모든 객체들은 부모 객체를 가지고, 연결되어 있는데 이 부모 객체가 프로토타입 객체(prototype)입니다. 덕분에, 객체 지향 프로그래밍의 상속 개념처럼 부모 객체의 프로퍼티와 메소드를 사용할 수 있습니다. 마찬가지로, 생성자 함수로 생성된 모든 객체가 프로퍼티, 메..