b_m_c.log

apply함수

Sat, 16 Dec 2023 11:43:35 GMT

for i in range(1, max_len + 1):
 df[f'SE{i}'] = df['worker'].apply(lambda x: x[i-1] if len(x) >= i else None)

apply 함수는 Pandas 데이터프레임 또는 시리즈의 각 행(axis=0) 또는 열(axis=1)에 함수를 적용하는 데 사용되는 메서드입니다. apply 함수를 사용하면 사용자 정의 함수나 람다 함수를 데이터프레임의 각 요소에 적용할 수 있습니다.

웹개발 부트캠프 2022 4주차(자바스크립트)

Thu, 19 May 2022 10:28:16 GMT

(5/6 ~5/19) The Web Developer 부트캠프 2022 강의 내용 정리 범위 : YelpCamp CURD ~ Express와 Mongo연결하기(섹션 41 ~43)

미들웨어

미들웨어는 요청에서 응답 사이에 실행되는 함수이고 요청 객체와 응답 객체에 접근 및 수정할 수 있다.

Express는 라우팅과 최소한의 기능을 갖춘 미들웨어 웹 프레임워크의 결합이다 즉, Express 앱은 미들웨어 함수 호출의 연쇄일 뿐이다

Morgan

request logger middleware이다. 각종 Request 요청에 대한 간략한 정보들을 콘솔에 출력해주는 역할을 한다.

app.use(morgan('tiny'));
//dev 옵션
app.use(morgan('dev'));
//common 옵션
app.use(morgan('common'));

//tiny
GET / 200 9 - 3.296 ms
GET /favicon.ico 404 150 - 3.272 ms

//dev
GET / 304 4.349 ms - -

//common
::1 - - [18/May/2022:14:23:40 +0000] "GET / HTTP/1.1" 304 -

미들웨어 정의

app.use((req,res,next)=>{}) 형태로 정의하며 next함수를 통해 다음 미들웨어 또는 라우트 핸들러를 호출한다.

app.use((req, res, next) => {
    console.log('ThIS IS MY FIRST MIDDLEWARE!');
    next();
});
app.use((req, res, next) => {
    console.log('ThIS IS MY SECOND MIDDLEWARE!');
    req.requestTime = Date.now();
    next();
});

//미들웨어에서 요청이 들어온 시간을 요청객체의 requestTime에 넣어주어 라우트핸들러에서 접근할 수 있게 함
app.get('/', (req, res) => {
    console.log(req.requestTime);
    res.send('HOME PAGE');
});

404 경로 설정

라우트 핸들러 마지막에 미들웨어를 추가하여 어떤 요청에도 매칭되지 않을 경우 동작하도록 한다.

app.get(...)
app.get(...)

app.use((req,res)=>{
    res.status(404).send("Not Found");
})

미들웨어 패스워드 설정 데모

미들웨어에서 패스워드를 검사하여 일치하지 않는 패스워드일 경우 요청이 거부되도록 할 수 있다. 이를 토대로 특정 라우트에서 패스워드 확인을 하도록 할 수도 있다.

app.use((req, res, next) => {
    const { password } = req.query;
    if (password === 'secret') next();
    res.send('Sorry YOU NEED A PASSWORD');
});

app.get(...)

특정 라우트에서 패스워드 확인을 하는 경우

const verifyPassword = (req, res, next) => {
    const { password } = req.query;
    if (password === 'secret') next();
    res.send('Sorry YOU NEED A PASSWORD');
};
//라우트 핸들러 2번째 인자에 미들웨어를 추가해주면 된다.
app.get('/', verifyPassword, (req, res) => {});

ejs-mate

상용구를 사용할 수 있게 해주는 툴이다. view파일에서 <% layout('layouts/boilerplate') %> 로 선언하면 해당 view파일은 <%- body%> 여기에 들어가게 된다. 그렇게 되면 아래에 BEFORE , AFTER가 상용구가 되어 공통적으로 쓰일 수 있게 된다.



    
        
        
        
        BOILERPLATE!!!
    
    
        BEFORE
        <%- body%>
        AFTER

<% layout('layouts/boilerplate') %>

Edit Campground

    
        Title
        
    
    
        Location
        
    
    

Back To Campground

Express 디폴트 오류 처리기

내장된 오류 핸들러가 앱에서 발생한 모든 오류를 처리한다. 오류 객체를 찾은 다음 상태 코드와 상태 메시지를 찾는다. 상태코드의 디폴트는 500이지만 바꿀 수 있다.

내장된 오류 핸들러만으로는 모든 오류를 처리할 수 없기에 다양한 유형에 대한 오류 핸들러를 추가하여야 한다.

예를 들면 Mongoose에서 유효성 오류가 발생한 경우 구문 오류나 인증 오류와는 다른 방법으로 처리해야한다.

사용자 지정 오류 처리기 정의

app.use((err, req, res, next) => {
    console.log('ERROR!');
    res.status(500).send('Oh! Error!');
    //내장된 오류 처리기를 사용하고 싶으면 next함수 호출 이 때 인수로 err를 전달해야한다.
    //express는 next에 무언가를 전달하면 현재 요청을 오류로 간주하여 남아 있는 오류 처리에 대한 동작만 한다.
});

사용자 지정 오류 클래스

오류에 대한 상태 코드와 메세지를 정해주는 작업을 각기 다른 상황에서 발생하는 모든 오류에 다 처리하려면 번거롭기에 이를 클래스로 만들은 것

class AppError extends Error {
    constructor(message, status) {
        super();
        this.message = message;
        this.status = status;
    }
}

const verifyPassword = (req, res, next) => {
    const { password } = req.query;
    if (password === 'secret') next();

    throw new AppError('password required', 401);
};

app.use((err, req, res, next) => {
    const { status = 500 } = err; //오류에 상태코드가 없을 경우 디폴트를 500으로 설정
    const { message = 'Something Went Wrong' } = err;
    res.status(status).send(message);
});

비동기 오류 처리하기

라우트 핸들러와 미들웨어에 의해 발동된 비동기 함수에서 반환된 오류의 경우에는 다음 함수로 전달하여 Express가 잡아내서 처리할 수 있게 해야 한다. 그렇지 않으면 오류 핸들러가 작동되지 않는다.

app.get('/products/:id', async (req, res, next) => {
    const product = await Product.findById(id);
    if (!product) {
        return next(new AppError('Product Not Found', 404));
    }
    //next가 호출되더라도 next다음 코드의 실행은 중단되지 않기 때문에 return이나 else로
    //정상 응답인 경우의 코드가 실행되지 않도록 해야한다.
    res.render('products/show', { product });
});

try-catch로 비동기 오류 처리

비동기 함수에서는 모든 걸 try...catch 문으로 감싸야 한다. 비동기 함수일 때만 해당이 되고 다른 경우엔 Express가 처리하기에 예를 들어 new를 render할 땐 try...catch 문으로 감쌀 필요가 없다.

app.get('/products/:id', async (req, res, next) => {
    try {
        const product = await Product.findById(id);

        if (!product) {
            throw new AppError('Product Not Found', 404);
        }

        res.render('products/show', { product });
    } catch (e) {
        next(e);
    }
});

비동기 유틸리티 정의

try...catch 문을 모든 각각의 비동기 라우트 콜백 그리고 핸들러와 미들웨어 등에 일일이 추가하는 것은 번거롭기에 이를 해결하고자 wrapAsync라는 함수를 정의하여 사용한다. 이 함수는 함수를 전달받아 catch메소드를 체인하여 에러가 발생할 경우 next함수를 호출하도록 한다.

function wrapAsync(fn) {
    return function (req, res, next) {
        fn(req, res, next).catch((e) => next(e));
    };
}

app.get(
    '/products/:id',
    wrapAsync(async (req, res, next) => {
        const product = await Product.findById(id);

        if (!product) {
            throw new AppError('Product Not Found', 404);
        }

        res.render('products/show', { product });
    })
);

Express 5부터 Promise를 반환하는 라우트 핸들러 및 미들웨어는 거부하거나 오류를 던질 때 자동으로 next(value) 호출 한다.

$ npm install express@next //최신 버전의 express v5 알파 버전 설치

express5에서 비동기 오류 처리 예시

app.get('/user/:id', async function (req, res, next) {
    var user = await getUserById(req.params.id);
    res.send(user);
});

Mongoose 오류 구분하기

모든 Mongoose 오류에는 name이라는 특성이 있다. 이를 활용하여 오류 처리 미들웨어에서 오류마다 handle에러처리 함수를 호출하게할 수 있다.

Mongoose 오류 종류
- ValidationError 유효성 검사 오류
- CastError 캐스트 오류

const handleValidationErr=(err){
    console.dir(err)
    return new AppError(`Validation Failed...${err.message}`,400)
}


app.use((err, req, res, next) => {
    if (err.name === 'ValidationError') err = handleValidationErr(err);
    next(err);
});

Joi

자바스크립트 유효성 검사 도구이다.

웹개발 부트캠프 2022 3주차(노드)

Thu, 12 May 2022 05:33:19 GMT

