웹개발 코스

변수 변수 선언 (Declaration) 변수 할당 (Assignment) 표현식 (Expression) 표현식이란 하나의 값으로 표현되는 코드를 의미한다. 타입 함수 함수 선언 선언식 표현식 함수 호출(invoke, call) 조건문

문자열을 index 로 접근 가능, 수정이 불가 (read-only).수정이 불가한 이유는 C 로 치면 문자열은 코드영역의 메모리를 차지하고 있기 때문이지만, 이걸 그냥 '이건 이렇다...' 라고 하면 이해하기가 힘들다. (그래서인가 자바스크립트가 C++ 보다 배우기

forwhiledebugger; 코드 사용. 브라우저 콘솔을 통해 디버깅을 할 수 있다.(값 추적 등)console.log 사용프로그래머스 : 알고리즘 연습 사이트중 좋음(국내용)해외용 : leetcodejavscript.info

마크업 언어태그 등을 이용하여 문서나 데이터의 구조를 나타내는 언어. 마크업 언어는 프로그래밍 언어는 아니다.Semantic사전적인 뜻 : 의미론적인"A semantic element clearly describes its meaning to both the brows

TerminalGUI : Graphic User InterfaceCLI : Command-Line InterfaceCLI는 대량의 컴퓨터가 있는 환경에서 유리하다:GUI는 I/O 소스(키보드, 마우스, 모니터)가 필요한데, 이를 수많은 컴퓨터에 일일이 부착하기 힘듦.C

버전을 관리하는 시스템.이전 버전으로 돌아가거나, 어떻게 변화했는지 쉽게 알 수 있다.'분산형 버전 관리 시스템'(Distributed Version Control)변화가 생길 때마다 백업 복사본(스냅샷)이 생성되는데, 스냅샷을 만들어주는 작업을 commit이라고 한다

배열 (Array)

CSS Selectors

string, number, bigint, boolean, undefined, symbol, null옛날 메모리가 작던 시절, 변수에는 하나의 데이터만 담을 수 있었기 때문에 옛날부터 썼던 자료형이라고 해서 원시 자료형이라고 불린다.변수에 값이 할당된다.array, o

Spread Rest

JavaScript Koans 중 내가 필요한 부분만 정리해 보았다. Test Module https://www.chaijs.com/api/bdd/ WTF JavaScript? (==) https://github.com/denysdovhan/wtfjs const

HTML 요소를 자바스크립트 객체(Object)처럼 조작할 수 있는 모델."DOM Tree" (트리 자료구조로 만듦)웹 브라우저는 <script> 요소를 만나면 HTML 해석을 멈추고 script 요소를 먼저 실행한다.스크립트를 먼저 실행하면 parse 되지 않은

이벤트 : 클릭, 드래그 등Event 객체는 사용자 입력(onclick, onkeyup, onscroll 등)을 trigger 로 발생한 event 정보를 담은 객체이다.target 은 event객체의 property로, 해당 이벤트가 발생한 객체를 가리킨다. even

일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다.고차 함수(higher-order function)에 대해 설명할 수 있다.고차 함수를 자바스크립트로 작성할 수 있다.프로그래밍에서 "일급 객체"는 다른 요소의 특징을 가진 객체를 뜻한다

React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.create-react-app 으로 간단한 개발용 Rea

SPA (Single-Page Application) 개념을 이해하고 설명할 수 있다.SPA의 장, 단점에 대해 이해하고 설명할 수 있다.와이어프레임을 보고 어느 부분을 컴포넌트로 구분해야 할 지 스스로 정할 수 있다.전통적인 웹사이트는 사용자가 웹 사이트 내의 다른

Property의 줄임말로 외부 컴포넌트로부터 받은 데이터를 말한다.객체 형태를 띄고 있다. { key : value }Read-only (수정 불가)Parent 컴포넌트에서 Child 컴포넌트로 값을 전달해보자.1\. 전달하고자 하는 값의 속성(attribute, 내

절차 지향 (Precedural Programming) <--> 객체 지향 (Object Oriented Programming) 객체 지향 프로그래밍은 데이터와 기능을 한데 묶을 수 있다.속성과 메소드가 하나의 class 에 포함된다.자바스크립트 내장 타입인 ob

어떠한 문제를 해결할 때, 구조는 동일하지만 더 작은 경우를 해결함으로써 그 문제를 해결하는 방법을 재귀(recursion) 라고 한다.함수 실행 중 자기 자신을 호출하는 것을 재귀 호출 (recursive call) 이라고 한다.주어진 문제를 구조가 비슷한 더 작은

JSON (JavaScript Object Notation) 은 데이터 교환을 위해 만들어진 포맷이다.예를 들어 다음과 같은 객체 내용을 네트워크를 통해 다른 프로그램으로 전송한다고 생각해 보자.객체를 전송하려면 수신자와 발신자가 같은 프로그램을 쓰거나, 아니면 문자열

자료구조란 여러 데이터들의 묶음을 어떻게 저장할 것이고, 사용할 것인지 정의한 것이다.대부분의 자료구조는 특정한 상황에 문제를 해결하는 데에 특화되어 있다.자료구조를 활용할 때, 자바스크립트 배열과 같은 미리 정의된 데이터 타입을 이용하여 자료구조를 유사하게 구현할 수

컴퓨터 공학에서의 Graph - 여러개의 점들이 서로 복잡하게 연결되어 있는 관계를 표현한 자료구조정점(vertex)와 정점들을 잇는 간선(edge)가 존재한다.네비게이션, SNS 등인접 행렬인접 리스트인접 행렬은 정점들간의 인접함을 표시해 주는 행렬로, 2차원 배열의

Tree, Binary Tree, Binary Search Tree, Tree Traversal

그래프 탐색은 하나의 정점에서 시작하여 차례대로 모든 정점을 한 번씩 방문하는 것이다. 그래프의 데이터는 배열처럼 정렬이 되어있지 않아 원하는 자료를 찾을 때까지 하나씩 방문하여 찾기 때문이다.그래프의 모든 정점 탐색에는 여러 방법이 있는데 대표적인 두 가지 방법은 D

(개념)동기와 비동기 (synchronous vs asynchrounous)Blocking vs Non-blockingCallback(JS)setTimeoutPromiseasync/await동기적 실행 - 즉시 실행비동기적 실행 - 나중에 실행순차적으로 코드가 실행된다

개념동기와 비동기 (synchronous vs asynchrounous)Blocking vs Non-blockingCallback사용setTimeout()Promisethen()Promise.all()async/await다시 setTimeout 예시로 돌아가보자. 순서

Promise chainingFetch먼저 Promise 를 사용하여 숫자를 차례대로 1, 12, 123 출력해 보자..then 을 이어붙여 chaining 을 만들 수 있다.알 수 있는 점:맨 위 new Promise 는 내부적으로 resolve를 호출함으로써 { s

"async 와 await 는 Promise 를 작성하기 쉽게 만들어 준다."async 는 함수가 Promise 를 반환하도록 만들어준다.await 은 함수가 Promise 를 기다리도록 만들어준다.async와 await 은 Promise 의 syntactic suga

"async 와 await 는 Promise 를 작성하기 쉽게 만들어 준다."async 는 함수가 Promise 를 반환하도록 만들어준다.await 은 함수가 Promise 를 기다리도록 만들어준다.async와 await 은 Promise 의 syntactic suga

클라이언트-서버 콘셉트를 이해할 수 있다.클라이언트-서버 아키텍처를 이해할 수 있다.HTTP를 이용한 클라이언트-서버 통신을 이해할 수 있다.API의 개념을 이해할 수 있다.브라우저의 작동 원리를 이해할 수 있다.보이지 않는 곳의 통신을 이해할 수 있다.URL과 URI

REST API에 대해 이해할 수 있다.REST API 문서를 읽을 수 있다.REST API에 맞춰 디자인할 수 있다.Open API와 API Key에 대해 이해할 수 있다.Postman이 무엇인지 이해하고 사용할 수 있다.HTTP API 테스팅이 무엇인지 알 수 있다

리엑트는 "단방향 데이터 흐름(one-way data flow)" 이라는 특징을 가지고 있다.부모 컴포넌트가 자식 컴포넌트에게 Props 를 이용하여 데이터를 전달한다.State

Browser securityCORS브라우저가 위협을 받는 이유는 브라우저가 자바스크립트를 구동하며, 자바스크립트로 할 수 있는 것들이 많기 때문이다.클라이언트가 서버를 신뢰하기 때문에 발생하는 이슈.서버가 Script 태그 사이에 코드를 넣고 (script injec

http 모듈 사용노드 공식 문서 Anatomy of an HTTP Transactionhttps://nodejs.org/en/docs/guides/anatomy-of-an-http-transaction/1단계 : 요청 메소드 정리2단계 : route 정리3단

Express 는 오픈소스 Node.js 백엔드 어플리케이션 프레임워크이다. 사실상("de facto") Node.js 의 정식 서버 프레임워크로 여겨지고 있다. 위키피디아express 를 사용하면 node.js 서버 구축을 더 쉽고 간편하게 할 수 있다.

컴포넌트 기반 Bottom-up 방식 개발Storybook구조적으로 CSS를 작성하는 방법의 발전과 이유Styled-ComponentDOM Reference를 활용하기 위한 useRef Hook필요한 기능들을 컴포넌트 단위로 만든 뒤 컴포넌트들을 조립하여 하나의 앱 혹

DOM 엘리먼트의 주소값을 활용해야 할 경우 (아래의 경우) useRef 를 활용한다.focus (텍스트 입력창에 위치하기)text selection media playback (영상 재생 멈춤 등)에니메이션 적용d3.js, greensock 등 DOM 기반 라이브러리

(of a topic, attributive, postpositive) Redone, restored, brought back, or revisited. 돌아온.After an unusually cold August, September felt like summer r

CSR - 정적 웹사이트 (클라이언트가 html 렌더링)SSR - 동적 웹사이트 (서버가 html 렌더링)AJAX 이전에는 동적 웹사이트가 많았으나 이후로는 정적 웹사이트가 많아졌다.퍼포먼스를 위해 정적 동적 방법을 섞기도 한다. (서버 컴퓨터가 성능이 좋기 때문에)현

Access permission Environmental variable

알고리즘 - '문제를 어떤 식으로 푸는 것이 최선인가'제한사항 및 주의사항 꼼꼼히 읽기.suedo code 짜기그림 그리기전략을 코드로 옮기기최적화 해보기입력값의 증가/감소에 따라 시간이 얼마만큼 비례하여 증가/감소하는가?효율적인 알고리즘 - 입력값이 커짐에 따라 증가

Greedy algorithm 은 결정의 순간마다 당장 눈앞에 보이는 최적의 상황만을 탐욕적으로 쫓아 최종적인 해답에 도달하는 방법이다.선택 절차 (Selection Procedure): 현재 상태에서의 최적의 해답을 선택한다.적절성 검사 (Feasibility Che

내생각엔 저 개념의 가장 기본적인 형태를 코드로 구현하는 법을 이해하고 (+외우고) 응용 알고리즘을 푸는 것이 순서 같다. 알고리즘 관련 글 & 코드는 github repository 에 저장하려고 한다.

파일을 저장하는 방법:프로그램이 실행될 때만 존재하는 데이터가 있다. 이 데이터들은 예를 들어 브라우저 환경에서 변수나 배열같은 데이터를 만들면 브라우저가 종료되는 순간 static memory 나 heap memory 를 해제하기 때문에 데이터의 수명이 프로그램의 수

NoSQL 이란SQL vs NoSQL데이터베이스는 크게 relational database 와 non-relational database 로 양분된다.Relational DB 는 SQL 로 데이터를 다룬다.Non-relational DB 는 NoSQL 로 데이터를 다룬

관계형이라고 부르는 이유는 구조화된 데이터가 하나의 테이블로 표현이 되는데 사전에 정의된 테이블을 relation 이라고도 한다. 테이블을 사용하는 DB = 관계형 DBData - 각 항목에 저장되는 값Table (or relation) - 사전에 정의된, 행과 열로

테이블JOIN 할 때 순서 상관 Xsubquery - 가장 빨리 실행되는 query

Model, View, Controllerhttps://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller디자인 패턴 중 하나.코드를 기능별로 나누는 작업.코드의 가독성을 높인다.user 와 control

NoSQL의 장점 및 특징에 대해서 이해 할 수 있다.MongoDB의 도큐먼트(Document)와 컬렉션(Collection)에 대해 이해할 수 있다.JSON과 BSON의 차이점을 이해하고, 도큐먼트를 가져오거나 내보낼 수 있다.MongoDB의 Atlas에 대해 이해할

Hyper Text Transfer Protocol Secure socket layerHTTPS 는 HTTP 요청을 SSL 혹은 TLS 라는 알고리즘을 통해 HTTP 통신을 하는 과정에서 내용을 암호화하여 데이터를 전송하는 방법이다.'중간자 공격' - 중간에 데이터를

세션 - 정보의 교환. 통신이 가능한 상태. 예) 로그인 기능클라이언트가 id 와 pw 를 서버에 보내어 로그인 요청을 한다.서버는 비밀번호를 해쉬한 값과 DB 에 저장된 hash 값을 비교하여 맞는지 확인한다.(이때 hash 값은 salt 가 쳐진 hash 값) 이때

Session vs Token = 인증정보가 어디에 저장되는가?Session -> client, serverToken -> serverClient-only 인증방식 - 서버의 부하를 줄임.Token 은 유저 정보를 암호화한 상태로 담을 수 있고, 암호화 했기 때문에 클

OAuth is an open-standard authorization protocol or framework that provides applications the ability for “secure designated access.”쉽게 말해 소셜 로그인.굳이 회원

Unicode - 전 세계에서 모든 문자를 컴퓨터에서 일관되게 표현할 수 있도록 설계된 산업 표준같은 글이라도 인코딩 방식이 다를 경우 그 파일을 지원하지 않으면 읽을 수 없다. 따라서 인코딩 방식을 통일하려는 것.인코딩 - 어떤 문자나 기호를 컴퓨터가 이용할 수 있도

IP - Internet ProtocolIP 주소를 부여해 통신IP는 지정한 IP 주소에 packet 이라는 통신 단위로 데이터 전달IP packet 에 포함된 정보 - 촐발IP, 도착IP 등패킷 단위로 전송을 하면 노드(서버)들은 목적지 IP 에 도달하기 위해 서로

Content Delivery Network콘텐츠를 더 빠르고 효율적으로 제공하기 위해 등장한 서비스특징원본을 복사하여 저장할 여러개의 캐시 서버로 구성콘텐츠를 요청받은 경우 해당 콘텐츠를 가진 서버 중 지리적으로 제일 가까운 캐시 서버에서 제공Static Conten

소스코드의 한 시점과 동일한 상태를 만들고 브랜치를 넘나들며 작업 수행 가능.여러 개발자가 동시에 다른 작업을 할 수 있다.기존의 소스코드를 해치지 않으면서 다른 작업을 시도해보고 싶을 때도 활용 가능각각의 브랜치에서 생긴 변화가 다른 브랜치에 영향을 주지 않고 독립적

전산실에 서버 컴퓨터 직접 구매 및 설치요청 수용능력 한계시 컴퓨터 추가구매 및 성능 업글관리비용 많이듦, 공간의 한계\-> 가상화 기술 발전, 데이터 센터 등장. "On promise" 환경서버의 자원, 공간, 네트워크 환경 제공필요할 때마다 컴퓨팅 능력을 유연하게

AWS 로 github 에 수정사항을 commit 하면 자동으로 수정사항을 반영하게 만들 수 있다.Source stage -> Build stage -> Deploy stageSource stage - Github 같은 저장소에 코드 변경이 생기면 감지Build sta