🚀 배포할 프로젝트의 기술스택 🏁 react + node.js (express) + mongoDB 풀스택 프로젝트

🤔  EC2 + docker 로 배포 선정이유 ⇒ ec2 터미널에서 프로젝트 환경을 설치-세팅해서 배포하기보단 docker 로 모든 환경을 구축해서 ec2 에서 가져오기만 하는 방식이 테스트하기도 좋고 AWS 과 docker 공식 문서에서 설명하는 비용절감과 편리한 코드전달 등의 이유로 docker를 사용해보기로 결정!

개발친구 구글링과 유투브 선생님들, 공식문서 참고해서 나름의 순서를 정리하고 시작했다. docker + ec2 배포하기 단계

• dockerfile 로 이미지파일 생성 ⇒ 컨테이너로 실행해보고 테스트하기
• docker hub 에 이미지 올리기
• ec2 에 docker 설치 및 로그인
• ec2 에서 docker hub 에 있는 이미지를 pull 하여 컨테이너 실행하기 정리하면 쉽지만 과정은 순탄지 않았다ㅎㅎ…ㅎㅎ

1️⃣ docker 이미지 생성, 컨테이너 실행

빌드에 앞서 docker 설치 https://goddaehee.tistory.com/312 ⇒ 참고하여 설치, 터미널에 sudo -v 했을때 버전 정보가 뜬다면 잘 설치되어있는 것

dockerfile 만들기

• 내 프로젝트는 client/server 나뉘어져 있었고 각각의 폴더의 최상단 디렉토리에 dockerfile 을 만들어줬다

• client 디렉토리에서는 추가적으로 nginx 설정 파일을 추가했다.

• nginx 로 React 이미지 생성

  • client: dockerfile, nginx.conf 파일 추가하기

      FROM nginx
    
      # root 에 app 폴더를 생성
      RUN mkdir /app
    
      # work dir 고정
      WORKDIR /app
    
      # work dir 에 build 폴더 생성 /app/build
      RUN mkdir ./build
    
      # host pc의 현재경로의 build 폴더를 workdir 의 build 폴더로 복사
      ADD ./build ./build
    
      # nginx 의 default.conf 를 삭제
      RUN rm /etc/nginx/conf.d/default.conf
    
      # host pc 의 nginx.conf 를 아래 경로에 복사
      COPY ./nginx.conf /etc/nginx/conf.d
    
      # 80 포트 오픈
      EXPOSE 80
    
      # container 실행 시 자동으로 실행할 command. nginx 시작함
      CMD ["nginx", "-g", "daemon off;"]
    

      server {
          listen 80;
          location / {
              root    /app/build;
              index   index.html;
              try_files $uri $uri/ /index.html;
          }
      }

  • server : dockerfile 파일 추가하기

      # 가져올 이미지를 정의
      FROM node:16
      # 경로 설정하기
      WORKDIR /app
      # package.json 워킹 디렉토리에 복사 (.은 설정한 워킹 디렉토리를 뜻함)
      COPY package.json .
      # 명령어 실행 (의존성 설치)
      RUN npm install
      # 현재 디렉토리의 모든 파일을 도커 컨테이너의 워킹 디렉토리에 복사한다.
      COPY . .
    
      # 각각의 명령어들은 한줄 한줄씩 캐싱되어 실행된다.
      # package.json의 내용은 자주 바뀌진 않을 거지만
      # 소스 코드는 자주 바뀌는데
      # npm install과 COPY . . 를 동시에 수행하면
      # 소스 코드가 조금 달라질때도 항상 npm install을 수행해서 리소스가 낭비된다.
    
      # 3030번 포트 노출
      EXPOSE 3030:3306
    
      # npm start 스크립트 실행
      CMD ["npm", "start"]
    

Docker 이미지 빌드하기 ,컨테이너 실행하기

• docker build 전 빌드하려는 디렉토리에 있는지 확인하는 것 필수

# 클라이언트단 빌드
sudo docker build -t 이미지이름 .
sudo docker run -d --name 컨테이너이름 -p 8300:80 이미지이름
# run : 실행
# -d : 백그라운드 모드
# -p 8300:80 : 포트 연결 외부노출포트:내부포트
# 컨테이너에서 사용할 이미지 이름은 위의 명령어에서 만들어준 이미지 이름과 동일해야한다. 

• 빌드한 이미지로 컨테이너 실행을 했다면 docker 창에서 생성된 컨테이너를 확인할 수 있음
  • sudo docker ps 명령어로 현재 실행중인 컨테이너 목록을 확인할 수 있음
  • localhost://8300 으로 들어가서 잘뜬다면 성공
  • 동일하게 server 단 코드도 이미지 빌드해주고 컨테이너 실행후 테스트 해본다!

Docker hub 에 push

• 생성한 이미지로 실행한 컨테이너가 잘 작동한다면 이제 docker hub에 만든 이미지를 공유해보기

sudo docker tag nginx-react zeeyoon/nginx-react:latest
# 연결하기! 생성해둔이미지이름 레파지토리에올릴이름:버전
sudo docker push zeeyoon/nginx-react:latest
# push 하기 

docker hub 에 올라와있는 것을 확인할 수 있음

2️⃣ AWS ec2 인스턴스 생성하기!

• 프리티어로 인스턴스를 생성해준다.

• 키 페어를 생성해주고 권한 설정 해주기

1. 프라이빗 키(.pem)를 보안된 위치인 .ssh 하위 디렉터리에 저장

   mv ~/Downloads/키페어파일 ~/.ssh/키페어파일

2. 프라이빗 키(.pem)의 권한 설정

chmod 400 ~/.ssh/키페어파일

• 인스턴스 연결하기
  • 나는 추가적으로 탄련적 IP 를 만들어서 고정 ip 를 생성했다.
  • 탄련적 IP 발급받고 연결을 안하면 요금이 부과될수 있다고 하니 주의하자!

인바운드 규칙 추가해주기

• EC2 > 보안그룹 > 인바운드편집 에서 규칙 추가해주기

• 클라이언트 포트는 8300 , 서버포트는 3030을 사용하도록 나누었고 인바운드 규칙에 추가해줬다.

  • ec2 에서 pull 받은 이미지로 컨테이너를 실행할때 해당 포트로 연결해줘야한다!
  • nginx 는 8300 으로, server 는 3030 으로 연결

• 터미널에서 ec2 접속해주기

  ssh -i 생선한키파일.pem 사용자이름@발급받은퍼블릭ip주소

• 아래처럼 뜨면 접속성공!

docker 가져오기

• docker 를 사용하지 않았을때, node 설치, git 설치 및 가져올 코드 클론, nginx 설정 등등 을 여기서 해야하지만 나는 모든 환경세팅과 코드가 있는 도커 이미지가 있기 때문에 docker 를 설치해주고 docker hub 에 있는 이미지를 가져오면 된다.

EC2 에서 docker 설치하기

sudo yum install docker -y
# 설치해주기
sudo docker login
# 로그인해주기 
sudo service docker start
# docker 시작하기

docker 이미지 pull 하고 컨테이너 실행하기

• client, server 단 이미지 2개 모두 pull 하고 컨테이너를 실행해준다.

  sudo docker pull zeeyoon/nginx-react:latest
  # 도커가 로그인 되어있다는 가정하에!
  # 내가 만든 레파지토리를 Pull 해오기
  sudo docker run -d --name my-react-app -p 8300:80 zeeyoon/nginx-react:latest
  # 가져온 이미지를 컨테이너를 만들면서 실행시킨다. 
  

서버단 이미지도 똑같이 pull 받고 실행해준다.

sudo docker run -t -i -p 3040:3307 zeeyoon/tdz-node

- 퍼블릭 주소로 접속해보니 api 연결도 잘되고 배포도 잘되었다…😭😭😭😭
![](https://velog.velcdn.com/images/jiynn_12/post/9beec1e0-56c3-4644-9189-d48f3d18338f/image.png)






> 프론트엔드 개발자 취업을 하는데 내 프로젝트를 눈으로 확인할 배포사이트 하나 없는게 계속 마음에 걸려 그냥 내가 배포해버리자..^^..! 라는 가벼운 마음으로 시작했지만 역시 어려웠다.
(AWS 도 제대로 모르는데 docker 까지 하려니 ~~중간에 다놔버리고 싶었지만ㅎㅎ~~ 어찌저찌 배포했다.)

다하고 보니 사람들이 왜 배포자동화 ci/cd 에 대해 이야기하는지 필요성을 알게되었다.
코드 바뀔때마다 이 과정들을 다시 반복하는것은 너무 비효율적인것 같고 추가적으로 공부해서 적용해봐야겠다🤔


🚩참고한 자료
- https://kanlanc.com/dockerizing-react-node-app-deploying-to-ec2/
- https://docs.docker.com/build/
- https://ooeunz.tistory.com/70
- https://velog.io/@nellholic108/Docker-EC2-%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

Debounce와 throttle은 시간이 지남에 따라 함수 실행을 허용하는 횟수를 제어하는 유사하지만 다른 기술이다. 각각의 기술에 대해 알아보고 언제 사용하는지 고찰해보자.

1) 디바운싱, Debounce

• 연속적으로 발생한 이벤트를 하나로 처리하는 방식이다.
• 주로 처음이나 마지막으로 실행된 함수만을 실행한다.
• 성능상의 문제를 위해 사용한다.
  • (모든 함수를 실행하면 성능적으로 문제가 생길 수 있다!)

📂 디바운스 구현 코드

• 디바운스를 어떻게 구현하는지 정말 간단한 예시로 살펴보자!

• 타이핑이 될때마다 이벤트가 발생하는 코드에 디바운스를 적용하여 코드를 수정해보면서 이해해하고자 한다.

function typingInput() {
    const name = nameElem.value;
    console.log(`입력된 이름: ${name}`)
}

const nameElem = document.getElementById('inputName')

nameElem.addEventListener("input", typingInput)

위의 코드는 input 태그에 타이핑 될때마다 console 이 찍히는 것을 확인할 수 있다.

• 타이핑할때마다 console이 찍히는 것이 아니라 1초마다 타이핑이 찍히도록 디바운싱을 적용해보았다.
• setTimeout으로 특정 시간동안 딱한번만 함수가 실행되도록 코드를 작성한다.
  • 마지막 함수 실행후 1초후 console 이 찍힌다.

let alertTimer
function alertWhenTypingStops() {
  // 앞선 타이머를 리셋
  // 따라서 마지막 함수가 실행 (타이핑을 멈추고선 함수실행) 
  if (alertTimer) {
    clearTimeout(alertTimer)
  }

  const name = nameElem.value
  // 타이머 시작
  alertTimer = setTimeout(() => console.log(`입력된 이름: ${name}`), 1000)
}

const nameElem = document.getElementById('inputName')

nameElem.addEventListener("input", alertWhenTypingStops)

🤔 대표적 사용예시

• 키워드 검색 혹은 자동완성 기능에서 api 함수 호출 횟수를 최대한 줄이고 싶을때
• 사용자가 창크기 조정을 멈출때까지 기다렸다가 resizing Event 를 반영하고 싶을때

2) 쓰로틀링, Throttling

• 스로틀링은 출력을 조절한다는 의미로 이벤트를 일정주기마다 발생하도록 하는 기술
• 100ms 를 준다면 이벤트는 100ms 동안 최대 한번만 발생하게 됨
• 즉 마지막 함수가 호출된 후 일정시간이 지나기전에 다시 호출되지 않도록함
  • 일정 시간동안 딱한번만 이벤트를 발생시킴!!
