짱짱해커가 되고 싶은 나

웹 프론트엔드 개발은 6단계로 볼 수 있다. 1. testing 코드가 잘 작동하는지 검사 ex) Mocha 2. code formating 코드가 가독성 좋은 포맷으로 작성되었는지 검사하고 수정 ex) ESLint 3. transpiling 작성한 js 코드가 자바스크립트 최신 표준을 지원하지 않는, 오래된 브라우저에서도 문제없이 작성할 수 있도록 변환하거나 js의 단점을 보완한 언어(ex. Typescript)로 작성한 코드를 다시 js로 변환하는 트랜파일 작업 ex) Babel 4. bundling 여러 자바스크립트 파일들과 css 파일 등을 하나의 파일로 묶는 번들링 작업 ex) Webpack 5. minifying 번들링된 결과를 더 작은 용량으로 압축해주는 작업 ex) Uglify, JS 6...

웹브라우저에게 HTML 버전을 알려주는 역할 ( 버전을 따로 안쓰면 가장 최근 버전을 자동으로 사용html5 ) 한글을 지원하는 인코딩이 필요하기 때문에 설정 필요 웹 사이트의 제목 에서 까지 머리말의 글자 크기 존재 bold체 이탤릭체 bold체와 겉보기에는 비슷해보이나 해당 텍스트가 중요하다고 표시하는 것이 목적, 스크린리더가 강조해서 읽을 수 있다. 이탤릭체와 겉보기에는 비슷해보이나 해당 텍스트를 강조하는 것이 목적. css 코드를 작성하기 위한 태그 - href="" - rel="stylesheet" //페이지와 파일 간의 관계 지정 css에서 폰트 크기를 표현할 수 있는 단위가 몇 가지 있는데 px 단위를 가장 많이 사용 안의 된 부분을 편집하고 싶을 경우에는 p i 로 하면 된다. 이 세가지는..

* NoSQL NoSQL은 고정된 테이블이 없다. 테이블 대신 컬렉션이라는 용어를 사용하기는 하지만 컬럼을 따로 정의하지 않는다. 예를 들어, MySQL은 users테이블에 name, age 등의 컬럼과 자료형, 옵션 등을 정의하지만 몽고디비는 그냥 users 컬렉션을 만드는게 끝이다. 그리고 users 컬렉션에는 어떤 데이터든 자유롭게 들어갈 수 있다. 즉, 규칙성이 존재하지 않는 것이다. 또한 SQL 수준의 트랜젝션이 없다. 따라서 데이터의 일관성 문제가 생길 수 있다. SQL noSQL m규칙적인 데이터 입력 테이블 간 JOIN o 트랜젝션 o 안전성, 일관성 테이블, 로우, 칼럼 자유로운 데이터 입력 컬렉션 간 JOIN x 트랜젝션 x 확장성, 가용성 컬렉션, 다큐먼트, 필드 noSQL은 JOIN..

라우터를 만들고 app.js에 연결할 것이다. 라우터에는 GET, POST, PUT, DELETE 요청에 해당하는 라우터를 만들것이다 routes/index.js var express = require('express'); var User = require('../models').User; var router = express.Router(); /* GET home page. */ /*router.get('/', function(req, res, next) { User.findAll().then((users) => { res.render('seqeulize', {users}); }).catch((err) => { console.error(err); next(err); }); });*/ router.get..

DB는 앞에 sequelize를 설명할 때 사용했던 사용자(id, name, age, married, comment, created_at)와 댓글(id, commenter(외래키-user의 id), comment, created_at)을 사용할 것이다. 그 때 얘기한 것처럼 유저와 댓글 DB의 관계는 1:N 관계다. 폴더 구조는 express-generator에서 잡아주는 기본 폴더 구조 + sequelize를 통해 추가로 생긴 폴더(models, config, migrations, seeders)이다. view 폴더에서 어떤 식으로 DB의 내용을 보여줄지를 저장하고 public 폴더에서는 각 요청이 들어왔을 때 필요한 데이터들을 저장한다. 필요한 기능에는 댓글 로딩, 사용자 로딩, 댓글 등록, 사용자 ..

sequelize: 노드에서 MySQL 작업을 쉽게 할 수 있도록 도와주는 라이브러리, ORM(object-relational mapping)으로 자바스크립트 객체와 데이터베이스의 릴레이션을 매핑해주는 도구이다. 시퀄라이즈는 자바스크립트 구문을 알아서 SQL로 바꿔주기 때문에 SQL언어를 직접 사용하지 않고 js만으로 MySQL을 조작할 수 있기 때문에 편리하다. sequelize와 mysql2를 설치하고 sequelize init을 하면 config, models, migrations, seeders 폴더가 생성된다. 1. MySQL 연결하기 - app.js sequelize를 통해 express 앱과 MySQL을 연결해야 한다. 따라서 다음과 같이 app.js를 수정한다. var sequelize =..

우리가 로그인을 하고 f5로 새로고침을 한다고 해서 로그아웃이 되지 않는다. 그 이유는 client가 server에게 지속적으로 우리가 누구인지 알려주기 때문이다. 이때 사용하는 것이 쿠키 또는 세션이다. 쿠키는 key-value의 쌍으로 이루어져 있다. 먼저 server는 미리 client의 요청에 요청자를 추정할만 정보를 쿠키로 만들어 보내고 client는 그 쿠키를 받아서 다음부터 그 쿠키와 함께 server에게 request를 한다. 그러면 server는 그 쿠키로 요청자를 확인할 수 있다. (+브라우저는 쿠키가 있다면 자동으로 동봉해서 보내준다.) 쿠키는 req.headers.cookie에 저장되어 있다. 간단하게 쿠키를 만들어서 삽입하고, 쿠키를 확인하는 코드를 보자. const http = ..

Routing : URI 및 특정한 HTTP 요청 메소드(get, post, put, delete 등)인 특정 엔드포인트에 대한 클라이언트의 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 의미한다. 다음과 같이 express.Router 클래스를 사용하면 모듈식 마운팅이 가능한 핸들러를 작성할 수 있다. 여기서는 admin/이후의 get요청을 정의한다음 export해서 총 관리를 담당하는 app.js에서 해당 라우터 모듈을 마운트해서 use를 통해 간편하게 정리된 모습으로 사용할 수 있다. 응답 메소드 메소드 설명 res.download() 파일이 다운로드 되도록 프롬포트 res.end() 응답 프로세스 종료 res.json() JSON 응답 전송 res.jsonp() JSONP 지원을 통해 JSO..