With CodeStates

💡Router SPA & Routing SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지 않으며, Twittler와 같은 SPA를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요할 수 있다. 또한 이

💡React State & Props Props 특징 컴포넌트의 속성(property)을 의미 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 읽기 전용이며 객체의 형태를 가진다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값으로, React 컴포넌

💡클래스를 이용한 모듈화 📌클래스와 인스턴스 객체지향 JavaScript 1. 객체 지향 프로그래밍 : 하나의 모델이 되는 청사진(Blueprint)를 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴 : 청사진은 클래스(clas

💡재귀함수 📌재귀의 이해 - 다르게 생각하기 어떤 문제를 해결할 때, 동일한 구조의 더 작은 문제를 해결함으로써 주어진 문제를 해결하는 방법을 재귀(recursion)라고 한다 📌재귀는 언제 사용하는 게 좋을까? 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌

💡 JSON 📌JSON의 탄생 배경 JSON은 JavaScript Object Notation의 줄임말이다. 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. ❔객체를 어떻게 전송할 수 있을까❔ 네트워크를 통해, 어떤 객체 내용을 다른 프로그램에게 전송한다고

💡Stack 📌Stack 개념 Stack 은 쌓다, 쌓이다, 포개지다 와 같은 의미를 가진다. 접시를 쌓고 치우는 형태의 비슷한 자료구조 LIFO(Last-In-First-Out): 가장 마지막에 들어온 데이터가 가장 먼저 삭제됨 FILO(First-In-Last

💡Graph 📌Graph 개념 여러 개의 점들이 서로 복잡하게 연결되어 있는 연결 데이터를 저장할 수 있는 자료구조 직접적인 관계가 있는 경우 두 점 사이를 이어주는 선으로 연결되며, 간접적인 관계가 있는 경우 몇 개의 점과 선을 통해 연결된다. 그래프에서는 하나

💡Graph 탐색 하나의 시작점 정점에서 연결된 모든 정점들을 찾는 것을 그래프 탐색이라고 하며, 그래프 순회라고도 한다. 그래프 탐색을 통해 그래프의 구조에 대해 의미있는 정보들을 알아낼 수 있다. 의미있는 정보들에는 주어진 두 정점이 경로를 통해 연결되었는지 등

💡Tree 📌Tree 개념 데이터의 상-하 관계(=계층적 관계)를 저장하는 자료구조 단방향 그래프의 한 구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태가 나무와 닮아있다고 해서 트리 구조라고 함 컴퓨터 폴더 구조 등이 트리 구조의 예시에 해당 데이터를 순차적

💡Binary Tree 번역하면 이진트리 각 노드가 최대 2개의 자식 노드를 가질 수 있는 트리구조 자식 노드를 최대 2개만 가질 수 있으므로 두 자식 노드를 왼쪽 자식, 오른쪽 자식으로 구별해서 지칭한다. 📌종류 Full Binary Tree 번역하면 정이진트

💡비동기 쉽게 이해하기 : 하나의 작업이 끝날 때까지, 이어지는 작업을 "막는 것"을 blocking 이라 부른다. : 시작 시점과 완료 시점이 같은 상황을 "동기적(synchronous)이다."라고 한다. : 개발자들은 Node.js를 non-blocking하고

💡비동기 처리를 위한 Promise 객체 📌 Promise란 무엇인가? `Promise` 는 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있게 도와주는 객체이다. Promise 이전에 비동기 처리로 콜백 패턴을 주로 사용했었다. 그러나 `콜백 지옥(C

💡클라이언트 - 서버 아키텍처 클라이언트(client, 손님)와 서버(sever, 서빙하는 사람)라는 단어의 어원을 떠올리면, 보다 이해하기 쉽다. 리소스의 접근하려는 앱은, 카페로 치면 손님과 같다. 손님은 아메리카노를 획득하기 위해, 리소를 가지고 있는 점원에게

💡React 데이터 흐름 🔸React에서의 데이터 흐름 1) 컴포넌트로 생각하기 React를 사용하는 개발 방식은 component 단위로 개발을 시작한다. component 단위를 찾고나면, component를 만들고 조립해나가면서 Web page를 만든다.

💡 Origin의 의미 : 먼저, CORS에서의 Origin란? 한국말로는 '출처'라고 부르는 것인데, 이는 URL, 도메인 등과 비슷해 보이지만 엄연히 의미가 다르기 때문에 확실히 알고 넘어가는 것이 좋다. Origin은 URL에서의 프로토콜, 도메인, 포트 번

익스프레스 공식 사이트에 들어가면 다음과 같은 예제가 있다.코드에서 반복적으로 등장하는 app 객체는 express() 메소드 호출로 생성되는 익스프레스 서버 객체를 의미한다.이 서버 객체는 다음과 같은 주요 메소드들을 지니고 있다.이 중 set() 메소드는 웹 서버의

: 익스프레스에서 사용하는 요청(req-Request) 객체와 응답(res-Response) 객체는 http 모듈에서 사용하는객체들과 같지만, 몇 가지 메소드를 더 추가할 수 있다.: 익스프레스에서 요청 객체에 추가한 헤더와 파라미터는 다음과 같은 속성(property

: 공식 문서에 따르면 미들웨어는 요청 객체(req), 응답 객체(res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수에 대한 액세스 권한을 갖는 함수이며,그 다음의 미들웨어는 일반적으로 next라는 이름의 변수로 표시된다라고 정의되어 있다. 좀

💡Component Driven Development : __Component-Driven Development(CDD, 컴포넌트 주도개발)은 컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스(UI)를 구축하는 개발 및 설계 방법론이다.컴포넌트를 먼저 생성하고 결합

어느덧 section 2가 끝났다. 처음 section 1을 시작했던게 엊그제 같은데 벌써 이 과정의 반이 지나갔다는 사실에 "시간 참 빠르구나.."라는 걸 이 글을 쓰고 있는 순간도 느끼고 있다.일단, HA2 TEST를 본 인원들은 대략 19명 정도였는데 처음 OT때

Time Complexity

Greedy Algorithm(탐욕 알고리즘)은 말 그대로 선택의 순간마다 당장 눈앞에 보이는 최적의 상황만을 쫓아 최종적인 해답에 도달하는 방법이다.탐욕 알고리즘으로 문제를 해결하는 방법은 다음과 같이 단계적으로 구분할 수 있다.선택 절차(Selection Proce

변수(variable) 변수란 상황에 따라 변할 수 있는 값을 말한다. 프로그래밍에서 변수는 이름(Label)이 붙은 값이라고 생각하면 이해하기 쉽다. a Way to handle data 변수의 선언(declaration) 선언은 let 키워드를 사용한다,

조건을 배우기 위해서는 Boolean 타입에 대한 이해가 필요하다.여기서 Boolean은 참과 거짓을 나누는 타입이다.조건문은 어떠한 조건을 판별하는 기준을 만드는 것이다.조건문에는 반드시 비교연산자(comparison operator)가 필요하다.비교의 결과는 늘 B

반복문 반복문이란, 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문이다 같거나 비슷한 코드를 여러번 실행시켜야 할 경우에 쓰는 구문 for 구문 반복할 내용을 중괄호 block 안에 넣어준다. 반복할 조건을 초기화, 조건식, 증감문 순으로 넣어준다

1\. HTML웹페이지를 만들기 위한 언어로 웹브라이저 위에서 동작하는 언어HyperText Markup Language의 약자2\. TAG부등호(<>)로 묵인 HTML의 기본 구성 요소태그의 형식Tag는 컨첸츠를 감싸서 그 정보의 성격과 의미를 정의한다.여는 태

💡CSS? Cascading Style Sheets의 약자 HTML이 웹 페이지의 구조를 담당한다면, CSS는 구조의 외부와 내부를 꾸미는 역할을 담당한다. CSS는 스타일링을 위한 도구이다. CSS 따라하기 CSS로 기본적인 스타일링하기 CSS는 스타일링 도구이

💡 CLI 기본 명령어 pwd : 현재 위치 확인하기 pwd : print working directory의 약자 (directory는 저장 공간을 말함) mkdir : 새로운 폴더 생성하기 mkdir : make diretories의 약자 은 생성할 폴더의

💡 Getting Started 디렉토리 구성 확인 및 프로그램 실행 터미널에서 디렉토리를 열어 과제를 다운로드 받은 위치에서 압축을 푼다. CLI로 과제 디렉토리로 이동해, 명령어 를 입력하면 아래와 같은 에러가 발생한다. 위 에러는 range 모듈을 필요한대

SEB_Part로 5월말부터 시작된 코드스테이츠와의 여정의 첫번째 단락이 끝났다. Full_SEB와는 다르게 part는 학생, 회사원등 현업을 하면서 CodeState의 과정을 수료하는 방식으로 1년동안의 과정으로 진행된다.이 과정을 진행하면서 항상 Coder분들께서

💡 버전 관리 시스템의 필요성 버전 관리가 가능하다면 여러 사람이 같은 파일로 동시에 작업하거나, 이전 상태로 되돌려야 하는 경우가 생겼을때 손쉽게 이전 상태로 돌아가는 것이 가능하다. ❔ 버전 관리를 사용하는 이유 버전 관리란 각 버전별로 변경된 이력들을 저장하

배열은 순서가 있는 값순서는 index(인덱스)라고 부르며, 1이 아닌 0부터 번호를 매긴다값은 element(요소/원소)라고 부른다.값은 index(인덱스)를 이용해서 접근한다.온점(.)을 이용하여 변수가 가지고 있는 속성(propety)에 접근 가능하다.온점(.)을

1\. 제일 기본적인 방법은 어떠한가?다른 사용자를 추가할 때 매번 여러 개의 변수를 선언해줘야 하는 상황이 발생심지어 각 변수는 이름으로 구분할 수 있을 뿐, 서로 어떠한 관계도 없다.2\. 배열을 사용하는 것은 어떠한가?서로 관계성은 존재하나, 각 index(인덱스

: primitive date typesJavaScript 에서 원시 자료형 혹은 원시 값이라고 한다.객체가 아니면서 메소드도 가지지 않는 데이터모든 원시 값은 불변하여 변형이 불가하다.모두 하나의 정보, 즉 데이터를 담고 있다.아주 초창기에 코드를 어떻게 작상하였는

콘솔에 순서대로 출력되는 결과는?1번 : Hello, Kim Hosik!: 5번 줄에서 message 를 출력할 때, 4번 줄의 username 을 중괄호(블럭) 바깥에서 가져왔으므로 정상적으로 출력된다.2번 : Uncaught ReferenceError: messag

DOM이란? Document Object Model의 약자 HTML요소를 Object(JavaScript Object)처럼 조작(Manipulation)할수 있는 Model이다. HTML에 JavaScript 적용하기 HTML에 JavaScript를 적용하기 위해

💡고차함수 📌일급객체 JavaScript에는 특별하게 취급을 받는 일급 객체(first-class citizen)이 있다. 대표적인 일급 객체 중 하나는 함수이며, 아래와 같이 특별하게 취급한다. 변수에 할당할 수 있음 다른 함수의 인자로 전달될 수 있

💡What is React?? - 프론트엔드 개발을 위한 JavaScript 오픈 소스 라이브러리 ✅리액트의 3가지 특징 리액트는 선언형이고 컴포넌트 기반이며 다양한 곳에서 활용할 수 있다는 특징을 가지고 있다.(범용성이 뛰어나다) 선언형(Declarative)

💡SPA 등장배경 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야했다. 전통적인 웹사이트는 페이지 전체를 로딩하고, SPA는 Menu와 Footer와 같이

ACID는 데이터베이스에서 하나의 트랜잭션의 안정성을 보장하기 위해 필요한 성질이다.트랜잭션이란 여러 개의 작업을 하나로 묶은 실행 유닛이다. 각 트랜잭션은 하나의 특정 작업으로 시작을 해 묶여 있는 모든 작업들을 다 완료해야 정상적으로 종료한다.만약 하나의 트랜잭션에

SQL(Structured Query Language): 구조화된 Query 언어Query:질의문(직역), 예를 들면 검색창에 입력하는 검색어도 Query의 일종이다.저장되어 있는 정보를 필터 하기 위한 질문그래서, SQL을 다시 말하자면,데이터베이스용 프로그래밍 언어

스키마(schema)는 데이터베이스에서 데이터가 구성되는 방식과 서로 다른 엔티티(entities) 간의 관계에 대한 설명이다.즉, "데이터베이스의 청사진"과 같다.데이터가 어떻게 표현되어야 할지 구상하고, 그 데이터를 정의하고, 데이터들 간의 관계를 구성하는 방법,

Node.js 환경에서 MySQL에 접속하여 데이터를 다룰 수 있다.데이터베이스와 서버 인스턴스를 연결하기 위해, mysql모듈을 사용한다.Node.js 환경에서 SQL문을 작성하고 .query() 메소드를 호출하는 것으로 query를 수행할 수 있다..query(sq

MVC는 소프트웨어 설계와 관련하여 흔히 사용되는 설계 패턴이다.React의 단방향의 데이터 흐름, Redux의 Flux + Reducer 패턴 역시 설계 패턴의 일종이다.어떤 서비스를 제공하기 위해 여러 과정들과 처리들이 필요한대, 그런 처리들을 각 기능별로 나뉜다는

Session 기반은 매 요청마다 데이터베이스를 살펴보는 것이 불편하다.이럴 때 사용할 수 있는 토큰 기반 인증 중 대표적인 JWT(JSON Web Token)이다.클라이언트에서 인증 정보를 보관하는 방법으로 토큰 기반 인증이 고안되었다.토큰은 유저 정보를 암호환 상태