전체 글
-
TIL_200617Today I Learned 2020. 6. 18. 01:57
쿠키와 세션 그리고 토큰 수많은 사용자 --- 클라이언트 --- 서버 서버는 지금 클라이언트에서 데이터를 요청하는 사용자가 누구인지 알아야 합니다. 또한 서버는 여러명의 사용자의 요청을 받고 정확한 데이터를 넘겨주어야 합니다. 그렇다면 클라이언트와 서버는 현재 사용자 클라이언트에서 사용자가 로그인을 한다면 쿠키가 생성되며 데이터가 클라이언트 상에 저장됩니다. 쿠키는 클라이언트 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일입니다. 일정 시간동안 같은 브라우저로 부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 유지합니다. 쿠키 프로세스 1. 클라이언트가 페이지를 요청할때 웹 서버가 쿠키를 생성하여 보내줍니다. 2. 클라이언트가 받은 쿠키에는 정보가 담겨 있고 서버에 요청할때 보내집니다. 3..
-
TIL_200615 (Sequelize)Today I Learned 2020. 6. 15. 22:50
모델 인스턴스 const { Sequelize, Model, DataTypes } = require("sequelize"); const sequelize = new Sequelize("sqlite::memory:"); const User = sequelize.define("user", { name: DataTypes.TEXT, favoriteColor: { type: DataTypes.TEXT, defaultValue: 'green' }, age: DataTypes.INTEGER, cash: DataTypes.INTEGER }); (async () => { await sequelize.sync({ force: true }); // 여기에 코드를 입력합니다. })(); 인스턴스 만들기 bulid와 save..
-
TIL_200611Today I Learned 2020. 6. 12. 00:30
데이터베이스(Database) 데이터를 어디에 저장할 수 있을까요? 만약에 클라이언트에 저장한다면(In-memory) 사용자가 클라이언트를 종료할때 데이터 또한 사라집니다. 그렇다면 클라이언트에서 통신하고 있는 서버에 저장(File I/O)한다면 어떨까요? 서버에 데이터를 저장한다면 클라이언트가 종료되어도 서버에 남아있지만 특정 데이터를 가져오고 싶다면 전체 데이터를 클라이언트에서 받아서 가공하여 원하는 부분을 추출해야하는 번거로움이 있습니다. 데이터를 어딘가에 분류하여 저장해 놓고 원하는 부분만 꺼내올 수 있다면 편할 것입니다. 이를 위해서 데이터 베이스(Database)에서 만듭니다. 데이터 베이스에 엑세스하고 조작하기 위한 표준언어인 SQL을 사용합니다. SQL(Structured Query Lan..
-
프라미스(Promise)Javascript 2020. 6. 9. 00:37
0px Promise는 무엇인가? Promise의 state와 result Promise chaining return Promise Error handling Promise API async, await Promise는 무엇인가? 단어 그대로 약속(promise)입니다. 어떤 약속이냐면 어떠한 작업이 모두 끝나면 알려주겠다는 약속입니다. 데이터를 가져오려면 적절한 시간이 필요합니다. 만약에 거대한 데이터를 한 번에 받아오라는 요청을 한 뒤에 곧바로 데이터를 이용하는 코드로 넘어간다면 완전한 데이터를 알 수 없을 것입니다. 이를 위해서 모든 데이터를 받았다면 데이터를 넘겨주어 그 다음 작업을 할 수 있게 돕는 객체입니다. Promise 객체의 생성자 구문 let promise = new Promise(fu..
-
Reactweb 2020. 6. 7. 19:21
왜 React를 사용하는가? 왜 JSX를 사용하는가? Rendering Elements Components and Props State and Lifecycle 왜 React를 사용하는가? Elements & Components로 구성되어서 복잡한 앱을 작고 재사용 가능하게 만듭니다. 다음은 Hello World! 를 출력하는 기본적인 코드입니다. ReactDOM.render( Hello, World!, document.getElementById('root') ); JSX 코드를 보면 html 태그가 있는 구문은 JSX라고 부릅니다. JSX는 React의 elements를 생성하고 DOM에 렌더링 합니다. const element = Hello, world!; 왜 JSX를 사용하는가? React는 마크업..
-
TIL_200601Today I Learned 2020. 6. 2. 10:00
SPA(Single Page Application) 단일 페이지 애플리케이션은 모던 웹의 패러다임이다. 기본적으로 단일 페이지로 구성되며 기존의 서버 사이드 렌터링과 비교할 때, 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 장점이 있습니다. 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운도드하여 새로운 페이지를 요청할 시에 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체적인 트래픽의 감소와 네이티브 앱과 유사한 사용자 경험을 제공할 수 있습니다. 사용자 경험의 향상이 SPA의 핵심가치이다. Express에서 정적인 파일 제공 프로그램이 작성하면 동적, 사람이 한번 작성하여 언제나 똑같이 보이면 정적이라고 합니다. app.use(express.sta..
-
TIL_200531 (Express 공식문서 부수기)Today I Learned 2020. 5. 31. 23:00
Express 앱에서 사용하기 위한 미들웨어 작성 미들웨어 함수는 요청 오브젝트(request), 응답 오브젝트(response), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수에 대한 엑세스 권한을 갖는 함수입니다. 그 다음의 미들웨어 함수는 일반적으로 next라는 이름의 변수로 표시됩니다. 미들웨어 함수는 다음과 같은 태스크를 수행할 수 있습니다. 모든 코드를 실행 요청-응답 주기를 종료 스택 내의 그 다음 미들웨어를 호출 현재의 미들웨어 함수가 요청-응답 주기를 종료하지 않는 경우에는 next() 를 호출하여 그 다음 미들웨어 함수에 제어를 전달해야 합니다. 그렇지 않으면 해당 요청은 정지된 채로 방치됩니다. 기본형식 var express = require('express'); ..
-
TIL_200530 (What is Express)Today I Learned 2020. 5. 31. 02:57
아직 우리가 작성할 수 있는 것은 기본적으로 간단한 Express앱입니다. 하나의 파일로 되어있는 앱으로써 Express 생성기를 통해서 만드는앱과 다릅니다. (생성기를 통해서 만드는 앱은 다양한 목적을 위한 여러 JavaScript 파일, Jade 템플릿 및 하위 디렉토리를 포함하는 전체 앱에 대한 스캐폴딩을 작성합니다.) Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다. 자유롭게 활용할 수 있는 수많은 HTTP 유틸리티 메소드 및 미들웨어를 통해 쉽고 바르게 강력한 API를 작성할 수 있습니다. Expresssms Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크입니다. 시작하기 Node.js가 이..