• 연이어 발생한 이벤트에 대해, 일정한 delay를 포함시켜 연속적으로 발생한 이벤트는 무시하는 방식을 뜻한다. 즉, delay 시간동안 호출된 함수는 무시한다.

let isInThrottle
function increaseScoreDuringTyping() {
  if (isInThrottle) {
    return
  }

  isInThrottle = true

  // 타이머 세팅
  setTimeout(() => {
    const score = document.querySelector('#score')
    const newScore = parseInt(score.innerText) + 1
    score.innerText = newScore

    isInThrottle = false
  }, 500)
}

const nameElem = document.querySelector('#inputName')

nameElem.addEventListener("input", increaseScoreDuringTyping)

• 쓰로틀러를 500ms동안 작동시키고, 만약 쓰로틀러가 이벤트를 조이고 있는 경우, 해당 이벤트는 무시된다. 결과적으로 500ms 동안 최대 1번의 이벤트만이 발생!

🤔 대표적 사용예시

• 스크롤에 많이 사용한다. (모든 스크롤을 기록하는것...또한 성능문제가 있음 따라서 특정 시간마다의 스크롤의 위치를 찍어주는것이 좋다)
  • Lodash 라는 라이브러리로 이미 구현되어있는 쓰로틀링을 사용해본 경험이 있었다. 이제야 그때 그 라이브러리 왜쓰는지 제대로 알게되었다는..ㅎㅎ

참고: 개발자 아저씨들 힘을모아 https://codefrontend.com/debounce-throttle-js-react/

이전 글에서 작성한 prettier 와 ESLint 설정을 세팅하고 팀별로 개발 정책을 아무리 열심히 논의해도 실수로 팀원 한명이라도 그것을 적용하지 않는다면? 또 다시 왜 팀 규칙을 지키지 않았는지에 대한 코드리뷰를 해야하는 일이 생긴다.

따라서 열심히 정한 정책들을 강제적으로 지키도록 하고 그렇지 않을 경우 merge, push 와 같은 과정에서 작업을 중단하도록 하는 git hook 을 활용하는 것은 좋은 방법으로 보인다. (팀이 git 으로 협업한다는 가정하에)

git hook 이란?

• husky에 대해 알아보기전에 git hook 이 무엇인지 먼저 짚고 넘어가보자

  • Git Hooks 는 Git 과 관련한 어떤 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 하는 기능을 말한다. (ex. commit, push)
  • git hook 설정은 까다롭고, 모든 팀원들이 사전에 repo를 클론받고 메뉴얼하게 사전 과정을 수행해야지만 hook이 실행됨을 보장할 수 있는데 실수로라도 사전 과정을 시행하지 않는다면 hook이 실행되지 않는다.

• 그렇다면 여기서 또 Git Hooks 을 반드시 적용하게끔 강제할 수는 없을까? 만약 프로젝트가 모듈 의존성을 관리하기 위해 npm 을 사용하고 있다면 husky 는 모든 팀원과 공유할 수 있는 좋은 방법이다.

Husky 란?

• git hook 설정을 도와주는 npm package

• 번거로운 git hook 설정이 편함
• npm install 과정에서 사전에 세팅해둔 git hook을 다 적용시킬 수 있어서 모든 팀원이 git hook 실행이 되도록 하기가 편함

🛠 설치 및 적용해보기

1. npm i husky --save-dev
2. (처음 husky 세팅하는 사람만 실행 필요) npx husky install
   • husky에 등록된 hook을 실제 .git에 적용시키기 위한 스크립트
   • .husky 디렉토리가 생성되는것을 확인
3. package.json 에 script 문 추가하기
   • 이후에 clone 받아서 사용하는 사람들은 npm install후에 자동으로 husky install 이 될 수 있도록 하는 설정

prettier/eslint --cache

• prettier --cache --write . , eslint --cache .
  • 모든 파일을 검사하지만 이미 검사한 파일이나 항목을 cache 에 저장하고 변경사항이 없으면 해당 파일은 검사하지 않기 때문에 실행 속도도 빠르다.
• npm run format, npm run lint 명령어를 통해 좀더 쉽게 사용하도록 pacakge.json 스크립트 문에 추가해줍니다.

// package.json

    {
      "scripts": {
        "postinstall": "husky install",
        "format": "prettier --cache --write .",
        "lint": "eslint --cache .",
      },
    }

4. pre-commit, pre-push hook 추가하기
   1. npx husky add .husky/pre-commit "npm run format"
   2. npx husky add .husky/pre-push "npm run lint"
   • 위의 명령어를 차례로 입력하면 아래와 같이 git hook 관련 파일이 생겨난것을 확인 할 수 있다.

git hook이 잘되고 있는지 확인해보기

이제 commit을 하기전에 prettier가 코드를 설정한 포맷에 맞게 수정해주고 push 하기전 ESLint 문법을 확인해준다.

• 테스트를 위해서 아래와같이 설정해주었다.

• ESLint 로는 console.log 는 무조건 error 로 설정
• prettier 로는 홑따옴표를 사용하도록 설정
  • 원하는 결과는 쌍따옴표로 작성한 코드는 홑따옴표로 바뀐채 commit 되며, push 에 실패해야한다.

commit을 하고 나서 prettier 가 잘 적용된 모습을 확인할 수 있다.

console.log 코드가 포함된 커밋 을 push 하려고 하니 ESLint 문법에 걸려 push 작업이 중단된 모습을 확인할 수 있다.

husky 으로 git hook 을 적용하여 특정 규칙을 강제하는 방법에대해 알아보았다. eslint 에러 발생시에는 실행중인 script 문이 아예 종료되기 때문에 규칙을 엄격하게 error 로 한것인지 warn 으로 할것인지 고려할 필요가 있다.

• 참고문서 husky 공식문서 가비아 라이브러리_husky로 git hook 하자

• 하나의 프로젝트에서 다른 개발자들이 각자 다른 코딩 스타일로 작성한다면, 제 3자 뿐만아니라 팀원끼리도 코드를 이해하는데 피로도가 생기게 됩니다.
• 따라서 어떤 형태의 문법을 지향/지양 할지, 포맷팅시 쌍따옴표를 사용할지, 몇자마다 줄바꿈 할지... 등의 여부를 고민하지 않고 코드 작성 그자체에 집중하도록 하기 위해 사용하기 위해 필요합니다.
• 이를 개인이 의식적으로 지키기 보다는 강제성을 주어 팀끼리 정한 코드 스타일을 자동화 하기 위해서 자동화 툴인 ESLint, prettier 를 사용합니다.

📄 정말 간단하게 말하자면, 코딩 스타일 관련 논쟁과 리뷰 등 불필요한 에너지 소모를 줄이고자 코딩 스타일 자동화 툴을 사용하고 이를 통해 개발자들은 코드 작성 그자체에 집중하도록 해준다!

• 일반적으로 Lintting 기능은 ESLint에, Code Formatting은 Prettier에 일임하는 방식으로 사용

• ESLint는 코드 자체의 문법 교정과 더불어 코드 스타일링 기능도 포함
• Prettier는 자동으로 코드의 스타일을 맞춰주는 보다 강력한 기능을 지원

1. ESLint

• 일관되고 버그를 피할수 있는 코드를 짜기위해서 만들어진 코드 분석 툴
• 작성된 코드의 구문을 분석하여 버그가 발생할 여지가 있거나, 불필요한 코드, 혹은 보안상 위험한 코드 등에 대한 경고를 띄워준다.

🛠 설치 및 설정

• npm install eslint --save-dev
  • CRA의 경우 내장되어 있기 때문에 따로 설치하지 않아도 됨
• npm install eslint-config-prettier --save-dev

  eslint-config-prettier 설치 하는 이유! eslint에서 formatting 관련 rule들을 모두 해제해주는 eslint plugin 으로 prettier 와 포맷팅 설정 관련 충돌 시 이를 해결해준다.

• 프로젝트의 루트 디렉토리에 .eslintrc.* 파일로 커스터마이징할 수 있다.
  • package.json의 eslintConfig 필드에서도 작성 가능

{
  "extends": ["react-app", "eslint:recommended"], 
  "rules": {
    "no-var": "error",
    "no-multiple-empty-lines": "error",
    "no-console": ["error", { "allow": ["warn", "error", "info"] }],
      // 콘솔 코드 에러 (warn, error, info 는 허용)
    "eqeqeq": "error",
    "no-unused-vars": "warn",
    "no-undef": "warn"
  }
}

• console 관련 코드로 esLint 가 잘 적용되었는지 확인가능하다.
  • console.log 코드에는 error 를 표시해주고, console.error 는 허용하고 있다.

• 위의 코드에서 extends(확장자)는 공식문서에서 eslint-all 보다는 eslint-recommended 를 권장하고 있다.
  • node_modules 폴더의 eslint 부분에 가면 recommended와 all 파일 확인 가능하다.
  • 해당 파일을 상속받아 확장하여 사용하는 방식이라고 이해하면 된다.

2. Prettier

• 코드 포맷팅 툴
• 포맷팅 룰을 커스터마이징할 수 있다.
• 코드의 포맷팅을 툴을 사용함으로서 팀원 모두가 같은 포맷팅스타일을 공유 가능

🛠 설치 및 설정

• npm install prettier --save-dev
• 프로젝트의 루트 디렉토리에 .prettierrc.확장자 파일을 통해 설정
  • 확장자는 다양하게 지원 (JSON.YAML, JS, TOML)

module.exports = {
  printWidth: 100, // printWidth default 80 => 100 으로 변경
  singleQuote: true, // "" => ''
  arrowParens: "avoid", // arrow function parameter가 하나일 경우 괄호 생략
  semi: true, //  세미콜론 사용 여부
  useTabs: false, // 탭 사용 여부
  tabWidth: 2, // // 탭 너비 
};

• 설정한 prettier 가 파일을 저장할때마다 적용하고 싶다면 VSCode 의 formatting Setting 을 바꿔줘야한다.
  • Default Formatter를 Prettier 로 지정 (VSCode Prettier 확장 설치해야 보임)
  • Format On Save 에 체크하기

초기 세팅이 다소 번거로울수는 있지만 딱 한번만 세팅한다면 이후 적용하기 쉽고 개발 생산성 향상에 도움이 된다는 측면에서 Linter 와 formatter 를 적용하는게 좋다.

• 참고자료 prettier 공식 문서 EsLint 공식 문서 원티드 개발자로 일하기 강의자료

✔️ npm run build

→ 작성한 react 코드를 js, html ,css 변환하는 작업을 우선 해준다.

• 빌드된 해당 파일은 server 폴더로 이동시켜준다.

✔️ app.js (server) 파일 코드 수정하기

🔗 참고 : NodeJS에서 Path 사용방법

import path from "path";

app.use(express.static(path.join(__dirname, "../build")));
app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname, "../build/index.html"));
});

• 빌드된 build 폴더로 접근 가능한 코드를 작성한 후 root 경로에 보여줄 html 파일을 연결해준다.

위의 작업을 모두 완료한 후 server 에서 npm start 실행하면 서버 실행 포트인 localhost:5000 에 들어가도 클라이언트 화면이 잘 나오는 것을 확인할 수 있음!

