엘리스 온라인 학습

문서 객체 모델(Document Object Model)객체 지향 모델로써 구조화된 문서를 표현하는 형식우리가 사용할 것은 HTML DOM!모든 HTML 요소는 HTML DOM으로 접근 가능Document 객체는 웹페이지를 의미한다.웹 페이지에 존재하는 HTML요소에

1. 제작 사이트 소개 2. 내비게이션 기능 3. 이미지 슬라이드 - 1 4. 탭 버튼 기능 5. 이미지 슬라이드 - 2

자바스크립트의 여러 개념을 깊게 이해하기 위해 중요한 개념자바스크립트 스펙에도 명시되어 있어, 실행 컨텍스트를 이해하면 자바스크립트의 동작을 스펙 레벨에서 이해하고 활용할 수 있다.자바스크립트는 인터프리터 언어(파이썬)라고 말하지만 컴파일 언어의 면모가 있다.자바스크립

자바스크립트 엔진이 코드를 읽으면 생성단계에서 실행 컨텍스트를 생성함수 선언문은 실행 단계에서 함수 전체가 실행 컨텍스트에 저장된다.var 변수는 저장 시 undefined로 초기화 된다.let const는 초기화되지 않는다.숫자, 문자, 날짜 다루기, JSON 객체

HTTP 요청 APIES6에 추가된 Promise를 리턴하도록 정의됨네트워크 요청 성공 시, Promise는 Response객체를 resolve한다.네트워크 요청 실패 시, Promise는 에러를 reject한다.headerbodypost

web1.0 = 단방향 통신 위주web2.0 = 사용자와 상호작용이 후 고성능의 JavaScript가 필요V8엔진의 출현 이후 고성능의 JavaScript 실행 가능Node.js 탄생크로스 플랫폼제한 없는 동작다양한 어플리케이션 개발쓰레드 = 명령을 실행하는 단위싱글

작성된 함수들이 등록되는 LIFO(Last In First Out)스택이벤트 루프는 콜스택이 비어있을 때까지 스택의 함수를 실행setTimeout 같은 지연실행 함수를 등록하는 FIFO(First In First Out) 큐정해진 timing이 끝나고, 콜스택이 비어있

Microsoft에서 개발자바스크립트의 한계를 위해 개발동적 타입을 정적으로 선언 가능타입 유추를 통해 타입 제어가 가능컴파일 시점에서 오류를 포착할 수 있다.JS에서 찾을 수 없는 추가 코드 기능을 제공기본자료형실제 값을 저장하는 자료형null, undefined도

Node Package ManagerNode.js 프로젝트를 관리하는 필수적인 도구수많은 오픈소스 라이브러리와 도구들이 업로드되는 저장소npm init프로젝트 생성명령어를 사용하면 몇번의 질문을 통해 package.json파일을 생성해줌package.json?프로젝트

npm 패키지를 설치하지 않고 사용할 수 있게 해주는 도구프로젝트에 추가하거나 전역 패키지로 추가하지 않고, npx를 이용하여 바로 실행할 수 있음gist는 github에 등록된 간단한 코드npx를 이용하면 gist 코드를 다운받지 않고 바로 실행 가능git이 설치되어

module.exports를 사용하여 모듈을 작성할 수 있음require를 사용하여 의존성 패키지, 모듈, json 파일을 사용할 수 있음 모듈은 첫 require 시에만 실행하고 cache 되므로여러 번 실행할 모듈은 함수형으로 작성해야 함ES6에서 등장한 JavaS

웹 서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어짐HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할HTTP 응답은 HTTP 요청에 해당하는 적절한 데이터를 전달하는 역할Client-Side Rendering프론트엔드에서 사용자가 페이지

웹 서비스에 필요한 기능들을 제공해주는 다양한 도구들의 모음웹 서비스를 구성하기 위해서는 매우 많은 기능이 필요함 이러한 기능들을 하나씩 직접 만드는 것에는 너무나 큰 비용이 발생웹 서비스는 많은 부분이 정형화되어 있음프레임워크를 사용하여 정형화된 부분을 간단하게 구현

