가자미의 개발이야기

CSS 기초 구조 css는 html보다 더 쉽다. 선택자, 속성, 값으로 이뤄져 있다 div { font-size: 20px; color: red; } 선택자 { 송성: 값; 속성: 값; }선택자는 html의 어떤 요소에게 효과를 적용시킬지 인식하기 위해 사용되는 개념이다. 선택자는 html의 태그를 통해 특정 요소를 가르키게 된다.(h1, div ..) 속성(properties)과 값은 어떤 요소에 얼마나 효과를 적용시킬지를 결정할 때 사용된다. 이때 html의 속성과 구분해야한다. html의 속성은 attribute이다. 클래스 선택자 태그로 찾는 것 뿐만 아니라 클래스로 요소를 찾을 수 있다. 이렇게 클래스로 요소를 찾는 선택자를 '클래스 선택자'라고 한다 .title{ color:r..

기본 형태 태그는 각자의 의미를 가지고 있고 다음과 같은 형태를 가짐 h1->->ul->li 순으로 부모->자식 관계가 이뤄진다. 이때 자식의 이하 자식들(즉 section입장에서 ul, li를 의미) 후손(하위) 요소이라 한다. 반면 부모의 상위 부모들(즉 li 입장에서 h1, section을 의미) 조상(상위) 요소라 한다. 빈 태그 닫히는 개념이 없는 태그를 빈 태그라고 한다. 혹은 여는 태그가 스스로 닫아버리는 태그도 빈 태그로 취급한다. 슬래시를 붙이거나 붙이지 않는 두 가지 방법이 있는데, 하나의 방법으로 통일하는게 좋다. html 구조 index.html이라는 파일에 다믕과 같이 코딩했을 경우.. 문서의 구조 DOCTYPE(DTD, 버전 지정) DOCTYPE은 마크업 언어에서 문서 형식을 정..

1. dotenv .env 파일을 읽어서 process.env로 만듦 키=값 형식으로 구성 비밀 키를 소스코드와 분리하기 위함 2. morgan 서버로 들어온 요청과 응답을 기록해주는 미들웨어 개발환경에서는 'dev', 배포 환경에서는 'combined'를 애용 app.use(morgan('dev')); 3. static 정적인 파일들을 제공하는 미들웨어 인수로 정적 파일의 경로를 제공 파일이 있을 때 fs.readfile로 읽어들일 필요가 없음 요청하는 파일이 없을 경우 next를 호출해 알아서 다음 미들웨어로 넘어감. 파일을 발견했다면 다음 미들웨어는 실행되지 않음 컨텐츠 요청 주소와 실제 컨텐츠의 경로를 다르게 만들 수 있음. app.use('요청 경로', express.static('실제 경로')..

1. 미들웨어 #익스프레스는 미들웨어로 구성됨 요청과 응답의 중간에 위치하기 때문에 미들웨어라고 함 위에서 아래로 순서대로 실행됨. 미들웨어는 req, res, next가 매개변수인 함수 req = 요청, res = 응답, next = 다음 미들웨어로 넘어감 미들웨어가 실행되는 경우 app.use(미들웨어) 모든 요청에서 미들웨어 실행 app.use('/abc', 미들웨어) abc로 시작하는 요청에서 미들웨어 실행 app.post('/abc', 미들웨어) abc로 시작하는 post 요청에서 미들웨어 실행 2. 에러처리 미들웨어 #에러가 발생하면 에러 처리 미들웨어로 매개변수가 err, req, res, next 총 4개 err에 에러에 관한 정보 res.status 메서드로 http 상태 코드 지정 가능..

1. npm i express 명령어로 express 설치 2. npm init 명령어로 package.json 생성 3. app.js 작성 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'), '번 포트에서 대기 중'); }); app.set('port', 포트) = 서버가 실행될 포트 지정. app.get('주소', 라우터) = GET 요청이 올 때 어떤 동작을 할..

promise.all : 여러 개의 프로미스 인스턴스를 받아 모두 완료될 때까지 기다리고 모든 반환값을 반환 promise.race : 여러 개의 프로미스 인스턴스 중 가장 먼저 끝날 때까지 기다리고 가장 먼저 끝난 반환 값을 반환 //promise.all & promise.race const getDog = async ()=>{ await sleep(1000); return 'bark!'; } const getCat = async ()=>{ await sleep(1000); return 'meow!'; } async function process2(){ const results=await Promise.all([getDog(), getCat()]); //promise배열을 받아 모두 끝나면 동시에 결과..

async : 함수 앞에 붙이면, 반환 값이 반드시 promise형이 된다. await : async에만 사용할 수 있음. 프로미스 인스턴스가 완료될 때까지 대기. then과 비슷 //async & await function sleep(ms){ return new Promise(resolve=> setTimeout(resolve,ms)); } async function process(){ console.log('hello'); await sleep(1000); console.log('nice to meet u'); return true;//async의 반환형은 promise(then catch사용 가능) } process();

promise : 특정 콜백을 조건에 따라 성공/실패로 나눠주는 역할. resolve : 성공했을 경우에 성공 결과를 반환하는 메소드 reject : 실패했을 경우에 에러를 반환하는 메소드 then : promise 인스턴스가 성공적으로 실행하고 나서 다음에 할 행동을 콜백으로 실행 catch : promise 인스턴스가 오류를 일으킬 경우 처리할 행동을 실행 //비동기 작업 다루기 promise //많은 콜백함수를 정리할 때 사용 const myPromise = new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve('result');//성공하는 상황에서는 resolve }, 1000) setTimeout(()=>{ reject(new Error());/..

setTimeout : ms초 뒤에 백그라운드에서 작업할 콜백을 정의 //비동기 작업 다루기 setTimeout function work(callback){ setTimeout(()=>{//백그라운드에서 작업실행 const start = Data.now(); for(let i=0;i{ console.log('작업이 끝났어요'); console.log(ms+'ms'); }); console.log('다음작업'); 콜백을 매개변수로 받는 work 함수. work함수는 setTimeout으로 반복문 작업을 하고 매개변수 콜백을 마지막으로 실행.

spread : 다른 변수나 배열의 원소를 그대로 계승함을 의미(...으로 표현) //spread const slime={ name : 'slime' }; const cuteSlime={ ...slime,//spread attribute: 'cute' }; const animals=['dog', 'cat']; const anotherAnimals=[...animals, 'pigeon']; rest : 객체나 배열에서 특정값을 제외한 나머지를 반환해서 배열이나 객체를 반환 매개변수로 rest를 사용시 여러 매개변수를 받아 배열로 만드는 역할을 함. //rest const purpleCuteslime={ name: 'slime', attribute:'cute', color:'purple' }; const {..