TIL

· What? 수업준비 앞으로의 수업을 어떻게 진행하게 될 것이며, 내가 해야할 것이 어떤 것임을 알려줌 · 앞으로의 예상 스케줄 urclass에 접속한 뒤 수업시작 버튼 누르기 10:00까지 Toy problem 풀기 18:00까지 수업 개인 공부 2~3시간 필요

· What? 변수 / 타입 / 함수 / 코드학습법 · 매일 해야하는 것 google calendar 확인(O) / 출석 후 Toy problem(X) / 과제(X) / 복습(O) / 블로그 작성(O)

문자열 / 조건문(코플릿)문자열: 일상생활에서 확인할 수 있는, 모든 글자의 나열을 문자열코드와 문자열을 구분하기 위해 작은 따옴표(')나 큰 따옴표(")를 사용하여 문자열을 구분문자열은 string, 문자 하나는 character, char이라는 축약어로 표현가능ch

반복문반복문: 같거나 비슷한 코드를 여러번 실행시켜야할 경우 쓰는 구문\-반복할 조건을 코드로 작성for 구문 반복할 내용을 중괄호 block에 넣어줌 for(초기화; 조건식; 증감문){} 초기화: 변수의 값을 '처음'으로 저장 조건식: 도착점 혹은 반복횟수 증감문:

HTML 기초문서의 구조나 내용을 다루는 언어웹페이지의 틀을 만드는 언어웹페이지나 어플이 HTML로 구성How to use HTML?HTML은 tag들의 집합Tag 부등호(<>)로 묶인 HTML의 기본 구성 요소html 확장자 사용Self-closing Tag닫는

CSS 기초HTML, CSS, 그리고 JS는 웹 어플리케이션을 만드는 세가지의 주축그 중에서도 CSS는 스타일링을 담당콘텐츠의 배치와 위치 (레이아웃 디자인)텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피 (Typography)사용자가 웹 서비스를 이용할 때

Cli / node터미널 실행Ctrl + Alt + Tpwd : 현재 위치 확인하기mkdir : 새폴더 만들기ls : 특정 디렉토리의 파일 및 폴더 확인 ls -l : 폴더나 파일의 포맷을 전부 표현하라는 의미 ls -a : "all"이라는 의미 ls

계산기 만들기 과제에서는 html, css를 모두 주었고 js에 TODO 리스트를 주석으로 넣어 계산기를 만듬으로써 그동안 배웠던 js 문법을 정확하게 파악하고 있는지 확인하고 싶었던 것 같다. 계산기를 만들기 전 계산을 담당하는 함수를 제작하고 소수점 밑으로 계산할

git 기초버전 관리라는 것 자체가 각 버전 별로 변경된 이력들을 저장하는 작업다시 이전 버전으로 되돌아가야 하는 상황이 발생할 경우 이전의 변경 이력들이 기록되어 있으니 되돌아가는 것이 가능변경 사항을 저장할 때는 어떤 사항이 변경되었는지 코멘트를 꼭 작성, 그렇기

git workflow git workflow 진행은 코드스테이츠의 Repository를 fork한 뒤 페어와 함께 git workflow를 해봄으로써 git의 사용에 익숙해지고 흐름을 정확하게 파악 할 수 있었다. fork & clone 코드스테이츠에서 준 re

배열 : 순서가 있는 값, 한개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용element(요소, 값) : 내용물 여러 개의 값index(순서) : 값의 순서를 나타냄, 0부터 시작배열을 나타내려면 \[]를 사용 각각의 element는 ,를 통해 나뉨arrinde

객체 : 한개의 변수에 여러가지 정보가 들어있는 것, 키와 값으로 구성되어 있다.키(key) : 위에 나와있는 : 앞에 있는 것으로 값의 이름이라고 보면 된다. 키는 문자형만 허용된다.값(value) : : 뒤에 나와있는 것으로 키라는 이름 안에 담긴 내용물. 모든 자

CSS CSS selector 각 셀렉터의 선택 범위 셀렉터 h1 { } div { } 전체 셀렉터 * { } Tag 셀렉터 name, date { } ID 셀렉터 #greeting { } class 셀렉터 .name { } .dat

객체가 아니면서 method를 가지지 않는 6가지의 타입string, number, bigint, boolean, undefined, symbol, (null)원시자료형은 한개의 데이터만을 담을 수 있다. 변수에도 한개의 데이터만 담을 수 있다.'문자열', 3, tru

배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용spread 호출법은 ... 위의 예제 처럼 배열을 푼다.파라미터를 배열의 형태로 받아서 사용, 파라미터 개수가 가변적일 때 유용위는 mdn의 예제로 먼저 arr.reduce에 대해 설명하면,

DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다.자바스크립트에서 DOM

유효성검사 회원가입을 하거나 정해놓은 양식에 맞게 작성해야할 때 정해놓은 양식에 맞게 작성을 하는지 확인하는 검사를 유효성 검사라고 한다. 회원가입의 유효성검사를 위해 만든 HTML 파일이다. 먼저 아이디의 경우 4글자 이상, 영어 혹은 숫자를 이용해야만 한다고

1급 시민의 조건변수에 담을 수 있다.인자로 전달할 수 있다.반환값(리턴)으로 전달 할 수 있다.1급 객체, 1급 함수도 존재1급 함수는 런타임 생성이 가능하고 익명으로 생성이 가능할 경우자바스크립트에서는 객체를 1급 시민으로 취급고차 함수는 함수를 인자로 받을 수 있

프론트앤드 개발을 위한 자바스크립트 오픈소스 라이브러리개발에서 선언형/명시적이란 뜻은 코드를 자세히 보지 않아도 코드의 의도를 분명히 알 수 있게 작성하는 형식리액트는 jsx라는 파일을 활용한 프로그래밍 지향 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어

SPA 등장 배경과 개념 SPA란 Single Page Application의 약자 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 페이지 전체를 불러와야함 SPa는 업데이트가 필요한 부분만 새로 불러옴(광고나 네이버 뉴스 돌아가는거) 전통적인 웹사이트

Props props 란 컴포넌트 외부에서 컴포넌트에게 값을 지정해 주는것 주체는 컴포넌트이다. 외부의 값이 아닌 컴포넌트를 향해 값을 주기 위해선 컴포넌트의 function 의 인자에 props 를 넣어준다. 이렇게 되면 외부에서 값을 받을 준비가 된것이고 컴

React의 이벤트 처리(이벤트 핸들링; Event handling) 방식은 DOM의 이벤트 처리 방식과 유사React 에서 이벤트는 소문자 대신 카멜 케이스(camelCase) 를 사용JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러; Event

리엑트를 이용하여 갤러리와 어바웃의 주소를 만들어준다.썸네일을 만들고 썸네일을 클릭할 시 썸네일이 거대해진 사진이 나타난다.1.a태그에 넣어줘야할 onClick을 img태그에 넣어줬다.썸네일 리턴 img 태그의 src 값을 잘못 넣어줘서 HTML상에선 작동됐지만 테스트

객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴청사진 => class 객체 => instanceES6 에서는 class라는 키워드를 이용하여 정의 가능생성자 함수는 return값을

어떤 문제를 해결할 때, 구조는 동일하지만 더 작은 경우를 해결함으로써 그 문제를 해결하는 방법함수 스스로를 호출하는 것모든 재귀함수는 반복문 가능어떠한 조건을 마주칠 때까지 계속 반복, 무한 반복을 막기위해 탈출조건이 필요 -> base case재귀를 사용하면 좋을때

재귀함수를 처음 배울 때 피보나치를 만들라는 문제가 있었고 가장 먼저 풀게 된 방법은 이렇다.이렇게 해도 피보나치의 답은 나올 수 있다. 하지만 이 식이 효율적이냐는 질문에는 나는 대답할 수 없었다.효율이라는 부분을 이해하지 못했기 때문이다.그리고 실제로 내가 만든

여러 데이터들의 묶음을 어떻게 저장할 것이고, 어떻게 사용할 것인지 정의 한것stack인터넷 페이지 뒤로가기 앞으로 가기를 떠올리자google에서 뒤로가기를 누르면 과거 페이지 중 바로 전인 네이버가 현재 페이지가 되고 현재 페이지였던 google은 미래 페이지 가장

오늘의 문제 버블 정렬(toy problem)버블정렬에 대해 알아보기여러개의 점들이 서로 복잡하게 연결되어 있는 관계를 표현한 자료구조.점은 그래프에서는 정점(vertex)이라고 표현하고, 선은 간선(edge) 이라고 표현무향그래프(undirected graph) :

전달인자를 그대로 리턴해주는 함수 start 인덱스부터 end 인덱스 이전까지의 요소를 shallow copy하여 새로운 배열을 리턴배열의 처음 n개의 element를 담은 새로운 배열을 리턴n이 undefined이거나 음수인 경우, 빈 배열을 리턴n이 배열의 길이를

비동기를 배우기 이전 먼저 콜백에 대한 리뷰를 하겠다. 다른 함수의 전달인자(argument)로 넘어가는 함수반복실행하는 함수이벤트 함수이벤트에 함수 실행을 연결하는 것이 아님(연결하면 function(e)의 값을 연결해주는 것과 같음 결과적으로 function(e)

호출스택테스크 큐node.js 는 싱글 스레드이다.node.js는 기본적으로 동기적으로 실행호출스택에 시작을 넣음작업 1,2,3 이 있을 때호출 스택에 작업1 , 작업2, 작업3 을 넣는다.(동기적인 작업)백그라운드에 작업들을 다 넣게 됨 -> 동시에 진행하게 됨(비동

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

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

React 데이터 흐름React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.State 끌어올리기의 개념을 이해할 수 있다.상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가

어제부터 공부를 해봤고 Effect Hook에 대하여 공부해본 내용을 작성하겠다.틀린 내용이 많겠지만 열심히 써보겠다.Hook은 함수형 컴포넌트에서도 class형 컴포넌트의 기능을 사용할 수 있게 하는 기능기존에 함수형 컴포넌트에서 못하던 상태값 관리, 컴포넌트의 생명

Achievement Goals HTTP HTTP 요청/응답을 브라우저를 통해 확인할 수 있고, 해당 내용을 읽을 수 있다. HTTP 다양한 요청 방식과, 응답 코드에 대해 이해할 수 있다. CORS의 개념 node.js modules의 사용 node.j

node.js modules의 사용CommonJS를 이용한 모듈 내보내기/불러오기를 할 수 있다.라우팅과 API라우팅(조건에 따른 분기)을 이해하고, 이를 서버 코드에서 구현할 수 있다.클라이언트가 사용할 수 있도록, 서버 API 문서를 직접 작성할 수 있다.Expre

Express 라이브러리express 라이브러리가 어떤 작업을 단순하게 만드는지 이해할 수 있다.미들웨어의 개념을 이해할 수 있다.서버 개발과 디버깅CRUD 를 수행하는 웹 서버 개발 방법을 익힐 수 있다.서버 개발을 돕는 다양한 툴들을 익힐 수 있다.express 라

컴포넌트 기반 Bottom-up 방식 개발이 무엇인지 이해한다.컴포넌트 UI 개발에 도움을 주는 라이브러리인 Storybook을 활용할 수 있다.구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.컴포넌트 기반 CSS 작성에 도움을 주는 라이브러리인 St

Styled-Component 의 사용법은 백틱\` 을 사용하여 CSS 문법을 이용하면 작동을한다.아직까지 useRef의 활용을 하지는 못했다. 사용해보려고 했지만 아직 정확한 사용법에 대해 숙지하지 못했다.오늘은 스프린트로 스토리북을 이용해서 자주 사용하는 modal

web서버에서 Day36을 3번 써서 날짜를 제대로 돌려놓고 시작useRef 의 사용법useRef 는 querySelector처럼 DOM에서 가져올 수 있다.DOM기반 라이브러리를 사용해야할때 써야함컴포넌트를 가져오는게 아니라 DOM을 가져와야할 때 useRef를 이용

상태 관리 라이브러리가 왜 필요한지 이해할 수 있다..Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있

상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다

Achievement goals Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다. Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다. Presentational 컴포

정적 웹사이트와 동적 웹사이트가 어떻게 다른지 이해할 수 있다빌드가 무엇인지 이해할 수 있다정적 웹사이트 형태로 만들어지는 현대의 웹 앱이 왜 빌드 과정을 필요로 하는지 알 수 있다정적 웹사이트를 배포할 수 있다정적 웹사이트 배포시 발생하는 문제를 이해하고 해결할 수

사용 권한과 소유자에 대해 이해하고, 사용 권한을 변경할 수 있다.파일의 소유자와 파일에 적용된 사용 권한을 확인하고 이해할 수 있다. ls -l파일에 적용된 사용 권한을 변경할 수 있다. chmodPC에 저장하는 환경변수가 무엇인지 이해하고, 사용할 수 있다.PC에

시간 복잡도란?간단하게 알고리즘의 성능을 확인하는 것입력값이 커집에 따라 증가하는 시간의 비율을 최소화한 알고리즘을 구성Big-O 최악의 시간값Big-Ω 최선의 시간값Big-θ 평균의 시간값Big-O 이 가장 많이 쓰이는 이유최악의 상황을 고려해서 작성하는 것이 다양한

정규표현식을 한 문장으로 정의하면 문자열에서 특정한 문자를 찾아내는 도구정규표현식을 확인할 수 있는 사이트https://regexr.com/리터럴 패턴정규표현식 규칙을 슬래시(/)로 감싸 사용슬래시 안에 들어온 문자열이 찾고자 하는 문자열이며, 컴퓨터에게 '슬

SQL 이란?structured Query Language 구조화된 Query 언어데이터베이스 용 프로그래밍 언어데이터베이스에 query를 보내 원하는 데이터만을 뽑을 수 있다.Query 란?직역하면 "질의문"검색창에 적는 검색어도 Query 의 일종저장되어있는 정보를

schema스키마는 데이터베이스에서 데이터가 구성되는 방식과 서로 다른 엔티티 간의 관계에 대한 설명데이터베이스의 청사진entities고유한 정보의 단위 데이터베이스에서 테이블로 표시가능각 엔티티에는 해당 엔티티의 특성을 설명하는 필드가 있음행렬의 경우는 열(colum

SELECTSELECT 는 데이터베이스의 테이블 안의 자료를 찾을 때 사용테이블 안의 모든 자료를 찾을 때는 중복된 자료를 제외한 자료를 받을 때는WHEREWHERE 은 데이터베이스의 필터 역할을 하는 쿼리문= 조건과 같은 데이터<> 조건을 제외한 데이터\>= ,

데이터베이스 정규화는 데이터베이스의 설계와 연관그 이유는 데이터베이스 설계가 결론적으로 데이터가 어떻게 저장될 지 구조를 정해주기 때문데이터 중복 (data redundancy) 는 실제 데이터의 동일한 복사본이나 부분적인 복사본을 뜻함이러한 중복성으로 데이터를 복구할

Model View Controller 의 약자SW Architecture Design Pattern 임특정 라이브러리를 지칭하는 것은 아님서비스나 여러과정에 처리가 필요한데 처리를 각 기능별로 역할을 나누는 것이 특징프로그래밍을 할 때 정돈되고 의도된 역할별로 코드가

설치https://sequelize.org/Sequelize 공식 홈페이지에 들어가서$ npm install --save sequelize원하는 폴더에서 sequelize를 설치해준다.마이그레이션을 하기 위해 sequelize-cli 역시 설치 해야한다.설치하

NoSQL 데이터베이스는 특정 데이터 모델에 대해 특정 목적에 맞추어 구축되는 데이터베이스현대적인 애플리케이션 구축을 위한 유연한 스키마를 갖추고 있다.기존의 관계형 DBMS가 갖고있는 특성 뿐만 아니라 다른 특성들을 부가적으로 지원한다는 것을 의미 RDBMS가 클라이

HTTPS : HTTP + Secure HTTP 프로토콜 내용을 암호화특징인증서CA비대칭 키 암호화인증서(Certificate)데이터 제공자 신원 보장도메인 종속CACertificate Authority공인 인증서 발급 기관비대칭 키 암호화전혀다른 두개의 키로 암호화와

쿠키는 서버에서 클라이언트에 데이터를 저장하는 방법 중 하나쿠키를 이용한다는 것은 서버에서 클라이언트에 쿠키를 전송하는 것만 의미X, 클라이언트에서 서버로 쿠키를 전송하는 것도 포함서버 클라이언트에 데이터를 저장 할 수 있음Domain도메인은 https://w

토큰기반인증을 쓰는 이유세션기반 인증은 서버orDB에 유저 정보를 담는 방식매 요청마다 서버orDB를 확인해야함 이 부담을 덜 방법을 고안대표적인 토큰기반 인증 -> JWT(JSON Web Token)토큰기반 인증은 클라이언트에 인증 정보를 보관하는 방법클라이언트는 X

유니코드유니코드는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준이 표준에는 ISO 10646 문자 집합, 문자 인코딩, 문자 정보 데이터베이스, 문자들을 다루기 위한 알고리즘 등을 포함ASCII 문자영문 알파벳을 사용하는 대표적인

클라이언트와 서버가 통신하는 방법출발지(클라이언트)에서 목적지(서버)까지 데이터가 전달되기 위해선 규칙이 필요IP 주소를 컴퓨터(클라,서버)에 부여하고 이를 이용해 통신IP는 지정한 IP 주소에 패킷이라는 통신 단위로 데이터 전달패킷 : pack + bucket의 합성

브랜치란 독립적으로 작업을 진행하기 위한 개념브랜치 기능을 활용하면, 코드를 통째로 복사한 후 원래 코드가 변경될 우려 없이 독립적으로 개발할 수 있음브랜치 기능의 장점한 소스코드에서 동시에 다양한 작업 가능소스코드의 한 시점과 동일한 상태를 만들고, 브랜치를 넘나들며

기존 서버 방식(온프레미스)전산실같은 곳에 컴퓨터를 배치 서버 수용능력 한계 도달 시 새로운 서버(하드웨어)구매로 증설한계주기적인 관리 필요고장 시 인력 및 비용 투입서버 컴퓨터의 증설 시 인력 및 비용 증가공간의 한계전산실, 서버실에 서버 하드웨어를 놓는데 서버 수용

CDN(contents Delivery Network)(S3에 연동되서)-> 물리적인 서버든 intance서버든 어딘가에 존재 AWS는 리전에다가 서버를 만듬서울 서버가 케이블 이상으로 인해 미국에서 접속이 안되면 문제가 생김 -> 서버를 전세계로 분산을 시켜놓음(서비

도커는 리눅스 컨테이너 기술을 기반으로 하는 오픈소스 서비스토커를 통해 애필리케이션 실행 환경을 코드로 작성할 수 있으며, OS를 격리화하여 관리리눅스 컨테이너Linux Container는 Linux 기반의 기술 중 하나로, 필요한 라이브러리와 애플리케이션을 모아서 마