(5/6 ~5/12) The Web Developer 부트캠프 2022 강의 내용 정리 범위 : 우리의 첫번째 도구 Node ~ 하나로 묶기 Express Mongoose(섹션 31 ~38)

122. Node.js

Javascript 런타임이다. 즉 브라우저 밖에서 작동되는 JavaScript의 실행 환경이다.

덕분에 클라이언트 측 Javascript로는 브라우저에서 할 수 없었던 많은 일(웹 서비스를 만들고 파일 시스템과 상호작용 등의)들을 할 수 있게 됐다.

123. Node는 어디에 사용하나

웹 서버 구축
명령줄 도구
네이티브 앱 (대표적 앱: vscode)
비디오 게임
드론 소프트웨어

이처럼 브라우저를 벗어나 Javascript로 다양한 곳에 활용될 수 있다.

124. Node REPL

사용자가 특정 코드를 입력하면 그 코드를 평가하고 코드의 실행결과를 출력해주는 것을 반복해주는 환경

터미널 또는 cmd창에서 node를 입력하면 REPL환경으로 접속이 가능하다.

REPL환경에서 간단한 연산, 함수 사용, 변수 활용등 테스트가 가능하고 바로 결과가 확인이 가능하다.

125. Node 파일 실행

node /경로/파일명

126. process와 argv

process

process는 Node에서 사용하는 객체이다.

RELP환경에서 process를 치면 메서드와 특성이 매우 많다.

예를 들면 아래같은 것들이 있다.

process.version node버전
process.cwd() 현재 작업 디렉토리
process.argv node로 스크립트 실행 시 넘겨준 인수들에 대한 정보

process.argv

스크립트 실행 시 넘겨준 인수들에 대한 정보

node test.js hi

console.log(process.argv[0]); //node 실행파일 경로
console.log(process.argv[1]); //스크립트 파일 경로
console.log(process.argv[2]); //hi 출력

//인수를 만든다면 argv 처음 요소 2개는 무시

const args = process.argv.slice(2);
for (let arg of args) {
    console.log(arg);
}

127. require

CommonJS를 사용
모듈을 로드하는 키워드

//파일 시스템 모듈 사용 예제
const fs = require('fs');
const folderName = process.argv[2] || 'Project';

try {
    fs.mkdirSync(folderName);
    fs.writeFileSync(`${folderName}/index.html`, '');
    fs.writeFileSync(`${folderName}/app.js`, '');
    fs.writeFileSync(`${folderName}/style.css`, '');
} catch (e) {
    console.log('SOMETHING WRONG!');
    console.log(e);
}

128. import

ES6에서만 사용
모듈 로드하는 키워드

import fs from 'fs';

129. 모듈 내보내기

서로 다른 파일간에 Javascript 코드를 공유하는데 사용

module.exports

module.exports객체에 설정을 하면 다른 파일에서 require키워드를 통해 module.exports에 설정된 값에 액세스할 수 있다.

//math.js

const add = (x, y) => x + y;

module.exports.add = add;

//app.js
const math = require('./math');
//구조분해도 가능하다
const { add, PI } require('./math');

math.add(2, 3);

exports

module.exports 단축 구문 exports는 module.exports객체를 참조한다. exports 자체에 새로운 값을 넣으면 module.exports객체를 참조하지 않게 되므로 주의

//math.js
exports.add = function (x, y) {
    x + y;
};

//app.js
const math = require('./math');
//구조분해도 가능하다
const { add } = require('./math');

math.add(2, 3);

ES6에서는 import키워드를 통해 모듈을 load하고 export 키워드를 통해 객체를 내보낸다.

named export

//math.js

export const add = (x, y) => {
    x + y;
};

exports.print = (x) => {
    console.log(x);
};

//app.js
import { add, print } from './math.js';
print(add(1, 2)); // 3 출력

default export

내보낼 하나의 고정된 값만 내보낼 때 사용

//math.js
const test = 'test';
export default test;
//app.js
import test from './test';

index.js 활용

디렉토리 전체를 불러오라고 하면 Node가 index 파일을 찾게 되고 해당 파일이 내보내는 게 바로 그 디렉토리가 내보내는 항목이 됨

일종의 진입점으로 활용
디렉토리에서의 메인 파일
라이브러리를 만들거나 라이브러리로 작업을 할 때 중요한 역할을 함

/*
shelter라는 디렉토리 안에 blue.js janet.js sadie.js
3개의 파일에서 각각 객체를 내보냄
이를 index.js에서 배열로 저장하여
내보내고 app.js에서 불러오는 예제임
*/
//blue.js
exports default {
    name:'blue',
    color:'grey'
}

//janet.js
exports default {
    name:'janet',
    color:'gray'
}
//sadie.js
exports default {
    name:'sadie',
    color:'silver'
}
//index.js
import blue from "./blue.js"
import janet from "./janet.js"
import sadie from "./sadie.js"

exports const allCats=[blue,janet,sadie]

//app.js
import cats from "./index.js"

130. NPM

노드 패키지 매니저로 패키지(모듈)들을 손쉽게 설치하고 관리할 수 있게 해주는 명령줄 도구임

npm install 패키지명
npm i 패키지명

이렇게 설치되는 패키지는 node_modules 디렉토리에 위치하게된다.

package.json

특정 프로젝트, 패키지, 앱에 대한 정보를 갖고 있음

패키지를 설치하게 되면 패키지에 대한 디펜던시(설치할 모듈 정보)가 추가됨

npm_modules 디렉토리는 파일의 양이 많으므로 이 폴더를 공유하는 것은 바람직하지 않다. 때문에 디펜던시 정보를 토대로 프로젝트의 모듈들을 한 번에 다운로드하는 방식을 사용한다.

script라는 것도 있는데 이것은 run 명령어를 통해서 실행할 것들을 적어두는 것이다.

npm init //package.json파일 생성
npm i // 디펜던시에 기록된 모듈들 install

package-lock.json

node_modules 디렉토리의 콘텐츠에 대한 기록을 관리

의존성 트리에 대한 정보를 가지고 있으며 package-lock.json 파일이 작성된 시점의 의존성 트리가 다시 생성될 수 있도록 보장한다.

이 파일이 없다면 package.json에 A라는 모듈이 업데이트된 버전이 있다면 그 버전을 설치하기 때문에 프로젝트를 공유한 사람끼리 다른 버전의 모듈을 사용할 수 있게됨. 이 때문에 똑같은 버전의 모듈을 사용하도록 보장하는 것이 필요하다.

패키지 지역 설치

npm install 패키지명

지역 설치를 하는 이유는 버전마다 호환되는 환경이 다르거나 프로젝트마다 사용되는 패키지가 다를 수 있기 때문이다.

패키지 전역 설치

npm install -g 패키지명

131. Express

웹 개발 프레임워크로써 서버 역할을 하는 웹 어플리케이션을 만드는데 사용한다.

프레임워크란 다양한 메서드, 애드온과 플러그인을 제공하여 Application개발을 위한 기본적인 뼈대를 제공해준다. 또한 제어의 역전으로 사용자로 하여금 코드를 어디서, 언제 호출할지를 강제한다.

코드의 유연성과 자유를 어느정도 감수하고 빠른 개발 속도와 다양한 기능을 사용하기 위해 프레임워크를 사용함

npm i express

간단한 서버 만들기

import express from 'express';
//app 객체에는 route, param path, get, post, setting등의 메소드나 정보가 들어있다.
const app = express();

//8080포트로 요청을 받도록 함
app.listen(8080, () => {
    console.log('LISTENING ON PORT 8080!');
});

//모든 요청타입에 대해 요청이 들어오면 콜백이 실행됨
app.use(() => {
    console.log('WE GOT A NEW REQUEST');
});

요청 타입으론 get, post, put, delete, patch가 있다.

HTTP 요청은 JAVASCRIPT 객체가 아닌 텍스트 정보이다. express에서는 이를 파싱하여 객체로 변환하여 콜백의 첫번 째 인수로 넘긴다.

//req- 요청 객체
//res- 응답 객체
app.use('요청 url', (req, res) => {
    //요청에 대한 동작
    console.log('WE GOT A NEW REQUEST');
    //응답
    res.send('Hello, We got Your Request!');
});

132. 라우팅

요청과 요청된 경로를 가져와서 응답을 갖는 어떠한 코드에 맞추는 것을 의미한다.

//dogs로 요청할 경우
app.get('/dogs', (req, res) => {
    res.send('WOOF!');
});

//cats로 요청할 경우
app.get('/cats', (req, res) => {
    res.send('MEOW!');
});

/*요청 URL을 제네릭 패턴으로 하면
일치하는 요청경로 및 요청타입이 없을 경우 콜백이 실행된다.
이 경우 맨 밑에 둬야 다른 요청들에 대해 콜백을 수행하게 된다*/
app.get('*', (req, res) => {
    res.send("I don't know that path!");
});

133. express 경로 매개 변수

//요청 url 뒤에 /:매개 변수로 작성하면 params를 통해 매개변수를 받을 수 있다.
app.get('/r/:subreddit/:postId', (req, res) => {
    const { subreddit, postId } = req.params;
    res.send('subreddit:', subreddit, 'postId:', postId);
});