2. package.json 작성하기

• heroku 는 단순히 package.json 파일을 참조하여 npm run start 를 한다고 생각하기.
• 아래의 배포 과정이 자동으로 이뤄질수 있도록 프로젝트 루트경로에 package.json 파일 생성후 script 코드를 작성해 줘야한다.

🚀 배포 과정 client 폴더로 이동 ⇒ npm ci ⇒ npm run build ⇒ 서버에 빌드폴더로 이동 server 폴더로 이동⇒ npm ci ⇒ npm start

• npm ci ⇒ 패키지들을 설치해준다.

  • ⛔️ npm ci --dev 라고 명시해주면 devDependencies 에 있는 의존성들도 추가로 설치해준다!

• 단, heroku 에서는 60초 이내에 빌드를 다 끝내고 서버 코드를 실행해야함

  • 따라서 npm start 전에 미리 해당 작업을 완료시켜주는 코드를 작성한다.

    "client-build": "cd client && npm ci && npm run build && cd ../",
    "server-build": "cd server && npm ci --dev && cd ../ ",
    "heroku-prebuild": "npm run client-build && npm run server-build && mv ./client/build ./server/build",
    

• 잘 되었는지 테스트를 위해 실행해보기

    npm run heroku-prebuild && npm run start

  • 마주친 에러 ⇒ 아마 node 로 실행하는 import문을 못읽는 것 같다,

  • package.json 파일에서 start 스크립트문을 수정했다

    // 에러메세지
    > node server.js --exec babel-node
    (node:62597) Warning: To load an ES module, set "type": "module"
    in the package.json or use the .mjs extension.
    (Use `node --trace-warnings ...` to show where the warning was created)
    /Users/gyeongjiyun/Desktop/DevProject/seoul-cyber-punk/server/server.js:1
    import "dotenv/config";
    ^^^^^^
    
    "start" : "node --exec server.js babel-node" // ES 오류

  • 만약 babel 설정을 해두었다면 start 스크립트가 babel-node 로 되어있는지 살펴보기

    "start": "babel-node server.js" // 제대로 작동
    "start" : "nodemon --exec babel-node server.js" // 제대로 작동

  • ⛔️ nodemon 으로 빌드하여 서버에서 실행했을때 잘 작동하지만, 배포할때 nodemon 을 계속 사용하면 에러가 발생한다.

  • 따라서, nodemon은 개발 종속성으로 따로 스크립트문을 작성하고 배포를 위해서는 babel-node를 사용하기

    • “start:dev" : “nodemon --exec babel-node server.js”

  🔗 [구글링해서 찾은 stack overflow에서 참고한 답변](https://stackoverflow.com/questions/56047981/node-js-heroku-deployment-on-mac-sh-1-nodemon-not-found-npm-err-nodemon)

3. heroku 에 배포하기

• 회원가입 및 로그인 후 create a new app 클릭!

• github에 연결하여 배포하기
  • 빌드하는 모든 코드들은 연결된 github의 레포지토리에 모두 push 해준다.

✔️Procfile 파일 만들기

⇒ 애플리케이션 실행시 실행할 커맨드를 정의할 수 있는 파일 ⇒ 프로젝트 root 디렉토리에 파일을 생성하고 <process>: <command>의 형태로 내용을 추가하면 Heroku는 이 파일을 기준으로 커맨드를 실행하게 된다.

4. 마주친 에러 해결하기

• 아래 블로그를 많이 참고하였다.

[Node.js] Heroku에서 배포하기+H10(App crashed) 에러 해결방법

1️⃣ App crashed 에러 해결하기

2022-02-06T20:56:10.128489+00:00 heroku[web.1]: State changed from starting to crashed
2022-02-06T20:56:11.918417+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" ...
2022-02-06T20:56:12.986375+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/...

• nodemon 을 사용하고있는지 package.json파일 살펴보기
• package.json 에 node 와 npm 버전 명시해주기
• 최상위 경로에 Procfile 파일 만들어주기
  • ⛔️여기서 주의점은 콜론 앞뒤로 공백이 없어야한다!!

"engines": {
    "node": "16.16.0",
    "npm": "8.11.0"
  },

web:npm start

2️⃣ MongoDB 연결 실패 해결하기

• altas 에서 해당 db가 모든 곳에서 접근가능하지 체크하기
• heroku 에서 Config Vars 에 해당 mongodb 주소 추가하기
  • 여기서 key 값은 코드 작성시 사용한 변수명과 동일해야한다!

3️⃣ api 호출관련 에러해결하기

• 배포는 잘 되었으나 api 호출하는 페이지는 모두 안뜨거나 아예 하얀창이 뜬다.
• application log 를 살펴보니 호출하는 path 에 포트 번호가 undefined 라고 뜨고있었다.

• 클라이언트에서 api.js의코드를 다시 살펴보기
  • .env 파일에 있는 url 주소를 가져다 사용하고 있었고 heroku 는 당연히 .env 파일을 읽지 못한다. (gitignore 에 .env 파일이 있기때문에)
  • api 호출 주소를 명시적으로 표시하는 코드로 수정하였다.

async function get(apiUrl) {
  const result = await axios.get(
    `${process.env.REACT_APP_BASE_URL}${apiUrl}`,
    {
      withCredentials: true,
    }
  );
.....중략

const result = await axios.get(
    `${process.env.REACT_APP_BASE_URL || "https://seoul-cyber-punk.herokuapp.com"}${apiUrl}`,
    {
      withCredentials: true,
    }
  );

• 코드를 수정하고 나니 모두 제대로 뜬다.

⛔️503 에러 해결하기

• review 페이지 youtube API 호출 에러가 뜬다.
• at=error code=H12 : Request timeout 이라는 로그가 찍혀있다.

• Heroku는 모든 웹 요청에 대해 30초 제한 시간이 있고 새 요청이 애플리케이션 dyno로 라우팅되고 이 30초 제한 시간 내에 응답이 없으면 Heroku는 연결을 끊고 H12 오류를 보고한다는 사실을 알게되었음.
• 해결법1
  • 백그라운드 작업을 하라고 나와있다. ⇒ node.js 같은 경우는 redis 를 사용하라는 문서가 heroku 에 있다.
  • https://devcenter.heroku.com/articles/background-jobs-queueing
  • https://devcenter.heroku.com/articles/node-redis-workers
  • https://stackoverflow.com/questions/69120076/fix-for-heroku-503-timeout
  • https://velog.io/@di-uni/Heroku-Redis-사용하기-feat.-Nodejs
• 해결법2
  • 주기적으로 서버에 ping을 보내 처리 요청이 완료되었는지 확인

배포

https://seoul-cyber-punk.herokuapp.com/

• 에러 하나 해결하면 다음 에러가 기다리고 있는 배포과정...정말 울고싶었지만 배포완료한 페이지를 보고나니 너무 뿌듯하다😭 할 수 있는 구글링이라는 구글링은 다해보고 온갖 유투브 영상 다 찾아봤다. 결론은 포기만 안하면 어찌되었든 다 해결된다.

📍 참고자료

Heroku에 React + Express 서비스 자동 배포하기 (HM #1)

React + Express >> Heroku 배포하기

Node.js로 ES6 코드 실행하기 (Babel)

📍 오늘 배운내용 SSR을 구현하는 방법으로 HTML을 미리 템플릿을 저장하는 엔진 => Pug, ejs 등

1️⃣ 템플릿 엔진이란?

• SSR을 구현하는 방법
• 서버에서 클라이언트로 보낼 HTML의 형태를 미리 템플릿으로 저장
• 동작 시에 미리 작성된 템플릿에 데이터를 넣어서 완성된 HTML 생성
• 템플릿 엔진 ⇒ 템플릿 작성 문법 , 템플릿을 HTML로 변환하는 기능 제공

템플릿 엔진의 종류

EJS ⇒ HTML 과 유사한 문법의 템플릿엔진 Mustache ⇒ 간단한 데이터 치환정도 제공하는 경량화 템플릿 엔진 Pug ⇒ 들여쓰기 표현식 이용한 간략한 표기와 레이아웃등 강력한 기능 제공

2️⃣ Pug

📚 들여쓰기 표현식을 이용해 가독성이 좋고 개발 생산성 높음 HTML 잘 몰라도 문법적 실수 줄일 수 있음 layout, include, mixin 등 기능 제공

1. Pug 문법

• HTML 닫기 태그 없이 들여쓰기로 블록 구분
• = 을 이용해서 전달받은 변수 사용
• id 나 class 는 태그뒤에 이어서 바로 사용
• ()을 이용해서 attribute 사용

html
    head
        title= title
    body
        h1#welcome 반갑습니다!
        a.link(href="[링크]") 링크입니다.

• each~in 표현식으로 주어진 배열의 값 순환하며 HTML 태그 만듦
• if, else if , else ⇒ 주어진 값의 조건을 확인하여 HTML 태그 만듦

each item in items
    if item.name == 'apple'
        h1 This is Aplle
    else 
        h2= `${item.name}`

✔️ layout 기능

• layout 템플릿으로 사용할 파일(layout.pug) : block 을 포함한 템플릿 작성
  • 주로 html, head (폰트, css참조, title,등..) 등과같이 자주 쓰이는 태그 작성
• 작성한layout.pug파일을 사용하려면 extends 키워드 사용
  • block 부분에 새로 작성한 HTML 태그가 포함된다.

--- layout.pug ---
html
    head
        title= title
    body
        block content


--- main.pug ---
extends layout
block content
    h1 Hello World!~
    p 안녕하세요.

--- 하위에 있는 h1 태그가 레이아웃 content 부분에 들어간다...---

✔️ include 기능

• 자주 반복되는 구문 미리 작성 ⇒ include 하여 사용
• 일반적인 텍스트 파일도 include 하여 템플릿에 포함 가능

--- title.pug ---
h1= title


--- main.pug ---
extend layout
block content
    include title    --- 위에서 선언된것이 그대로 들어감 ---
    div.content
        안녕하세요
    pre
        include article.txt 

✔️ mixin 기능

• mixin 을 사용 ⇒ 템플릿을 함수처럼 사용할 수 있게 선언
• include는 값을 지정 못하지만 mixin은 파라미터를 지정하여 값을 넘겨받아 템플릿에 사용!

--- listItem.pug---
minxin listItem(title, name)
    tr
        td title
        td name
--- main.pug ---
include listItem
table
    tbody
        listItem('제목', '이름')

2. Express.js + pug 연동하기

• app.set
  • 템플릿 저장되는 디렉터리 지정
  • 어떤 템플릿 엔진을 사용할지 지정
• res.render
  • app.set 에 지정된 값을 이용해 화면을 그리는 기능 수행
  • 첫번째 인자는 템플릿의 이름, 두번째 이름은 템플릿에 전달되는 값

// app.js
app.set('views', path.join(__dirname,'views')); //views에 views 라는 폴더 경로설정
app.set('view engine', 'pug'); //view engine 으로 pug를 사용하겠다.

// requist handler
//.. 생략
res.render('main', { //main => main.pug 파일을 지정
    title: 'Hello Express', //main.pug 파일에 전달하는 값
});

3. Express.js 의 app.locals

• express.js 의 app.locals
  • render 함수에 전달되지 않은 값이나 함수 사용 가능
  • 템플릿에 전역으로 사용될 값을 지정하는 역할

app.locals.appName = "Express";

h1 = appName
// <h1>Express</h1> 

3️⃣ express-generator 사용시 템플릿 엔진 지정

express --view=pug [프로젝트명] 

// ejs 로 하고싶다면
// express --view=ejs [프로젝트명]

• express-generator 는 기본적으로 jade 라는 템플릿 엔진 사용
• jade 는 pug 의 이전 이름 , 최신 지원을 받기위해선 템플릿 엔진을 pug로 지정 해야 함
• --view 옵션 사용 ⇒ 템플릿 엔진을 지정

오늘 배운 내용 📍 프로젝트를 진행하다보면 CORS 라는 에러를 자주 맞닥뜨린다고한다. (당황하지말고 잘 처리하자) 📍 아직 프로젝트 시작 전이라 잘 와닿지 않지만 알아만 두자!

CORS, Cross-Origin Resource Sharing

📚 CORS 는 한 도메인 또는 Origin의 웹 페이지가 다른 도메인 (도메인 간 요청)을 가진 리소스에 액세스 할 수 있게하는 보안 메커니즘 CORS 는 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식으로 CORS 라는 이름으로 표준화 되었다. CORS 는 최신 브라우저에서 구현된 동일 출처 정책(SOP same-origin policy) 때문에 등장했다.

정확하게 말하자면 요청을 CORS가 보내고 있는데 SOP가 이걸 막아서 나는 오류⛔️ (우리의 브라우저에 저장된 쿠키(인증관련)를 악용할 수도 있기 때문에) 아래의 영상은 SOP 가 그 요청을 왜 막고 있는지 CORS 가 무엇인지 자세히 설명해주신다. 🔥 얄팍한 코딩사전님의 CORS관련 유투브

어떤 요청이 CORS 를 사용하는가?

• XMLThhpRequest, Fetch API 호출
• 웹 폰트 (@font-face에서 교차 도메인 폰트 사용 시)
• WebGL 텍스쳐 등...

간단하게 확인해보기

• codepen 웹사이트에서 내가 사용하는 코드(fetch)를 사용하면 CORS 에러가 난다.

  • codepen (외부의 사이트) ⇒ ip와 local 모두 다름
  • localhost:3000 ⇒ 웹사이트 서버. 우리는 3000번 포트
  • 우리의 클라이언트 역시. (localhost:3000)이 요청하고 응답해야함

  포트는 데이터의 통로라고 할 수 있다.

해결방법

접근제어 시나리오 예제가 상세히 설명되어 있다. https://developer.mozilla.org/ko/docs/Web/HTTP/CORS 시나리오 예제중 단순 요청 부분을 참고하기

에러 메세지 살펴보기

codepen의 웹사이트가 나의로컬의 컨텐츠를 호출하려고 하는 과정에서 난 오류

Access to fetch at 'http://127.0.0.1:3000/expost/getlist' 
from origin 'https://cdpn.io' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

- 에러 메세지에 의하면 `origin` 으로부터 접근제한이 되었다



- HEAD 의 `origin` 부분을 바꿔주면 된다.
  - 방법1. `res.setHeader()` 으로 header정보를 응답해주기
  - 방법2. `cors` 라는 모듈을 사용하기 (`npm i cors`)

```jsx
const cors = require('cors');
app.use(cors({
  origin: '*',
  methods: ['GET', 'POST', 'DELETE', 'UPDATE', 'PUT', 'PATCH']
  // 보통은 골라서 허용함
}))

• codePen 에서도 잘 뜨는것을 확인할 수 있다.

  ---

  MDN 문서가 정말 친절하게 설명해준다. CORS MDN 문서 CORS 에러를 만난다면 필요한 부분을 찾아서 정독하자

# 에러메세지
Uncaught : Error : require() of ES Module
# 혹은
SyntaxError: Cannot use import statement outside a module

1. bable 이란?

• 우선 babel 이 무엇인지 이 설정을 왜 해줘야하는지 의문이 생김

  아주 간단하게 Bablel 은 JSX 코드를 브라우저가 알아보도록 변환시켜 주는 역할을 한다!

  • 위의 JSX 코드를 아래의 코드로 변환해주기 위해 Babel을 사용한다!

  • Babel 은 JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔준다.
  • 브라우저는 JSX를 모르기때문에 invalid 하다고 생각한다.

• 바벨 설정을 통해 코드를 common JS로 변환해주고 확장자(.js, .ts, ... )를 작성해주지 않아도 된다. 하지만 생긴것만 import, export 문이지 사실은 common JS를 사용하고 있는셈

2. 바벨 설정해주기

• 아래의 패키지들을 설치해준다.

  npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
  npm install --save-dev @babel/plugin-transform-runtime
  npm install --save @babel/runtime    #종속X
  npm install --save-dev babel-plugin-transform-remove-console # build 할 때 console.log 제거
  

- `babel.config.json` 파일 생성하기

{ "presets": [ [ "@babel/preset-env", { "targets": { "node": "current" } } ] ], "plugins": ["@babel/plugin-transform-runtime"] }

```

• 에러없이 잘 작동하는 것을 확인!

🏁 결론

바벨 설정을 해줘야 import 문 같은 ESM 문법을 사용할 수 있다. CommonJS 의 문제점이 무엇인지 왜 ESM 모듈 시스템을 써야하는지 아래 동영상에서 자세히 설명해준다! 🚀 근본적인 이야기 : https://www.youtube.com/watch?v=mee1QbvaO10

CRA 로 프론트단 react 프로젝트를 했을때는 CRA가 알아서 바벨설정을 해주기때문에 마주치지 못했던 에러였지만 이 기회에 바벨이 무엇인지 이러한 설정이 왜 필요한지 공부하는 계기가 되었음!

JS에서 참같은 값과 거짓같은 값에대해 알고있자

1️⃣ JS는 자동 형변환한다. (Type conversion)

• ===, 일치연산자
• == , 동등연산자 => 되도록이면 사용하지 말기, 의도치않게 일치한다고 여길수도 있기때문에

const a = 1
const b = '1'

console.log(a === b) //false
console.log(a == b) //true , 형변환이 생겼기 때문에 
console.log(typeof a.toString())

📚 Truty (참 같은 값 )

• 비어있는 객체데이터 포함 모든객체데이터, 문자열 ,숫자,...
  • true
  • {} , [] : 빈배열, 빈객체도 Truty
  • 숫자 : 1, 2, -12, '3.14', 양수,음수,실수 모두 Truty
  • 문자열: 'false' , 빈문자열을 제외한 모든 문자열

📚 Falsy(거짓 같은 값)

• 빈 문자열, 의도적으로 비어있는 ,의도하지않은 빈 데이터, 0, Not a Number데이터
  • false
  • ''
  • null
  • undefined
  • 0, -0
  • NaN

if('false') { //true값으로 여긴다 문자데이터로 여기기때문에
  console.log(123)
}

//NaN , 숫자데이터이지만 not a number인
console.log(1 + undefined)// NaN

2️⃣ truty 값과 falsy 값을 이용해 반복문의 조건식, 조건문에 사용

• 0은 false이기 때문에 queue의 배열의 길이가 0이 되는 순간 while문을 탈출한다.

let queue = [1,2,3,4,5,6,7]
let K = 3;

while(queue.length) {
  cnt++;
  if(cnt === K) {
    answer += queue.shift();
    if(queue.length) {
      answer += ", ";
      cnt = 0;
    } else {
      answer += ">";
    }
  } else {
    queue.push(queue.shift());
  }
}

JavaScript

1️⃣ 자바스크립트 내장객체

• 여러 용도에 활용하는 객체를 내장하고 있다.
• 숫자 다루기, 문자 다루기, 날짜 다루기, JSON 객체 다루기 등에 유용한 객체를 제공한다.

1. globalThis

• 전역 객체를 지칭하는 변수
• 전역 객체는 환경에 따라 다르다
• 환경별 차이를 통일하여 하나의 변수로 서로 다른 전역 객체를 가르키게 한다.
• 브라우저 환경에서 window 객체와 같음

2. Window

• 전역스코프에 선언된 변수는 모두 window의 property가 된다.
• DOM document 를 포함하는 창을 나타내는 객체
• 현재 창의 정보를 얻거나 창을 조작한다.

3. document

• 브라우저에 로드된 웹페이지
• 문서의 title, URL등의 정보를 얻어옴
• element 생성, 검색 등의 기능 제공
• createElement, createTextNode는 동적으로 원소를 생성하고 이를 이용해 자바스크립트만으로 원소를 구성할 수 있음

4. Number, NaN

• 자바스크립트의 number 원시타입(primitive type, 기본형)을 감싸는 객체
• 유의미한 상수값, 숫자를 변환하는 메서드 등을 제공
• NaN (=Not a Number) 를 나타내는 객체 (할당할 수 있음)
• isNaN() ⇒ NaN이 되는지를 검사

Number('123') //=> 숫자 123
let str = 'abc'
function checkNumber (x) {
    if(isNaN(x)) return 0 //x가 not a number 즉 숫자가 아니라면 return 0
    else return x * 2;
}

5. Math

• 기본적인 수학 연산 메서드, 상수를 다루는 객체
• BigInt 타입과 호환되지 않고, Number 타입만을 인자로 다룬다.

6. Date

• 특정 시점의 날짜를 표시하기 위한 객체.
• 날짜와 관련된 작업을 하기위한 여러 메서드를 포함

    Date.prototype.getFullYear - 년도
    Date.prototype.getMonth - 월 - 1 (1월은 0, 2월은 1, ...)
    Date.prototype.getDate - 일
    Date.prototype.getHours - 시
    Date.prototype.getMinutes - 분
    Date.prototype.getSeconds - 초

Date.getDay();
// 일요일(0) - 토요일(6)
// Date는 형태는 2021/4/12
Date.getMonth()
Date.getDate()
Date.gethour()

date.setDate();  //시간설정, 설정시 월 변경 등의 시간 변환은 Date객체가 처리
date.toDateString(); // 메서드는 특정 포맷의 문자열을 반환한다. 

Date.getTime() // 시간을 밀리초 단위로 반환(1970.1.1시점 이후부터)
Date.fromNow() // 주어진 시간이 현재로부터 며칠이나 흘렀는지 계산

new Date()로 Date 객체를 생성하면, 객체를 생성한 시점의 시간 정보만을 얻을 수 있음 실시간으로 현재 시간의 밀리초를 얻기 위해선 정적 메서드인 Date.now()를 활용!

Date 객체는 기본적으로 현재 컴퓨터의 시간대(타임존) 정보를 기반으로 생성 따라서 Date 객체를 생성하면, 현재 시간대가 기준 UTC 시간대에서 얼마나 벗어나 있는지를 알 수 있음

7. String, JSON

• 자바스크립트의 문자열 원시타입(기본형)의 래퍼객체

• 문자열을 조작하기 위한 여러 메서드를 포함

• JSON - JSON 객체와 관련된 메서드를 담은 객체

  • String
  • trim(), toUpperCase(), includes() ⇒ true,false반환
  • split(), replace(), indexOf()⇒ 찾을 요소 인덱스를 반환, 없을시 -1반환

• JSON

  • JSON.stringfy() : 주어진 객체를 JSON 문자열로 만든다.

  • JSON.parse(): 주어진 JSON문자열을 자바스크립트에 맞는 결과 객체로 만든다.

      JSON.stringify({name : "Daniel", age: 12 })
      // '{"name" : "Daniel", "age" : 12 }'
    
      JSON.parse('{"name" : "Daniel", "age" : 12 }')
      // {name : "Daniel", age: 12}
    

그외

instanceof

//x는 와 z 사이 
x >= "a" && x <= "z"

📍 오늘배운내용

• 실행컨텍스트 (및 JS의 코드실행순서)와 this 에대해 알아보자
• 클로저라는 개념 모를때는 우리가 사용하고 있었지만 개념으로 공부하니까 어려웠다! => 정말 간단하게 말하자면 함수가 종료되면 함수내부의 변수는 사라지지만 외부로 전달하여 사용가능한것을 클로저라고 하자
• 일반함수와 화살표함수가 가르키는 this를 알아두기!

1️⃣ 실행컨텍스트 , Execution Context

1. 자바스크립트 함수가 실행되는 과정

자바스크립트 엔진은 코드가 없어도 3가지 변수를 포함해서 실행환경(실행컨텍스트)를 초기화한다.

1. this
   • this 포인터의 경우, 글로벌 스코프에서는 window(global)를 가르킨다.
2. 변수들 (Variable Object)
3. Scope chain
   • scope는 코드가 현재 실행되는 환경, 맥락을 의미한다.

     📍 자바스크립트가 실행되면 전역 실행 컨텍스트(Global Exeuction Context)가 만들어지고 함수가 실행될때는 함수 실행 컨텍스트 (Function Execution Context)가 만들어진다. 📍 함수가 실행되면 함수 스코프에 따라 환경이 만들어지고 this, 변수, 스코프체인이 형성된다. 함수 실행이 끝나면 스코프 체인을 따라 글로벌 환경에 도달한다.

• 어떤 코드도 없는경우(실행하는 함수) : 예를들어 html/css로만 구성된 웹을 브라우저에 실행할때

    console.log(this); //window 

  • this : window
  • 변수들 (Variable Object) : {}
  • Scope chain : []

• 특정 함수가 존재하고 실행되는 경우

    function fac() {
        let a = 100;
        let b = 200;
  
        function mul (first, second) {
            return first * second;
        }
        return mul(a,b)
    }
  
    //fac 함수 실행
    fac();

  Executive Context	fac()	mul()
  this	undefined (strict mode - js 실행될때 정해진 mode..)	undefined
  Variable Object	{ a:100, b:200, mul:function{..} }	{ first : 100, second : 200}
  Scope chain	global	fac, global

• mul()은 실행이 끝나면 해당 실행컨텍스트는 모두 삭제되고 fac 스코프로 돌아간다.

• fac 실행이 끝나면 원래 모두 삭제되고 실행되는 코드가 없던 상태로 돌아감(global 스코프로 돌아감!)

2. 실행 컨텍스트

• 실행 컨텍스트 혹은 실행맥락은 자바스크립트 코드가 실행되는 환경

• 코드에서 참조하는 변수, 객체(함수포함),this 에 대한 레퍼런스가 있다.

• 실행 컨텍스트는 전역에서 시작해서 함수가 호출될때 스택에 쌓이게 된다.

• 실행 컨텍스트 스택(call stack)

  • 스택의 자료구조 처럼 가장 나중에 실행된 함수의 실행컨텍스트가 가장 먼저 제거된다!

    let a =20;
    function func() {
      let b= 30;
      function check(v) {console.log(v)}
      function func2() {
          let c = 40;
          check(a+b+c)//=========== 4
      }
      func2()       //=========== 3
    }
    func()       //============== 2
    
          //====================1

  • Global : a , console(전역객체이기 때문에), func함수

  • func 함수 : b, check함수, func2함수 (전역에서 func() 에 의해 실행)

  • func2 함수 : c (전역 > func() 내에서 func2() 에의해 실행)

    - check(a+b+c) 호출
    - 스코프체인을 따라서 해당 변수를 찾아나섬 (스코프 체이닝!)
    - ⇒ `a`는 `전역`에서 `b`는 `func`함수스코프에서 `c`는 `현재 스코프안` 에서 찾음

  • check 함수 : v (전역 > func() > func2내에서 check(a+b+c) 에 의해 실행)

2️⃣ this 가 가르키는것

1. dynamic binding

• 함수 호출되는 상황은 4가지 상황

  • 함수 호출, 메서드 호출(객체의 메서드), 생성자 함수 호출(new 키워드), 간접호출(call, apply 등)

  • call 과 apply 는 기본적인 function 의 객체

  • 그외 콜백함수의 호출이 있음 (특정 동작이후로 불려지는 함수, 다른 함수의 인자로 보내지는 함수)

    

• bind, apply, call 등으로 this 가 가르키는 것을 조작할 수 있다!

  • bind(p) : this가 p 객체를 가리키도록

2. 화살표 함수의 this 🆚 일반함수의 this 🆚 콜백함수 this

let o = {
  name: "zeeyoon",
  f1: () => {
    console.log("[f1] this :",  this);
  },
  f2: function () {
    console.log("[f2] this :",  this);
  },
};

o.f1(); // 화살표함수 global
o.f2(); // 일반함수  a

setTimeout(o.f1, 10); //콜백함수 global
setTimeout(o.f2, 20); //콜백함수 global

화살표 함수와 콜백함수로 함수를 실행할때는 기존의 맥락(this)를 전역 컨텍스트의 맥락으로 바꾼다.

📍 화살표 함수와 일반함수의 this

• 화살표 함수의 this
  • 항상 상위 스코프의 this를 가르킨다.
  • 화살표 함수의 this는 정해지면 apply, bind, call 로도 조작할 수 없음

• 일반함수의 this ⇒ 새롭게 생성된 실행 컨텍스트를 가르킴 (함수가 만들어진 환경의 스코프)
  • 메소드와 함수는 다르다! (간단하게 점 혹은 대괄호의 여부로 구분하기 > 있다면 메소드)

    1. **함수 실행 시에는, 전역(window)객체**를 가리킨다.
    2. **메소드 실행** 시에는 **메소드를 소유하고 있는 객체**를 가리킨다.
    3. **생성자 실행 시**에는 **새롭게 만들어진 객체**를 가리킨다.

    const fac = {
      method() {
        console.log("context : ", this); //fac
        let func1 = function () {
          console.log("[일반함수 func2] this : " , this); 
        }
        let func2 = () => 
          console.log("[화살표함수 func2] this : " , this);

        func1(); // global
        func2(); // fac 화살표 함수이기때문에 호출된 위치인 method
      },
    };

    fac.method();

• func1 이 global을 가르키는 이유는?(⭐️⭐️⭐️⭐️)
  • func1 함수가 실행되면서 새로운 컨텍스트를 생성하는데 바인딩된 컨텍스트가 없으므로 this는 gobal을 가르킨다.
• method 내의 context: this 가 fac 인 이유는 global 에서 호출했을때 fac.method() 에 의해 global > fac() > method() 의 순서로 새로운 컨텍스트를 생성했기 때문임.

3. this를 조작하는 경우

let bio = {
  name: "zeeyoon",
  hello : function() {
    console.log("안녕 내이름은 ", this.name);
  },
};

bio.hello();    
//안녕 내이름은  zeeyoon (hello 의 this는 bio)

//콜백함수 > 전역객체를 바인딩한다
setTimeout(bio.hello, 10);   
//안녕 내이름은  undefined (hello의 this는 global)
setTimeout(bio.hello.bind(bio), 20);  //안녕 내이름은  zeeyoon  
// (hello의this를 global에서 bio 로 바인딩)

3️⃣ 클로저 , Closure

외부로 전달하는 방법

• 전역 변수에 할당하기
• return 값으로 외부로 전달하기
• 자바스크립트에서 함수는 일급 객체 (first-class object)
  • 일급객체란, 다른 변수처럼 대상을 다룰 수 있는것
  • 즉 JavaScript 에서 함수는 변수처럼 다룰 수 있다.

    var f = function() {}
    // f 는 함수객체 -> 변수처럼 다룰 수 있음 

    const Bio = (name) => {
        const hello = () => console.log("안녕 내이름은 ", name);

      return { hello } //객체처럼 
        //return hello
        //return hello()
    }

    const person = Bio('zeeyoon') //person 이라는 객체에 Hello 라는 함수 프로퍼티를 넣은것 
    person.hello();
    //bio('zeeyoon')();
    //bio('zeeyoon');

Closure 는 함수의 일급객체 성질을 이용한다 (JS)

• 함수가 생성될 때, 함수 내부에서 사용되는 변수들이 외부에 존재하는 경우 그변수들은 함수의 스코프에 저장된다. (⇒ 원래는 실행이 끝나면 실행 컨텍스트가 삭제되기 때문에 변수도 존재하지 않는데 존재하는 경우)
• 함수를 통해 외부로 그 값(변수)를 전달했을때 클로저가 가능하다!
• 함수와 함수가 사용하는 변수들을 저장한 공간을 클로저(Closure) 라고 한다.

function createCV() {
  let name = "";
  let about = "";
  function changeName(txt) {
    name = txt;
  }
  function changeAbout(txt) {
    about = txt;
  }
  function print() {
    console.log("NAME : ", name);
    console.log("ABOUT : ", about);
  }

  return { changeName, changeAbout, print };
}

// 클로저 만들기 (외부에서 createCV함수 내부의 변수를  저장하는 공간 클로저를 만든다)
// 이력서 1
const cv1 = createCV();
cv1.changeName('zeeyoon');
cv1.changeAbout('개발 경력 6개월');
cv1.print(); //NAME :  zeeyoon ABOUT :  개발 경력 6개월

// 이력서 2
const cv2 = createCV();
cv1.changeName('june');
cv1.changeAbout('개발 경력 1년 이상');
cv1.print(); //NAME :  june ABOUT :  개발 경력 1년 이상

📍 코드 및 이미지 출처 : 엘리스 아카데미

📍오늘 배운 내용

• ES6문법 => rest,spread 연산자 사용법
• 객체나 배열 필드는 단순히 reference만 복사한다. 따라서, deep copy (깊은복사) 를 위한 별도의 작업을 해주한다.

1️⃣ ES6 Rest, Spread Operator

1. Rest Operator

• 함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용하도록 한다.
• 함수의 인자 중 나머지를 가르킨다.
• 배열의 나머지 인자를 가르킨다.
• 객체의 나머지 필드를 가르킨다.

function checkMin(...rest) {
    // ... (rest연산자) 를 이용해서 배열을 만든다.
    // [7, 3, 5, 2, 4, 1] 따라서 배열메소드 reduce() 사용
  return rest.reduce((a,b) => a<b ? a : b)
}
console.log(checkMin(7, 3, 5, 2, 4, 1)); //1

배열의 경우, 인자가 하나도 없다면 rest operator로 묶을 수 없다.

2. Spread Operator

• 묶인 배열 혹은 객체를 각각의 필드로 변환
• 객체는 또다른 객체로의 spread 를 지원한다.
• 배열은 또다른 배열의 인자, 함수의 인자로의 spread 를 지원한다.

const bio = {
  name: 'zeeyoon',
  age : 27,
  address : 'Seoul',
  job : 'FrontEnd Engineer',
};

//============= rest 연산 ==============
const {age, name, ...rest} = bio;
// 여기서 rest 는 객체 
// const age = bio.age
// const name = bio.name
// const rest = biot.나머지필드    와 동일한 코드라고 생각하기
console.log(age, name, rest);
// 27 zeeyoon { address: 'Seoul', job: 'FrontEnd Engineer' }

// ============ spread 연산 ==================
let bio2 = {...bio, name: "june", age : 26 }
// bio객체를 가져오고 이름과 나이는 덮어씌우기 (...bio가 뒤에오면 바꾼내용은 의미X)

2️⃣ 구조 분해할당

• 인덱스 순서대로 그대로 할당된다. (arr 에 2번째 인덱스에 데이터가 추가해도 추가한 데이터는 할당되지 않는다.)

let arr = ["Zeeyoon", "Kyeong"];

let[firstName, lastName] = arr;
console.log(firstName);
console.log(lastName);

• 객체의 구조분해할당
  • 프로퍼티(필드)를 사용하면 순서상관없다
  • 프로퍼티명을 바꿔 줄 수 있다.

let user = {
  name: 'zeeyoon', 
  age: 25,
  location: 'seoul',
  edu : 'STNU'
}
let {edu, age, location} = user;
console.log(edu);        //STNU
console.log(age);        //25
console.log(location);    //seoul

let {name : lastname} = user;
console.log(lastname);    //zeeyoon

📍 오늘배운내용

• 다양한 웹브라우저의 DB와 그중에서 IndexedDB에 대해서 배웠다.
• 수업 알아듣는게 너무 힘들었지만 나만 그런거 아니었다,, 다른분들의 질문을 보고 어느정도 해결되었다

IndexedDB (로컬 데이터베이스)

• 브라우저에 데이터를 저장하는 로컬DB, 장점 > 빠르다...
• 브라우저의 객체 저장 가능, 자바스크립트 객체, 파일, blobs등을 저장, Transaction을 지원
  • 관계형데이터베이스, sql 이 아니다!
• 결론! 자바스크립트 기반의 객체 지향 데이터 베이스 > 자료형과 객체 저장 가능

클라이언트 측 브라우저에 저장하기 위한 API

1. 쿠키 (cookies) : 문 서내부에 간단 문자열 데이터를 저장 (적은양의 데이터)
2. 로컬 저장소(Local Storage) : Json 데이터를 문자열로 변환하여 저장 (사용자가 지우지않는이상 지속)
3. 세션 저장소 (Sesscion Storage) : Json 데이터를 오직 탭 세션에 저장 (탭을 닫으면 제거됨)
4. IndexedDB : key를 이용해 Index되는 구조화된 데이터를 쉽게 저장
    1. JSON 형태 즉, Key-Value 형태의 데이터베이스
    2. transaction 기능 지원
    3. Key 범위의 쿼리와 Index를 지원
    4. localStorage에 비해 훨씬 많은 데이터 저장 가능
    5. 즉 Index를 지원하기 때문에 많은 양의 구조화된 데이터를 다룰때 적합하다

IndexedDB 작업순서

1️⃣ 데이터베이스 열기

let onRequest = indexedDB.open('myDB',1);

• let request = indexedDB.open(name, version);
  • name : 문자열, 데이터베이스 이름 / version - 기본적으로 양의 정수 버전 1
  • let request = indexedDB.open('myDB', 1);
  • IndexedDB 데이터베이스 수정시 Version을 같이 수정해줘야함

2️⃣ 데이터베이스에 ObjectStore(객체저장소, 테이블) 생성

1. createObjectStore() 메소드 사용해주기!

   • database.createObjectStore(’store name’, {keyPath: ‘id’})
   • database.createObjectStore(’store name’, {autoIncrement: true})
   • database.createObjectStore(’store name’, {autoIncrement: ‘id’, autoIncrement: true})
     • AutoIncrement : 데이터 고유번호를 자동으로 갱신

2. onpugradeneeded() 으로 DB가 업그레이드 될때 ObjectStore 생성 또는 수정 가능

    request.onsuccess = e => {
        alert("upgraed is called");}
    }
   
    request.onupgradeneeded = e => {
        //2. 1단계에서 연결한 DB onRequset 객체를 사용해서
        const database = onRequest.result;
        database.createObjectStore('users', {autoIncrement: true})
        database.createObjectStore('items', {autoIncrement: true})
     }
   
    request.error = e => {
        alert("Error creating or accessing db");}
    }
   

- **`onupgradeneeded`**
  - 데이터 베이스를 여는 코드를 작성했을때 사용한 `name('myDB')` 또는 `version(1)`과 일치하는 데이터베이스가 없는 경우 호출 -> 데이터베이스를 생성. 
이 이벤트 안에서 `objectStore`를 **만들거나 삭제하고, 인덱스를 만들거나 지울 수 있음**
- **`onsuccess`**
  - `Name`과 `Version` 모두 일치하는 데이터베이스가 있는 경우 호출
- **`error`**
  - DB 호출에 실패했을 때 error를 발생 또는 `Name`이 일치하지만 존재하는 DB의 `Version` 보다 <u>낮은 Version을 호출</u>하면 error를 발생


### 3️⃣ Transaction 시작 - 데이터 추가, 검색 작업 요청

💬 **Transaction 시작하기**

```jsx
  //1.                    database.transaction(객체저장소이름, transaction mode)
  const transaction = database.transaction("users", 'readwrite')

 //2. store에 값을 삽입하기 위해 objectStore() 함수로 테이블 선택
  const store = transaction.objectStore(storeName);
//이후 CRUD 작업시 store에 add, get, clear...메소드를 ㅅ용

1. 모든 데이터 읽기 및 쓰기는 Transacrtion 내에서 수행된다.

   • users : 객체 저장소 이름(2단계 객체저장소 생성시 입력한 이름)
   • Transaction Mode : readonly, readwrite, versionchange

2. 트랜잭션은 데이터베이스 객체 단위로 작동하므로 트랜잭션을 사용할 객체 저장소를 지정해줘야함

   • store 객체로 트랙잭션 사용

💬 ObjectStore에 데이터 추가하기 - CRUD

//'users(1)'라는 이름의 ObjectStore를 생성
database.createObjectStore('users', {autoIncrement: true})
function addUsers() {

        const user = {
          name: "Zeeyoon",
          about: "fontend Engineer"
        }
        //'users(1)' ObjectStore 에 readwrite(읽기,쓰기)권한으로 Transaction 시작하기
        // transaction을 시작한 객체를 transaction 이라는 변수에 저장 
        const transaction = database.transaction("users", 'readwrite')

        //objectStore() 함수로 users 테이블 선택
        // 여기서의 "usersOb"는 users라는 오브젝트스토어 객체!를 넣을 변수
        // *** 번거롭지만 또 users라는 오브젝트스토어를 찾아줘야한다. (그렇게 만들어졌음) ***
        const usersOb = transaction.objectStore("users")

        //원하는 객체 (user) 를 테이블에 추가
        // 테이블 객체를 저장한 usersOb에 add 메소드적용
        usersOb.add(user)
}

• ObjectStore.add()
  • transaction 을 complete 해줘야한다.

dbPromise.then(function(db){
    const transaction = db.transaction('users', 'readwrite')
  // 키값을 id라는 프로퍼티로 하겠다!
    const store = transaction.objectStore('users', {keyPath:'id'})
    store.add({id:3, name: 'Zeeyoon';, age: 27})

    return transaction.complete
}

• ObjectStore.get(key) , ObjectStore.getAll()

dbPromise.then (function(db) {
    const transaction = db.transaction(['users'], 'readwrite')
    const store = transaction.objectStore('users')
    return store.get('Zeeyoon') //{id:3, name: 'Zeeyoon';, age: 27}
    //=============
    return store.getAll(); //모든 데이터가 다 나옴 
}

• ObjectStore.put()

dbPromise.then (function(db) {
    const transaction = db.transaction(['users'], 'readwrite')
    const store = transaction.objectStore('users')

    return store.put('Zeeyoon')
}

• ObjectStore.delete()
  • transaction을 complete 해줘야한다.

dbPromise.then(function(db){
    const transaction = db.transaction(['users'], 'readwrite')
  // 키값을 id라는 프로퍼티로 하겠다!
    const store = transaction.objectStore('users', {keyPath:'id'})
    store.delete('Zeeyoon')

    return transaction.complete
}

4️⃣ 나머지 작업) index 마다 DOM 이벤트 수신해서 작업 > 결과 수행

JavaScript 의 변수와 유효범위- 호이스팅

• var, const, let
• 이때 함수 선언문은 함수 전체가 호이스팅
• var 변수는 저장시 undefined로 초기화 => ⛔️ 그 외 값 할당은 호이스팅되지 않는다!

1️⃣ JavaScript의 변수

• let, const, var ⇒ let 은 가변변수 , const는 불변변수!
• 대신 const로 선언한 데이터가 객체혹은 배열이라면 그안의 값은 변경 가능하다!

let x = 1;
const y = 2;
var z = 3;
console.log(x); 1
console.log(y); 2
console.log(z); 3

x = 12;
y = 43;
console.log(x); 12
console.log(y); // error

let x = 3;
const y = 8;
// both error
var z = 54;
console.log(x); // error
console.log(y); // error
console.log(z); // 54

💡 const 로 선언된 배열 또는 객체는 내용을 바꿀 수 있다

const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];    // ERROR

// You can change an element:
cars[0] = "Toyota";

// You can add an element:
cars.push("Audi");

2️⃣ 변수의 유효범위(Variable Scope)

• let, const 는 블록레벨 ({}, 중괄호)의 범위를 가진다.

const a = 7

function scope() {
  if (true) {
    console.log(a) //undefined
    const b = 123 
    var c = 456
        //a는 if문의 지역변수
    //블록레벨의 범위를 가진다. 
  } 
  console.log(b) //scope 에러 
  console.log(c) //456
}
scope()

• var (되도록 사용 X), let, const

  🚫 var 비권장이유는 ?

• => 함수레벨의 범위를 가지기 때문에 메모리 누수가 발생할수도 있음,
• 최신 프론트엔드 개발에선 비권장!

function scope2() {
  if (true) {
        console.log(a) //undefined
    var a = 123 
  } 
  **console.log(a) //123**
}
console.log(a) //함수범위의레벨이 아니기때문에 에러

scope2()

3️⃣ 호이스팅 (hoisting)

• 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상
• var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
  • var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.🚫

        function scope2() {
          **a = 123;**
          if (true) {
            console.log(a) //123
            **var a; 
                //var 변수선언으로 호이스팅 되었음**
          } 
          console.log(a) //123
        }
        //==================================================

        b = 345
        console.log(b) //345
        var b

        //==================================================

        // ***할당은 끌어 올려지지 않는다 -> 따라서 undefined***
        console.log(c) //undefined
        c = 345
        var c

• let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다

const a = 7

double() //14

//함수호이스팅이발생 윗줄에서 
//함수호출해도 실행된다.

// 함수선언문
function double() { 
  console.log(a*2)
}

const a = 7

double() //error

//함수호이스팅이 발생안하므로 에러

//함수표현식
const double = function() { 
    console.log(a*2)
}

💡 Q. 호이스팅은 언제 유용할까?

• 전체적인 로직으로 보았을때, 만약 함수내부의 로직이 매우 길다면,
• 어디에서 실행되는지 찾기전에 긴로직의 함수를 지나서 함수 실행 부분을 확인 가능 ⇒ 따라서 가독성을 위해 최하단부에 적음

💡 var 변수선언으로 호이스팅 발생 ⇒ 변수에 선언을 먼저 하지 않아도 할당이 되기때문에 복잡한 상황 발생할 가능성 높다. 🚫🚫🚫🚫 ⇒ 웬만하면 var 사용을 주의하기

📍 참고자료 : 코어자바스크립트,정재남

Arrow Function
📍 화살표 함수는 함수표현식 혹은 익명함수에서만 가능하다 📍 매개변수, 함수내부 로직의 길이에 따라 소괄호,중괄호를 생략할 수 있음

화살표 함수 사용법

• () => {} vs function () {}
• 화살표는 함수 표현식 혹은 익명함수에 가능
• 함수 선언만 할 때는 불가능

toObject (x,y) => x+y //불가능
const toObject = (x,y) => x + y

1. function키워드 생략 , => 화살표 추가
2. return 값앞에 실행문이 따로 없다면 {} 생략 가능
3. 매개변수가 1개라면 ()괄호 생략 가능

const double = function(x) {
  return x * 2
}
console.log('double: ', double(7))

const doubleArrow = x => x*2

• 중괄호{}를 쓰면 return 키워드 반드시 써야한다.

const doubleArrow = x => {return x * 2}

• 객체 데이터를 사용하고 싶다면 중괄호가 중복된다. ({})
  • 함수에서 중괄호는 블록으로 인식 따라서 소괄호(())를 묶어준다.
  • 매개변수 ⇒ ( {객체데이터} )

const Zeeyoon = {
    name: 'jiyoon',
    age: 27,
    email: abc@gmail.com
}

const doubleArrow = x => { name: 'Zeeyoon'} //undefined
const doubleArrow = x => ({ name: 'Zeeyoon'}) //{name: 'Zeeyoon'}

• 화살표함수와 일반함수의 this 바인딩에 관한 내용도 알아두기

📍 오늘배운 내용

• 이후에 react를 배울때 나오는 컴포넌트라는 개념을 위해서는 import, export 을 어떻게 사용하는지 알아야한다!
• 클래스형 컴포넌트보다 함수형을 더많이 사용하지만 Class 사용법을 알고있자

1️⃣ import, export

• https://caniuse.com/ > import 지원 여부
• export 는 public 함수 (외부에서도 사용 가능!)
  • import를 활용하여 외부에 있는 public 함수에 접근
  • 모듈화 시켜야 제대로 작동 된다.

    //profile.js 파일
    function daynight (x) {
    console.log(x);
    }
    function day (y) {
    console.log(y);
    }
    function night (y) {
    console.log(y);
    }
    

export {daynight, day, night}

<hr>

```jsx
//html 파일에서 사용시
<script type="module">
    import {dayNight} from './daynight.js'
</script>

//js 파일에서 사용시
import {dayNight} from './daynight.js';
//혹은
import * as mode from './daynight.js';

2️⃣ export default

• 모듈은 함수가 여러가지 있는 라이브러리 형태 혹은 모듈과 개체 하나만 선언 되어 있는 형태이다.
• export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 의미.
• export default 키워드 사용시 import 할때 대괄호를 생략할 수 있다.
• 각 파일마다 export default는 대개 1개만 존재한다.

//방법1
export default function Profile(name) { 
 console.log(name);
}

//방법2
function Profile(name) {
    console.log(name);
}

export default User;

3️⃣ import시 as 로 별칭 정하기

• import 한 모듈을 as 키워드를 통해 원하는 이름으로 사용할 수 있다.

import {introduce} as intro from './profile.js';

intro('Hello my name is Zeeyoon');

4️⃣ 와일드 카드(*) 로 import 하기

• 와일드 카드로 여러개의 함수를 가지고있는 라이브러리 모듈을 import 해서 사용할 때는 객체처럼 사용한다.

  //profile.js 파일
  function name (x) {
  console.log(x);
  }
  function hello (y) {
  console.log(y);
  }
  

export {name, hello};

```jsx
import * as bio from './profile.js';

bio.name('Zeeyoon');
bio.hello('안녕하세요');

• import 와 export를 활용해서 컴포넌트화 시킨다 (컴포넌트는 나중에 react에서 자세히..)
• Class와 상속개념에 대해서는 따로 정리한 포스팅을 올려야겠다!

📍 포스팅 목적!

• 각 객체마다 사용가능한 메소드가 있다
• cheatsheet 처럼 정리해놔야 나중에 삽질을 덜할것같다!^^
• 그런 의미에서 mdn 문서 뒤지면서 그때그때 계속 업데이트 해야하는 게시물로 사용하자👍

1️⃣ window 객체

📍 MDN window 객체 문서 Window - Web APIs | MDN

• .onload()
• .close()
• .setInerval(함수, 시간), .setTimeout()
  • 주의 사항 > 요소에 해당 함수를 적용시킬때 요소.속성값(임의로정한) = 함수() 형태로 한뒤 clearTimeout(요소.속성값); 으로 해야 잘 적용된다.!
    • 아래의 객체와 속성을 이해하고 보면 된다.

객체로 작업하기 - JavaScript | MDN

• setInterval (function() { 실행코드 }, ms )

• setTimeout( 함수, 시간)

• clearTimeout(함수이름)

  • .innerwidth : 윈도우의 내부 가로사이즈(px), 가로 스크롤바의 길이도 포함한다. (가로스크롤이 있을경우)
  • .scrollTo( 여러 매개변수가 존재..)

  window.scrollTo({
     ‘behavior’ : ‘smooth’,      //부드럽게 이동 
     ‘top’ : xxx.offsetTop      // 특정영역의 위에서의 좌표값
             //offsetTop은 선택된 영역의 상단까지의 거리를 절대 좌표로 반환하는 메서드입니다
  })

2️⃣ Document 객체

📍 MDN - Document 객체 문서 Document - Web APIs | MDN

• .getElementsById('')
• .append()
• create 메소드에는 DOM Element 와 node 객체를 만들어내는 메소드가 모두 있음
  • createElement(’태그’)
  • createAttribute(’속성')
  • createTextNode(’데이터’) : 텍스트 노드를 만들어낸다.
    • > DOM에서는 element.innerTEXT

• *요소 접근 메소드 *

  • .getElementById()
  • .getElementsByClassName()
  • .getElementsByTagName()
  • .querySelector()
  • .querSelectorAll()

    3️⃣ Element 객체 (요소객체)

• event.target 그리고 event.currentTarget > 이것도 결국 요소

  • The read-only target property of the Event  interface is a reference to the object onto which the event was dispatched. It is different from Event.currentTarget  when the event handler is called during the bubbling or capturing phase of the event.
  • eventTarget 과는 무슨차이...?

📍 MDN - Element 객체 문서 Element - Web APIs | MDN

• 요소 접근 프로퍼티

  • .children : 자식 노드 중 요소 노드만 HTMLCollection로 반환(텍스트 노드제외)
  • .firstElementChild : 첫 번째 자식 요소 노드
  • .lastElementChild : 마지막 자식 요소 노드
  • .parentElement : 부모 요소 노드
  • .previousElementSibling : 자신의 이전 형제 요소 노드
  • nextElementSibling 자신의 다음 형제 요소 노드

• .innerHTML, .innerText, .textContent

  1. innerHTML (태그와 텍스트 모두 그대로 텍스트로)
  2. innerText (태그(마크업언어,스타일까지)들이 적용된 텍스트로)
  3. textContent (태그는 제거하고 텍스트만 골라서)

• .animate()

    xxx.animate({
        //keyframes
        marginLeft: ["0px", "1024px"]
    },{
        //animation options
      duration: 500,
        easeing: "ease",
        interations: 1,
        fill: "both"
    })

• xxx.classList ()

  • 선택된 Element의 클래스명들을 반환

• .className : 클래스명 (대입도 가능)

  • 클래스명이 여러개라면 모두 출력함 (인덱스를 활용하면 클래스단위가 아니라 첫번째 클래스의 문자열 인덱스로 접근한다...)
  • li.className = "list-group"

• .attributes

  • .attributes.name
  • .attributes.value
  • input 태그는 value 값은 on(disabled 한다면 off) ,checked 값은 true or false

• .addEventListener (”event”, function(){})

  • 선택된 Element가 어떠한 이벤트를 가질 때 뒤의 함수가 호출

      document.getElementById("button").addEventListener("click", function(){
          //button이 클릭될 때
          //호출 될 함수
          alert("button clicked")
      });

• addEventListener의 첫번째 인자에 들어갈수있는 이벤트 리스트

  • Event reference | MDN

    자주사용하는 이벤트

오늘 배운 내용 DOM 과 Node 두가지 개념을 정확히 익히고 차이점을 알아보자! ⛔️ appendChild() > node 에 접근하는 메소드의 인자로 element가 아닌 노드객체가 와야한다! ⛔️

1️⃣ Dom이란?

• 문서 객체 모델(Document Object Model)
• DOM 은 객체 지향 모델로써 문서(XML,HTML)의 구조화된 표현을 제공
• 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 하는 인터페이스
• HTML DOM : HTML 문서를 조작하고 접근하는 표준화된 방법 (모든 HTML요소는 HTML DOM 을통해 접근)
• Document : 웹페이지를 의미하는 객체, 웹페이지에 존재하는 HTML 요소에 접근하고자한다면 Document객체부터 시작해야한다!

📍Document 메소드

: html요소와 관련된 작업을 도와주는 다양한 메소드 제공

HTML 요소의 선택

HTML의 아이디, 클래스, 태그, 네임을 그대로 작성해준다.

• document.getElementByID()
  • 태그,클래스,name은 배열로 반환한다.
• document.getElementsByClassName()
• document.getElementsByTagName()
• document.getElementsByName()

CSS 선택자 작성과 동일하게 사용!

• document.querySelector()
• document.querySelectorAll() : 해당되는 요소의 첫번째 값만 반환한다.

HTML 요소의 생성

• document.createElement() : 지정된 HTML 요소를 생성 > 오브젝트를 넘기는것
• document.write() : HTML 출력 스트림을 통해 텍스트 출력 > 단순 출력

HTML 이벤트 핸들러 추가

• 요소.onclick = function() {}
• function (”click”, function객체)

HTML 객체의 선택

2️⃣ JS와 DOM

• DOM 요소를 선택하여 변수에 저장하여 활용한다!
• DOM 요소의 스타일 변경 (.style 속성 ⇒ bg, color, text,....)
• DOM 요소의 내용 변경 (.innerHTML , .innerText ,textContent 속성)

// 요소 선택
let eleOne = document.getElementById('main');
// 스타일 변경
eleOne.style.backgroundColor = "blue";
// 요소의 내용 변경
let str = document.getElementById("title");
str.innerHTML = "subTitle";

3️⃣ Node 객체

DOM에 계층과 관계를 곁들인,,, 느낌

• 노트 트리란 노드들의 집합으로, 노드간의 관계를 나타낸다.
• JS에서는 html dom을 이용하여 노트드리에 포함된 모든 노드에 접근 가능!
• 노드란 html dom 에서 정보를 저장하는 계층적 단위(모든 노드는 서로 계층적 관계를 맺음→ 자식,부모,형제)

Node의 종류

• 문서 노드 : html 전체 나타내는 노드
• 요소 노드: html요소 노드, 속성 노드를 가지는 유일한 노드 (온갖 태그 생각하면 된다..)
• 주석모드 : 잘사용X
• 속성노드 : html요소의 속성은 속성노드, 요소 노드에 관한 정보를 가짐, 해당 요소 노드의 자식 노드에는 포함X (src,href,style 과같은 속성 생각하면 된다.)
• 텍스트 노드 : html문서의 모든 텍스트는 텍스트 노드! (태그안에있는 텍스트나 그냥 텍스트 생각하면된다.)

Node에 접근하기

• 아래의 프로퍼티를 통해 접근한여 노드에 대한 정보를 알 수 있다.
• nodeName : 이름정보를 알 수 있다. > 변경까지 (text,div,li ...)
• nodeValue : 값 정보를 알 수 있다. > 변경까지 (content에 해당하는)
• nodeType : 타입 정보를 알 수 있다. > 변경까지
  • 요소 노드:1
  • 속성 노드: 2
  • 텍스트 노드: 3
  • 주석 노드: 8
  • 문서 노드: 9
• childNodes : 자식노드들을 모두 확인 할 수 있다.
• childNodes[index] : head~body 태그 안쪽의 엔터나 공백도 노드(텍스트노드)로 들어가는점 유의하기!
• ⛔️⛔️⛔️⛔️appendChild(노드객체) : 해당 노드의 자식에 덧붙히기

// 첫번째 자식이 누구인지 보여주는것
console.log(mom.firstChild); //"sister"
// 첫번째 자식의 값
console.log(mom.firstChild.nodeName);  //#text
console.log(mom.firstChild.nodeType);   //3
console.log(mom.firstChild.nodeValue); //sister

• 노드 객체의 프로퍼티와 메소드 살펴보자!

Node - Web APIs | MDN

4️⃣ DOM 과 이벤트(Event)

• 이벤트란 ?

; 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 (마우스, 키보드,등..) 자바스크립트는 이벤트에 반응하여 특정 동작을 수행할 수 있다.

이벤트 타입 (발생 이벤트 종류)

• 폼, 키보드, 마우스, HTML DOM, window 객체 등...

<div class="btn" onclick="changeColor(this)">box1</div>
<script>
    function changeColor (ele) {
        ele.style.color = 'red';
    }
</script>

이벤트 핸들러 (이벤트 처리하는 함수)

• 이벤트가 발생했을때 그 처리를 담당하는 함수 지정된 이벤트가 발생하면 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행

window.onload = function() {

    let one = document.getElementById('one');
  one.innerHTML = "this is one!!";
}

• node와 element의 차이에 대해 알고 있어야 여러 노드와 요소를 활용한 코드 작성시 좋을거같다는 생각.. 추가 내용 찾아보고 포스팅해보자!

오늘 배운내용 📍 데이터 타입별 프로퍼티와 유용한 메소드 📍 sort가 문자열객체 메소드였다는 사실..?

백틱(`)을 사용하면 줄바꿈과 보간법을 사용할 수 있다.

