미들웨어(middleware)? 미들웨어란, 특정 기능을 수행하는 함수이다. 미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트 (res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 대한 액세스 권한을 갖는다. (출처: express 공식 문서) Express 애플리케이션은 다음과 같은 유형의 미들웨어를 사용할 수 있다고 한다. 애플리케이션 레벨 미들웨어 라우터 레벨 미들웨어 오류 처리 미들웨어 기본 제공 미들웨어 써드파티 미들웨어 애플리케이션 레벨 미들웨어 app.use 또는 app.GET/POST 함수를 통해 작동하는 미들웨어 함수를 말한다. const func1 = (req, res, next) => { // req.id = 'not_panpan'; req.id = 'p..
웹 화면을 구성하다보면 수평, 수직으로 자료를 나란히 배치해야 하는 일이 자주 발생한다. 이를 위해 주로 사용되는 방법들을 한 곳에 정리해보기로 한다. 컨테이너에 부여하는 속성(자식 노드들을 위해 부여되는 속성)은 빨간색으로 표시하였다. 이 속성들은 레이아웃 배치를 위해 사용된다. 1. 수평 레이아웃 구성 (float + clear) float를 이용하면 요소를 수평으로 배치할 수 있으며, clear 속성을 명시해 줌으로써 다음 요소들은 지정한 컨테이너 아래에 쌓이도록 할 수 있다. clear 속성을 명시할 때에는 :after 가상 선택자를 이용하는 방법이 가장 깔끔하다. menu 1 menu 2 menu 3 login hello 결과 넘칠 시 아래로 내려간다. 브라우저 크기에 따라 가운데 영역이 변화한..
파란색으로 표시한 값이 디폴트(기본) 값이다. 애니메이션, 레이아웃과 관련된 프로퍼티는 이후에 다른 포스트에서 다룰 예정이다. display (표시) 해당 태그가 얼마만큼의 공간을 차지할 것인가를 결정한다. none: 영역을 차지하지 않음 block: 가로 영역을 모두 채움(기본: width:100%) div, p, h, li 등의 기본 값에 해당 block은 width, height 속성을 지정할 수 있다. inline: 딱 자기 공간만큼 채움 (줄바꿈 없음) span, b, i, a 등의 기본 값에 해당 inline을 사용할시 width, height 지정 불가능 inline-block: 줄바꿈은 없으나 너비, 높이를 지정할 수 있음. 레이아웃 배치에 사용 fiex: 컨테이너를 flex contain..
CSS의 구조 css는 다음과 같은 구조로 이루어져 있으며, 각 selector를 node라고 부른다. selector { property : value; } 이 글에서는 구조에 명시된 순서대로 css에 대하여 알아보기로 한다. selector의 종류 html의 태그의 종류, 태그에 부여된 id와 class의 이름, html 간 계층적 구조에 의해 하나의 html 태그라도 이를 나타내는 다양한 selector 표현이 존재할 수 있다. 여기에서는 주로 사용하는 selector 표현에 대해서만 정리해 보기로 한다. 태그 이름: tagName { } 클래스: .className { } 아이디: #idName { } 자식 (바로 한 계층 아래만): parent > child 자손 (하위 계층을 모두 포함): a..
용어 깃(Git) 깃(Git)은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 ★분산 버전 관리 시스템★이다. (위키백과) Git을 이용하면 자신의 Local 환경에서 파일을 버전별로 관리할 수 있으며, 깃 프로젝트를 지원하는 웹 호스팅 서비스인 GitHub를 이용함으로써 원격 저장소에 이 파일을 저장하고 공유할 수 있다. 저장소(repository) Git이 저장하는 모든 변경사항은 우리가 '저장소'로 만든 곳에서 이루어진다. 이중 내 디바이스 환경에 위치한 로컬 저장소는 git init 명령을 통해 생성되며, .git 폴더를 통해 관리된다. 커밋(Commit) 깃 저장소에 저장되는 파일에 대한 스냅샷의 기록. 각 커밋에 기록된 스냅샷은 '버전'이라고도 ..
pwd: 해당 디렉토리의 주소 출력 ls: 해당 디렉토리 안의 파일들 출력. 주로 -la를 붙여 씀. -a: 숨김 파일 표시 -l: 상세 정보 표시 -r: 정렬 순서 역순 -t: 파일 작성 시간순 표시 mkdir: make directory. 디렉토리를 생성 ex) mkdir {dirname} rm: remove. 디렉토리를 제거 ex) rm -r {dirname} -r: 지우려는 디렉토리 내 파일도 모두 제거 (r명령은 주로 하위디렉토리 포함을 나타냄) -f: 강제 삭제 (위험) vim: vi(vim) 편집기를 연다. (파일 없을 시 생성 후 실행) ex) vim {파일명} 주로 사용하는 명령어도 있다. 더보기 a 또는 l을 눌러 수정 ESC를 눌러 수정 종료 :를 눌러 종료 조건 추가 종료 조건: q..
node에서는 기본적으로 fs라는 모듈을 제공한다. 이를 통해 JSON 등 다른 파일을 읽어오고 사용할 수 있다. 1. JSON 파일 불러 와서 Object로 만들기 const fs = require('fs'); 별도의 install 없이, 다음과 같이 모듈을 import 함으로써 fs 모듈을 사용할 수 있다. js와 같은 디렉토리에 다음과 같은 doc.json 파일을 생성한다. { "name": "팬팬", "age": 3, "favorit": ["코딩", "노래", "메이플스토리"] } 일단 JSON 파일을 불러온 뒤 그냥 출력해보면, 결과는 다음과 같을 것이다. const doc = fs.readFileSync('doc.json'); console.log(doc); 이는 버퍼에 있는 16 진수로 이루..
npm init - package.json을 생성 + -y 옵션을 붙이면 모두 default 값으로 생성 npm install {패키지명}(@{버전}) --save(-S) --dev(-D) -g save: package.json의 dependencies에 추가한다. (이제 기본 옵션이 되어서 생략해도 된다.) dev: package.json의 devDependencies에 추가한다. 개발할 때에만 사용되는 모듈을 지정할 때 사용 g: global로 (해당 프로젝트 뿐 아니라 어디에서든 사용 가능) 설치 + npm install만 입력하고 실행하면 dependencies에 명시된 패키지들을 다운로드한다. + install도 i 라고 줄여 쓸 수 있지만 별 걸 다 줄인다. npm run {스크립트명}: pa..