134. 쿼리 스트링

URL의 뒤에 입력 데이터를 함께 제공하는 데이터 전달 방법 req객체의 query라는 특성에 key-value값으로 들어간다. GET방식으로 데이터를 요청할 때 쓰이는 방법

//요청 url /search?q="test"&n="test"
app.get('/search', (req, res) => {
    const { q, t } = req.query;
    res.send(`q:${q}t:{t}`);
});

135. Nodemon

서버를 재시작하지 않고 변경된 부분을 자동으로 업데이트 해주는 도구

136. 템플레이팅

특정 로직과 HTML 응답 생성을 결합하는 것

항상 같은, 정적인 HTML 코드를 쓰는 대신에 정보와 로직을 넣음으로써 동적인 템플릿을 만듬

템플릿 : HTML 조각

137. EJS

Embedded JavaScriptd의 약자로 템플릿 엔진(뷰 엔진) 중의 하나이며 Javascripts 로직을 템플릿에서 동작하게 해준다.

view engine 설정

app.set('view', 'ejs'); // view engine 설정

view 디렉토리 설정

view 디렉토리 default값은 현재 작업하고 있는 디렉토리의 views이다. 따라서 view 디렉토리 설정을 하지 않으면 views가 없는 디렉토리에서 서버를 동작시키면 views 디렉토리를 찾지 못한다.

app.set('views', path.join(__dirname, '/views')); //views폴더의 절대 경로

138. EJS 문법

<% %>

EJS 태그로 태그 사이에 자바스크립트를 넣는다.

<%= %>

EJS 태그로 태그 사이에 받을 데이터의 변수명 또는 반환되는 값이 있는 자바스크립트문을(Math.rand()같은 것) 넣으면 된다.

res.render("","") 첫 번째 인수에는 렌더링할 파일명, 두 번째 인수에는 템플릿에 같은 이름으로해서 값을 주면 템플릿에서 해당 값을 읽을 수 있다.

<%- %>

HTML 코드를 날것(Raw)로 보여준다. 템플릿을 include할 때 사용

//app.js

app.get('/', (req, res) => {
    const num = Math.floor(Math.random() * 5);
    res.render('random', { rand: num }); // 렌더링할 ejs파일명, 넘길 값들
});


    <%="Math.floor(Math.random()*5)%>
    <%=rand%>
    <%-
    
    %>

//0~5이하 자연수

EJS 조건문


    <%if(rand>0){ %>console.log("good") <% } else{ %> console.log("Not bad") <%}%>

EJS 반복문


    <%for(i=0;i<5;i++){%> console.log(<%=i%>) <%}%>

139. 정적 Assets 사용하기

정적 Assets

CSS,JAVASCRIPT,사진 같은 파일

//public 디렉토리를 정적 Assets의 base로 설정
app.use(express.static('public'));

//public의 절대경로로 설정
app.use(express.static(path.join(__dirname), 'public'));

//app.css가 public 에 있을 경우 public경로 없이 사용 가능

140. EJS와 파일 분할

<%-include %> 태그를 활용하여 head,navbar,footer 등등 템플릿을 포함시킬 수 있다.

//head.ejs

    head

//home.ejs <%- include('partials/head')>


    home

141. Get 요청과 Post 요청

Get요청

주로 정보를 가져올 때 (불러오기)
같이 따라오는 데이터는 쿼리스트링에 담는다.
URL의 최대길이가 있어 보낼 데이터가 한정된다.

Post 요청

주로 정보를 올리거나 보낼 때(생성)
보낼 데이터는 Body에 포함된다.
길이가 제한된 Get방식보다 더 많은 데이터 보내기 가능
Body에 보내지는 데이터의 타입은 JSON,application/x-www-form-urlencoded, multipart/form-data등이 있다.

요청 구문 분석

//body

{
    "name":"test",
    "color":"brown",
}

//form request body를 해석하기 위해 사용
app.use(express.urlencoded({ extended: true }));

//json 타입의 body를 해석하기 위해 사용
app.use(express.json())

app.post("/",(req,res){
    const {name,color} = req.body
})

extended 값을 false로 하면 querystring모듈을 사용 true로 하면 qs모듈을 사용

142. REST

REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미

즉 요청 URI에 자원을 명시하고 HTTP Method를 통해 해당 자원에 대해 CURD를 적용하는 것을 의미

143. RESTful API

URI + HTTP METHOD + 필요시 id나 고유 식별자를 사용하여 정보 교환을 하는 것

HTTP METHOD(GET,POST,PATCH,DELETE,PUT) GET /comments - list all comments POST /comments - Create a new comment GET /comments/:id -Get one comment(using ID) PATCH /comments/:id -Update one comment DELETE /comments/:id -Destroy one comment

144. Express redirect

초기 응답에서 전송된 위치를 기반으로 두 번째 요청을 이어서 하게 한다. res.redirect("요청 url")

145. 디테일 라우트 (쇼 라우트)

고유식별자를 활용하여 특정한 하나의 리소스에 대해 보여주는 것

경로 끝에 고유 식별자값을 넣으면 req.params에 값을 들어간다.

app.get('/comments/:id', (req, res) => {
    const { id } = req.params;
});

146. UUID

범용 고유 식별자이다.

데이터들이 나중에 단일 DB로 통합되더라도 식별자가 중복될 확률이 매우 낮다.
128비트이며, 32자리의 16진수로 표현
8자리-4자리-4자리-4자리-12자리 패턴으로 5개의 그룹으로 구분된다.
UUID를 만드는 버전에 따라 생성 기준이 다르다.(보통 4버전인 랜덤 생성을 사용한다.)

//구조분해시 새로운 이름 명명
import { v4 as uuidv4 } from 'uuid';
const id = uuidv4();
console.log(id); //1944cc80-c239-4394-9f5f-9341f8f9945f

147. PATCH와 PUT

PUT

전체 내용을 업데이트하는 용도

보내지지 않은 페이로드에 대해선 NULL값으로 업데이트

PATCH

부분적으로 업데이트하는 용도

보내지지 않은 페이로드에 대해선 기존 값을 유지

148. express method override

브라우저의 HTML 폼은 get이나 post 요청만 전송할 수 있어서 Put 요청이나 Patch 요청 Delete 요청은 보낼 수 없다. 이 경우 method-override라는 패키지를 활용하여 우회하는 형식으로 가능하게 할 수 있다.

import methodOverride from 'method-override';
app.use(methodOverride('_method'));

app.patch('/comments/:id', (req, res) => {});


    //?_method부분으로 인해 patch요청으로 express가 인식함

149. 데이터베이스 개요

데이터 지속성
데이터를 효율적으로 저장, 사용, 관리하기 쉽게 해준다.
데이터베이스 관리시스템으로 보안 기능이나 관리자로서의 접근을 누구에게 허용할지에 대한 제어가 가능하다.

150. SQL, NOSQL

SQL

관계형 데이터베이스
모든 작업이 테이블에서 이루어진다.
테이블과 테이블을 연결하여 작업한다.

NoSQL

특정한 패턴을 따르거나 X, Y를 따지느냐를 보아 그렇지 않은 건 전부 다 NoSQL
키 값 쌍도 있고 칼럼 데이터베이스도 있고 그래프 데이터베이스, 문서 데이터베이스와 튜플 저장소가 있다.
SQL에 비해 유연하고 자유롭다.

151. Mongo

NoSQL
배우기 쉽다.
express와 같이 많이 쓰인다.
Javascript 구문을 쓴다.

152. Mongo Shell

Javascript Shell이라 Javascript 코드 입력 가능

db 명령어

디폴트로 사용하게 될 데이터베이스

show dbs(databases)

데이터베이스 목록

use 데이터베이스명

없으면 데이터베이스 생성 있으면 db 전환

Mongo db는 데이터베이스를 생성해도 실제 저장할 데이터가 있을 때까지 대기한다. 따라서 show dbs를 했을 때 생성한 db가 출력되지 않는다.

153. BSON이란

이진법 JSON이다. JSON보다 데이터를 훨씬 더 압축하여 저장할 수 있다.

JSON의 문제는 홈페이지나 문서에 들어갈 때 상당히 느려서 Mongo에선 JSON을 이진법으로 인코딩한 BSON을 사용한다.

154. Mongo 데이터베이스에 삽입

insertOne(하나의 객체만을 전달), insertMany(여러 객체 전달), insert(하나 또는 여러개 객체 전달) 세 가지 메소드가 있다.

db.dogs.insertOne({
    name: 'Charlie',
    age: 3,

    breed: 'corgi',
    catFriendly: true,
});

//아래처럼 뜨면 삽입되었음을  의미
{
"acknowledged" : true,
"insertedId" : ObjectId("627bf7a4491e7e80fb01fa6f")
}

//2개 객체 삽입
db.dogs.insert([{name: "Wyatt",

breed: "Golden",age: 14, catFriendly: false},{name: "Tonya",

breed: "Chihuahua",age:17, catFriendly: true}])