• ${변수명}

let str = 'zeeyoon';
console.log(`저의 이름은 ${str}이라고 합니다!`);
// 저의 이름은 zeeyoon이라고 합니다!

🔡 문자열객체의 메서드

• charAt(N) : 문자열객체의 N번째 문자를 추출!(zeorbased index)
• .length : 변수의길이
• .split("조건") : 문자열을 조건 기준으로 나눈다.

var str1 = "Hello World";

document.write(str1.length); ///11
document.write(str1.charAt(0)); //H
document.write(str1.split(" ")); //Hello , World

• sort() : 문자열을 순서대로 정렬한다.
  • sort((a,b) ⇒ a-b ) : 숫자 정렬시 ⇒ 작은숫자부터
  • sort((a,b)⇒ b-a) : 숫자 정렬시 ⇒ 큰 숫자부터

📍배열객체의 메서드

• length : 배열의 길이

• 원본 배열을 제어하는 메서드

  • .push("데이터") : 배열 맨끝의 데이터 추가하기
  • .pop() : 배열 맨끝의 데이터 제거하기
  • .unshift(”데이터”) : 배열 맨앞의 데이터 추가하기
  • .shift() : 배열 맨앞의 데이터 제거하기

• filter(el ⇒ el관련 실행문) : filter의 실행문의 조건에 맞는 결과값을 출력