가장 많이 사용하기 때문에 서칭하기에 유리하다!필요에 따라 유연하게 구조 설정 가능다양한 미들웨어를 통해 필요한 기능을 간단하게 추가 가능모든 동작이 명시적으로 구성되기 때문에, 웹 프레임워크의 동작 방식을 이해하기 가장 좋은 프레임워크사진 출처 : 엘리스 아카데미

브라우저에서localhost:3000접속app.js → app.use('/', indexRouter);routes/index.js→router.get('/', ...routes/index.js → res.render('index', ...views/index.jadea

Express.js 동작의 핵심HTTP 요청과 응답 사이에서 단계별 동작을 수행해주는 함수Express.js의 미들웨어는 HTTP 요청이 들어온 순간부터 시작됨미들웨어는 HTTP요청과 응답 객체를 처리하거나, 다음 미들웨어를 실행할 수 있음HTTP 응답이 마무리 될 때

API를 테스트할 수 있는 도구HTTP 요청을 손쉽게 작성하여 테스트 해볼 수 있게 해줌API를 문서화 할 수 있는 기능 및 다양한 도구를 제공함collection 만들기API request 만들기document 작성하기전체문서 확인Collections 클릭 후 바로

대표적인 NoSQL, Document DBMongo는 Humongous 에서 따온 말로, 엄청나게 큰 DB 라는 의미대용량 데이터를 처리하기 좋게 만들어짐Relational Database관계형 데이터베이스자료들의 관계를 주요하게 다룸SQL 질의어를 사용하기 위해 데이

Object Data ModelingMongoDB의 Collection에 집중하여 관리하도록 도와주는 패키지 Collection을 모델화하여, 관련 기능들을 쉽게 사용할 수 있도록 도와줌연결관리MongoDB의 기본 Node.js 드라이버는 연결상태를 관리하기 어려움Mo

Express는 프로젝트 구조를 자유롭게 구성할 수 있기 때문에 Mongoose ODM을 적절한 위치에 작성하는 것이 중요일반적으로 models 디렉터리에 Schema와 Model을 같이 위치app 객체는 어플리케이션 시작을 의미하는 부분이므로 해당 부분에 데이터베이스

Object-Relational MappingMySQL, PostgreSQL 등의 RDBMS를 이용하는 간단한 방법ODM이 단순히 모델에 집중하여 관리하는 것에 반해, ORM은 테이블 관계와 쿼리 등의 기능을 더욱 단순화하는 용도로 주로 사용

데이터가 많아지면 한 페이지의 목록에 모든 데이터를 표현하기 어려움pagination은 데이터를 균일한 수로 나누어 페이지로 분리하는 것EX) 1페이지는 1~10번까지, 2페이지는 11~20번까지 보여주기기본limit와 skip을 이용limit = 검색 결과 수 제한s

request handler에서 오류를 처리하기 위한 방법async의 비동기 처리는 매우 편리하지만, 매번 try, catch문을 작성해야함request handler를 async function으로 작성하면서 try, catch, next를 자동으로 할 수 있도록 구

이메일, 이름, 패스워드의 간단한 정보만 사용이메일의 형식이 올바른지 확인비밀번호 최소 길이 확인패스워드와 패스워드 확인 문자가 일치하는지 확인데이터 베이스에 그대로 저장하면 관리자가 회원 비밀번호의 정보를 다 조회할 수 있음 -> 보안 취약점 발견!!!문자열을 되돌릴

Express.js 어플리케이션에 간단하게 사용자 사용자 인증 기능을 구현하게 도와주는 패키지유저 세션 관리 및 다양한 고르인 방식 추가 가능passport는 다양한 로그인 방식을 구현하기 위해 strategy라는 인터페이스를 제공strategy 인터페이스에 맞게 설계

웹 서버가 클라이언트의 정보를 클라이언트별로 구분하여 서버에 저장하고 클라이언트 요청 시 Session ID를 사용하여 클라이언트의 정보를 다시 확인하는 기술서버는 세션을 생성하여 세션의 구분자인 Session ID를 클라이언트에 전달함 클라이언트는 요청 시 sessi

게시글 작성 시 로그인 된 회원 정보를 작성자로 추가게시글 - 작성자는 populate하여 사용하도록 구현게시글 수정, 삭제 시 로그인 된 유저와 작성자가 일치하는지 확인작성자의 게시글 모아보기 기능 구현PostScema에 author추가populate를 사용하기 위해

JSON Web Token인증을 위한 정보를 특별한 저장소를 이용하지 않고, 전자 서명을 이용하여 확인하는 방법header - 토큰의 타입 (jwt), 데이터 서명 방식 payload - 전달되는 데이터signature - 헤더와 페이로드의 전자서명JWT 는 Web T

임의의 문자열로 비밀번호 초기화초기화된 문자열을 메일로 전달 → 메일 발송기능 개발 필요 초기화 후 첫 로그인 시 비밀번호 변경 요청SMTP 서버 이용네이버, 구글 등의 메일 서버를 이용하여 무료로 발송 가능 메일 발송 및 관리 기능 직접 개발 필요메일 발송 서비스 이

JSX를 활용하여 HTML 내에 필요한 데이터를 한 공간에 삽입할 수 있어 개발이 간단해지고 다른 사람이 개발 의도를 파악하기 쉬워진다!오오 신기하다컴포넌트 내에서 "State"를 이용해서 데이터를 유동적으로 관리'State'가 변경될 때마다 컴포넌트가 다시 렌더링 된

사용자가 한 눈에 알아보게 하기 위해!번들 사이즈에 대한 고려CSS코드가 차지하는 사이즈는 무척 중요한 요소앱 성능에 대한 고려animation, transition 등 유저와의 상호작용에서 스타일 코드의 성능이 중요사용자에게 유리한 UI/UX를 고려스타일링에 대한 지

CSS 파일을 import 해서 사용필요한 모든 css 스타일을 하나의 파일에 작성하여, 자바스크립트 파일과 코드 분리 가능단순히 css파일만을 import하여 사용할 수 있어 편리컴포넌트가 많지 않을 경우 하나의 CSS 파일에 코드를 관리하는 것도 가능CSS 파일은

CSS layout의 기본이 되는 모델content-box, padding-box, border-box, margin-box 순으로 하나의 엘리멘트를 감싸고 있다.bo의 타입은 inline, block enrkwldisplay:inline, display:inline-

HTML element를 하나의 상자로 간주하고, 그 안에서 어떻게 내부 item을 배열할 것인가를 스타일 하는 모델.1차원의 레이아웃을 디자인하는 데 사용.responsive design에 유리.가운데 정렬,비율로 정렬 등을 처리할때 유리.flex container

test

SPA(Single Page Application)은 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낌.Client-side routing 기술을 활용, 페이지 진입 시 리로드없이 라우팅함.AJAX 기술을 활용, 페

1. 자바스크립트 비동기1 등장 초기 웹 환경에서는, 서버에서 모든 데이터를 로드하여 페이지를 빌드했으므로 자바스크립트에는 별도의 비동기 처리가 필요하지 않았음. Ajax 기술의 등장으로 페이지 로드 없이 client-side에서 서버로 요청을 보내 데이터를 처리할 수

상태 관리 기술이란 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것.한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함.MPA에서는 서버의 데이터를 이용해 페이지를 렌더링하므로, 클라이언트의

01. Redux 소개 Redux? 앱 전체 상태를 쉽게 관리하기 위한 라이브러리. Redux의 많은 개념들이 Flux pattern에서 차용됨. 주로 React 앱과 같이 사용. redux.js.org에서 수많은 문서를 참고할 수 있고, 웹상에 Redux를 활용한 앱