로춘남의 IT이야기

※ 시퀄라이즈(Sequelize)를 사용하기전에 데이터베이스 MySQL이 설치가 되어 있어야 합니다. 시퀄라이즈는 ORM(Object-relational Mapping)으로 분류. ORM은 자바스크립트 객체와 데이터베이스의 릴레이션을 매핑해주는 도구. MySQL뿐만 아니라 MariaDB, PostgreSQL, SQLite, MSSQL 등 다른 데이터베이스와도 함께 쓸 수 있다. 왜 시퀄라이즈를 써야하는가? → 자바스크립트 구문을 알아서 SQL로 바꿔주기 때문. 따라서 SQL언어를 직접 사용하지 않아도 자바스크립트만으로 MySQL을 조작 할 수가 있다. [시퀄라이즈에 필요한 패키지 설치] npm i express morgan nunjucks sequelize sequelize-cli mysql2 npm i..

1. 익스프레스 프로젝트 시작하기 익스프레스(express) : 웹 서버를 만들 때 코드가 보기 좋지 않고 확장성도 떨어진다고 느꼈을때, npm에는 서버를 제작하는 과정에서의 불편함을 해소하고 편의 기능을 추가한 웹 서버 프레임워크가 있다. 그것이 바로 익스프레스. const express = require('express'); const app = express(); app.set('port', process.env.PORT || 3000); //서버가 실행될 포트 설정 app.get('/', (req, res) => { res.send('Hello, Express'); }); app.listen(app.get('port'), () => { console.log(app.get('port'), '번 포트..

1. npm 알아보기 npm(Node Package Manager) : 125만개의 패키지가 등록되어 있어 이러한 방대한 양의 패키지는 노드와 자바스크립트의 생태계를 견고하게 만들고, 게다가 대부분 오픈소스이기때문에 노드를 사용해 웹을 만들때 많은도움이 됨. 2. package.json으로 패키지 관리하기 같은 패키지라도 버전별로 기능이 다를 수 있기때문에 프로젝트를 설치할 때 패키지도 동일한 버전을 설치하지 않으면 문제가 생길 수 있음. 이때 설치한 패키지의 버전을 관리하는 파일이 바로 package.json. → 노드 프로젝트를 시작하기전에는 폴더 내부에 무조건 package.json부터 만들고 시작해야한다. npm에서 package.json을 만들수있는 명령어를 제공하고 있음. [윈도우 환경] np..

3. 쿠키와 세션 이해하기 클라이언트에서 보내는 요청의 단점 → 누가 요청을 보내는지 모름. 로그인 이후 새로고침 후에도 로그아웃이 되지 않는 이유는 클라이언트가 서버에 내가 누군지를 지속적으로 알려주고 있기때문. 내가 누구인지 기억하기 위해서 서버는 요청에 대한 응답을 할 때 쿠키라는것을 같이 보낸다. 쿠키는 유효 기간이 있으며 name=로춘남 과 같은 단순한 '키-값'의 쌍이다. 서버로부터 쿠키가 오면 웹 브라우저는 쿠키를 저장해두었다가 다음에 요청 할 때마다 쿠키를 동봉해서 보낸다. 서버는 요청에 들어있는 쿠키를 읽어서 사용자가 누구인지 파악을 하게 된다. - 쿠키명-쿠키값 : 기본적인 쿠키의값 - Expires=날짜 : 만료 기한. 이 기한이 지나면 쿠키가 제거. - Max-age=초 : Expi..