//아래처럼 뜨면 2개 모두 삽입되었음을 의미
BulkWriteResult({
        "writeErrors" : [ ],
        "writeConcernErrors" : [ ],
        "nInserted" : 2,
        "nUpserted" : 0,
        "nMatched" : 0,
        "nModified" : 0,
        "nRemoved" : 0,
        "upserted" : [ ]
})

155. Mongo 데이터베이스에서 찾기

find, findOne


db.dogs.find() //해당 집합에 있는 객체 모두 출력

{ "_id" : ObjectId("627bf7a4491e7e80fb01fa6f"), "name" : "Charlie", "age" : 3, "breed" : "corgi", "catFriendly" : true }
{ "_id" : ObjectId("627bf938491e7e80fb01fa70"), "name" : "Wyatt", "breed" : "Golden", "age" : 14, "catFriendly" : false }
{ "_id" : ObjectId("627bf938491e7e80fb01fa71"), "name" : "Tonya", "breed" : "Chihuahua", "age" : 17, "catFriendly" : true }


db.dogs.find({"name":"Tonya"})

{ "_id" : ObjectId("627bf938491e7e80fb01fa71"), "name" : "Tonya", "breed" : "Chihuahua", "age" : 17, "catFriendly" : true }

156. Mongo 데이터베이스에서 업데이트

updateOne(매치되는 첫 항목만), updateMany(모두), replaceOne(document의 특정 내용 완전히 대체)

//첫 번째 인자는 선택자, 두 번째 인자는 업데이트할 값
//$set는 필드의 값을 새로운 값으로 대체할 때 사용
db.dogs.updateOne({ name: 'charlie' }, { $set: { age: 4 } });

//업데이트 성공
{ "acknowledged" : true, "matchedCount" : 0, "modifiedCount" : 0 }

//없는 특성을 추가하면 객체에 추가됨
db.dogs.updateOne({ name: 'charlie' }, { $set: { color: "brown" } })

db.dogs.updateMany({catFriendly:true},{$set:{isAvailable:false}})
//2건 모두 성공
{ "acknowledged" : true, "matchedCount" : 2, "modifiedCount" : 2 }

//$currentDate는 날짜 업데이트에 사용 true값이면 현재 날짜로 설정
db.dogs.updateOne({ name: 'charlie' }, { $currentDate: { lastChanged: true } })

{ "_id" : ObjectId("627bf7a4491e7e80fb01fa6f"), "name" : "Charlie", "age" : 3, "breed" : "corgi", "catFriendly" : true, "isAvailable" : false, "lastChanged" : ISODate("2022-05-11T18:16:47.596Z") }

157. Mongo 데이터베이스에서 삭제

deleteMany, deleteOne 사용

db.dogs.deleteMany({ isAvailable: false });

//삭제됨
{ "acknowledged" : true, "deletedCount" : 2 }

//다 삭제시킴
db.dogs.deleteMany({})

//$or, $lt  연산자를 사용하여 조건을 추가로 줄 수 있음

158. 기타 연산자

중첩된 특성을 찾으려면 따옴표를 쓰고 dot 구문을 써야한다.

db.dogs.find({ 'personality.catFriendly': true });

//gt 초과인 값
db.dogs.find({ age: { $gt: 8 } });
//gte 이상인 값
db.dogs.find({ age: { $gte: 8 } });
//lt 미만인 값
db.dogs.find({ age: { $lt: 8 } });
//lte 이하인 값
db.dogs.find({ age: { $lte: 8 } });
//in 배열 검색 (하나라도 충족하면 검색)
db.dogs.find({ breed: { $in: ['Mutt', 'Corgi'] } });
//ne 일치하지 않는 값
db.dogs.find({ breed: { $ne: 'Mutt' } });
//nin 배열에 없는 객체 검색
db.dogs.find({ breed: { $in: ['Mutt', 'Corgi'] } });

//$and,$not,$nor,$or 연산자도 있음

159. Mongoose란

Express 앱이나 Node 앱을 Mongo와 연결하는데 사용되는 드라이버이다.

ODM(Object Data Mapper) 즉, 객체 데이터 매퍼로 데이터나 문서를 JavaScript 객체로 매핑한다.

사전에 프리셋 스키마 정의하여 데이터가 레이아웃된 스키마를 따르도록 강제할 수 있음

복잡한 쿼리를 만들 수 있도록 도와줌

node-mongo연결

import mongoose from 'mongoose';
main()
    .then(() => {
        console.log('CONNECTED!');
    })
    .catch((err) => console.log(err));

async function main() {
    await mongoose.connect('mongodb://localhost:27017/movieApp');
}

// node RELP에서 .load할 경우엔 이렇게 연결해주어야 한다.
let { mongoose } = await import('mongoose');
main()
    .then(() => {
        console.log('CONNECTED!');
    })
    .catch((err) => console.log(err));

async function main() {
    await mongoose.connect('mongodb://localhost:27017/movieApp');
}

160. 스키마

JavaScript 파일에서 데이터를 사용하거나 접근하려면 각 데이터를 정의하는 모델을 만들어야한다. 이 정의서가 스키마이다.

//스키마 생성
const movieSchema = new Mongoose.Schema({
    title: String,
    year: Number,
    score: Number,
    rating: String,
});

//movie 클래스 만듬
const Movie = mongoose.model('Movie', movieSchema);

//db에는 저장되지 않은 상태 
const amadeus = new Movie({ title: 'Amadeus', year: 1986, score: 9.2, rating: 'R' });

//db에 저장
amadeus.save();
/*
mongo shell에서 저장됨을 확인
{ "_id" : ObjectId("627c5b2c569309a9c73b5602"), "title" : "Amadeus", "year" : 1986, "score" : 9.2, "rating" : "R", "__v" : 0 }
 */

161. 대량 삽입하기

const amadeus = new Movie({
  title: "Amadeus",
  year: 1986,
  score: 9.2,
  rating: "R",
});

//db에 저장
amadeus.save();
/*
mongo shell에서 저장됨을 확인
{ "_id" : ObjectId("627c5b2c569309a9c73b5602"), "title" : "Amadeus", "year" : 1986, "score" : 9.2, "rating" : "R", "__v" : 0 }
 */

//insertMany메소드는 save하지 않아도 데이터베이스에 저장된다.
Movie.insertMany([
  { title: "Amelie", year: 2001, score: 8.3, rating: "R" },
  { title: "Alien", year: 1979, score: 7.5, rating: "R" },
  { title: "The Iron Giant", year: 1986, score: 8.6, rating: "R" },
  { title: "Moonrise Kingdom", year: 2012, score: 7.3, rating: "PG-13" },
]);

/* 
mongo shell에서 저장된 것을 확인할 수 있음
> db.movies.find()
{ "_id" : ObjectId("627c57e59a049e1b03b869e4"), "title" : "Amelie", "year" : 2001, "score" : 8.3, "rating" : "R", "__v" : 0 }
{ "_id" : ObjectId("627c57e59a049e1b03b869e5"), "title" : "Alien", "year" : 1979, "score" : 7.5, "rating" : "R", "__v" : 0 }
{ "_id" : ObjectId("627c57e59a049e1b03b869e6"), "title" : "The Iron Giant", "year" : 1986, "score" : 8.6, "rating" : "R", "__v" : 0 }
{ "_id" : ObjectId("627c57e59a049e1b03b869e7"), "title" : "Moonrise Kingdom", "year" : 2012, "score" : 7.3, "rating" : "PG-13", "__v" : 0 }
{ "_id" : ObjectId("627c593d5b6ad45e3981881b"), "title" : "Amelie", "year" : 2001, "score" : 8.3, "rating" : "R", "__v" : 0 }
{ "_id" : ObjectId("627c593d5b6ad45e3981881c"), "title" : "Alien", "year" : 1979, "score" : 7.5, "rating" : "R", "__v" : 0 }
{ "_id" : ObjectId("627c593d5b6ad45e3981881d"), "title" : "The Iron Giant", "year" : 1986, "score" : 8.6, "rating" : "R", "__v" : 0 }
{ "_id" : ObjectId("627c593d5b6ad45e3981881e"), "title" : "Moonrise Kingdom", "year" : 2012, "score" : 7.3, "rating" : "PG-13", "__v" : 0 } 
*/

162. Mongoose로 찾기

const Movie = mongoose.model("Movie", movieSchema);

//node REPL에서
Movie.find({ rating: "R" }).then((data) => {
  console.log(data);
});

Movie.findById({ id: "59ws9i2o030" }).thein((data) => {
  console.log(data);
});

쿼리를 실행하는 방법은 2가지가 있다.

1.콜백 함수를 넘기기
2 .exec()으로 Promise같이 쓰기

exec 옵션

쿼리 인스턴스의 함수 중 콜백을 넘기지 않았을 때 Promise를 반환하는(정확히는 Promise-Like) 함수는 create(), save(), remove(), exec() 등 일부고 그 외엔 모두 자기 자신(쿼리 인스턴스)를 다시 반환하기 때문에 exec를 사용하여야 쿼리를 최종 실행시킬 수 있다.

const movieR = await Movie.findOne({ rating: "R" }).exec();

163. Mongoose로 업데이트하기

