CS
1.[CS] 변수 Day-1
변수 사용은 데이터를 저장하고 꺼내 쓰는 역할을 한다. 값으로 변환된 표현문이 변수에 할당된다.= : 할당연산자 (같다 라는 의미가 아니라, 할당한다는 뜻입니다.)변수의 사용1\. 선언 (declaration)할당 (assignment)변수의 타입변수란 상황에 따라 변
2.[CS] 타입 Day-1
타입은 숫자나 문자와 같이 변수에 할당 할 수 있는 형태를 얘기합니다.원시 자료형 : string, number, boolean, undefined등 이해하기typeof를 활용해 특정 값의 타입을 확인하기비교 시 엄밀한 비교 (=== 과 !==) 필요성 이해하기변수의
3.[CS] 함수 Day-1
함수는 입력에 따라 작업을 하는 하나의 단위입니다. 함수는 일련의 작업을 논리적으로 만들어줘야 합니다.샌드위치를 만드는 과정을 함수로 표현링크텍스트함수란?1\. 코드의 묶음 (지시사항의 묶음)2\. 기능의 단위3\. 구체적인 입력값과 출력값4\. 반드시 출력 retur
4.[CS] 코드 학습법 Day-1
구글링을 통해 모든 것을 찾을 수 있습니다. 구글링을 통해 문법 에러를 최소화시키고, 에러가 발생했을 때 왜? 인지 찾아내야한다. 모르는 것을 검색하는 방법 문제의 분석이 가장 우선시 되어야 한다. 키워드를 추출해 낸다. => mdn 키워드를 작성하고 키워드를 입
5.[CS] 조건문 Day-1
조건문의 기본1\. true, false 작동 방식의 이해2\. 비교연산자와 엄격한 비교(===, !==)에 대한 이해3\. if, else if, else 이해4\. 논리연산자(&&, ||, ! ...)의 이해조건문조건을 배우기 위해서는 Boolean 타입에 대한 이
6.[CS] 문자열 Day-2
모든 글자의 나열을 문자열이라고 합니다. 컴퓨터는 코드와 문자열을 구분하기 위해서 작은 따옴표 (') 또는 큰 따옴표 (")를 사용해 문자열을 구분합니다. 문자열의 기본 문자열의 length 라는 속성을 활용해 길이를 확인 할 수 있습니다. ex)str.length
7.[CS] 반복문 Day-3
수 많은 코드의 단순학 반복을 보다 효율적이고 간결하게 할 수 있도록 하는 반복문ex) 가장 기본적인 for문반복문이란?같거나 비슷한 코드를 여러 번 실행시켜야 할 경우 쓰는 구문ex)반복문에는 while 구문도 있습니다.For문으로 사용할 수 있는 건 while문으
8.[CS] HTML, CSS, JS Day-4
HTML웹 페이지의 구조를 담당하는 언어CSS디자인 요소를 시각화하는 언어JS단순한 웹페이지를 프로그램으로 만들어 User와 상호작용을 도와줌자주 사용되는 HTML 요소 (Element)div, span, ul, ol, li 에 대해서 알아보자.div => Divisi
9.[CS] HTML Day-5
div => Divisionspan => Spanimg => Imagea => Linkul & li => Unordered List & List Iteminput => Input (Text, Radio, Checkbox)textarea => Multi-line Text
10.[CS] CSS 기초 Day-6
CSS? HTML이 웹 페이지의 구조를 담당한다면, CSS는 구조의 외부와 내부를 꾸미는 역할을 담당합니다. CSS파일을 적용하여 전혀 다른 웹사이트로 탈바꿈할 수 있습니다. CSS 스타일링 화려함만을 위해 CSS를 사용하는 것이 아닙니다. 콘텐츠의 배치와 위치, 텍
11.[CS] JavaScript 계산기 만들기 Day-6
소프트웨어가 그 역할을 하기에 필요한 최소한의 요구사항입니다. 프로토타입으로 빠르게 만들어진 것을 뜻하며 이후 기획자, 디자이너와 함께 UX를 개선해야 합니다. 이후 테스트를 하면서 소프트웨어에서 생길 수 있는 오류를 좀 더 빠르게 예측할 수 있습니다.
12.[CS] CLI 기초 Day-7
Command-Line Interface는 명령어를 입력해 컴퓨터를 조작하는 방식을 말합니다. 사용자가 화면을 통해 컴퓨터와 소통하는 방식을 얘기합니다. ex)위와 같이 입력 시 clipractice 폴더가 생성됩니다.컴퓨터를 조작하기 위해서는 다양한 입력(input)
13.[CS] MacOS 패키지 매니저 Brew Day-7
패키지 매니저를 사용하지 않고, 프로그램을 독립적으로 설치할 경우 프로그램을 개별로 설치해야 하기 때문에 각각의 프로그램이 저장된 위치를 모두 알아야 합니다. 설치 프로그램이 많아질 경우 업데이트가 힘들어집니다. 따라서 이런 문제를 보완하는 방법이 패키지 매니저를 사용
14.[CS] Node.js Day-7
런타임이란 프로그래밍 언어가 구동되는 환경입니다. 쉽게 말해 프로그램이 동작할 때 프로그램이 동작하는 공간입니다. ex) Chrome, Safari 등 기존에는 JavaScript 런타임이 웹 브라우저 밖에 없었지만 node.js의 등장으로 브라우저가 아닌 공간에서도
15.[CS] npm 과 package.json Day-8
노드를 통해 Js 파일을 실행할 수 있습니다.ex) helloworld.js 파일이 있을 경우node.js 에서는 npm 모듈이라는 이름으로 부르며, 관련 정보를 담아둔 곳이 package.json 입니다.프로젝트(패키지) 전바에 대한 자료들이 담겨져 있습니다.npm은
16.[CS] Git Day-9
코드 작성 중 잘못된 코드를 입력 후 종료했다면 이전 코드로 돌아갈 수 없습니다. 이런 경우를 대비해 내용을 보존해야할 필요성이 있습니다. 이 시스템을 우리는 버전 관리 시스템 (Version Control System)이라고 부릅니다.버전 관리 시스템 중 가장 많이
17.[CS] Git 설치 Day-10
터미널을 열고을 입력해 설치할 수 있습니다. 설치 완료 후을 통해 정상적으로 설치됐는지 확인이 가능합니다.설치 후 터미널 환경에서 사용자 이름과 이메일 주소를 Github에 등록된 사용자 이름과 이메일 주소를 사용해야 합니다.Name 과 email 등록하기Github의
18.[CS] Git 기초 Day-10
forkclonestatusrestoreaddcommitresetlogpullpushinitremote addremote -vbranchmergeremote repository에서 origin 과 upstream 의 차이Remote Repository를 가지고 오기 위
19.[CS] Git 보충 설명 Day-11
Remote Repository와 잘 연결된 것인지 목록과 주소들을 확인할 수 있는 명령어Remote Repository 연결 완료 후 commit, push 전 동료 개발자의 코드를 내 Local로 받아오는 명령어{main}의 경우 {master}가 될 수도 있고,
20.[CS] 배열 Day-12
배열과 객체를 통해 대량의 데이터를 쉽게 다룰 수 있습니다. 배열과 객체를 다루기 위해서는 참조 타입(reference type)데이터에서 배워야 합니다. 참조 타입은(숫자, 문자열, boolean, undefined 등)과 다른 성격을 가지고 있습니다. 배열 (
21.[CS] 객체 Day-13
각기 다른 값을 가지지만, 입력해야하는 데이터의 종류가 동일한 경우 객체를 사용하여 데이터를 쉽게 관리할 수 있습니다. 이렇게 공통적인 속성을 가지는 경우 객체를 사용합니다. 객체의 핵심 포인트 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유롭게 할
22.[CS] 배열, 객체 추가 자료 Day-13
배열이 빈 배열인지 확인하는 가장 알맞은 방법 가장 쉽고 직관적인 방법입니다. 배열과 요소를 입력받고 주어진 요소를 배열 맨 앞에 추가할 때 unshift를 통해 기존 배열 앞에 element를 추가하고 배열을 리턴하면 됩니다. 배열과 인덱스를 입력받아 주어진
23.[CS] CSS Day-14
CSS를 통해 콘텐츠를 원하는 위치에 배치하는 것을 넘어, 화면 설계의 기본을 알아보는 시간. CSS를 잘하기 위해서는 #과 . 의 차이를 이해해야하고, 절대 단위와 상대 단위를 구분할 수 있어야 합니다. id를 선택할 때는 #을 사용하고 class를 선택할 때는
24.[CS] HTML + Flexbox Day-14
HTML 구성하기 대부분 좌에서 우, 위에서 아래로 진행합니다. CSS 화면 구분 시 수직분할과 수평분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행합니다. 수직분할 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치합니다. 수평분할
25.[CS] Content 정렬 Day-14
Flexbox를 원하는대로 제어하기 위해서는 axis(축)을 잘 이해해야 합니다.axis(축)은 main axis와 cross axis가 있습니다.main axis는 flex-direction 속성에 의해 결정됩니다.flex-direction의 기본 값(row) 상태
26.[CS] 원시 자료형과 참조 자료형 Day-15
원시 타입(primitive type)데이터란 number, string, boolean과 같이 고정된 저장 공간을 차지하는 것을 뜻합니다. // 원시 타입의 종류 => number, boolean, null, undefined, string반면 배열과 객체는 저장공간
27.[CS] Scope (스코프) Day-15
컴퓨터 공학에서 Scope는 '범위'를 뜻합니다. 정확하게 얘기하면 "변수의 유효범위"로 사용됩니다. let, const의 옳바른 사용법과 무엇을 권장하는지 알아보기 위해 글을 작성합니다.Scope를 공부하는 이유는중첩 규칙block scope와 function sco
28.[CS] Wireframe (와이어프레임) Day-16
Wireframe (와이어프레임) 이란? 웹 또는 앱 개발을 할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 합니다. 단순한 선이나 도형으로 웹, 앱 인터페이스를 시각적으로 묘사하는 것 입니다. 단순하게, 레이아웃과 제품의 구조를 보여주는 용도입니다. (효과,
29.[CS] Scope에 대한 이해 Day-16
함수 get은 x를 반환합니다. 따라서 전역 스코프 x 를 바라봅니다. 하지만 get 함수에 x라는 변수가 별도로 선언되어 있지 않기 때문에 result에 30이 할당됩니다.get(20)은 아무 필요가 없습니다. 20이라는 인자를 받아 함수에 전달했지만 get 함수에는
30.[CS] 클로저 Day-16
함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 뜻합니다. 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성됩니다."외부함수의 변수에 접근할 수 있는 내부함수"를 클로저라 부르기도 합니다.화살표 함수를 이용한 간단한 덧셈 함수함수 호출 방식
31.[CS] 클로저 이해하기 Day-16
seenYet 함수가 return 하고 있는 익명 함수가 클로저 function 입니다.seenYet이 반환하는 익명함수는 외부함수 seenYet의 스코프에 선언된 변수 archive에 접근할 수 있기 때문에 클러저입니다.함수 add는 매개변수로 하며, 함수 sum을
32.[CS] Spread/Rest Day-16
주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용됩니다.배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용합니다.기존 배열을 변경하지 않는 (immutable) 입니다. 순서를 바꾸려면 새롭게 할당해야 합니다.분
33.[CS] DOM Day-17
DOM이란? Document Object Model의 약자입니다. 프로그래머 입장에서 바라 본 HTML입니다. DOM을 이해하고 조작할 수 있다면 HTML을 단순화 해 웹앱으로 업그레이드 할 수 있습니다. HTML에 JavaScript 적용하기 HTML에 JavaSc
34.[CS] DOM Day-18
DOM Document Object Model JavaScript를 이용해 Element 속성값을 얻어내거나, 변경하는 방법 DOM은 JavaScript가 아닙니다. (JavaScript를 이용해 DOM구조에 접근) HTML문서의 구조와 관계를 객체(Object)로 표
35.[CS] React Day-18
웹, 데스크탑, 모바일 등 다양한 플랫폼에서 활용할 수 있는 프론트엔드 라이브러리, React에 대해서 공부하겠습니다.React의 3가지 특징에 대한 이해JSX가 왜 명시적인지 이해하고 작성하기React Component의 필요성에 대한 이해프론트앤드 개발을 위한 Ja
36.[CS] 고차함수 Day-19
고차함수에서 우리가 배워야 될 것 일급 객체(first-class citizen)의 세 가지 특징 고차 함수(higher-order function) 고차 함수를 JS로 작성 일급 객체 (first-class citizen)이란? JavaScript에서 일급 객체는
37.[CS] React SPA, Wireframe Day-20
SPA는 Single Page Application의 약자입니다.전통적인 웹 사이트는 페이지를 보여주기 위해서 매번 HTML 파일 전체를 불러와야 했습니다.하지만 SPA를 통해 변경 된 부분만 새로 불러오기 때문에 깜빡임이 사라졌습니다.전체 페이지를 계속해서 새로 고침
38.[CS] React Router Day-20
npm install react-router-dom SPA와 Routing SPA는 하나의 페이지를 보여주지만 사실 한 화면만 가지고 있는 것이 아닙니다. 각 페이지별 다른 화면이 존재하지만 공통된 부분을 계속 유지하고 있는 것일 뿐입니다. 중요한 점은 각 페이지
39.[CS] React State & Props Day-21
React 함수 컴포넌트 (React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있습니다.React Component에 props를 전달할 수 있습니다.살면서 변할 수 있는 값을 뜻합니다. (일반적으로 상태)라
40.[CS] Reduce 추가 공부 Day-22
forEach, for, for..of를 사용하면 배열 내 요소를 반복 작업할 수 있습니다.각 요소를 돌면서 반복 작업을 수행하고, 작업 결과물을 새로운 배열 형태로 얻으려면 map을 사용하면 됩니다.arr.reduce와 arr.reduceRight도 이런 메소드와 유
41.[CS] 객체 지향 Day-23
객체 지향 프로그래밍 (OOP, Object-oriented programming)은 절차 지향 프로그래밍과는 다르게 데이터와 기능을 한 곳에 묶어서 처리합니다.객체 지향 프로그래밍 특징캡슐화상속추상화다형성prototype: 모델의 청사진을 만들 때 쓰는 원형 객체(o
42.[CS] prototype Day-23
객체 지향 프로그래밍의 등장 이전..초기의 프로그래밍 언어는 일반적으로 절차적 언어라고 불렀습니다.절차적 언어에는 객체 지향의 개념이 없는 언어였습니다.'class'라고 부르는 데이터 모델의 청사진을 사용해 코드를 작성합니다.현대의 언어들은 대부분 객체 지향 특징을 가
43.[CS] prototype 추가 공부Day-23
JavaScript에 더 많은 기능을 붙인 TypeScript가 객체 지향적으로 디자인되었다.Java, TypeScript는 Class 내부에서만 사용하는 속성 및 메소드를 구분하기 위해 private 이라는 키워드를 제공합니다. JavaScript도 은닉화를 도와주는
44.[CS] 재귀(recursion) Day-24
문제가 있고, 문제를 더 작은 문제로 나눌 수 있다. 더 작은 문제를 해결하여 전체 문제를 해결하는 방법을 재귀(recursion)이라고 한다. 재귀(recursion)을 사용하면 코드를 간결하게 만들고, 이해하기 쉽습니다. 재귀를 잘하기 위해서는 문제를 쪼개 생각
45.[CS] StringifyJSON Day-25
JSON 구조가 재귀 함수를 사용할 수 있는 Tree 구조임을 이해해야 합니다. JSON.strigify JSON.parse seriealize deserialize JSON의 탄생 배경 JSON이란 JavaScript Object Notation의 줄임말입니다.
46.[CS] 자료구조(Stack & Queue) 기초 Day-26
여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것입니다.데이터란? 문자, 숫자, 소리, 그림, 영상 등 실생활을 구성하고 있는 모든 값입니다.데이터는 분석하고 정리하고, 활용해야 의미를 가질 수 있습니다.자료구조를 통해 목적에 맞게 구분하고, 분류하여 사용합니
47.[CS] 자료구조(Graph, Tree & BST) 기초 Day-26
일반적으로 수학에서 얘기하는 그래프가 아니라 복잡한 네트워크망을 그래프라고 합니다.여러개의 점들이 서로 복잡하게 연결되어 있는 관계를 표현한 자료구조입니다. 직접적인 관계가 있는 경우 두 점 사이를 이어주는 선이 있습니다.포털 사이트의 검색 엔진, SNS에서 사람들과의
48.[CS] 비동기(고차함수, Underbar) Day-27
Blocking: 하나의 작업이 끝날 때까지, 이어지는 작업을 막는 것 입니다.이런 불편한 작업 방식을 대체하기 위해 Node.js는 non-blocking하고 비동기적(asynchronous)로 작동하는 런타임으로 개발하게 됩니다.JavaScript는 비동기적 실행이
49.[CS] fetch(네트워크 요청) Day-27
비동기 요청의 가장 핵심은 네트워크 요청이라고 볼 수 있습니다. 네트워크 요청 형태는 다양하지만 URL로 요청하는 경우가 많습니다. 이걸 가능하게 만들어주는 것이 fetch API 입니다. fetch API 특정 URL로부터 정보를 받아오는 역할을 합니다. 이 과정
50.[CS] 클라이언트-서버 아키텍처 Day-28
인터넷 연결이 없다면, 데이터를 정상적으로 받아올 수 없기 때문에 동작하지 않습니다.(Server는 영어 뜻 그대로 Serve 하는 주체입니다.)정보를 보여주는 클라이언트와 데이터를 받아오는 서버를 불러오는 걸 분리시킨 것을 클라이언트-서버 아키텍처라고 부릅니다.클라이
51.[CS] 브라우저 작동 원리 Day-28
Uniform Resource Locator의 줄임말로, 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타냅니다.URL은 scheme, hosts, url-path로 구분됩니다. scheme: 통신 방식(프로토콜)을 결정합니다. (일반적으로
52.[CS] HTTP message Day-28
HyperText Transfer Protocol의 줄임말로, HTML과 같은 문서를 전송하기 위한 Application Layer 프로토콜입니다. HTTP는 웹 브라우저와 웹 서버의 소통을 위한 것입니다.클라이언트-서버 통신에서 HTTP messages 양식에 맞춰
53.[CS] AJAX, SSR, CSR, CORS Day-28
Asynchronous JavaScript And XMLHttpRequest 약자로 JavaScript, DOM, Fetch, XMLHttpReqest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법입니다.AJAX의 가장 큰 특징은 웹 페이지에 필요한 부분에 필요
54.[CS] REST API Day-29
Representational State Transfer의 약자로 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고 HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식입니다.웹 애플리케이션은 HTTP 메소드를 이용해 서버와 통신합니다. GET을 통해 웹 페이
55.[CS] Postman Day-29
브라우저는 서버에 HTTP 요청을 보낼 수 있는 훌륭한 도구입니다. 하지만 주로 웹 페이지를 받아오는 GET 요청에 사용합니다. 브라우저에서 GET이 아닌 다른 요청을 보내기는 까다롭습니다. 이런 이유로 HTTP 요청을 테스트할 수 있는 다양한 도구가 있습니다.새로운
56.[CS] HTTP/NetWork 문제 Day-29
클라이언트-서버 모델 웹 개발에서 클라이언트는 브라우저를 뜻합니다. 클라이언트는 서버에 요청을 보내고 응답을 받습니다. 서버는 DB에 요청을 보내고, 응답을 받습니다. 웹 개발 대표적인 프로토콜 80: HTTP URL 구성 요소 scheme ex) https://
57.[CS] React 데이터 흐름 Day-30
React 데이터 흐름 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작하는 것입니다. 상향식(bottom-up)으로 앱을 만듭니다. 가장 큰 장점은 테스트가 쉽고 확장성이 좋습니다.(컴포넌트 계층 구조로 나누는 것이 가장 우선순위가
58.[CS] Node.js Express Day-31
Express.js는 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 있는 프레임워크입니다. Express framework는 npm을 통해 다운로드 할 수 있고 http 모듈로 작성한 것과 달리 미들웨어 추가가 편리하고, 자체 라우
59.[CS] React Component Day-32
레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행 할 수 있습니다.CDD를 지원하는 도구 중 하나가 Component Explorer입니다. UI 개발도구가 다양하게 있고 그 중 하나가 Storybook 입니다.각각의 컴포넌트들을 따
60.[CS] Styled-Component Day-32
React 라이브러리 중 가장 인기 있는 게 Styled-Component 입니다.React의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생하였습니다.Automatic critical CSSStyled-Component는 화면에 어떤 컴포
61.[CS] 상태 관리 Day-32
UI에 동적으로 표현될 데이터입니다. (상태는 변하는 데이터입니다.)함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인React의 주요 개발 원칙 중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것입니다. 따라서 컴포넌트 우선 개발 방식에
62.[CS] 객체 지향 JavaScript Day-33
객체 지향 프로그래밍은 데이터와 기능을 한 곳에 묶어 처리합니다.코드를 추상화하여 직관적으로 생각할 수 있기 때문에, 오래 전부터 프로그래밍 방법론으로 매우 빠르게 적용되었습니다.외부 함수의 변수에 접근할 수 있는 내부 함수 또는 이러한 작동 원리를 일컫는다.함수와 함
63.[CS] JavaScript와 기타 객체 지향 언어와의 차이점 Day-33
JavaScript 프로그래밍 언어는 클래스 내부에서만 쓰이는 속성 및 메소드를 구분시키기 위해 private이라는 키워드를 제공합니다. 이러한 은닉화를 도와주는 기능이 JavaScript에서는 (거의)쓰이지 않습니다.하지만 TypeScript에서는 private 키워
64.[CS] 재귀 Day-34
재귀를 사용한 코드는 대부분 간결해지고, 이해하기 쉽습니다. 재귀의 핵심은 문제를 해결하기 위해 다양한 방식으로 생각하는 능력을 기르는 것입니다.
65.[CS] 자료구조 기초 Day-35
자료구조란? > 데이터란? 문자, 숫자, 소리, 그림, 영상 등 실생활을 구성하고 있는 모든 값입니다. 데이터는 분석하고 정리하여 활용해야 의미를 가질 수 있습니다. 또한 목적에 따라 형태를 구분하고, 분류하여 사용합니다. 필요에 따라 데이터의 특징을 잘 파악(분석
66.[CS] 비동기 Day-36
비동기 쉽게 이해하기 하나의 작업이 끝날 때 까지, 이어지는 작업을 "막는 것"입니다. (blocking) Node.js는 non-blocking하고 비동기적(asynchronous)로 작동하는 런타임으로 개발됐습니다. JavaScript의 비동기적 실행(Asynch
67.[CS] Node.js 모듈 사용법 Day-36
Node.js의 경우 많은 API가 비동기로 작성되어 있습니다.어떤 기능을 조립할 수 있는 형태로 만든 부분입니다. fs(File System) 모듈은, PC의 파일을 읽거나 저장하는 등의 일을 할 수 있게 도와줍니다.개발자는 자신이 이해하는 만큼의 모듈을 사용할 수
68.[CS] HTTP/네트워크 기초 Day-37
Client Server Architecture 인터넷 연결이 없다면, 앱은 정상적으로 동작할 수 없습니다. 그 이유는 정보를 인터넷 어딘가에 존재하는 서버로부터 받아오기 때문입니다. 특정 서버에 접속하려 할 때 사용이 불가능한 경우 "서버가 죽었다"라고 표현합니다.
69.[CS] 브라우저의 작동 원리 Day-38
SPA를 만드는 기술 (AJAX) AJAX 란? 웹 페이지에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있습니다. (Asynchronous JavaScript And XMLHttpRequest의 약자로 JavaScript, DOM, Fetch, XMLHt
70.[CS] HTTP/네트워크(REST API, Postman, Message States) Day-39
웹 애플리케이션에서는 HTTP 메소드를 이용해 서버와 통신합니다. GET을 통해 웹 페이지나 데이터를 요청하고, POST로 새로운 글이나 데이터를 전송하고, DELETE로 저장된 글이나 데이터를 삭제할 수 있습니다. 규칙없이 이루어지는 것이 아닙니다. 제대로 보내고 받
71.[CS] 데이터 흐름의 이해 비동기 요청 Day-40
React에서의 데이터 흐름 React의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점입니다. 컴포넌트를 만들고, 페이지를 조립해 나가는 것이 React의 특징입니다. 상향식(Bottom-Up)으로 앱을 만듭니다. > Bottom-Up (상향식
72.[CS] Web Server Day-41
CORS 고도화 된 최근의 웹은 여러 곳에 있는 리소스를 활용할 필요가 생겼다. (Cross Origin Resource Sharing) HTTP 트랜잭션 해부 서버 생성 모든 node 웹 서버 애플리케이션은 웹 서버 객체를 만들어야 합니다. 이 때 createSer
73.[CS] Component Design Day-42
Component Develop Component Driven Development 여러 팀과 같은 UI Component를 공유한다면 Component 단위 개발이 중요합니다. 재사용할 수 있는 UI Component를 미리 디자인하고 개발하면 이런 고민을 해결할 수
74.[CS] React 상태 관리 Day-43
React는 상태 관리를 위한 라이브러리가 아닙니다. 하지만 상태 관리 주요 원칙을 배우고 따라가면, 컴포넌트 간 서로 느슨하게 결합된 아름다운 코드를 작성할 수 있습니다.상태는 변하는 데이터입니다. (동적으로 표현되는 데이터)함수의 입력 외에도 함수의 결과에 영향을
75.[CS] 클라이언트 빌드와 배포 Day-44
웹 페이지를 브라우저에서 렌더링하는 대신, 서버에서 렌더링합니다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송합니다. (웹 페이지가 브라우저에 도착하면 완전 렌더링 됩니다. 서버에서 완전 렌더링했기 때문에 SRR이라
76.[CS] 사용 권한(Read, Write, Execute) Day-45
파일의 소유자와 파일에 적용된 사용 권한을 확인하고 이해할 수 있다파일에 적용된 사용 권한을 변경할 수 있다.터미널에 접속해 test 폴더로 접근합니다.표현의 첫 시작인 - 와 d는 각각 not directory와 directory를 나타냅니다. 폴더일 경우 d로, 파
77.[CS] 환경 변수 Day-45
Javascript에서 변수는 스코프에 따라 전역변수와 지역변수로 나뉩니다. 파일 A에서 전역 변수로 선언해도, 파일 B에서 A의 전역변수에 접근할 수 없습니다. 하지만 A의 전역변수를 export한다면 B에서 A의 전역변수에 접근할 수 있습니다.저장된 환경변수 확인,
78.[CS] Time Complexity Day-46
입력값의 변화에 따라 연산을 실행할 때, 연산 횟수에 비해 시간이 얼만큼 걸리는가입력값이 커짐에 따라 증가하는 시간의 비율을 최소화한 알고리즘을 구성했다는 이야기입니다. 시간 복잡도는 주로 빅-오 표기법을 사용해 나타냅니다.Big-O(빅-오)Big-Ω(빅-오메가)Bi
79.[CS] Greedy Algorithm / Implementation Day-46
매 순간, 최적이라 생각되는 해답을 찾으며, 이를 토대로 최종 문제의 해답에 도달하는 문제 해결 방식입니다. (항상 최적의 결과를 보장하지는 못합니다.)탐욕적 선택 속성: 앞의 선택이 이후에 선택에 영향을 주지 않습니다.최적 부분 구조: 문제에 대한 최종 해결 방법은
80.[CS] Algorithm with Math Day-47
문제를 풀기 위한 3가지 개념GCD/LCM (최대공약수, 최소공배수)(greatest common divisor/ least common multiple)순열/조합멱집합순열: 순서를 지키며 나열하는 것ex) 5장의 카드에서 3장을 뽑으면서 나열할 때 5p35장에서 3장
81.[CS] 정규 표현식 Day-48
정규표현식은 문자열에서 특정한 문자열을 찾아내는 도구입니다. 규칙들을 조합하여 원하는 패턴을 만들고, 특정 문자열에서 해당 패턴과 대응하는 문자를 찾을 수 있습니다. 정규표현식을 사용해 한 줄의 코드만으로 이메일이나 휴대전화 번호의 유효성을 검사할 수 있습니다.
82.[CS] 관계형 데이터베이스 Day-49
데이터 베이스의 필요성 In-Memory 예기치 못한 상황으로부터 데이터를 보호하고, 프로그램이 종료된 상태에서도 데이터를 원하는 시간에 받아올 수 있다. File I/O > 단점: 데이터가 필요할 때마다 전체 파일을 읽어야 합니다. 파일의 크기가 커질수록 작업이
83.[CS] 데이터베이스 설계 Day-49
스키마(Schema)는 데이터베이스에서 데이터가 구성되는 방식과 서로 다른 엔티티 간의 관계에 대한 설명입니다. (데이터베이스의 청사진)고유한 정보의 단위입니다. (내 기준으로는 models)와 같은 느낌..?)엔티티는 데이터베이스에서 테이블로 표시할 수 있습니다.각
84.[CS] MVC Day-50
소프트웨어가 돌아가는 방식에 대한 patternModelViewController데이터를 정보를 가지고 있다. (Database와 연결된 상태에서 가져올 수 있거나..) Controller와 소통한다.View에서 일어나는 Action과 Event를 받아 가공 후 Mod
85.[CS] SQL 과 데이터베이스 정규화 Day-50
데이터베이스 정규화 데이터베이스 정규화는 설계와 관련이 있습니다. 설계에 따라 데이터가 어떻게 저장될지 그 구조를 결정하기 때문입니다. Data redundancy Data integrity Anomaly Data redundancy (중복성) 실제 데이터의 동일한
86.[CS] MVC / ORM Day-50
Object Relational MappingORM이 통역, 중개 역할을 한다.객체(Object)에서의 속성은 데이터베이스에서는 각 필드라고 볼 수 있다.promise-based Node.js ORMPostgresMySQLMariaDBSQLiteex) 예시 코드HasO
87.[CS] NoSQL / MongoDB Day-51
테이블이 아닌, 문서처럼 저장하는 데이터베이스를 의미합니다. 일반적으로 JSON 유사 형식으로 데이터를 문서화합니다. 각각의 도큐먼트는 데이터를 필드-값의 형태로 가지고 있고, 컬렉션이라고하는 그룹으로 묶어서 관리합니다.데이터를 행과 열이 아닌, 체계적인 방식으로 저장
88.[CS] MongoDB CRUD(Create, Read) Day-52
MongoDB Document 공통점, \_id 필드를 기본값으로 반드시 가지고 있어야 합니다.\_id 필드의 값은 각 Document를 구별하는 역할을 합니다.내부의 필드와 값이 똑같다 해도, \_id 값이 다르면 서로 다른 Document 가 됩니다.Document
89.[CS] MongoDB CRUD(Update, Delete) Day-53
db.(컬렉션이름).updateOne();db.(컬렉션이름).updateMany();$inc$set$push주어진 기준에 맞는 다수의 Document 중 첫번째 Document 하나만 업데이트findOne을 사용해 쿼리문에 맞는 첫 번째 Document를 리턴하는 예시
90.[CS] MongoDB Aggregation Framework Day-53
Aggregation Framework $match $group $project MongoDB에서 데이터를 쿼리하는 가장 간단한 방법 중 하나입니다. MQL을 사용하는 모든 쿼리는 Aggregation Framework에서도 할 수 있습니다. MongoDB쿼리 언어
91.[CS] MongoDB CRUD(심화) Day-54
MongoDB 비교 연산자 $eq $gt $gte $ne $lt $lte $eq = Equal To 지정된 값이 서로 같거나 같이 않은지 여부를 확인 할 수 있다. 반대되는 개념으로 $ne (Not Equal to)가 있다. $ne !== Not Equal To $
92.[CS] MongoDB CRUD(심화) 배열 연산자 / 배열과 Sub Document Day-55
배열 연산자 $elemMatch(projection) $elemMatch(query) Document에 너무 많은 필드와 정보가 있을 때 정보를 확인하기 어려울 때가 있습니다. 이를 완화하기 위해 find 쿼리에 프로젝션을 추가해 현재 관심있는 필드만 결과로 가져올
93.[CS] MongoDB Index Day-56
저장된 데이터 크기가 커질수록, 쿼리의 결과를 얻기까지 기다리는 시간은 늘어난다. 쿼리의 속도가 느려지는 경우를 해결하기 위한 방법 중 하나로 인덱싱을 사용할 수 있습니다. Index 각 대상의 위치가 표시된 곳, 해당 대상이 언급된 페이지로 바로 이동 가능한 참조라
94.[CS] MongoDB Atlas Cluster 생성하기 Day-56
Atlas Cluster 생성하기 (추가 예정)
95.[CS] 인증/보안 기초(HTTPS, 암호화, 인증서, 쿠키) Day-57
회원 가입 및 로그인, 로그아웃과 같은 기능 구현클라이언트, 서버, 데이터베이스암호와와 hashing, saltingHTTP / HTTPS 차이점을 이해권한 부여(Authorization) / 인증(Authentication)쿠키의 작동 원리세션 및 쿠키 / 토큰 /
96.[CS] 인증/ 보안 기초 문제 Day-58
HTTPS는 최신 프로토콜의 기반입니다. HTTP를 사용한 통신은 3자가 중간에 요청을 가로 채갈 경우 데이터를 쉽게 빼낼 수 있지만, HTTPS를 사용한 통신은 암호화가 되어있기 때문에 제3자가 중간에 요청을 가로채도 쉽게 복호화할 수 없습니다.인증서를 기반으로 데이
97.[CS] 세션 기반 인증 / 토큰 기반 인증 Day-58
Session 서버가 클라이언트에 유일하고 암호화된 ID를 부여 중요 데이터는 서버에서 관리 Session-based Authentication 서버는 아이디 및 비밀번호의 해시를 이미 알고있다면 매번 로그인할 필요가 없습니다. 쿠키와 세션의 차이 쿠키: http의
98.[CS] OAtuh 2.0 Day-59
인증을 위한 표준 프로토콜의 한 종류로, 보안 된 리소스에 엑세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜 중 한 가지 방법입니다.흔히 볼 수 있는 소셜 로그인 인증 방식은 OAuth 2.0 기술을 바탕으로 구현됩니다.전통적으로 직접 작성한
99.[CS] 컴퓨터 공학 기초 Day-60
2진법, 16진법에 대한 이해, 문자열을 다루는 방법과 운영체제의 프로세스, 스레드 개념을 학습합니다. 현대의 웹 서비스에서 쓰이는 캐싱 기법과 종류에 대해서 학습합니다.2010년 이후, 유니코드라고 불리는 인코딩 방식이 통일된 시대를 살아가고 있습니다. 프로그래밍 언
100.[CS] 운영체제(프로세스, 스레드, 멀티 스레드) / 가비지 컬렉션 / 캐시 Day-61
프로세스(Process) 운영체제에서 실행 중인 하나의 애플리케이션을 프로세스라고 합니다. 애플리케이션을 실행하면 운영체제로부터 실행에 필요한 메모리를 할당받아 애플리케이션 코드를 실행합니다. ex) 크롬을 여러개 실행하면? 두개의 프로세스가 생성됩니다. 하나의 애
101.[CS] 컴퓨터 공학 기초 문제 Day-62
하나의 프로그램이 여러 프로세스를 가질 수 있다.프로세스는 싱글 스레드 또는 멀티 스레드로 작동할 수 있다.프로세스는 프로그램이 메모리에 적재되어 운영체제로부터 필요한 공간, 파일, 메모리를 할당받는다.node.js의 Event loop는 싱글 스레드 작동이지만, Wo
102.[CS] 네트워크(인터넷 프로토콜) Day-63
네트워크 흐름을 이해하기 위해서는 웹 통신을 가능하게 한 HTTP 통신의 흐름을 파악해야 한다.응용 계층 (Application Layer): HTTP, DNS, SSL, SMTP, FTP표현 계층 (Presentation Layer): GIF, JPEG, MPEG,
103.[CS] HTTP 헤더 Day-64
HTTP 메시지는 헤더와 바디로 구분할 수 있습니다.바디에서는 메시지 본문 (Message Body)를 통해서 표현 (Representation) 데이터를 전달합니다.데이터를 실어 나르는 부분을 Payload라고 합니다.표현은 요청이나 응답에서 전달할 실제 데이터를 뜻
104.[CS] 웹 캐시 Day-65
(캐시가 없을 경우)클라이언트가 logo.jpg 이미지에 대한 요청을 보내고 서버가 해당 이미지에 대한 응답을 줄 때, logo.jpg 데이터가 변경되지 않아도 계속 데이터를 새로 다운받아야 합니다.용량이 클수록 비용이 커지고 브라우저의 로딩 속도가 느려집니다.캐시(C
105.[CS] 네트워크 문제 Day-65
IP에 대한 설명 IP 패킷에는 출발지, 목적지의 IP 주소가 포함된다. IP 주소는 네트워크에서 장치들이 서로를 인식하고 통신하기 위해서 사용하는 특수한 번호이다. IP 패킷에는 PORT 정보가 포함되어 있지 않기 때문에 IP 주소 내에서 프로세스를 구분할 수 없다
106.[CS] Content Delivery Network Day-65
콘텐츠를 좀 더 빠르고 효율적으로 제공하기 위해 등장한 서비스 * 원본을 복사하여 저장할 여러개의 캐시 서버로 구성 * 콘텐츠를 요청받은 경우 데이터를 전달하기 가장 유리한 캐시 서버에서 관련 콘텐츠를 제공
107.[CS] Git Branch 관리와 기능 Day-66
개발자들이 협업하기에 최적의 툴, 소프트웨어 개발 시 동일한 소스코드를 함께 공유하고 다룬다.(버그를 수정하거나, 새로운 기능을 만들어 추가한다.)기존의 소스 코드를 해치지 않으면서 다른 작업을 시도해보고 싶을 때 브랜치 기능을 활용할 수 있습니다. (feature)
108.[CS] Git Branch 문제 Day-66
rebase: 커밋의 베이스를 다시 정하고 싶은 경우squash: 여러 개의 커밋 로그를 하나로 묶고 싶은 경우revert: 커밋 여러 개의 변경 사항을 취소하고 싶은 경우\--amend: 최근 커밋 메시지를 수정하고 싶은 경우취소하기의 경우 추가적으로 공부 해야 한다
109.[CS] Amazon Web Service Day-67
Cloud Computing 등장 배경 기존 서버의 방식은 같은 공간에 더 많은 컴퓨터를 추가하면 공간이 모자라지는 문제점이 있었다. 컴퓨터 성능 업그레이드를 통한 문제 해결방식도 있지만, 궁극적인 해결책은 아니였다. 주기적인 유지 관리가 필요하다. 서버실 고장은 인
110.[CS] 백엔드 배포 Day-67
AWS 메뉴에서 EC2 서비스를 검색하고 접속하여 Instance 시작 버튼을 클릭해 Instance를 생성할 수 있습니다.용도에 맞는 AMI를 선택해야 합니다. 프리 티어 사용 가능은 과금이 되지 않습니다. (최신 버전은 이슈가 발생할 수 있기 때문에 LTS 버전을
111.[CS] 프론트엔드 배포(S3 호스팅 Hands-on) Day-68
정적 웹 페이지 빌드구현이 완성된 정적 웹 페이지를 빌드합니다.버킷 생성 및 정적 웹 사이트 호스팅 용으로 구성S3 대시보드에 접속해 버킷을 생성하고, 생성한 버킷을 정적 웹 사이트 호스팅 용으로 구성빌드된 정적 웹 페이지 업로드퍼블릭 엑세스 차단 해제 및 정책 생성웹
112.[CS] 데이터베이스 연결 (RDS/서버 환경 설정) Day-68
DB Instance 생성Database 연결먼저 MySQL 데이터베이스 엔진을 사용하는 DB Instance를 생성한 뒤 로컬 환경에서 MySQL 클라이언트를 활용하여 DB Instance에 연결합니다.AWS 데이터베이스 메뉴로 이동한 뒤, 데이터베이스 생성 버튼을
113.[CS] AWS 문제 Day-68
S3는 데이터를 저장할 수 있는 스토리지 서비스다.S3의 버킷 레벨에서 버전 관리를 활성화 할 수 있다.S3의 데이터를 외부로 노출하지 않으려면 퍼블릭 액세스 차단을 활성화해야 한다.S3는 서버로부터 콘텐츠가 동적으로 변경/생성되지 않는, 정적 웹사이트에 한해서만 웹사
114.[CS] Docker Day-69
https://docs.docker.com/desktop/mac/install/경로에서 Intel 또는 Apple chip 본인에게 맞는걸 설치하기명령어를 통해 docker 설치를 확인할 수 있다.개발자들을 위한 일종의 컨테이너 기술로 소프트웨어 수송, 배포에
115.[CS] Docker 컨테이너와 VM 비교 Day-69
둘 다 프로세스, 네트워크, 파일 시스템을 격리할 수 있다는 장점이 있습니다. 하지만 작동원리가 다릅니다.VM은 컴퓨팅 자원을 많이 필요로 합니다. 하지만 Docker 컨테이너는 여러개를 띄워도 컴퓨터에 무리가 오지 않습니다.Docker는 이미지가 애플리케이션 단위로
116.[CS] 배포 자동화(클라이언트, 서버) Day-70
서비스 규모가 복잡해지고 커지면 배포 과정이 복잡해지고 소요되는 시간이 늘어나게 됩니다. 배포를 매번 수동으로 진행하면 시간 허비가 커지기 때문에 자동화 과정이 필요합니다. 배포 자동화 수동적이고 반복적인 배포 과정을 자동화함으로써 시간이 절야된다. 휴먼 에러를 방
117.[CS] Linux Permissions Day-71
When user access to files. Permissions are required to Read, Write, or Execute from CLI.When you put ls-l in the Terminal, if it starts with d, it mea
118.[CS] Greedy Algorithm / Implementation Day-72
Life is C(Choice) between B(Birth) and D(Death) What is Algorithm? It is the best choice to solve the problem. Time Complexity It is important to fi
119.[CS] Algorithm with Math Day-73
It is important to have a strategy in order to understand and solve problems.It is necessary to understand the greatest common divisor, least common m
120.[CS] Database Day-74
A database language used by relational databases. MySQL, Oracle, PostgreSQL, etc.Can send query to the database to get or insert the data. SQL require
121.[CS] SQL Quiz Day-75
Structured Query Language SELECT UPDATE DELETE INSERT INTO SELECT FirstName FROM PersonsSELECT \* FROM Persons SELECT \* FROM Persons WHERE Firs
122.[CS] SQL Exercise Day-75
SELECT \* FROM Customers;SELECT City FROM Customers;SELECT DISTINCT Country FROM Customers;중복 제거 키워드 (DISTINCT)SELECT \* FROM Customers WHERE City = "
123.[CS] Schema & Query Design Day-76
A description of how data is organized in a database and the relationships between different entities.An Entity is a unique unit of information. It ca
124.[CS] MySQL Install Day-77
Install MySQL > Use Homebrew Start MySQL After install MySQL, Need to run MySQL program. Connect MySQL If there are error or any problem, you cannot
125.[CS] Learn SQL Day-77
It has to do with database design. Determines the structure of how data will be stored.Data redundancyData IntegrityAnomalyCopy of the actual data. It
126.[CS] SQL Schema Design & Grammer Day-78
CREATE TABLE `user` ( `id` int PRIMARY KEY AUTO_INCREMENT, `name` varchar(255) not NULL, `email` varchar(255) not NULL );
127.[CS] MVC Day-79
What is MVC? Model - View - Controller architectural pattern that separates an application into three main logical components. Each of these component
128.[CS] SQL Exercise Day-80
SQL JOIN Join is used to combine rows from two or more tables, based on a related column between them. ex) Orders table ex) Customers table Custome
129.[CS] Hashing, Cookie Day-81
Converting one value to another value by applying an arbitrary operation.It should not take long to calculate the hash value.Every value must have a u
130.[CS] Authentication Quiz(Hash, Cookie, Session, Token) Day-82
Process that uses a pair of related keys one public key and one private key to encrypt and decrypt a message and protect it from unauthorized
131.[CS] HTTPS Day-83
HTTPS HTTPS는 HTTP 요청을 SSL 또는 TLS 알고리즘을 이용해, HTTP 통신 과정 내용을 암호화하여 데이터를 전송하는 방법입니다. 기존의 HTTP 요청은 누군가 내용을 들여다 볼 수 있었습니다. 하지만 HTTPS 암호화 시켜 내용을 들여다 봐도 내용을
132.[CS] Token Day-84
Why use Token authentication? Session authentication is cost by the server, while token authentication is cost by the client. What is Token? It is ea
133.[CS] OAuth 2.0 Day-85
The social login authentication method is implemented based on OAuth 2.0 technology.
134.[CS] Computer Science Part1 Day-86
Applications cannot run without an operating system. Applications are intended to perform various tasks using the computer.
135.[CS] Computer Science Part2 Day-86
Garbage Collection visits the object every cycle and checks the flag. This is a mark and sweep method that checks flags.
136.[CS] Computer Science Part3 Day-87
To understand network flow, it is important to understand the flow of HTTP communication. HTTP communication belongs to the application layer.
137.[CS] Computer Science Part4 Day-88
HTTP/1.1, HTTP/2 are TCP-based, and HTTP/3 is a UDP-based.
138.[CS] Git Branch Day-89
Git is the best tool for developers to collaborate. When developing software, developers share the same source code. Branch is a feature that allows
139.[CS] AWS Day-90
In the past, a separate server room was installed and management was required, A separate server room is problematic in terms of manpower and cost.