1. 요청과 응답 이해하기 서버는 클라이언트가 있기에 동작하며, 클라이언트에서 서버로 요청(request)을 보내고, 서버에서는 요청의 내용을 읽고 처리한 뒤 클라이언트에 응답(response)을 보낸다. 요청과 응답을 바로 이벤트 방식이라고 표현한다. 클라이언트로부터 요청이 왔을 때 어떤 작업을 수행할지 이벤트 리스너를 미리 등록해야함. 아래는 가장 기본적인 서버의 요청과 응답 const http = require('http'); http.createServer((req, res) => { res.writeHead(200, { 'Content-Type' : 'text.html; charset=utf-8' }); res.write('Hello Node!'); res.end('Hello Server!');..

1. REPL 사용하기 자바스크립트는 스크립트 언어이므로 미리 컴파일을 하지 않아도 즉석에서 코드를 실행 할 수 있음. 노드도 비슷한 콘솔을 제공하는데, 입력한 코드를 읽고(Read), 해석하고(Eval), 결과물을 반환하고(Print), 종료할 때까지 반복한다(Loop) 라고해서 REPL라고 부름(Read Eval Print Loop). 읽고, 해석한 뒤 바로 결과물을 출력했다. REPL은 한 두줄짜리를 테스트하기엔 좋지만 여러줄을 실행하기에는 불편함. 2. JS 파일 실행하기 코드가 길 경우에는 코드자체를 자바스크립트 파일로 작성하여 파일을 통쨰로 실행하는 것이 좋다. ex) node [자바스크립트 파일 경로] 3. 모듈로 만들기 모듈 : 특정한 기능을 하는 함수나 변수들의 집합. 모듈은 하나의 프로..

Node.js 란? : Chrome V8 JavaScript 엔진으로 빌드된 Javascript 런타임. 서버 : 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램을 말함 노드는 자바스크립트 프로그램이 서버로서 기능하기 위한 도구를 제공하므로 서버 역할을 수행 할 수 있음. 노드의 특성 1. 자바스크립트 런타임 쉽게 말하면 자바스크립트 실행기로 이해 할 수 있다. 기존에는 자바스크립트를 웹 브라우저 위에서만 실행 할 수 있었음. V8과 libuv는 C와 C++로 구현되어 있지만 노드가 알아서 연결해주기때문에 노드를 사용 할 때 C와 C++는 몰라도 실행 가능하다. 2. 이벤트 기반 이벤트 기반(event-driven)이란 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식을 ..

뷰 템플릿(Template)란? : HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성 템플릿에서 사용하는 뷰의 속성과 문법 1) 데이터 바인딩(Data Binding) : HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는것을 의미. {{ }} - 콧수염 괄호 : 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식. v-bind : 아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결 할 때 사용하는 데이터 연결 방식 2) 자바스크립트 표현식 3) 디렉티브(Directive) : HTML 태그 안에 v- 접두사를 가지는 모든 속성을 의미. ex) 두잇..

라우팅이란? 웹 페이지 간의 이동 방법을 말함. 라이팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA, Single Page Application)에서 주로 사용. 화면 간의 전환을 매끄럽게 진행 시킬 수 있음. 서버에서 응답을 받아 웹 페이지 처리하면 화면상에 깜빡거림이 있을수있는데, 라우팅을 사용 할 경우 깜빡거림 없이 매끄럽게 사용 할 수 있다. 뷰 라우터란? 뷰에서 라우팅 기능을 구현 할 수 있도록 지원하는 공식 라이브러리. 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동이 가능하다 [뷰 라우터 구현할 때 필요한 특수 태그와 기능] 태 그 설 명 페이지 이동 태그. 화면에서는 로 표시되며 클릭하면 to에 지정한 URL로 이동 페이지 표시 태그. 변경되는 URL에 따라 해..

최근 학습에 대한 욕구(?) 샘 솟아서 다른 공부를 시작했다. 매번 Java와 Database만 주로 만지다보니 조금 지루함과 답답함이 있었고, (아, 물론 Java 하나만 잘하기에도 벅차지만...) 약간의 머리 식힐겸(?) 프론트분야를 조금 공부해보기로 했다. 리액트 같은 경우에는 어렵기도 하고 입문하는데 꽤 시간이 걸린다고해서, 알아보던 중 가장 이해하기 쉽다는 vue.js를 한 번 공부해 보기로 했다. 지금 쓰는 이 포스팅은 내가 해당 책을 모두 읽고난후에 작성하는 것이기 때문에 vue.js가 뭔지 궁금하다면 지난 포스팅을 하나씩 천천히 읽어보는것도 좋을것 같다. 뭐 예를들어 vue.js란? 이라고 했을때, vue.js가 무엇인지 간단히 알기위하여... https://itkjspo56.tistory..