Movie.updateOne({ title: "Amadeus" }, { year: 1984 }).then((res) => {
  console.log(res);
});

/*  갱신된 데이터가 반환되지 않음 update 메서드의 방식이 이러함.
{
  acknowledged: true,
  modifiedCount: 1,
  upsertedId: null,
  upsertedCount: 0,
  matchedCount: 1
} */

//여러개를 업데이트할 경우
Movie.updateMany(
  { title: { $in: ["Amadeus", "Stand By Me"] } },
  { score: 10 }
).then((res) => {
  console.log(res);
});

findByIdUpdate, findOneAndUpdate

갱신을 실행한 뒤 갱신된 객체를 돌려줌

Movie.findOneAndUpdate(
  { title: "The Iron Giant" },
  { score: 8 },
  { new: true } //이 옵션을 줘야 갱신된 객체를 반환함
).then((data) => {
  console.log(data);
});

Movie.findByIdUpdate(
  { id: "5931l30oepp" },
  { score: 8 },
  { new: true } //이 옵션을 줘야 갱신된 객체를 반환함
).then((data) => {
  console.log(data);
});

164. Mongoose로 삭제하기

Movie.remove({ title: "Alien" }).then((res) => {
  console.log(res);
});
/* 
삭제된 객체를 반환하지 않음
{ acknowledged: true, deletedCount: 1 }
 */

Movie.deleteOne({ title: "Alien" }).then((res) => {
  console.log(res);
});

Movie.deleteMany({ year: { $gte: 2000 } }).then((res) => {
  console.log(res);
});

findOneAndDelte, findByIdAndDelete

삭제를 실행한 뒤 삭제된 객체 반환함

Movie.findOneAndUpdate({ title: "The Iron Giant" }).then((data) => {
  console.log(data);
});

165. 스키마 유효성 검사

const productSchema = new mongoose.Schema({
  //required:true를 넣어주면 특성의 디폴트가 설정됨
  name: { type: String, required: true }, //필수 특성
  price: { type: Number, required: true }, //필수 특성
});

const Product = mongoose.model("Product", productSchema);
const bike = new Product({ name: "Moutain Bike", price: 599 });
const keyboard = new Product({
  name: "developer Keyboadr",
  price: 599,
  color: "brown", //스키마에 없는 특성을 추가하였을 경우 무시한다.
});
bike
  .save()
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err); //type이 다르거나 required인 특성에 값이 없을 경우 에러로 빠짐
  });

});

165. 스키마 유효성 검사

const productSchema = new mongoose.Schema({
  //required:true를 넣어주면 특성의 디폴트가 설정됨
  name: { type: String, required: true }, //필수 특성
  price: { type: Number, required: true }, //필수 특성
});

const Product = mongoose.model("Product", productSchema);
const keyboard = new Product({
  name: "developer Keyboadr",
  price: 599,
  color: "brown", //스키마에 없는 특성을 추가하면 무시한다.
});

keyboard.save();
/* {
  name: 'developer Keyboadr',
  price: 599,
  _id: new ObjectId("627c6f687bc64c5aa7e5fc75"),
  __v: 0
} */

166. 스키마 추가 제약조건

default 기본값 설정 maxlength 최대 길이 제한 minlength 최소 길이 제한 max 최대 값 제한 min 최소 값 제한 [type] type 배열 enum 배열을 제공 후 해당 값이 배열에 있는지 검사 등등

const productSchema = new mongoose.Schema({
  //required:true를 넣어주면 특성의 디폴트가 설정됨
  name: { type: String, required: true, minlength: 0, maxlength: 10 }, //필수 특성
  price: { type: Number, required: true, min:0}, //필수 특성
  onSale: { type: boolean, default: false },
  categories:{[String]},
  size:{enum:[S,M,L,XL]},
  qty:{
      online:{
          tpye:Number,
          default :0
      },
      instore:{
          tpye:Number,
          default :0
      }
  }
});

169. 업데이트 유효성 검사

runValidators:true를 안주면 해당 객체가 처음에만 유효성 검사를 하고 다음부턴 하지 않기 때문에 계속 유효성 검사를 하라고 명시해야함

Product.findOneAndUpdate(
  { name: "Moutain Bike" },
  { price: -1 },
  { new: true, runValidators: true } // runValidators:true로 주면 유효성 검사 적용
)
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err); //price가 min:0으로 되어있기 때문에 에러남
  });

170. 유효성 검사 오류

유효성 오류시 커스텀 메시지를 설정할 수 있다.


const productSchema = new mongoose.Schema({
  name: { type: String, required: true, minlength: [0,too short], maxlength: 10 },
  price: { type: Number, required: true, min:[0,Price must be positive]},
  });

171. 인스터스 메서드

스키마에 .을 찍고 methods. 다음에 메서드명과 메서드 정의 이 메서드는 해당 스키마로 만들어진 클래스의 인스턴스에서 다 사용 가능

productSchema.methods.greet = function () {
  console.log("Hello!");
  console.log(${this.name})
};
productSchema.methods.toggleOnSale=function(){
    this.onSale=!this.OnSale;
    this.save();
}

productSchema.methods.addCategory = function(newCategory){
    this.Category.push(newCategory);
    this.save();
}

const Product = mongoose.model("Product", productSchema);

const keyboard = new Product({
  name: "developer Keyboadr",
  price: 599,
});

const findProduct = async ()=>{
    const foundProduct = await Product.findOne({name:"Moutain Bike"});
    await foundProduct.toggleOnSale();
    await foundProduct.addCategory("Outdoors");

}

172. 정적 메서드 추가

스키마명.statics.메서드명 = 정의


productSchema.statics.fireSale = function()=>{
    return this.updateMany({},{onSale:true,price:0})
}
find.fireSale().then(()=>{
    console.log("fireSale")
})

173. 가상 Mongoose

실제 데이터베이스 자체에는 존재하지 않는 스키마에 특성을 추가할 수 있게 해준다.

첫 번째 예시로 사용할 것은 first name과 last name이 있는 사람 모델 first name과 last name이 있는 사용자 모델이다.

fullName을 데이터베이스에 저장할 필요가 없으나 마치 fullName이 데이터베이스에 있는 것처럼 접근할 수 있는 특성이 있다면 좋을 것이다.

get, set으로 값을 가져오거나 설정할 수 있다.

const personSchema = new mongoose.Schema({
  first: String,
  last: String,
});
personSchema
  .virtual("fullName")
  .get(function () {
    return `${this.first} ${this.last}`;
  })
  .set(function (v) {
    this.first = v.substr(0, v.indexOf(" "));
    this.last = v.substr(v.indexOf(" ") + 1);
  });

const Person = mongoose.model("Person", personSchema);
const tammy = new Person({ first: "Tammy", last: "Chow" });
tammy.fullName; // Tammy Chow
tammy.fullName = Tammy Xios // tammy.first = Tammy tammy.last = Xios로 바뀐다.

174. Mongoose를 미들웨어로 정의

어떤 것이 삭제되거나 저장되기 직전이나 updateMany나 find 등 어떤 함수를 호출할 때도 코드를 실행할 수 있습니다

방법은 .pre와 .post를 추가하는 것이다.

personSchema.pre("save", asyncc function () {
    console.log("ABOUT TO SAVE")
});
personSchema.post("save", asyncc function () {
    console.log("JUST SAVED")
});

object 정리

Sun, 08 May 2022 12:00:57 GMT

Object

key:value의 집합으로 구성된 속성(프로퍼티)의 집합이다. 객체라고 부른다.

object-literal(객체 리터럴)

{key:value}형태로 객체를 정의하는 것

const obj = {
    name: 'test',
};

동적으로 속성을 추가및 제거할 수 있다.

const obj = {
    name: 'test',
};

obj.color = 'brown'; // 추가

delete obj.color; // 제거

object constructor(객체 생성자)

new 키워드와 생성자 함수를 통해 생성하는 방법

function Pet(name)) {
  this.name = name;
}

const pet1 = new Pet("test");

Dot Notation (점 표기법)

. 으로 객체의 속성에 접근하는 것

const obj = {
    name: 'test',
};
console.log(obj.name);

Bracket Notation (괄호 표기법)

동적인 접근 가능
[ ](대괄호) 사용
string타입으로 지정해야함

const obj = {
    name: 'test',
    color: 'brown',
};

function printValue(obj, key) {
    console.log(obj[key]);
}
printValue(obj, name);
printValue(obj, color);

Property value shorthand (단축 속성명)

key와 value가 동일하다면 value를 생략할 수 있다.

let name = 'test';
const obj = {
    name, //단축 속성명을 쓰지 않았을 땐 name:name이라고 해야함
};
console.log(obj.name); //test

in operator

객체에 key값에 해당하는 속성이 있는지 확인

const obj = {
    name: 'test',
};
console.log('name' in obj); //true
console.log('color' in obj); //false

object assign

객체 복사시 사용

const fruit1 = { color: 'yellow' };
const fruit2 = {
    color: 'blue',
    size: 'big',
};

const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color); // blue
console.log(mixed.size); //big 동일한 속성이 나오게되면 값을 덮어버림

