🌱 → 🌳

📌 Static : 브라우저에서 접근이 가능한 폴더의 위치를 지정해 주는 역할 app.use(express.static('views')); 위의 미들웨어를 사용하면 프로젝트에서 사용하는 폴더 경로의 시작점 -> localhost:4000/views ./ 의 상대 경로 -> localhost:4000/views/ 와 동일한 의미를 가짐 브라우저에서 접근 가능한 기본 폴더를 설정하는 만큼 너무 많은 폴더를 정하는 것은 피하는 편이 좋음 보통 public 이라는 폴더를 기본으로 설정해 놓고 해당 폴더만 설정 public 폴더의 경우 브라우저 등의 클라이언트가 접근이 가능한 폴더로써 보통 CSS, 브라우저에서 사용하는 JS, 이미지 등을 위치 📌 Express 기본 폴더 구조 /images = /img /jav..

📌 URL 데이터를 받는 방법 ✅ req.params 받을 url에서 :파라미터명 을 미리 정의해 두면 해당 내용은 req.params 에 담겨서 전달됨 app.get('/:id', (req, res) => { console.log(req.params); res.send(`ID 번호가 ${req.params.id} 인 회원 정보`); }); data 여러 개 받기도 가능 req.params 라는 객체에 담겨서 전달이 되어서 편리하게 사용이 가능 app.get('/:id/:name/:gender', (req, res) => { console.log(req.params); res.send(req.params); }); ✅ req.query params 의 약점은 정의 된 형태로만 데이터를 받을 수 있음 막 ..

📌 Yarn 이란? Facebook에서 만든 노드 페키지 관리자 도구 npm과 정확하게 같은 일을 해줌(but, 가볍고 빠름) + React도 Facebook에서 만들어서 추후에 편리함 ✅ Yarn의 장점 속도 패키지 데이터를 Cache 에 저장하여 중복된 데이터는 다운 받지 않고 설치 합니다 -> 속도가 더 빠릅니다 안정성 & 보안성 Yarn 은 이전에 npm이 제공하지 않던 yarn.lock 파일을 제공 간단한 정보만 포함하던 packge.json 이 아니라 각 패키지의 세부 정보를 전부 포함하는 lock 파일의 존재는 어느 환경에서나 같은 패키지를 설치할 수 있도록 보장을 해줬기 때문에 안전성과 보안성이 뛰어남 나중에, npm 도 pakage-lock.json 을 도입하여 이와 같은 문제 해결 지금..

📌 CRUD (Create, Read, Update, Delete) Create -> post read -> get update -> put delete -> delete 📍req, res req(uire) : 브라우저에서 들어온 요청 res(ponse): 요청에 따른 서버의 응답 📍 nodemon 사용 "scripts": { "server": "nodemon js/main.js", "dev": "nodemon --watch \"./js/*.js\" --exec \"npm run server\"" }, package.json 파일 수정 sass 처럼 특정 파일에게 --watch 걸어 줄 수도 있음 변화가 일어나면 --exec 옵션으로 명령어 실행 가능 📍 HTTPie 서버에서 post 요청 ✅ 코드 전체..

📌 생성자 함수 생성자 함수는 와플 기계, 생성자는 와플.. -> ES6가 나오면서 class가 대체 (일종의 syntactic sugar 임) 📌 class 란? 객체지향 프로그래밍(OOP)에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀 -> 객체의 설계도 인스턴스화 : 클래스(객체의 설계도)를 이용해서 실제 객체를 만드는 과정 ✔️ class 로 구현 예시 // @ts-check class Car { constructor(brand, color) { this.brand = brand; this.color = color; } drive() { console.log(`${this.brand}의 ${this.color}색 자동차가 주행 중입니다.`); } } const hyundai =..

코딩애플 강의를 기반하여 공부한 기록입니다. https://codingapple.com/ 코딩애플 온라인 강좌 - 개발자도 단기완성! 단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절 codingapple.com ✅ express 라이브러리 사용법 const express = require('express'); const app = express(); app.listen(8080, function() { console.log('listening on 8080') }) 굳이 해석해보자면 첫 두줄은 express 라이브러리 첨부와 사용, 밑에 app.lis..

sudo로 권한 주어 설치 📌 NPM 이란? Node Package Manager 페키지 관리를 위해 하나의 json 파일로 관리해 줌 ✅ 패키지 관리 시작하기 npm init -y package.js 파일이 생성되고, 이 파일안에 node.js 관련 package 정보가 다 들어감 { "name": "day27", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } 위의 파일이 처음 생성 당시의 package.js이다. npm run tes..

📌 프레임워크 편리함, 보안이 좋음 ex) bootstrap - css 프레임워크(frontend) spring - java 프레임워크(backend) 프론트엔드로는 결과만 보여줌 📌 에러 컴파일에러(신텍스에러) : 문법 오류 런타임에러: 실행되는 도중에 다운되는 에러/ 문맥상 오류 ✅ head vs body head안에 있는 내용은 한 줄, 한 줄 나오는게 아니라 한꺼번에 나옴 body는 한 줄, 한 줄 나옴 head에 div, span ,, 이런 tag들 다 쓸 수 있음 body에 오류가 생기면 너그럽게 넘어가지만, head에 오류가 생기면 결과물이 로드되지 않음 📌 자바스크립트 : 비동기식 이벤트 기반 원래는 벡엔드가 시나리오 기반이였는데 채팅 : 시나리오 없음, 실시간으로 이루어 져야 함 대부분 ..