• Array(배열의갯수).fill(배열을채울데이터)

    let input = 10
    let result = Array(input).fill().map((v,i) => i+1);
    //input의 길이만큼 배열을 생성후 map메서드의 반환값으로 채워넣겠다. 

• concat() : a배열.concat(b배열) > a배열에 b배열 덧붙히기

• reduce()

• forEach()

• map()

🧮 Math객체의 메서드

• abs : 절대값 출력
• ceil : 소수점 무조건 올림
• floor : 소수점 무조건 버림
• random : 0과 1사이의 임의의 숫자 (0과 1은 미포함
• round : 입력받은 값을 반올림해 반환한다.

ath.abs(-12);  // 12
Math.ceil(3.4);  // 4
Math.floor(5.6);  //5
Math.random();  // 0과 1 사이의 임의의 숫자 출력

• 1~6 사이의 임의의 숫자 출력하기

function ran(maxNum) {
    //  random 함수는 0과1사이의 임의의 숫자이므로
    //  0*6 = 6 , 1 * 6 =6 -> 즉 0과 6사이 난수
        // 0값을 1로 바꾸고 6미만이므로 +1 을 해준다.
    var tmp = Math.floor(Math.random() * (maxNum)) + 1;
    document.write(tmp);
}

ran(6);

⛓ 형변환 메서드

• parseInt() : 문자열을 정수로
• parseFloat() : 문자열을 소수로, 문자열이 “20” 이여도 작동
• Number() , toString()

var str1 = "20.14";

document.write(parseInt(str1)); // 20
document.write(parseFloat(str1)); // 20.14

document.wirte()

• 콘솔창이 아니라 화면에 출력됨
• document.writeln() : 웹화면에 출력값 사이에 공백을 넣으면서 출력한다.

• MDN 문서 사이트에서 데이터타입별로 메소드와 프로토타입 개념과 예시코드를 볼 수 있음! -> 예시코드 따라하면서 연습해보기!

출처 : 엘리스아카데미(예시코드), MDN 문서

2주차 시작 ! 오늘 배운 내용 📍 javascript의 특징과 간단한 이벤트핸들러 📍 var, let, const의 유효범위와 호이스팅 현상 (책 코어자바스크립트 추가공부)

1️⃣ Javascript 란?

• 웹사이트의 여러 효과와 기능을 제작할 시 사용하는 프로그래밍 언어이다.
• 자바스크립트는 동적인 특징이 있다. (ex]1+1을 '1+1'가 아닌 2로 표현)
• 자바스크립트는 이벤트 프로그램이다.

  JS의 변수