this 정리

Sun, 08 May 2022 12:00:15 GMT

this

this는 5가지의 경우에 따라 의미가 다르다.

일반 함수에서의 this
오브젝트 내의 메소드에서의 this
생성자에서의 this
이벤트리스너 안에서의 this
화살표 함수에서의 this

1. 일반 함수에서의 this

widow객체를 가리킨다.

function(){
    this // window객체
}

2. 오브젝트 내의 메소드에서의 this

오브젝트를 가리킨다.

const obj = {
    name: 'test',
    print() {
        console.log(this.name);
    },
    test: function () {
        console.log(this.name);
    },

    arrow: () => {
        console.log(this);
        console.log(this.name);
    },
};

obj.print(); //test
obj.test(); //test
obj.arrow(); //{} undefined

3. 생성자에서의 this

생성자로 생성되는 오브젝트를 가리킴

function dog(name) {
    this.name = name;
}
const pet = new dog('hi');
console.log(pet.name); // hi

4. 이벤트리스너 안에서의 this

콜백함수 내부에서의 this는 해당 콜백함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우에는 전역객체를 참조한다.

const button = document.querySelector('button');

//일반 함수형을 콜백으로 한 경우
button.addEventListener('click', function () {
    this; // 이벤트를 수신하는 객체 여기선 button을 가리킨다.
});

this가 addEventListener 내부에서 이벤트 수신을 받는 객체로 정의되었기에 button을 가리키는 것이다.(위 콜백에서의 this 원리에 따를때,일반 함수에서 this는 window를 가리키게 되있으므로)

//화살표 함수를 콜백으로 한 경우
button.addEventListener('click', () => {
    this; // window 참조
});

화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다. <=출처 : 딥다이브 블로그

화살표 함수에선 this를 변경할 수 없기에 무조건 상위 스코프를 따르게 되므로 여기서 this는 window를 가리키는 것이다

5. 화살표함수에서의 this

함수 자체의 this 바인딩을 갖지 않고, 스코프 체인을 통해 상위 스코프의 this를 참조한다는 점 즉 화살표 밖의 this를 참조한다.

즉 function을 만날 때 마다 this값이 변경되지 않는다.

함수 내부의 this값을 새로 바꿔주지 않기 때문

const obj = {
    //현재 여기서 this는 객체를 가리킴
    name: 'test',
    test() {
        setTimeout(function () {
            console.log(this.name);
        }); // this가 window를 가리키므로 undefined
    },
    arrow() {
        setTimeout(() => {
            console.log(this.name); // this값이 바뀌지 않기 때문에 객체를 가리키므로 "test"
        }, 1000);
    },
};

웹개발 부트캠프 2022 2주차(자바스크립트)

Thu, 05 May 2022 08:37:18 GMT

(4/29 ~5/5) The Web Developer 부트캠프 2022 강의 내용 정리 범위 : DOM이란? ~ 터미널 완벽 정리(섹션 24 ~30)

78. DOM 개요

DOM(Document Object Model)

웹 페이지를 구성하는 Javascript 객체들의 집합

Javascript로 HTML,CSS를 다룰 수 있게함.

클릭으로 목록을 확장하거나 접는 것 배경을 바꾼다거나 텍스트 입력, 버튼을 생기게 하는 것등이 그 예이다.

79. 문서 오브젝트

브라우저가 웹 페이지를 띄울 때 HTML,CSS 정보를 받아들인 다음 요소와 스타일을 기반으로 Javascript 객체를 생성한다. 이 때 생성되는 객체들은 트리 구조를 형성하며 유기적으로 연결 된 관계를 나타낸다. 이 트리 구조의 최상단에 있는 것이 document 객체이다. 또한 모든 특성과 메서드를 포함하고 있다.

이 트리 구조에 있는 객체들에 접근하여 html, css를 조작할 수 있다.

80. getElementById

javascript에게 일치하는 id를 가진 요소를 페이지에서 찾아서 객체로 가져오라고 하는 메소드

문자열을 인수로 넣으면 일치하는 ID를 가진 요소를 찾아 나타낸다.

ID는 각 페이지마다 한 번만 나오게 되어 있어서 동일한 id가 있을 경우 먼저 검색된 element를 반환다.

/*
1
2

*/
document.getElementById('test');
//출력

// html에 이 있다 가정하고 밑에 코드를 수행하면 해당 버튼 요소를 나타낸다.

document.getElementById('saveBtn'); // 없는 id를 넣을 경우엔 undefined가 출력된다.

81. getElementByTagName & className

getElementByTagName

일치하는 Tag명에 대해 관련히여 반환되는 객체인 element를 담은 HTMLCollection을 반환한다.

HTMLCollection은 배열이 아니지만 [],인덱스,for of 사용이 가능하다. 하지만 map은 사용할 수 없다.

document.getElementByTagName('img');

getElementByClassName

클래스명으로 element를 담은 HTMLCollection을 반환받는다.

document.getClassName('클래스명');

82. querySelector & querySelectorAll

querySelector

id, 클래스명, 요소 타입, 속성, CSS 스타일이든 원하는 선택자를 이용해서 첫 번째로 일치하는 element를 반환받는다.

document.querySelector('h1');
// tag를 선택자로할 경우
document.querySelector('.square');
// class를 선택자로할 경우 .을 붙인다.
document.querySelector('#banner');
// id를 선택자로할 경우 #을 붙인다.
document.querySelector('img:nth-of-type(2)'); // img태그에 해당하는 것 중 2번째 element 반환

//
document.querySelector('a[title="Java"]');
//태그와 속성명을 선택자로할 경우

document.querySelector('[colors="blue"]');
//속성명을 선택자로할 경우

document.querySelector('p a');
//자식을 찾는 경우

querySelectorAll

사용법은 querySelector와 동일하지만 반환값이 NodeList이다.

HTMLCollection과 NodeList 차이

NodeList는 앞의 HTMLCollection과 다르게 노드가 변경되도 그 상태를 반영하지 않는다.

83. innerHTML, textContent & innerText

innerHtml

특정 요소의 포함된 마크업의 전체 내용을 출력

요소를 다른 요소 안에 추가,변경 할 때 사용

document.querySelector('h1').innerHTML = 'test'; //변경

document.querySelector('h1').innerHTML += 'test'; //추가

textContent

textContent 는

외부에 script코드를 작성하고 src에 해당 경로 및 파일명을 기입한다.

app.js

console.log('javascript!')'

index.html

=> 콘솔에 javascript!가 찍힌다.

이 방법의 경우 javascript를 넣을 이상적인 위치는 body 끝 부분이다.

index.html




     

    
        javascript!

21. If 구문

조건에 대한 판단 값이 true이면 실행

if (1 + 1 == 2) {
    console.log('If Execute');
} // 출력 값 : 'If Execute';

if (1 + 2 == 2) {
    console.log('true');
} // 출력 값 : undefinded

22. Else-If 구문

If 조건에 대한 판단 값이 false이면 해장 조건문 판단 후 true이면 실행

if (1 + 2 == 2) {
} else if (1 + 1 == 2) {
    console.log('Else-If Execute');
} // 출력 값 : 'Else-If Execute'

23. Else

조건문이 없으며 if문 또는 else-if문에 대한 조건문 판단 값이 false이면 실행


if(false)
else if(false)
else {
    console.log('Else Execute');
} // 'Else Execute'

24. 조건부 네스팅(Nesting)

조건문 안에 조건문 넣기

let password = 'cat dog';

if (password.length >= 6) {
    if (password.indexOf(' ') === -1) {
        console.log('Valid password!');
    } else {
        console.log('Password cannot include spaces');
    }
} else {
    console.log('Password too short!');
}

25. Truth-y 값과 False-y 값

Javascript의 모든 값에는 고유 truth-y, false-y가 있다.

Falsy values :
false
0
""(empty string)
null
undefined
NaN

Everything else is truthy!

26. 논리함수 AND

두 조건이 다 참이여야 참

true && true; // true
true && false; // false
false && false; // false

27. 논리함수 OR

한 조건이라도 참이면 참

true || true; // true
true || false; // true
false || false; // false

28. 논리함수 NOT

표현식에 대한 boolean 값을 반전시킴

!true; // false
!false; // true

29. Switch 조건문

switch문에 들어가는 인수에 따라 실행되는 코드가 다르다.

const day = 2;
switch (day) {
    case 1:
        console.log('MONDAY');
        break; // break를 넣어주어야 다음 case 코드가 실행되지 않는다.
    case 2:
        console.log('TUESDAY');
        break;
    default:
        console.log('INVALID NUMBER!'); // case에 해당하지 않는 값일 경우 해당 코드 실행
} // 출력 값 : "TUESDAY";

30. 배열 개요

배열

순서가 있는 값의 집합 여기서 순서란 인덱스 순서를 의미한다.

const colors = ['red', 'blue', 'green'];
// colors[0]='red'
// colors[1]='blue'
// colors[2]='green'

자바스크립트에서 배열은 여러 타입에 대한 값을 가질 수 있다.

const array = [1, '1', null, undefined];

31. 배열 임의 접근