• let: 블록단위의 scope를 가진다. 데이터 재할당 가능
• const: 블록단위의 scope를 가진다. 데이터 재할당 불가
• var: 함수단위 scope를 가진다. 데이터 재할당이 가능하며 호이스팅 된다.(데이터 할당은 호이스팅의 대상이 아니고 변수 선언만 호이스팅된다.)

  var a = 7
  function scope() {
  if (true) {
    //할당은 호이스팅되지 않는다.
    console.log(a) //undefined 
    const b = 123; 
    var c = 456;
    var a = 2;    
    //b는 if문의 지역변수
    //블록레벨의 범위를 가진다. 
    //전역 변수 a가 있어도 undefined인 이유는 스코프체이닝 전에 자신의 innerscope에서 변수a를 발견했기 때문에!
  } 
  console.log(b); //scope 에러 
  console.log(c); //456
  }
  scope();

데이터 타입

• String: 큰 따옴표 혹은 작은따옴표 (혼용불가)
• Number: 음수,정수,실수,0 ...
• Function:
  • 함수선언: function 함수명(매개변수) {실행코드 return 값} (기명함수)
  • 함수호출: 함수명(인자);
• Array: [데이터,데이터,데이터] => 비슷한 성격의 데이터 모음
  • index : 배열의 방번호, 0부터 시작한다.
• Object
  • 프로퍼티, 메서드(name,age..), 데이터(Zeeyoon, 27,..)로 구성

    const introduce = {
    name: "Zeeyoon",
    age : 27,
    skills : ["JS", "HTML", "CSS", "React"],
    mul : function (num1, num2) {return num1 * num2},
    }
    //객체데이터 접근방법
    console.log(introduce["name"]);  //Zeeyoon
    console.log(introduce.age);       //27

• Boolean: true, false (비교연산자~Flow-control에서 필수값)
• undefined : 데이터할당 아직 이뤄지지 않은것(의도적X)
• null : 의도적으로 데이터를 비워두기 위해 사용

  연산자

• 산술 연산자 : +, -, *, /, %
• 비교연산자 : ==, ===, >, <, >=, <=
  • == : 값만 비교한다.
  • === : 데이터타입을 우선으로 비교하고 값을 비교한다.
• 증감 연산자
  • ++N , --N : 전위증감, 출력하기전에 증감하기
  • N++, N-- : 후위증감, 출력한후 증감하기
• 논리 연산자 : ||(둘중 하나만 만족), &&(모두만족)

조건문과 반복문

조건문

• if(조건) {조건이 true일때 실행될내용}
• if ( ) else if ( ) { } else { }

반복문

• for(초기화한 변수값; 조건; 증감표시) { 실행내용 }
• while: 조건이 true 이면 명령을 계속 수행
• do~while 문은 조건에 상관없이 무조건 한번은 실행시키는 반복문!
  • do는 일단 실행! 단, while안 조건에 충족할때까지