인덱스 접근으로 특정 요소를 찾거나 값의 변경이 가능하다.

let colors = ['red', 'blue'];
colors[0] = 'green';
colors[0]; // 'green'

let colors = ['red', 'blue'];
colors[10] = 'yellow';
//이렇게 하면 인덱스 2~9까지 undefined로 값이 들어간다.

32. Push 와 Pop 메소드

Push

배열에 마지막에 해당 값을 저장 후 배열의 길이 값을 반환한다.

let colors = ['red'];
arr.push('blue'); // 2

Pop

배열에 마지막 값을 꺼낸다. 배열에 있던 값은 삭제한다.

let colors = ['red', 'blue'];
colors.pop(); // blue
colors; // ['red']

33. Shift 와 Unshift

Shift

배열 시작부터 제거하고 그 값을 반환

let arr = [1, 2, 3];
arr.shift(); // 1
arr; // [2,3]

Unshift

배열 시작에 추가하고 배열 길이 반환

let arr = [1, 2, 3];
arr.unshift(5); // 4
arr; // [5,1,2,3]

34. Concat, indexOf, includes, reverse

Concat

2개의 배열을 붙여서 새로운 배열을 만든다.

let arr1 = [1, 2];
let arr2 = [3, 4];

arr1.concat(arr2); // [1,2,3,4]

indexOf

인수가 배열에 있으면 해당 값의 인덱스 값을 반환한다. 없으면 -1을 반환한다.

let colors = ['green', 'yellow'];
colors.indexOf('blue'); // -1
colors.indexOf('green'); // 0

includes

인수가 배열에 있으면 true 없으면 false를 반환한다.

let arr = [1, 2];
arr.includes(1); // true

reverse

파괴메서드로 원본 배열을 바꾼다. 해당 배열의 값을 뒤집는다.

let arr = [1, 2, 3];
arr.reverse(); // [3,2,1]

35. Slice, Splice, Sort

Slice

배열을 잘라 새로운 배열을 만든다.
인수가 1개 일 땐 slice(startIndex) 2개일 땐 slice(startIndex,endIndex)

let arr = [1, 2, 3];
arr.slice(); //인수가 없을 땐 원본 배열 그대로를 복사한다.

arr.slice(2); // [3]
arr.slice(0, 1); // [1] startIndex부터 endIndex이전까지 자른다

Splice

파괴메소드이며 원본 배열을 바꾼다.

배열에 삽입하거나 결합시킨다.

splice(startIndex, deleteCount, "넣을 값")
deleteCount가 0이면 삽입만을 한다.

let arr = [1, 2, 3];
arr.splice(0, 0, '3'); // [3,1,2,3]

Sort

배열에 있는 모든 값을 문자열로 바꾼 후 유니코드 값으로 대소 비교를 한 후 정렬한다.

let arr = [1, 30, 200, 1000];

arr.sort(); // [1,1000,200,30,] 정렬이 제대로 되지 않는다.

/*
정렬 기준을 정해주는 함수를 넣어주면 제대로 대소비교가 된다.
1을 리턴하면 순서를 앞으로
0을 리턴하면 순서 변동x
-1을 리턴하면 순서를 뒤로한다.
*/
arr.sort(function (a, b) {
    if (a > b) return 1;
    else if (a == b) return 0;
    else return -1;
});

36. 참조 타입과 동일성 테스트

참조타입

자바스크립트에선 원시 자료형이 아닌 모든 것은 참조 자료형이다. 참조형은 원시형 데이터의 집합이다. 배열([])과 객체({}), 함수(function(){})가 대표적

여기서 참조란 메모리 주소상에서 해당 데이터가 위치한 주소를 가리키는 것이다.

let arr = [1, 2, 3];
arr === [1, 2, 3]; //false
let arr2 = arr;
arr2 === arr; //true

37. 배열 + Const

배열에 컨텐츠는 바꿀 수 있지만 참조하는 배열은 바꾸지 못함

const arr = [1, 2, 3];
arr[0] = 2; // [2,2,3]
let arr2 = [1, 2, 3, 4];
arr = arr2; //  Uncaught TypeError: Assignment to constant variable.

38. 다차원 배열

2차원 배열

3차원 배열

const colors = [
    ['red', 'blue'],
    ['grren', 'orange'],
];
colors[0][0]; // 'red'
colors[1][1]; // 'orange'

39. 객체 리터럴 개요 및 생성

객체 리터럴

중괄호({})로 감싸진 하나 이상의 속성 이름과 속성 값의 리스트 객체도 배열처럼 데이터 구조의 한 종류 객체는 key:value(프로퍼티) 형식으로 데이터 저장

key는 다 문자열로 변환되어 저장

// 객체 선언 및 초기화
const object = {
    totalSteps: 30867,
    totalMiles: 211.7,
};

40. 객체 외부 데이터에 액세스하기

점 구문

const movie = {
    name: 'superman',
    date: '2021.10.10',
    price: 6500,
};

movie.name; // "superman"

대괄호 구문

변수 같은 유동적인 값을 객체에서 key로 쓰고 싶을 때 사용

const year = {
    1999: 'Ok',
    2000: 'Good',
};
let targetYear = '1999';
movie[targetYear]; // "Ok"

41. 객체 수정하기

객체.key = value 객체[key] = value 문자열은 "key" 숫자는 key 형식으로로 한다.

형식으로 수정을 한다.

const object = {
    color: 'blue',
};
object.color = 'skyblue';
object.color; // 'skyblue'

object['color'];

41. 배열과 객체 네스트 구성하기


const comments = [
    {username:'Tammy', text="haha", votes:9},
    {username:'Tammy', text="haha", votes:9}
]

42. For 루프