• break : 반복문 탈출

  for(let i=0; i<4; i++) {
        console.log(i) // 1 2 3
  }
  //===========================================
  var i = 3;
  var cnt = 0;
  while (true) {
    cnt++;
    if(cnt ==2) break;
  }
  do {
    document.write(i);
    i--;
  } while (i >= 0);
  // 3 2 1 0

2️⃣ Javascript를 활용한 간단한 이벤트 실습

• prompt : 사용자에게 입력값을 받아 콘솔창에 출력
• confirm : true, false (확인,취소로 사용자가 선택)
• alert : 알림창 띄우기
• speechSynthesis.speak(new SpeechSynthesisUtterance('hello world'));
  • 브라우저에서 음성이 나온다....대박...!
• 메소드체이닝 방식으로 이벤트 주기
  • querySelector('선택자').스타일속성.CSS속성="값";

JS 이벤트 핸들링 실습

• onclick, onmouseleave 로 간단한! 실습

  <input type="button" value="night" 
      onclick="
        alert('야간!');"  
      onmouseleave="
        alert('안녕히가세요!');"
    "
  >

• 야간모드/낮모드 간단구현해보기
  • this를 활용하여 버튼하나로 만들어보기!
  • value가 day 인 input과 night인 input을 구분하기 위해서 this 필요!

    <input type="button" value="night" 
      onclick="
      if(this.value === 'night') {
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('*').style.color = 'white';    
        // 쿼리 선택자로 하면 2가지 모두 Input 이기때문에 value값 추적이 어려움   
        // document.querySelector('input').value = 'day';
        this.value = 'day';
      } else if (this.value === 'day'){
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('*').style.color = 'black'; 
        // document.querySelector('input').value('night');
        this.value = 'night';
      }
      "
    >

📚 호이스팅 코드 출처 : 코어자바스크립트,정재남