for( [initialExpression]; //초기표현식 [condition] //조건식 [incrementExpression] // 증감식 )

for (let i = 0; i < 3; i++) console.log(i);
// 1
// 2
// 3

43. 배열 루프

const animals = ['lions', 'tigers', 'bears'];

for (let i=0;i){
    console.log(animals[i]);
}
// 'lions'
// 'tigers'
// 'bears'

44. 네스트 구성 루프

//구구단
for (let i = 1; i < 10; i++) {
    for (let j = 1; j < 10; j++) {
        console.log(`${i}*${j}=${i * j}`);
    }
}

// 2차원 배열 원소 출력

const seatingChart = [
    ['Kristen', 'Erik', 'Namita'],
    ['Geofferey', 'Junita', 'Antonio', 'Kevin'],
    ['Yuma'],
];

for(let i=0;i


45. While 루프
while (조건식)
{ 실행문}
let num = 0;
while (num < 10) {
    console.log(num);
    num++;
}

// 조건이 참이될 때가지 계속 실행문을 실행시킬 수 있음
const SECRET = 'CODE';

let guess = prompt('enter ther secret code...');

while (guess !== SECRET) {
    guess = prompt('enter ther secret code...');
}
46. 정지/break 키워드
break
반복문을 벗어나게 하는 키워드
let num = 0;

while (num < 5) {
    num++;
    if (num == 3) break; //3번 수행되고 반복문을 빠져나온다.
}
47. For루프의 유용함
for of
순서가 있는 배열 리스트에 사용
const items = ['1', '2', '3'];
for (let item of items) {
    console.log(item);
}
// 1
// 2
// 3
for in
for in은 순서가 없는 경우에 사용
const obj = {
    name: 'test',
    color: 'brown',
};

for (key in obj) {
    console.log(key);
    // name
    //color
}
48. 객체 루프
객체는 iterable이 아니기 때문에
반복을 하기 위한 방법이 따로 존재함

for in

key,value 배열을 사용하는 방법
 Object.keys() => key 배열 반환
 Object.values() => value 배열 반환
 Object.entries() => [key,value] 배열 반환


const testScores = {
    A: 80,
    B: 90,
    C: 95,
};

for (let person in testScores) {
    console.log(`${person} scored ${testScores[person]}`);
}

for (let person of Object.keys(testScores)) {
    console.log(`${person} scored ${testScores[person]}`);
}
for (entry of Object.entries(testScores)) {
    console.log(entry);
}
// ['A',80]
// ['B',90]
// ['C',95]
49. todo list 프로젝트
let isQuit = false;
let todos = [];
let todo = null;

while (!isQuit) {
    let input = prompt('what would you like to do');
    switch (input) {
        case 'new':
            todo = prompt('Insert todo');
            if (todo) todos.push(todo);
            console.log(todos);
            break;
        case 'list':
            for (let entry of Object.entries(todos)) {
                console.log(`${entry[0]}:${entry[1]}`);
            }
            break;
        case 'delete':
            const index = parseInt(prompt('Ok, enter an index to delete'));
            if (!Number.isNaN(index) && index < todos.length) {
                const deleted = todos.splice(index, 1);
                console.log(`Ok, deleted ${deleted[0]}`);
            } else {
                console.log('Unknown index');
            }
            break;
        case 'quit':
        case 'q':
        case null:
            isQuit = true;
            break;

        default:
    }
}
console.log('Ok QUIT THE APP!');
50. 함수 개요
함수
코드의 재사용 가능한 일부로서 언제든 사용할 수 있도록 이름을 붙인 것이다.
코드의 가독성, 재사용성을 향상시킨다.



51. 함수 정의 및 호출
function first() {} //함수 정의

first(); // 함수 호출
52. 인수와 매개변수 개요
인수
함수에 입력하는 값을 의미한다.
매개변수
함수 선언식의 괄호안에 작성되는 변수



53. return 키워드
return
함수안에서 처리된 값을 외부에서 사용할 수 있게 해주거나
함수를 빠져나오게 하는데 사용된다.



54. 함수 범위
함수 내 변수
함수 안에서 정의한 변수들은 그 함수로 범위가 한정됨
변수 액세스 범위
함수 밖에 있는 변수에 액세스 가능


안에 있는 변수가 액세스 우선순위가 더 높음
let color = 'blue';

function f() {
    console.log(color); // blue
}

function t() {
    let color = 'green';
    console.log(color); // green
}



55. 블록 범위
블록
함수를 제외하고는 기본적으로 중괄호가 있는 모든 곳을 의미함


블록에서 선언된 변수는 블록안에서만 유효함 (var타입 제외)
let radius = 8;
if (radius > 0) {
    const PI = 3.14159;
    let msg = 'Hi';
} // if문 내부도 block임



56. 렉시컬 범위
함수를 선언하는 시점에서 상위 스코프가 결정된다.
부모 함수의 안에 중첩된 내부 함수는 해당 외부 함수내 변수 또는 범위 내에서 정의된 변수에 액세스할 수 있다.


외부 함수는 내부함수의 변수에 액세스할 수 없다.
동일한 스코프에서 함수를 선언한 경우
let x = 1;
function external() {
    let x = 10;
    internal(); // 선언한 시점에서 x=1이 internal의 상위 스코프이므로 출력결과는 1이다.
}

function internal() {
    console.log(x);
}
중첩된 내부 함수의 경우
let color = 'green';

function external() {
    let color = 'blue';
    internal();
    function internal() {
        console.log(color); // 선언 시 internal의 상위 스코프는 external이기 때문
    }
}

external(); //출력 값 : blue



57 함수 표현식
함수를 정의한 것을 변수에 할당하는 것


이것이 가능한 이유는 javascript에서 함수가 값으로 처리되기 때문 이 의미는 함수를 반환,저장할 수 있다는 의미이다.



const f = function (parameter) {};
58. 고차함수
다른 함수를 인수로 받아서 보통은 그 인수로 어떤 작업을 하는 함수이자 또 함수를 반환할 수 있는 함수
function callFunc(func) {
    func();
}

function func() {
    console.log('call');
}

callFunc(func); // call
59. 반환함수
함수 내에서 함수를 반환하는 함수


팩토리 함수를 설정하는 패턴에 사용함
function makeBetweenFunc(min, max) {
    return function (num) {
        return num >= min && num <= max;
    };
}
/* 아이,어른,노인인지 여부를 판단하는 코드는 같으므로 이를 반환함수를 사용하면
 코드를 재사용하여 처리할 수 있다.*/

const isChild = makeBetweenFunc(0, 18);
const isAdult = makeBetweenFunc(19, 64);
const isSenior = makeBetweenFunc(65, 120);

console.log(isChild(18)); //  true
console.log(isAdult(30)); // true
console.log(isSenior(115)); // true



60. 메서드 정의하기
메서드
메서드는 객체에 종속된 특성으로 함수에 포함되는 개념
const obj = {
    add(a, b) {
        return a + b;
    }, // 속기법
    minus : function(a-b){
        return a-b
    }

};



61. this
this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.
사용된 함수 호출 컨텍스트에 따라 this값이 바뀜
// 객체 안에서 this는 객체 자신을 가리킴
const cat = {
    name : 'cat';
    meow(){
        console.log(this.name);
    }

}

// 최상위 객체 window
function meow(){
    console.log(this) // window 객체를 가리킴
}




62. Try/Catch 사용하기
try {
    //실행 부분
} catch (e) {
    //에러 처리 부분
}



63. foreach
배열 아이템 각각에 대해 인수로 넣은 함수를 실행함
let nums = [1, 2, 3];

function print(num) {
    console.log(num);
}

nums.foreach(print);
//1
//2
//3
64. Map 메서드
배열 아이템 각각에 대해 인수로 넣은 함수를 실행하고 콜백의 반환 값을 이용해서 새로운 배열을 만듬
let nums = [1, 2, 3];

nums.map(function (num) {
    return num * num;
});
// nums = [1,4,9]
65 화살표 함수
function 키워드 함수명을 쓰지 않고 => 를 사용하여 함수 정의
(매개변수) => { }
매개변수가 한개일 땐 ()
const sum = (x, y) => {
    return x + y;
};
66 화살표 함수의 반환
암시적 반환
함수안에 return문 있을 경우 return 키워드 생략 가능 이 때 중괄호를 생략하거나 ()로 감싸야함
const test = (x) => x; // x
const test2 = (y) => y; // y



67. setTimeout과 setInterval
setTimeout
지정된 시간안에 한번만 수행
//3초 뒤 테스트 출력
setTimeout(() => {
    console.log('테스트');
}, 3000);
setInterval
지정된 시간을 주기로 반복 수행
//3초 주기로 반복
const id = setInterval(() => {
    console.log('test');
}, 3000);

clearInterval(id); // 중단됨



68. filter
배열에서 조건을 충족하는 원소만 모아 새로운 배열 생성
const numbers = [1, 2, 3, 4, 5];

numbers.filter((num) => num % 2 == 0); // [2,4]



69. Some과 every 메소드
Some
배열 원소중 일부만이라도 통과하면 참을 반환
그렇지 않으면 거짓을 반환
const nums = [1, 2, 3];

nums.some((num) => num % 2 == 0); // true
Every
const nums = [1, 2, 3];
nums.every((num) => num % 2 == 0); //false
배열 원소가 테스트를 다 통과하면 참을 반환
그렇지 않으면 거짓을 반환



70. reduce
배열 원소에 함수를 수행시켜 최종적으로 하나의 결과값을 반환
[1, 3, 5, 7, 9, 11].reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}); // 36
두 번째 인수를 주면 초기 값을 주게된다.
[1, 3, 5, 7, 9, 11].reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, 100); // 136



71. 화살표 함수와 'this'
화살표 함수에서 this는 함수가 만든 범위에 상속되는 this 키워드 값과 같다.

const cat ={

    name :"cat",
    call:()=>{console.log(this)},
    home:function(){console.log(this)}
    walk:function(){
        setTimeout(()=>{
            console.log(this)
        },1000)
    }
}

cat.call() // window 객체
cat.home() // cat 객체
cat.walk() // cat 객체



72. 디폴트 매개변수
인수에 값이 없을 경우 매개변수에 지정한 값이 할당됨
function sum(a, b = 1) {
    return a + b;
}

sum(1); //2
sum(1, 2); //3



73. 스프레드
배열,반복가능한 객체가 펼쳐지고 인수는 따로 들어감
함수 호출시의 스프레드 구문
const nums = [1, 2, 3];
Math.max(nums); // NaN
Math.max(...nums); // //3
행렬 리터럴 스프레드 구문
배열을 다른 배열에 복사
const cat = ['a', 'b', 'c'];
const dog = ['d', 'e', 'f'];
const allCatDog = [...cat, ...dog]; // ['a','b','c','d','e','f']
객체 스프레드 구문
객체를 펼쳐서 복사할 때 사용


객체를 변형하지 않고 복사할 수 있음
const dataFromForm = {
    email: 'test@test.com',
    password: 'tobias123!',
    username: 'titk',
};
const newDataFormForm = { ...dataFromForm, id: 'test', password: '1234' };
/* {
    "email": "test@test.com",
    "password": "1234",
    "username": "titk",
    "id": "test"
} */



74. rest 매개 변수
인수 객체
인수에 ...붙이면 인수를 배열로 받음
인수의 갯수를 정하지 않을 경우 사용
function sum(...nums) {
    return nums.reduce((total, currentValue) => total + currentValue);
}

sum(1, 2, 3, 4, 5); //15



75. 배열 분해
값을 해체하고 꺼내고 선정하는 간편한 방식
const nums = [1, 2, 3, 4, 5];

//배열 앞에서 순서대로 해서 갯수만큼 값이 들어감
const [gold, silver, bronze] = nums;
// gold =>1
// silver =>2
// bronze => 3



76. 객체 분해
객체 속성명을 {}안에 넣고 객체를 할당하면
속섬명에 맞는 값이 할당됨

const obj = {
    name :"phone"
    price : 250000
}
const {name,price} = obj
//name => "phone"
//price => 250000
디폴트 값 객체 분해
const obj = {
    price: 250000,
};
const { name = 'test', price } = obj;
//name => "test"
//price => 250000



77. 매개 변수 분해
함수를 정의할 때 괄호 안에 매개변수를 작성하면 전달되는 값의 구조를 분해할 수 있다.
const obj = {
    name: 'test',
    id: 'test',
};

function test({ name, id }) {
    console.log(name, id);
}

test(obj); // "test test";