포매터와 린터

• 포매터 | 코드 스타일 검사/수정(포매팅) → 규칙과 다른 코드가 있는지
• 린터 | 코드의 구조를 검사해서 잘못 작성된 코드가 없는지 확인

0️⃣ 자동화 도구들

포매터와 린터의 실행을 대신해 주는 자동화 도구를 사용한다.

Husky

husky를 사용하면 커밋을 하기 전이나 푸시를 하기 전에 포매터와 린터를 실행해서 자동으로 코드를 검사하도록 할 수 있다.

참고로 Husky는 Git에서 제공하는 깃 훅(Git Hooks)이라는 기능을 쉽게 사용할 수 있도록 해주는 패키지이기 때문에, 꼭 husky를 사용하지 않더라도 Git의 기능으로 이런 자동화를 할 수 있다.

Github Action

자동화 스크립트를 내 컴퓨터에서만 실행하는 게 아니라, 깃허브 같은 원격 저장소에서도 실행할 수 있다. 최근에는 깃허브에서 기본적으로 제공하는 Github Action이라는 걸 많이들 사용한다.

1️⃣ Prettier

01. 패키지로 설치하기

프로젝트에 devDependencies 로 prettier 라는 패키지를 설치한다.

npm install --save-dev prettier

Prettier에서 사용할 규칙을 적은 파일인 .prettierrc.json 파일을 만든다.

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

02. VS Code 확장 프로그램으로 사용하기

VS Code의 Extension 메뉴에서 prettier를 검색해서 설치할 수 있다.

마찬가지로 .prettierrc.json를 만든다.

2️⃣ ESLint

: 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구

01. React (Create React App)에서 사용하기

프로젝트 폴더에서 터미널을 열고, ESLint에서 제공하는 도구를 사용해서 초기화 한다.

npm init @eslint/config

설치 목적을 선택한다. 일단 문법을 검사하고, 문제를 찾아내는 것을 선택한다.

? How would you like to use ESLint? …
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style
  To check syntax only

모듈 문법은 import/export 를 위주로 쓴다면 그렇게 설정한다.

? What type of modules does your project use? …
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

그 외에도 필요한 설정을 선택한다.

성공적으로 세팅했다면 package.json 의 devDependencies에 아래 두 패키지가 추가되어 있을 것이다. (버전은 달라도 상관 없음)

"eslint": "^8.39.0"
"eslint-plugin-react": "^7.32.2"

이제 NPM 스크립트를 추가한다.

{
  ...
  "script": {
    "lint": "eslint src/**/*.js",
    ...
  }
}

src 폴더 아래에 있는 모든 자바스크립트 파일에 eslint를 실행하도록 하는 코드이다.

npm run lint 를 실행하면 eslint가 실행된다.

.eslintrc.js라는 파일이 만들어져 있는데, 이 파일은 eslint에 적용할 규칙을 코드로 작성한 파일이다. 이걸 수정하면 적용할 규칙을 바꿀 수 있다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {},

02. VS Code에서 확장 프로그램으로 사용하기

확장 프로그램을 설치하고 .eslintrc.js와 같은 설정 파일을 만들어 두면 VS Code에서 바로바로 린트 결과를 확인할 수 있다.

확장 프로그램 탭에서 eslint를 검색해 설치하고 소스 코드에 생긴 빨간 줄에 마우스 커서를 올려보면 ESLint 오류를 확인할 수 있다.

Github 템플릿 : Github 컨벤션을 정했다면 템플릿을 활용해서 효율적으로 프로젝트를 진행해보자! : 협업에 있어서 템플릿을 활용한다면 서로 작업 중인 상황에 대해 더 잘 파악할 수 있다

1️⃣ Issue 템플릿

1. Github Repository > Settings > Features > Issues → Set up templates 클릭

2. 목적에 맞는 template 선택하여 생성 (ex. Feature request)

3. 생성된 template은 Preview and edit을 통해 수정 가능

4. 커스텀을 진행했다면 Propose Changes를 클릭하여 레포에 Issue Template 반영

5. .github 하위 폴더 내부에 ISSUE_TEMPLATE 폴더 생성 확인 가능

6. 템플릿을 활용하여 이슈 생성 가능 🎉

7. ➕ Github에서가 아닌 직접 .github 폴더를 추가하여 업로드해도 사용 가능

2️⃣ PR 템플릿

(위치는 상관없지만 일반적으로 숨겨진 디렉토리에 저장하기 위해 .github 폴더 내부에 생성한다)

1. Github에서 .github 의 Create new file 클릭

2. pull_request_template.md로 파일명을 작성 후 템플릿 작성 및 Commit changes로 반영

3. .github 하위 폴더 내부에 pull_request_template.md 파일 생성 확인 가능

4. 템플릿을 활용하여 PR 생성 가능 🎉

5. ➕ Github에서가 아닌 직접 pull_request_template.md 파일 추가하여 업로드해도 사용 가능

3️⃣ Template Repository

: 여러개의 프로젝트를 같은 세팅으로 진행한다면? 템플릿 레포를 설정해둔다면 쉽게 세팅을 가져올 수 있다!

1. Github Repository > Settings > General → Template repository 체크박스 클릭

2. 새로운 repository를 생성할 때 템플릿을 활용하여 세팅 그대로 repository 생성 가능 🎉

참고 링크

• https://green1229.tistory.com/479
• https://2jinishappy.tistory.com/337

어플리케이션 개발 종류 : 웹앱, 하이브리드 앱, 크로스 플랫폼, 네이티브 앱

1️⃣ 웹앱

→ 모바일 앱의 모습을 한 웹 사이트

→ HTML, CSS, JS 와 같은 웹 기술로 개발

💻 PWA (Progressive Web Apps)

• 기존 웹 개발에 추가적인 세팅만 필요
• 모바일 기기에서 네이티브 앱과 같은 사용자 경험을 제공
• 앱 다운로드나 업데이트 없이 웹 브라우저 통해 앱을 바로 사용 가능
• 웹페이지와 달리 오프라인에서도 사용 가능
• 푸시알림, 카메라, 마이크 처럼 모바일 기기 자체의 기능도 사용 가능

→ 아래와 같이 다운로드 버튼이 생성되며, 설치 가능 (ex. Pinterest)

2️⃣ 하이브리드 앱

→ 네이티브 앱 + 웹앱

→ 앱의 화면이나 기능 등 콘텐츠 영역은 웹 뷰를 통해 웹앱으로 제작하며, 최종 앱 배포에 필요한 앱 마켓 등록과 설치를 위한 패키징(안드로이드/iOS) 처리는 네이티브 앱으로 구현한 방식

3️⃣ 크로스 플랫폼

→ 한 가지의 개발 언어와 프레임워크로 안드로이드, iOS 네이티브 앱을 만드는 개발 방식

→ 다른 개발 언어로 코드를 작성 후 각각의 OS가 이해할 수 있는 코드로 컴파일 한 후, 각각의 OS의 엔진으로 실행하는 방식

4️⃣ 네이티브 앱

→ 가장 보편적인 앱 개발 방식으로 안드로이드와 iOS 각각의 플랫폼에서 요구하는 언어로 앱을 제작

5️⃣ 비교

→ 초기 개발시 기기에 따라 다르지 않게 빠른 개발, 재사용성을 위해서는 크로스 플랫폼 추천 ⭐️

• 소셜미디어, 쇼핑, 뉴스, 커뮤니티와 같이 사용자 간의 상호 작용과 페이지 수가 많은 앱을 개발할 경우에 유용
• 사용자의 앱 이용 패턴을 분석하여, UI의 배치나 문구의 수정 등 빠른 수정 및 업데이트를 하기에 유리

→ But, 지속해서 유지하고자 하는 서비스의 경우 사용자 대응과 안정성, 성능을 갖춘 네이티브 앱 추천 ⭐️

(ex. Uber, Instagram, Walmart 등의 기업 → 하이브리드 앱이나 크로스 플랫폼 앱에서 네이티브 앱으로 전환)

• 하드웨어의 성능을 최대한으로 사용해야 하는 고성능 게임, 하드웨어의 센서를 사용하는 앱의 경우 네이티브 코드를 사용해야 효율적으로 개발 가능
• 민감한 데이터를 다루거나, 금융 관련 앱은 더욱 높은 수준의 보안을 확보하기에 네이티브 앱 개발이 유리

출처

• https://velog.io/@app_school/앱-개발-방법에-대하여-알아봅시다
• https://velog.io/@oasis0981/PWA
• https://www.elancer.co.kr/blog/view?seq=195
• https://blog.naver.com/sw_maestro/223517305858

애자일(Agile)이란? : 복잡한 개발 과정을 쉽게 나누고, 조금씩 개선해 나가는 방법

1️⃣ 애자일 프로젝트

→ 작은 단위로 작업을 나누어 빠르게 피드백을 받고, 필요한 부분을 즉시 수정하여 효율적으로 진행

→ 포인트 팀원들과의 소통, 적극적인 피드백, 실제 작동하는 소프트웨어를 우선시

→ 스크럼(Scrum) 짧은 주기로 작업을 계획하고 실행, 짧은 회의를 통해 진행 상황을 점검하고, 문제를 해결

📂 Example : 하나의 서비스를 만드는 과정 (프로젝트 기간 : 1달)

1. 서비스를 개발하는 단계를 나누어 지정
2. 회원가입, 로그인(1주) → 주요 기능 1(1주) → 주요 기능 2(1주) → 마무리 및 배포(1주)
3. 일정 주기(1주)마다 짧은 회의(스크럼)을 통해 진행상황 공유 및 점검

2️⃣ 애자일 도구 소개

1. 플로우 (Flow) https://flow.team/kr/index

   

   → 한국형 협업툴

   • 업무관리부터 채팅, 화상회의까지 한 번에 가능
   • 프로젝트 내에 보드를 타임라인으로 쌓는 방식

2. 지라(Jira) https://www.atlassian.com/ko/software/jira

   

→ 아틀라시안이 개발한 프로젝트 관리 소프트웨어

- 대시보드 안에서 팀과 개인에게 맞춤 정보 설정 가능
- 프로젝트 속도와 사이클 기간을 관리하고 각 사용자의 현재 업무 이슈를 추적하고 해결하기에 용이

3. 트렐로(Trello) https://trello.com/

   

   → 아틀라시안에서 인수한 협업툴

   • 보드에 일정을 적은 포스트잇을 붙인듯한 느낌 → 직관적, 단순한 인터페이스
   • 보드, 리스트, 카드 형식으로 제공되며, 각 보드는 공개 범위 설정 가능 (팀 단위로 공유 가능)
   • 프로젝트 멤버들의 활동을 시간대별로 표기

4. 아사나(Asana) https://productivity.kr/

   

   → 협업과 프로젝트 관리를 위한 클라우드 기반의 플랫폼

   • 세계적인 프로젝트 관리 협업툴
   • 대시보드에서 프로젝트 내 작업을 총괄적으로 제시

3️⃣ 애자일 도구 비교

→ 협업툴을 사용하여 더 효율적인 애자일 프로젝트 진행을 시도해볼 수 있다❗️

Github에서 프로젝트를 생성하여 지라처럼 사용, 지라와 Github를 연동, 지라와 트렐로를 같이 사용 등 여러 툴을 같이 사용하는 경우도 있으므로 각자 프로젝트의 성격에 맞게 활용을 추천

개인적으로, IT 프로젝트에서는 Jira를 활용하면 더 좋을 것 같아 다음 프로젝트 진행시 활용 예정

출처

• https://blog.naver.com/techwhat/223489470910
• https://blog.naver.com/nowayhose1/223492671134
• https://blog.naver.com/herwardrobe/222477571835
• https://blog.naver.com/dopgi/223253662237
• https://blog.naver.com/keepdmz/222477578334

HTTP 통신이란? 클라이언트와 서버가 데이터를 주고받는 과정

• 요청 Request, 응답 Response으로 이루어짐
• 클라이언트가 서버에게 요청을 보냄
• 서버는 요청에 대한 응답 결과를 줌
• 클라이언트는 사용자에게 응답 받은 결과를 보여줌

비동기 HTTP 통신의 종류 : Ajax, Fetch, Axios → response와 request를 비동기 식으로 다루는 통신

1️⃣ Ajax

→ Asynchronous JavaScript And XML (비동기 자바스크립트와 XML)

• 비동기적으로 자바스크립트 코드로 서버에 request를 보내고 response를 받아오는 기술
• JSON, XML 등 다양한 데이터 형식을 사용하여 요청과 응답을 주고 받으나 요즘은 JSON 형태를 주로 사용
• 전체 페이지를 새로고침하지 않고, 일부분만 리로드

➕ Ajax에 대한 오해 JQuery의 Ajax가 아닌, Ajax를 JQuery를 통해 보다 더 쉽게 사용할 수 있음 Jquery를 사용할 경우 브라우저 호환성에 대해서도 보장 가능

• 순수 Ajax를 사용하는 경우

// use Ajax without Jquery

function reqListener (e) {
    console.log(e.currentTarget.response);
}

var oReq = new XMLHttpRequest();
var serverAddress = "https://jsonplaceholder.typicode.com/posts";

oReq.addEventListener("load", reqListener);
oReq.open("GET", serverAddress);
oReq.send();

• Jquery를 통해 Ajax를 사용하는 경우

// use Ajax with Jquery

var serverAddress = 'https://jsonplaceholder.typicode.com/posts';

// jQuery의 .get 메소드 사용
$.ajax({
    url: ,
    type: 'GET',
    success: function onData (data) {
        console.log(data);
    },
    error: function onError (error) {
        console.error(error);
    }
});

2️⃣ Fetch

→ ES6에 도입된 자바스크립트 내장 라이브러리

• 프로미스(Promise) 기반으로 동작
• 모던 웹 애플리케이션에서 사용되는 새로운 방식의 네트워크 요청이 가능

//fetch
const url ='http://localhost3000/test`
const option ={
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  body:JSON.stringify({
      name:'may',
        age:20
  })

  fetch(url,options)
      .then(response => console.log(response))

3️⃣ Axios

→ 웹 브라우저, Node.js를 위한 Promise API를 활용하는 라이브러리

• 데이터를 받아올 때, 자동으로 JSON 형식으로 데이터를 변환
• return을 promise 객체로
• 다른 라이브러리나 모듈과의 협업이 용이
• 서버와의 요청과 응답에 대한 에러 핸들링 및 디버깅이 용이

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Seoyoon',
    lastName: 'Kim'
  }
});

4️⃣ HTTP 통신 비교

• XSRF(Cross-Site Request Forgery) : 사용자가 의도하지 않은 요청을 악성 웹 사이트로부터 받는 공격

→ (개인적인 의견) 웹 프론트엔드 프레임워크(React, Vue.js 등)을 다룰때에는 Axios 사용 추천❗️

→ (Next.js) App Router의 서버 사이드 로직 처리에서 fetch 사용을 권장❗️

출처

• https://velog.io/@sdc337dc/웹-개념-Http-통신
• 코드잇 강의
• https://velog.io/@kysung95/개발상식-Ajax와-Axios-그리고-fetch
• https://blog.naver.com/leem95/223189747918
• https://blog.naver.com/dkdlelql123/222850699523

1️⃣ 메타 태그

01. 메타 태그란?

→ <meta> 로 작성하는 HTML 태그로 메타데이터(데이터를 설명하는 데이터)

→ HTML 데이터를 설명하는 데이터를 갖는 태그

02~03. 메타 태그 사용 예시

1. 웹 페이지에 설정하는 메타 태그

    <meta charset="utf-8">
    HTML 문서의 문자 인코딩을 utf-8로 지정해요.
    브라우저가 웹페이지를 해석하는 방식을 지정해서 문서의 깨짐이 없도록 해요.
   
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
    name="viewport" 설정으로 반응형 웹 사이트를 제작할 수 있어요.
    width=device-width: 장치의 화면 너비를 따르도록 페이지 너비를 설정해요.
    initial-scale=1: 브라우저에서 페이지를 처음 로드할 때 배율을 1로 설정해요.
    minimum-scale=1: 최소사이즈를 1배로 처리해서 축소를 못하게 막아요.
    maximum-scale=1: 최대사이즈를 1배로 처리해서 확대를 못하게 막아요.
    user-scalable=no: 사용자크기변화를 no로 처리해서 크기변화를 못하게 막아요.
   
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드에요.
   
    <meta name="robots" content="noindex">
    name="robots" 설정으로 크롤러의 동작에 대해 규칙을 정할 수 있어요.
    검색결과에 이 페이지, 미디어 또는 리소스를 표시하지 않아요. 이 규칙을 지정하지 않으면 페이지, 미디어 또는 리소스가 색인 생성되어 검색결과에 표시될 수 있어요.

2. 사이트를 설명하는 데 사용하는 메타 태그

   1. 구글 검색 결과, 사이트 설명에 사용

      

       <title>코드잇 | 코딩, 쉬워질 때도 됐다</title>
       <meta
           name="description"
           content="월 2만원대로 Python, JavaScript, HTML/CSS 등 3,000개 이상 프로그래밍 강의를 배워보세요!"
       >

   2. SNS 공유할 때 링크 미리 보기에 사용

      1. 페이스북

         

          <meta property="og:image" content="/static/images/brand/og_tag.png">
          <meta property="og:title" content="코드잇 | 코딩, 쉬워질 때도 됐다">
          <meta
              property="og:description"
              content="월 2만원대로 Python, JavaScript, HTML/CSS 등 3,000개 이상 프로그래밍 강의를 배워보세요!"
          >
          <meta property="og:url" content="https://www.codeit.kr">

      2. 트위터

         

          <meta name="twitter:card" content="summary_large_image">
          <meta name="twitter:image" content="/static/images/brand/og_tag.png">
          <meta
              name="twitter:title"
              content="JavaScript 프론트엔드 개발자 - 커리어 강의 | 코드잇"
          >
          <meta
              name="twitter:description"
              content="예쁘고 편리한 웹사이트를 뚝딱 만들어 내는 프론트엔드 개발자를 꿈꾸고 게신가요? ..."
          >

04. 메타 태그 활용

→ <head> 안에 문서를 설명하는 <meta> 삽입 (+ 메타 태그는 닫는 태그가 없음)

• 메타 태그의 특성 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta
• 메타 태그에 name 으로 설정 가능한 값 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name

🩶 OG 태그

<meta property="og:OOO" content="XXXX">

→ OOO 자리는 원하는 속성을, XXXX 자리에는 속성에 해당하는 값을 입력

→ 규약 : https://ogp.me/

🩶 Twitter 태그

<meta name="twitter:OOO" content="XXXX" >

→ OOO 자리는 원하는 속성을, XXXX 자리에는 속성에 해당하는 값을 입력

→ 자세한 안내 : https://developer.x.com/en/docs/twitter-for-websites/cards/overview/abouts-cards

➕ 디버거

• 카카오톡 디버거
• 페이스북 디버거
• 트위터

05. 메타 태그 설정 시 주의사항

1. 동적인 OG 태그 (Twitter 태그도 동일)

    <head>
        <meta property="og:title" content={data?.title}>
    </head>

   → 브라우저가 최초로 사이트에 데이터 요청할 때, data?.title의 값은 undefined 인 상태로 HTML을 받고, 이후 브라우저가 데이터를 요청해서 data?.title 값 충족

   → But SNS 공유에서 링크 미리 보기를 만들 때는 한 번의 요청으로 받아온 데이터를 기준으로 미리 보기를 만들고 끝나기 때문에 content=undefined 인 상태로 링크 미리 보기를 만들어서 미리 보기가 보이지 않거나 원하는 데이터를 볼 수 없음

   → data?.title 에 해당하는 데이터를 먼저 받고 나서 HTML을 생성

   • 프론트엔드 서버에서 데이터를 받아서 HTML을 생성한 뒤 전달
   • or 소스 코드를 빌드하는 단계에서 미리 데이터를 받아 HTML을 생성하는 방법

2. 카카오톡 링크 미리 보기가 동작하지 않는 경우

   카카오톡 scrap(url 미리 보기) 안될 때 체크 리스트

1️⃣ 인터랙티브 자바스크립트 시작하기

01. 웹 서비스와 JavaScript

→ JavaScript를 통해 웹 서비스를 동작

02. HTML/CSS + JavaScript 맛보기

생략

03~04. id로 태그 선택하기

→ id는 하나이기 때문에 하나의 요소를 선택하기에 좋음

→ 잘못된 id 선택시 : undefined

const myNumberTag = document.getElementById("myNumber");
const decreaseBtn = document.getElementById("decrease");
const increaseBtn = document.getElementById("increase");

05, 07. class로 태그 선택하기

→ 여러 요소를 선택하기 위해서는 class 선택

→ 잘못된 class 선택시 : undefined

→ ❗️유사 배열 : 여러개의 값을 담고 있는 배열과 형태는 유사하지만, 배열 메소드는 사용할 수 없음

• (순서는 위에서 아래, 차례대로)
• index, length 사용

const colorBtns = document.getElementsByClassName("color-btn");

06. 유사 배열(Array-Like Object)이란?

: 배열과 모양은 같지만, 완벽히 배열은 아닌 형태

1. 숫자 형태의 indexing이 가능
2. length 프로퍼티 존재
3. 배열의 기본 메소드 사용 불가
4. Array.isArray(유사배열)은 false

• 주의사항: 유사 배열은 다양!

08. 태그 이름으로 태그 선택하기

→ 문서 내에 있는 모든 해당 태그를 선택

const btns = document.getElementsByTagName('button');

09~10. css 선택자로 태그 선택하기

// const myNumberTag = document.getElementById("myNumber");
const myNumberTag = document.querySelector('#myNumber');

// const colorBtns = document.getElementsByClassName("color-btn");
// const colorBtns = document.querySelector(".color-btn");
const colorBtns = document.querySelectorAll(".color-btn");

→ querySelector는 class의 경우 첫번째 인덱스만 선택됨 ⚠️ 주의 → querySelectorAll

11. 이벤트와 버튼 클릭

// 이벤트(Event)와 버튼 클릭
const btn = document.querySelector("#myBtn");

// 이벤트 핸들링 (Event Handling)
btn.onclick = function () {
  // 이벤트 핸들러 (Event Handler)
  console.log("Hello Codeit!");
};

12. 정답일까?

• 실습 코드

    const myBtn = document.querySelector('#grade');
  
    myBtn.onclick = function() {
      alert('정답입니다!👏🏻');
    };

13. 종합 정리

2️⃣ 브라우저와 자바스크립트

01. 브라우저도 객체다?

→ window : 전역객체

• innerWidth
• innerHeight

02. DOM

→ 문서 객체 모델 (Document Object Model)

console.log : dom에 해당하는 html 태그 출력

title.style.color = ‘red’; → js를 통해 스타일 적용

03. console.dir?

1. 문자열 표시 형식으로 콘솔에 출력
2. log 메소드는 파라미터로 전달받은 값을 위주로 출력하는 반면, dir 메소드는 객체의 속성을 좀 더 자세하게 출력
3. log 메소드는 여러 값을 쉼표로 구분해서 전달하면 전달받은 모든 값을 출력하는 반면, dir 메소드는 여러 값을 전달하더라도 첫 번째 값만 출력
4. log 메소드는 대상을 HTML 형태로 출력하고, 객체의 속성에 좀 더 중점을 둔 dir 메소드는 대상을 객체 형태로 출력

→ 콘솔에서 값 자체를 확인하고 싶다면 log메소드를, 객체의 속성들을 살펴보고 싶다면 dir 메소드를 활용

04~07. DOM 트리

→ 부모 노드, 자식 노드, 형제 노드 / 요소 노드, 텍스트 노드, 잎 노드, 코멘트 노드, 문서 노드

: 텍스트 노드는 요소 노드의 자식 노드! 자식 노드를 가질 수 없다.

const myTag = document.querySelector('#content');

console.log(myTag);
//console.log(myTag.parentElement.nextElementSibling);

// 형제 요소 노드
console.log(myTag.previousElementSibling);
console.log(myTag.nextElementSibling);

// 부모 요소 노드
console.log(myTag.parentElement);

// 자식 요소 노드
console.log(myTag.childern[1]);
console.log(myTag.firstElementChild);
console.log(myTag.lastElementChild);

요소 노드에 대한 이동 프로퍼티

모든 노드에 대한 이동 프로퍼티

08~10. 요소 노드 프로퍼티

// 요소 노드 주요 프로퍼티
const myTag = document.querySelector('#list-1');

// innerHTML
console.log(myTag.innerHTML);
myTag.innerHTML = '<li>Exotic</li>';

// outerHTML -> 요소 자체가 교체 (원래 요소 삭제)
console.log(myTag.outerHTML);
myTag.outerHTML = '<ul id="new-list"><li>Exotic</li></ul>';

// textContent -> innerHTML과 마찬가지로 수정, only 텍스트만 다룸(특수문자도 텍스트로)
console.log(myTag.textContent);
myTag.textContent = 'new text!';

1. element.innerHTML

• 요소 노드 내부의 HTML 코드를 문자열로 리턴해 줍니다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.)

1. element.outerHTML

• 요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴해줍니다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.)

1. element.textContent

• 요소 안의 내용들 중에서 HTML 태그 부분은 제외하고 텍스트만 가져옵니다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.)

11. 요소 노드 추가하기

// 요소 노드 추가하기
const tomorrow = document.querySelector('#tomorrow');

// 1. 요소 노드 만들기: document.createElement('태그이름');
const first = document.createElement('li');

// 2. 요소 노드 꾸미기: textContent, innerHTML, ...
first.textContent('처음');

// 3. 요소 노드 추가하기: NODE.prepend, append, after, before
tomorrow.prepend(first); // 처음 (한번에 순서대로 추가)
tomorrow.prepend(append); // 마지막
tomorrow.prepend(after); // 이전 (한번에 순서대로 추가)
tomorrow.prepend(before); // 다음

12. 노드 삭제와 이동하기

// 노드 삭제와 이동
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');

// 노드 삭제하기: Node.remove();
tomorrow.remove();
today.children[2].remove();

// 노드 이동하기: prepend, append, after, before
today.append(tomorrow.children[1]);
tomorrow.children[1].after(today.children[1]);
tomorrow.lastElementChild.after(today.children[1]);

13. 오늘 꼭 해야할 일!

• 실습 코드

    const toDoList = document.querySelector('#to-do-list');
  
    function addNewTodo(text) {
      const li = document.createElement("li");
      li.textContent = text;
      toDoList.append(li);
    }
  
    // 테스트 코드
    addNewTodo('자바스크립트 공부하기');
    addNewTodo('고양이 화장실 청소하기');
    addNewTodo('고양이 장난감 쇼핑하기');

14~15. HTML 속성 다루기

// HTML 속성
const tomorrow = document.querySelector('#tomorrow');
const item = tomorrow.firstElementChild;
const link = item.firstElementChild;

// id 속성
console.log(tomorrow.id);

// class 속성
console.log(item.className);

// href 속성
console.log(link.href);
console.log(tomorrow.href);

// elem.getAttribute('속성'): 속성에 접근하기
console.log(tomorrow.getAttribute('href'));
console.log(item.getAttribute('class'));

// elem.setAttribute('속성', '값'): 속성에 추가(수정)하기
tomorrow.setAttribute('class', 'list');
link.setAttribute('href', 'https://www.codeit.kr');

// elem.removeAttribute('속성'): 속성 제거하기
tomorrow.removeAttribute('href');
tomorrow.removeAttribute('class');

16~17. 스타일 다루기

// 스타일 다루기
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');

// style 프로퍼티
today.children[0].style.textDecoration = 'line-through';
today.children[0].style.backgroundColor = '#DDDDDD';

// elem.className
today.children[1].className = 'done';

// elem.classList: add, remove, toggle
const item = tomorrow.children[1];
item.classList.add('done', 'other');
item.classList.remove('done');
item.classList.remove('toggle'); // 없으면 추가, 있으면 제거, 여러개 불가(클래스 1개만을 다룸)

18. 비표준 속성 다루기

1. 선택자로 활용

가장 간단하게는 아래와 같이 querySelector로 태그를 선택할 때 css 선택자를 활용해서 태그를 선택하는 데에 활용 가능

const fields = document.querySelectorAll('[field]');
console.log(fields);

1. 값을 표시할 태그를 구분할 때 활용

비표준 속성은 객체 형태의 데이터가 있을 때, 각 프로퍼티 값들이 들어갈 태그를 구분하는데 활용 가능

const fields = document.querySelectorAll('[field]');
const task = {
  title: '코드 에디터 개발',
  manager: 'CastleRing, Raccoon Lee',
  status: '',
};

for (let tag of fields) {
  const field = tag.getAttribute('field');
  tag.textContent = task[field];
}

1. 스타일이나 데이터 변경에 활용

getAttribute 메소드를 활용해서 속성값을 가져오고, setAttribute 메소드를 활용해서 속성값을 설정해주는 원리로 이벤트를 통해 실시간으로 스타일을 변경하거나 데이터를 변경하는데 활용 가능

때로는 class를 다루는 것보다 setAttribute로 비표준 속성을 변경하는게 스타일을 다루기에 오히려 편리한 경우도 존재

const fields = document.querySelectorAll('[field]');
const task = {
  title: '코드 에디터 개발',
  manager: 'CastleRing, Raccoon Lee',
  status: '',
};

for (let tag of fields) {
  const field = tag.getAttribute('field');
  tag.textContent = task[field];
}

const btns = document.querySelectorAll('.btn');
for (let btn of btns) {
  const status = btn.getAttribute('status');
  btn.onclick = function () {
    fields[2].textContent = status;
    fields[2].setAttribute('status', status);
  };
}

→ 좀 더 안전하게, dataset 프로퍼티

: data-로 시작하는 속성은 모두 dataset이라는 프로퍼티에 저장

예. data-status라는 속성이 있다면, element.dataset.status라는 프로퍼티에 접근해서 그 값을 가져옴

const fields = document.querySelectorAll('[data-field]');
const task = {
  title: '코드 에디터 개발',
  manager: 'CastleRing, Raccoon Lee',
  status: '',
};

for (let tag of fields) {
  const field = tag.dataset.field;
  tag.textContent = task[field];
}

const btns = document.querySelectorAll('.btn');
for (let btn of btns) {
  const status = btn.dataset.status;
  btn.onclick = function () {
    fields[2].textContent = status;
    fields[2].dataset.status = status;
  };
}

3️⃣ 이벤트 살펴보기

01~03. 이벤트 핸들러 등록하기

// 이벤트 핸들러 등록하기
const btn = document.querySelector("#myBtn");

function event1() {
    console.log('Hi Codeit!');
}

function event2() {
    console.log('Hi again!');
}

// onclick은 하나의 것만 가능 (덮어씌워짐)
// elem.addEventListener(event, handler)
btn.addEventListener('click', event1);
btn.addEventListener('click', event2);

// elem.removeEventListener(event, handler)
btn.removeEventListener('click', event2);

마우스 이벤트

키보드 이벤트

포커스 이벤트

입력 이벤트

스크롤 이벤트

윈도우 창 이벤트

04~05. 이벤트 객체 (프로퍼티)

// 이벤트 객체 (Event Object)
const myInput = document.querySelector("#myInput");
const myBtn = document.querySelector("#myBtn");

function printEvent(event) {
  console.log(event);
  event.target.style.color = 'red';
}

myInput.addEventListener("keydown", printEvent);
myBtn.addEventListener("click", printEvent);

1. 공통 프로퍼티

아래의 프로퍼티들은 이벤트 타입과 상관없이 모든 이벤트 객체들이 공통적으로 가지고 있는 프로퍼티

마우스와 관련된 이벤트의 경우에는 아래와 같은 이벤트 객체의 프로퍼티들

키보드와 관련된 이벤트의 경우에는 아래와 같은 이벤트 객체의 프로퍼티들

06. 완료한 일 체크하기!

• 실습 코드

    const toDoList = document.querySelector('#to-do-list');
    const items = toDoList.children;
  
    // 1. updateToDo 함수를 완성해 주세요
    function updateToDo(event) {
      event.target.classList.toggle('done');
    }
  
    // 2. 반복문을 활용해서 각 li태그에 이벤트 핸들러를 등록해 주세요
    for (let item of items) {
      item.addEventListener('click', updateToDo);
    }
  
    // 테스트 코드
    items[2].removeEventListener('click', updateToDo);

07, 09. 이벤트 버블링

→ 부모 요소(최상단까지)의 핸들러도 동작

// 이벤트 버블링 (Event Bubbling)
const content = document.querySelector("#content");
const title = document.querySelector("#title");
const list = document.querySelector("#list");
const items = document.querySelectorAll(".item");

content.addEventListener("click", function () {
  console.log("content Event");
});

title.addEventListener("click", function () {
  console.log("title Event");
});

list.addEventListener("click", function () {
  console.log("list Event");
});

for (let item of items) {
  item.addEventListener("click", function () {
    console.log("item Event");
  });
}

→ currentTarget은 이벤트가 실제로 실행되는 것을 담고 있음

e.stopPropagation(); : 버블링을 막는 코드, 지양

08. 캡쳐링

1. 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계

2. 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계

   → 타깃 단계는 이벤트 객체의 target 프로퍼티가 되는 요소에 등록되어있던 이벤트 핸들러가 동작하는 단계

   → 쉽게 생각해서 가장 처음 이벤트 핸들러가 동작하게 되는 순간

3. 버블링 단계: 이벤트가 상위 요소로 전파되는 단계

📌 캡쳐링은 이벤트가 발생하면 가장 먼저, 그리고 버블링의 반대 방향으로 진행되는 이벤트 전파 방식

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>Codeit Acid Rain</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div>DIV
      <ul>UL
        <li>LI</li>
      </ul>
    </div>  
    <script>
      for (let elem of document.querySelectorAll('*')) {
        elem.addEventListener("click", e => alert(`캡쳐링 단계: ${elem.tagName}`), true);
        elem.addEventListener("click", e => alert(`버블링 단계: ${elem.tagName}`));
      }
    </script>
  </body>
</html>

10. 이벤트 위임

→ 자식 요소의 이벤트를 부모 요소에도 위임 (반대도 포함) : 버블링 활용

// 이벤트 위임 (Event Delegation)
const list = document.querySelector("#list");

list.addEventListener("click", function (e) {
  // if (e.target.tagName === 'LI')
  if (e.target.classList.contains("item")) {
    e.target.classList.toggle("done");
  }
});

const li = document.createElement("li");
li.classList.add("item");
li.textContent = "일기 쓰기";
list.append(li);

11. 효율적으로 완료한 일 체크하기!

• 실습 코드

    const toDoList = document.querySelector('#to-do-list');
  
    // 1. updateToDo 함수를 완성해 주세요
    function updateToDo(event) {
      if (event.target.classList.contains('item')) {
        event.target.classList.toggle('done');
      }
    }
  
    // 2. 각 li 태그가 아닌 하나의 태그에만 이벤트 핸들러를 등록해 주세요
    toDoList.addEventListener('click', updateToDo);
  
    // 테스트 코드
    const newToDo = document.createElement('li');
    newToDo.textContent = '가계부 정리하기';
    newToDo.classList.add('item');
    toDoList.append(newToDo);
  
    toDoList.children[2].addEventListener('click', function(e) {e.stopPropagation()});

12~13. 브라우저의 기본 동작

// 브라우저의 기본 동작
const link = document.querySelector("#link");
const checkbox = document.querySelector("#checkbox");
const input = document.querySelector("#input");
const text = document.querySelector("#text");

// event.preventDefault
link.addEventListener("click", function (e) {
  e.preventDefault();
  alert("지금은 이동할 수 없습니다.");
});

input.addEventListener("keydown", function (e) {
  if (!checkbox.checked) {
    e.preventDefault();
    alert("체크박스를 먼저 클릭해 주세요.");
  }
});

document.addEventListener("contextmenu", function (e) {
  e.preventDefault();
  alert("마우스 오른쪽 클릭은 사용할 수 없습니다.");
});

4️⃣ 다양한 이벤트 알아보기

01. 마우스 버튼 이벤트

→ 우클릭의 경우 운영체제별로 실행 순서가 변경될 수 있음

[마우스 버튼 이벤트]

• MouseEvent.button
  • 0: 마우스 왼쪽 버튼
  • 1: 마우스 휠
  • 2: 마우스 오른쪽 버튼
• MouseEvent.type
  • click: 마우스 왼쪽 버튼을 눌렀을 때
  • contextmenu: 마우스 오른쪽 버튼을 눌렀을 때
  • dblclick: 동일한 위치에서 빠르게 두번 click할 때
  • mousedown: 마우스 버튼을 누른 순간
  • mouseup: 마우스 버튼을 눌렀다 뗀 순간

02. 청기 올려?! 백기 올려?!

• 실습 코드

    const flagBlue = document.querySelector('.flag-blue');
    const flagWhite = document.querySelector('.flag-white');
  
    function reset() {
      document.querySelector('.up').classList.remove('up');
    }
  
    // 1. flagUp 함수를 완성해 주세요
    function flagUp(e) {
      if (e.button === 0) {
        flagBlue.classList.add('up');
      } else if (e.button === 2) {
        flagWhite.classList.add('up');
      }
  
      // 500 밀리초 뒤에 reset함수를 실행
      setTimeout(reset, 500);
    }
  
    // 2. 마우스 오른쪽 버튼 클릭시 나타나는 메뉴창을 막아주세요
    document.addEventListener('contextmenu', function (event) {
      event.preventDefault();
    });
  
    // 테스트 코드
    document.addEventListener('mousedown', flagUp);

03, 05. 마우스 이동 이벤트

[마우스 이동 이벤트]

• MouseEvent.type

  • mousemove: 마우스 포인터가 이동할 때
  • mouseover: 마우스 포인터가 요소 밖에서 안으로 이동할 때
  • mouseout: 마우스 포인터가 요소 안에서 밖으로 이동할 때

• MouseEvent.clientX, clientY

  : 화면에 표시되는 창 기준 마우스 포인터 위치

• MouseEvent.pageX, pageY

  : 웹 문서 전체 기준 마우스 포인터 위치

• MouseEvent.offsetX, offsetY

  : 이벤트가 발생한 요소 기준 마우스 포인터 위치

const box1 = document.querySelector('#box1');

function onMouseMove(e) {
  console.log(`client: (${e.clientX}, ${e.clientY})`);
  console.log(`page: (${e.pageX}, ${e.pageY})`);
  console.log(`offset: (${e.offsetX}, ${e.offsetY})`);
  console.log('------------------------------------');
}

box1.addEventListener('mousemove', onMouseMove);

• MouseEvent.target

  : 이벤트가 발생한 요소

• MouseEvent.relatedTarget

  : 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소

const box2 = document.querySelector('#box2');

function printEventData(e) {
  console.log('event:', e.type);
  console.log('target:', e.target);
  console.log('relatedTarget:', e.relatedTarget);
  console.log('------------------------------------');
  if (e.target.classList.contains('cell')) {
    e.target.classList.toggle('on');
  }
}

box2.addEventListener('mouseover', printEventData);
box2.addEventListener('mouseout', printEventData);

04. client, page, offset 차이

1. clientX, clientY

• client 프로퍼티는 말 그대로 클라이언트 영역 내에서 마우스의 좌표 정보
• 클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역
• clientX : 브라우저가 표시하는 화면 내에서 마우스의 X좌표 위치 clientY : 브라우저가 표시하는 화면 내에서 마우스의 Y좌표 위
• client 값은 그 순간 보여지는 화면을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 보여지는 화면의 좌측 상단의 모서리 위치를 (0, 0)으로 계산

1. offsetX, offsetY

• offset 프로퍼티는 이벤트가 발생한 target이 기준
• offsetX : 이벤트가 발생한 target 내에서 마우스의 X좌표 위치 offsetY : 이벤트가 발생한 target 내에서 마우스의 Y좌표 위치
• offset 값도 이벤트가 발생한 대상을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 대상의 좌측 상단의 모서리 위치를 (0, 0)으로 계산

1. pageX, pageY

• page 프로퍼티는 전체 문서를 기준으로 마우스 좌표 정보
• 스크롤로 인해서 보이지 않게된 화면의 영역까지 포함해서 측정한다는 점이 앞의 두 프로퍼티와의 차이점
• pageX : 전체 문서 내에서 마우스의 X좌표 위치 pageY : 전체 문서 내에서 마우스의 Y좌표 위치

06. mouseenter / mouseleave

1. 버블링이 일어나지 않는다.

   → mouseenter와 mouseleave는 버블링이 일어나지 않음

2. 자식 요소의 영역을 계산하지 않는다.

   → mouseenter와 mouseleave는 자식 요소의 영역을 계산하지 않음

→ 이벤트가 자식 요소에 영향끼치는지가 둘의 가장 큰 차이

• 이벤트 핸들러가 자식 요소에까지 영향을 끼치게 하고싶은 경우에는 mouseover/mouseout
• 자식 요소에는 영향을 끼치지 않고 해당 요소에만 이벤트 핸들러를 다루고자 한다면 mouseenter/mouseleave를 활용

07. 효준이네 집

• 실습 코드

    function showTitle(e) {
      if (e.target.dataset.title) {
        const span = document.createElement('span');
        span.classList.add('title');
        span.textContent = e.target.dataset.title;
        e.target.append(span);
      }
    }
  
    function removeTitle(e) {
      if (e.target.dataset.title) {
        e.target.lastElementChild.remove();
      }
    }
  
    const map = document.querySelector('.map');
    map.addEventListener('mouseover', showTitle);
    map.addEventListener('mouseout', removeTitle);

08. 키보드 이벤트

[키보드 이벤트]

• KeyboardEvent.type

  • keydown: 키보드 버튼을 누른 순간 (권장)
  • keypress: 키보드 버튼을 누른 순간 (지양)
  • keyup: 키보드 버튼을 눌렀다 뗀 순간

• KeyboardEvent.key

  : 이벤트가 발생한 버튼의 값

• KeyboardEvent.code

  : 이벤트가 발생한 버튼의 키보드에서 물리적인 위치

09. 똑Talk한 Enter키!

• 실습 코드

    const chatBox = document.querySelector('#chat-box');
    const input = document.querySelector('#input');
    const send = document.querySelector('#send');
  
    function sendMyText() {
      const newMessage = input.value;
      if (newMessage) {
        const div = document.createElement('div');
        div.classList.add('bubble', 'my-bubble');
        div.innerText = newMessage;
        chatBox.append(div);
      } else {
        alert('메시지를 입력하세요...');
      }
  
      input.value = '';
    }
  
    send.addEventListener('click', sendMyText);
  
    function sendMyTextByEnter (e) {
      if (e.key === 'Enter' && !e.shiftKey) {
        sendMyText();
        e.preventDefault();
      }
    }
  
    input.addEventListener('keypress', sendMyTextByEnter);

10. input 태그 다루기

[input 태그 다루기]

• 포커스 이벤트
  • focusin: 요소에 포커스가 되었을 때
  • focusout: 요소에 포커스가 빠져나갈 때
  • focus: 요소에 포커스가 되었을 때 (버블링 X)
  • blur: 요소에 포커스가 빠져나갈 때 (버블링 X)

11. 코드잇 산성비

• 실습 코드

    const input = document.querySelector('#input');
  
    function checker() {
      const words = document.querySelectorAll('.word');
      if (words.length === 0) {
        alert('Success!👏🏻');
        if(confirm('retry?')) {
          window.location.reload();
        }
      }
    }
  
    function removeWord() {
      const word = document.querySelector(`[data-word="${input.value}"]`);
      if (word) {
        word.remove();
        checker();
      }
  
      input.value = '';
    }
  
    input.addEventListener('change', removeWord);

12. 스크롤 이벤트

// Scroll 이벤트
function printEvent(e) {
  const STANDARD = 30;

  const nav = document.querySelector("#nav");
  const toTop = document.querySelector("#to-top");

  // 스크롤이 30px을 넘었을 때
  if (window.scrollY > STANDARD) {
    nav.classList.add("shadow");
    toTop.classList.add("show");
  } else {
    nav.classList.remove("shadow");
    toTop.classList.remove("show");
  }
}

window.addEventListener("scroll", printEvent);

1️⃣ 토픽 시작하기

01. 토픽 소개

JS

• 웹에 사용하기 위해 만들어진 언어
• 웹에서는 리퀘스트를 보내거나 사용자의 상호 작용을 기다려야 하는 일이 많음
• 비동기 프로그래밍이 특히 많이 쓰임

비동기 프로그램

: 주어진 코드를 순서대로 진행하는 것이 아니라 오래 기다려야하는 작업이 있으면 다음 작업을 먼저 처리하고 나중에 처리하던 작업으로 다시 돌아와서 마무리하는 방식

1. 콜백 (Callback)
2. 프로미스 (Promise)

2️⃣ 콜백과 비동기 실행

01. 파라미터 vs 아규먼트

function add(x, y) {
  return x + y;
}

add(1, 2);

→ 파라미터 : x, y

: 함수에 전달받은 값을 함수 내부로 전달하기 위해 사용하는 변수

→ 아규먼트 : 1, 2

: 함수에 실제로 전달되는 값

02. 콜백(Callback)이란?

→ 어떤 함수의 아규먼트로 전달되는 함수를 콜백 또는 콜백 함수

❗콜백(Callback) 함수 : 아규먼트로 전달되는 함수

• 간단한 콜백에서는 Arrow Function을 자주 사용

function sayHello(name) {
  console.log(`Hello ${name}!`);
}

function sayGoodbye(name) {
  console.log(`Goodbye ${name}!`);
}

function printMessage(func, name) {
  console.log("Printing message...");
  func(name);
}

printMessage((name) => console.log(`Hello ${name}!`), "Bob");

03. forEach() 함수 만들기

• 실습 코드

    function forEach(array, callback) {
      for (let elt of array) {
        callback(elt);
      }
    }
  
    const words = ['JavaScript', 'Java', 'Python'];
  
    // 배열의 요소를 출력하세요. Arrow Function을 사용하세요.
    forEach(words, (word) => console.log(word));
  
    function printUpper(word) {
      const upper = word.toUpperCase();
      console.log(upper);
    }
  
    // 배열의 요소를 대문자로 출력하세요. function 키워드로 함수를 선언하고 콜백으로 전달하세요.
    forEach(words, printUpper);

04. 콜백과 비동기 함수

console.log("1");

setTimeout(() => console.log("2"), 3000);

console.log("3");

// 1 3 2

→ 오래 걸리는 작업이 있을 때 시간을 절약 → 효율적인 코드

⚡️ 비동기 함수 (Asynchronous Function)

: 함수의 내용을 끝까지 쭉 실행하지 않고 중간에 다른 작업을 처리하다가 다시 돌아와서 마무리를 하는 함수

• 자바스크립트나 자바스크립트 라이브러리는 다양한 비동기 함수를 제공해 줌
• 제공되는 비동기 함수에 콜백을 넘겨주기만 하면 비동기 프로그램을 구현할 수 있음

05. setTimeout() 함수 사용해 보기

• 실습 코드

    function sayHello(name) {
      console.log(`Hello ${name}!`);
    }
  
    console.log('시작');
  
    // setTimeout(sayHello, 2000, 'Codeit');
    setTimeout((name) => console.log(`Hello ${name}!`), 2000, 'Codeit');
  
    console.log('끝');

06. 비동기 실행 파헤치기

1. 비동기 함수는 이후에 있는 코드를 모두 실행하고 콜백을 실행한다

2. 실행할 콜백이 여러 개일 경우, 동기적으로 실행된다

07. 비동기 함수의 예시들

1. setTimeout() 함수

   1. setTimeout() 이전에 있는 코드 실행
   2. setTimeout() 함수 실행: delay 만큼 기다리는 타이머를 시작
   3. setTimeout() 이후에 있는 코드 실행
   4. delay가 지나면 callback 실행

2. setInterval() 함수

   : 시간 간격을 두고 콜백을 반복적으로 실행

   setInterval(callback, interval) : interval 단위는 밀리초입니다.

   setInterval(() => console.log('2초가 지났습니다'), 2000);

3. DOM의 addEventListener() 함수

   const btn = document.querySelector('.my-btn');

   btn.addEventListener('click', () => console.log('button clicked!'));

4. React의 useEffect() 함수

   : 콜백을 바로 실행하지 않고 일단 화면을 그리기 때문에 웹 페이지가 더 빨리 로딩되는 것처럼 보이게 할 수 있음

   useEffect(() => console.log('render finished!'), []);

5. Express의 get() 함수

   : 리퀘스트가 언제 들어올지를 모르기 때문에 리퀘스트에 대한 처리는 비동기 형태로, 콜백에 파라미터 존재

    app.get('/hello', (req, res) => {
      res.send('Success!');
    });

08. 콜백 헬(Callback Hell)

→ 콜백이 여러번 중첩되는 것

→ 여러 비동기 작업을 연속적으로 처리한다는 문제점

→ 문제를 해결하기 위해 Promise 문법 생성

3️⃣ Promise

01. Promise란?

Promise 객체 ← fetch("api 링크");

• 비동기 작업이 완료되면 값을 알려주는 객체
• 작업이 완료되면 값을 알려줄 것을 ‘약속’함

콜백 기반

getEmployees((response) => {
    json(response, (data) => {
        console.log(data);
    });
});

Promise 기반

const response = await fetch('...');
const data = await response.json();
console.log(data);

Promise를 다루는 방법

1. .then() 메소드 + 콜백
2. async와 await 문법

02. await 문법

const response = await fetch('...');
const data = await response.json();
console.log(data);

→ Promise를 리턴하는 표현식이 있다면, 앞에 await 키워드를 사용하여 결과값(파싱된 데이터)을 받아올 수 있다.

→ await을 사용하면 Promise가 fulfilled 상태가 될 때까지 기다렸다가 결과값을 돌려준다.

✨ Promise의 3가지 상태

1. Pending : 비동기 작업의 결과를 기다리고 있는 상태
2. Fulfilled : 비동기 작업이 성공적으로 완료된 상태
3. Rejected : 비동기 작업이 중간에 실패한 상태

03. 점심 메뉴 받아오기 1

• 실습 코드

    // 여기에 코드를 작성하세요.
    const response = await fetch('...');
    const data = await response.json();
    console.log(data);

04~05. async 함수

→ 제대로 된 비동기 함수로 사용하려면 추가적인 과정 필요

→ await : async 함수 내에서 or 모듈의 최상위 레벨에서만 사용 가능

main.js

import { printEmployees } from "./asyncFunctions";

printEmployees();

console.log("Task 2");

console.log("Task 3");

// Task 2
// Task 3
// printEmployees 실행결과

asyncFunctions.js

export async function printEmployees() {
  const response = await fetch("...");
  const data = await response.json();
  console.log(data);
}

/*
const printEmployees = async () => {
  const response = await fetch("...");
  const data = await response.json();
  console.log(data);
}
*/

06. 점심 메뉴 받아오기 2

• 실습 코드

    // 여기에 코드를 작성하세요.
    export async function printMenus() {
      const response = await fetch('...');
      const data = await response.json();
      console.log(data);
    }

07. 효율적인 비동기 코드

• 비효율적인 코드 (수많은 await문을 호출)

async function getEmployees() {
  for (let i = 1; i < 11; i++) {
    const response = await fetch(`.../${i}`);
    const data = await response.json();
    console.log(data);
  }
}

getEmployees();

• 효율적인 코드 (순서는 지켜지지 않지만 한번에 리퀘스트를 전송)

async function getEmployee(id) {
  const response = await fetch(`.../${id}`);
  const data = await response.json();
  console.log(data);
}

for (let i = 1; i < 11; i++) {
  getEmployee(id);
}

08. async 함수의 리턴값

→ 항상 Promise를 리턴한다❗️

const employees = getEmployees(); // Promise
console.log(employees)

09. 점심 메뉴 랜덤 선택기

• 실습 코드

    import { getMenus } from './asyncFunctions.js';
  
    function getRandomElement(arr) {
      const randomIdx = Math.floor(Math.random() * arr.length);
      return arr[randomIdx];
    }
  
    console.log('메뉴 고르는 중...');
  
    const menus = await getMenus();
  
    const randomMenu = getRandomElement(menus);
  
    console.log(`오늘의 랜덤 메뉴는 ${randomMenu.name}입니다!`);

10. 신입 직원 추가하기

• 실습 코드

    import { getInterviews, getEmployees } from './asyncFunctions.js';
  
    function addNewEmployee(employees, interview) {
      const { name, department } = interview;
      const newEmployee = {
        id: employees.length + 1,
        name,
        department,
        email: `${name}@codeitmall.kr`,
      };
      employees.push(newEmployee);
    }
  
    const employees = await getEmployees();
  
    const interviews = await getInterviews();
  
    interviews.forEach((interview) => {
      if (interview.result === 'pass') {
        addNewEmployee(employees, interview);
      }
    });
  
    console.log(employees);

11. try catch로 오류 처리하기

export async function getEmployees() {
  try {
    const response = await fetch("...");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Error!");
    return;
  } finally {
    console.log("Finished");
  }
}

→ catch문 속에서는 에러 처리 가능

→ return 시 함수를 종료

→ finally는 return 해도 실행하고 함수 종료

12. 고장난 점심 메뉴 선택기

• 실습 코드

    export async function getMenus() {
      // 여기에 코드를 작성하세요.
      try {
        const response = await fetch('...');
        const menus = await response.json();
        return menus;
      } catch(error) {
        console.log('데이터를 가져오지 못했습니다 :(');
      } finally {
        console.log('getMenus() 함수가 끝났습니다.'); 
      }
    }

13. Promise와 오류 제대로 이해하기

14~15. .then() 메소드

→ .then() 메소드 : 앞선 비동기 작업이 완료되면 등록된 콜백을 실행 (Promise 객체의 메소드)

async function getEmployees() {
  const response = await fetch("...");
  const data = await response.json();
  console.log(data);
}

// const dataPromise = fetch("...").then((response) => response.json());
// dataPromise.then((data) => console.log(data));

fetch("...")
    .then((response) => response.json())
    .then((data) => console.log(data));

16~17. .catch()와 .finally() 메소드

fetch("...")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .**catch((error) => console.log("Error!"))
  .finally(() => console.log("Finished"));**

→ 위와 같은 역할

→ catch문 속에서는 에러 처리 가능

→ finally는 return 해도 실행하고 함수 종료

18. Promise.all() 메소드

async function getEmployee(id) {
  const response = await fetch(`.../${id}`);
  const data = await response.json();
  return data;
}

const promises = [];

for (let i = 1; i < 11; i++) {
  promises.push(getEmployee(i));
}

const employees = await Promise.all(promises); // try, catch도 가능
console.log(employees);

→ 여러 Promise를 동시에 기다릴 때 사용

19. 리퀘스트 동시에 보내기

• 실습 코드

    import { getEmployees, getMenus } from './asyncFunctions.js';
  
    const employeesPromise = getEmployees();
    const menusPromise = getMenus();
  
    const [employees, menus] = await Promise.all([employeesPromise, menusPromise]);
  
    // 테스트 코드
    console.log('직원 데이터:');
    console.log(employees);
    console.log('메뉴 데이터:');
    console.log(menus);

1️⃣ 객체와 클래스

01. 객체 지향 프로그래밍이란?

→ ‘객체’간의 상호작용을 중심으로 하는 프로그래밍

→ 프로퍼티와 메소드로 이루어진 각 객체들의 상호 작용을 중심으로 코드를 작성하는 것

• 객체의 상태를 나타내는 ‘변수’
• 객체의 행동을 나타내는 ‘함수’

VS 절차 지향 프로그래밍

→ 변수와 함수를 가지고 작업의 순서에 맞게 코드를 작성하는 것

02. 객체 만들기 1-1: Object-Literal

Object-Literal

→ 객체를 나타내는 문자열

→ 자바스크립트에서 객체를 생성할 수 있는 가장 기본적인 방법

03. 객체 만들기 1-2: Factory function

Factory Function

→ 객체를 생성해서 리턴하는 함수

function createUser(email, birthdate) {
  const user = {
    email,
    birthdate,
    buy(item) {
      console.log(`${this.email} buys ${item.name}`);
    },
  };
  return user;
}

const user1 = createUser("chirs123@google.com", "1992-03-21");

04. 객체 만들기 2: Constructor function

Constructor Function (생성자 함수)

→ 객체를 생성할 수 있는 함수

this : 매번 생성되는 해당 객체를 가리키는 역할

1. new를 붙여서 호출해야 해야 객체 생성 가능
2. 함수 이름은 대문자로 시작

function User(email, birthdate) {
  (this.email = email),
    (this.birthdate = birthdate),
    (this.buy = function (item) {
      console.log(`${this.email} buys ${item.name}`);
    });
}

const user1 = new User("chirs123@google.com", "1992-03-21");

05. 객체 만들기 3: Class

Class

constructor(생성자) : 객체가 생성될 때 실행

this : 생성되는 객체를 나타냄

• 프로퍼티(constructor 내부)와 메소드를 분리

class User {
  constructor(email, birthdate) {
    this.email = email;
    this.birthdate = birthdate;
  }

  buy(item) {
    console.log(`${this.email} buys ${item.name}`);
  }
}

const user1 = new User("chirs123@google.com", "1992-03-21");

06~07. 객체 만들기

생략

08. 객체 생성해보기

• 실습 코드

    class Car {
      constructor(color, speed) {
        this.color = color;
        this.speed = speed;
      }
  
      run() {
        console.log(`Runs at ${this.speed}`);
      }
    }
  
    const car1 = new Car('blue', '100km/h');
  
    car1.run();

09. 알고 넘어가야할 부분

객체 지향 프로그래밍이 가능한 언어의 2가지 종류

1. 클래스 기반의 객체 지향 언어 → Java
2. 프로토타입 기반의 객체 지향 언어 → JavaScript

2️⃣ 객체 지향 프로그래밍의 4개의 기둥

🔅 객체 지향 프로그래밍의 4가지 기둥

1. 추상화
2. 캡슐화
3. 상속
4. 다형성

01~02. 추상화

→ 어떤 구체적인 존재를 원하는 방향으로 간략화해서 나타내는 것

ex. class를 설계하는 것

• 클래스명, 프로퍼티와 메소드 이름에 주의 (직관적)

03~05. 캡슐화

→ 객체의 특정 프로퍼티에 직접 접근하지 못하도록 막는 것

• 프로퍼티에 이상한 값을 설정하는 것을 방지하는 역할
• getter, setter 메소드

class User {
  constructor(email, birthdate) {
    this.email = email; **// email은 setter 메소드의 이름이 됨**
    this.birthdate = birthdate;
  }

  buy(item) {
    console.log(`${this.email} buys ${item.name}`);
  }

  **// getter 메소드 -> 프로퍼티의 값을 구하는 함수**
  get email() {
    return this._email;
  }

  **// setter 메소드**
  set email(address) {
    **// email 프로퍼티에 값을 설정할 때 사용**
    if (address.includes("@")) {
      **// _가 붙은 _email이라는 새로운 프로퍼티, 숨기고자 하는 프로퍼티의 이름**
      this._email = address;
    } else {
      throw new Error("invalid email address");
    }
  }
}

const user1 = new User("chirs123@google.com", "1992-03-21");
console.log(user1.email); **// getter 메소드 사용시 _ 없이 변수 사용 가능**

1. 완벽한 캡슐화를 하는 법

   → 클로저(Closure) : 어떤 함수와 그 함수가 참조할 수 있는 값들로 이루어진 환경을 하나로 묶은 것

   클로저라는 개념으로 해당 환경을 함수와 함께 그대로 유지시켜주어 _email 변수에 접근 가능

   클로저가 아닌 경우에는 아래와 같이 _email 변수에 접근 불가

function createUser(email, birthdate) {
  let _email = email;

  const user = {
    birthdate,

    get email() {
      return _email;
    },

    set email(address) {
      if (address.includes('@')) {
        _email = address;
      } else {
        throw new Error('invalid email address');
      }
    },
  };

  return user;
}

const user1 = createUser('chris123@google.com', '19920321');
console.log(user1._email); // _ 추가 -> 접근 불가

1. 메소드도 캡슐화할 수 있어요

function createUser(email, birthdate) {
  const _email = email;
  let _point = 0;

  function increasePoint() {
    _point += 1;
  }

  const user = {
    birthdate,

    get email() {
      return _email;
    },

    get point() {
      return _point;
    },

    buy(item) {
      console.log(`${this.email} buys ${item.name}`);
      increasePoint();
    },
  };

  return user;
}

const item = {
  name: '스웨터',
  price: 30000,
};

const user1 = createUser('chris123@google.com', '19920321');
user1.buy(item);
user1.buy(item);
user1.buy(item);
console.log(user1.point);
user1.increasePoint(); // user1 객체로 increasePoint 직접 호출 불가

→ increasePoint가 유저 객체 안에서 적절한 곳에 사용되어야 하고, 아무렇게나 함부로 호출해서는 안 되는 메소드라고 가정하고 캡슐화

• user1 객체에는 increasePoint라는 메소드가 없기 때문에 직접 호출 불가

06~08. 상속, super

→ 하나의 객체가 다른 객체의 프로퍼티와 메소드를 물려받는 것

• extends를 통해 상속을 받아 중복 코드 삭제 → 코드의 재사용성이 좋아짐
• super를 통해 부모 클래스의 constructor를 호출해주어야 실행 가능

class User { // 부모 클래스
  constructor(email, birthdate) {
    this.email = email;
    this.birthdate = birthdate;
  }

  buy(item) {
    console.log(`${this.email} buys ${item.name}`);
  }
}

class PremiumUser extends User { // 자식 클래스
  constructor(email, birthdate, level) {
      super(email, birthdate);
    this.level = level;
  }

  streamMusicForFree() {
    console.log(`Free music streaming for ${this.email}`);
  }
}

09~11. 다형성

→ 많은 형태를 갖고 있는 성질

• 그대로 상속받지 않고 수정하는 경우 → 동일한 이름을 새롭게 정의 Overriding(오버라이딩) : 덮어써서 작성
• 동일한 이름의 메소드를 간결하게 호출 가능

class User {
  // 부모 클래스
  constructor(email, birthdate) {
    this.email = email;
    this.birthdate = birthdate;
  }

  buy(item) {
    console.log(`${this.email} buys ${item.name}`);
  }
}

class PremiumUser extends User {
  // 자식 클래스
  constructor(email, birthdate, level, point) {
    super(email, birthdate);
    this.level = level;
    this.point = point;
  }

  buy(item) {
    // console.log(`${this.email} buys ${item.name}`);
    super.buy(item); // 부모 클래스의 buy 메소드를 호출 (동일한 내용을 호출 후 오버라이딩)
    this.point += item.price * 0.05;
  }

  streamMusicForFree() {
    console.log(`Free music streaming for ${this.email}`);
  }
}

12. instanceof 연산자

→ 현재 변수가 가르키는 객체가 어느 클래스로 만든 객체인지 확인하는 역할

console.log(user instanceof User); // true, false

console.log(user instanceof PremiumUser); // true, false

→ 자식 클래스로 만든 객체는 부모 클래스로 만든 객체로도 인정됨❗

13. static 프로퍼티와 static 메소드

→ 클래스에 직접적으로 딸려있는 프로퍼티와 메소드

→ 객체가 아닌 클래스 자체로 접근!

class Math {
  static PI = 3.14;

  static getCircleArea(radius) {
    return Math.PI * radius * radius;
  }
}

Math.PI = 3.141592;
Math.getCircleArea = function (width, height) {
  return width * height;
};

console.log(Math.PI);
console.log(Math.getCircleArea(4, 5));

➕ console.log(Date.now());

14~15. 4개의 기둥 정리

생략

16. 클래스는 파일 하나당 하나씩 넣어주는 게 좋아요

• 각 클래스와 메인 로직(main.js)을 파일별로 쪼개서 작성
• 코드를 좀더 편리하게 관리하기 위함

→ 파일 하나당 클래스 하나를 작성하고, 이를 외부에 공개해서 사용할 수 있도록 하는 방식을 주로 활용한다❗

Ch1. 모던 자바스크립트

1️⃣ 모던 자바스크립트 이해하기

01~02. 모던 자바스크립트란?

• ECMAScript → 자바스크립트 표준 명세서 ( JavaScript Specification )
  • ✨ ES6 → 정식 명칭 ECMAScript 2015
• Modern JavaScript
  • 현시점에 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트
  • JavaScript의 기본 개념 더 견고히!
  • 새롭게 등장한 문법들 중 유용한 문법들?
  • 모던하게 자바스크립트 활용하기!

03. ECMAScript 더 알아보기

• ECMA-International 공식 ECMA-262문서
• 위키백과 - ECMA스크립트
• 한눈에 확인하는 호환성 테이블
• 문법 검색으로 확인하는 호환성 테이블
• JavaScript vs ECMAScript
  • JavaScript는 프로그래밍 언어(결과물)이고, ECMAScript는 프로그래밍 언어의 표준(설명서)
  • JavaScript는 ECMAScript를 기반으로 하지만 ECMAScript에 정의된 내용뿐만 아니라, 다른 부가적인 기능도 있음

2️⃣ 자바스크립트의 동작 원리

01. 데이터 타입의 특징과 종류

→ 데이터 타입이 상황에 따라 변할 수 있다! (유연한 데이터 타입)

02. Symbol과 BigInt

→ Symbol

• 코드 내에서 유일한 값을 가진 변수 이름을 만들 때 사용
• 다른 어떤 값과 비교해도 true가 될 수 없는 고유한 변수
  • 똑같은 설명을 붙인 심볼을 만들더라도 두 값을 비교하면 false가 반환
• const user = Symbol('this is a user');

→ BigInt

• 아주 큰 정수(Integer)를 표현하기 위해 등장한 데이터 타입
• 자바스크립트의 숫자형(number type) 값에는 9000조 정도의 정수 표현의 한계가 존재
  • 2**53 - 1 보다 큰 정숫값도 안전하게 표현 가능
• console.log(9007199254740993n); // 9007199254740993n console.log(BigInt('9007199254740993')); // 9007199254740993n

03. typeof 연산자

→ typeof 연산자

• 키워드 다음에 공백(띄어쓰기)을 두고 값을 작성해도 되고, 함수를 사용하듯 괄호로 감싸서 사용
• typeof null을 하면 문자열 null이 리턴되는 게 아니라 문자열 object가 리턴되는 문제 (수정 제안 but 아직 반영 X)
• 함수에 typeof 연산자를 사용하면 function이라는 값을 리턴 (객체로 취급하지만 리턴은 function)

04. 자바스크립트 데이터 타입의 특징 익히기

퀴즈 생략

05~06. 불린인 듯 불린 아닌 불린같은 값

undefined number string → 형 변환 → boolean (true or false)

→ Falsy 값, Truthy 값

07~09. AND와 OR의 연산 방식, 우선순위

→ AND 연산자

• 왼쪽 값이 true일 경우 오른쪽 값, 왼쪽 값이 false일 경우 왼쪽 값 출력

→ OR 연산자

• 왼쪽 값이 true일 경우 왼쪽 값, 왼쪽 값이 false일 경우 오른쪽 값 출력

❗AND 연산자가 OR 연산자보다 우선순위가 높음❗

10. null 병합 연산자 ??

→ 물음표 두 개(??)를 사용해서 null 혹은 undefined 값을 가려내는 연산자

• 연산자 왼편의 값이 null 이나 undefined라면 연산자 오른편의 값이 리턴
• 연산자 왼편의 값이 null 이나 undefined가 아니라면 연산자 왼편의 값이 리턴
• null이나 undefined인지 확인

11~12. 변수와 스코프

console.log(title); // undefined
var title = 'codeit';
console.log(title); // codeit

→ var의 경우 변수 선언 이전에 접근이 가능하지만 값이 할당되지는 않아서 undefined 출력 + 중복 선언 가능

➕ 함수가 아닌 경우(ex. if문, for문), var은 전역 변수 처리

var x;    // 함수 스코프 (function scope)
let y;    // 블록 스코프 (block scope)
const z;  // 블록 스코프 (block scope)

3️⃣ 함수 다루기

01~02. 함수를 만드는 방법

1. 함수 선언

2. 함수 표현식

   1. 함수 선언을 변수에 할당

   2. 함수 선언을 값처럼 사용

      const printCodeit = function () {
       console.log('Codeit');
      }
      
      printCodeit();

03. 이름이 있는 함수 표현식

Named Function Expression (기명 함수 표현식)

const sayHi = function printHiInConsole() {
  console.log('Hi');
};

console.log(sayHi.name); // printHiInConsole

04. 즉시 실행 함수 (IIFE)

즉시 실행 함수 (표현) → Immediately Invoked Function Expression, 줄여서 IIFE

(function (x, y) {
  console.log(x + y);
})(3, 5);

➕ 일반적으로 프로그램 초기화 기능에 많이 활용

➕ 함수의 리턴값을 바로 변수에 할당하고 싶을 때 활용

05~06. 값으로서 함수

→ 콜백 함수 (Callback Function) : 다른 함수의 파라미터에 전달된 함수

→ 고차 함수 (Higher Order Function) : 함수를 리턴하는 함수

→ 일급 함수 (First Order Function) : 다른 함수에 할당 가능, 파라미터로 전달 가능, 리턴 가능한 함수

07~08. Parameter

파라미터(Parameter) : 외부로부터 값을 전달받기 위해 힘수를 선언할 때 작성하는 것

아규먼트(Argument) : 함수를 호출할 때 파라미터로 전달하는 값

→ 파라미터를 전달하지 않고, 기본값이 없을 때 : undefined 전달

• 2개의 값 중 하나만 전달했을 때 : 첫번째 값과 undefined 전달

→ 두번재 파라미터에 첫번째 파라미터 값을 활용 가능

09. Arguments

Argument의 개수에 따라 유연한 대처가 가능한 함수

function printArguments() {
    for (const arg of arguments) {
        console.log(arg);
    }
    console.log('-----------');
}

printArguments('Young', 'Mark', 'Koby');
printArguments('Captain');
printArguments('Jayden', 'Scott');
printArguments('Suri', 'Jack', 'Joy', 'Noel');

→ 배열의 역할 X

10. 줄임말 대잔치

• 실습 코드

    function firstWords(words) {
      let word = '';
  
      // 여기에 코드를 작성하세요
      for(const arg of arguments) {
        word += arg[0];
      }
  
      console.log(word);
    }
  
    firstWords('나만', '없어', '고양이');
    firstWords('아니', '바나나말고', '라면먹어');
    firstWords('만두', '반으로', '잘라먹네', '부지런하다');
    firstWords('결국', '자바스크립트가', '해피한', '지름길');
    firstWords('빨간색', '주황색', '노란색', '초록색', '파란색', '남색', '보라색');

11. Rest Parameter

function printArguments(...args) {
    for (const arg of args) {
        console.log(arg);
        console.log(args.splice(0, 2));
    }
    console.log('-----------');
}

printArguments('Young', 'Mark', 'Koby');
printArguments('Captain');
printArguments('Jayden', 'Scott');
printArguments('Suri', 'Jack', 'Joy', 'Noel');

→ Rest Parameter는 배열이다❗ → splice 등 사용 가능

➕ 일반 파라미터와 사용 가능 (반드시 가장 마지막에 위치) → 필요에 따라 유연하게 사용 가능

12. 1세대는 거르는게 답?

• 실습 코드

    // 여기에 코드를 작성하세요
    function ignoreFirst(...args) {
      for(const arg of args) {
        let last = args.splice(1, args.length);
        for(let i = 0; i < last.length; i++) {
          console.log(last[i]);
        }
      }
    }
  
    ignoreFirst('1세대', '2세대', '3세대');
    ignoreFirst('곰팡이', '강아지', '고양이');
    ignoreFirst(20, 9, 18, 19, 30, 34, 40);

• 실습 코드 (다른 방법)

    // 여기에 코드를 작성하세요
    function ignoreFirst(first, ...rest) {
      for (const el of rest) {
        console.log(el);
      }
    }
  
    ignoreFirst('1세대', '2세대', '3세대');
    ignoreFirst('곰팡이', '강아지', '고양이');
    ignoreFirst(20, 9, 18, 19, 30, 34, 40);
  

13~14. Arrow Function

/*
const getTwice = function(number) {
    return number * 2;
};
*/

// 1번 방법
**const getTwice = (number) => {
    return number * 2;
};**

// 2번 방법
// const getTwice = number => number * 2;

console.log(getTwice(5));

const myBtn = document.querySelector('#myBtn');

myBtn.addEventListener('click', () => {
    console.log('button is clicked');
});

⚠️ Arrow Function 주의사항

• Argument의 부재 → 대체 불가

⚠️ 2번 방법 주의사항

• 함수 내부에서 조건문, 반복문을 사용하거나 변수에 값 할당 등 return문을 제외하고 다른 표현이 필요한 경우 불가
• return값이 객체인 경우 불가 (함수의 동작 부분인 중괄호로 해석)
  • 소괄호를 한 번 감싸주면 사용 가능 ex. ({ name: ‘Codeit’, })

15~16. What is this?

function getFullName() {
    return `${this.firstName} ${this.lastName}`;
}

const user = {
    firstName: 'Tess',
    lastName: 'Jang',
    getFullName: getFullName,
}

const admin = {
    firstName: 'Alex',
    lastName: 'Kim',
    getFullName: getFullName,
}

console.log(user.getFullName());
console.log(admin.getFullName());

✨ This란?

→ 함수를 호출한 객체를 가리키는 키워드

(선언하지 않고 그냥 사용하게 되면 기본값인 window 객체를 가리킴)

➕ Arrow Function에서 this를 사용하는 방법

→ 일반 함수처럼 호출한 대상에 따라 상대적으로 변화 X

→ Arrow Function이 선언되기 직전에 이용한 this 값과 같은 this 값을 사용

➡️ 일반 함수에서의 사용을 권장함 👍

4️⃣ 자바스크립트의 문법과 표현

01. 문장과 표현식

#️⃣ 문장 (statements)

→ 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리

#️⃣ 표현식 (expressions)

→ 결과적으로 하나의 값이 되는 모든 코드

➡️ 일반적으로 표현식인 문장은 세미콜론으로, 표현식이 아닌 문장은 문장 자체의 코드 블록(중괄호)로 그 문장의 범위가 구분

02~03. 조건을 다루는 표현식 (조건 연산자)

1. if문

2. switch문

3. 조건 연산자 = 삼항 연산자

    // 조건 ? truthy 할 때 표현식 : falsy 할 때 표현식
    // 삼항 연산자
   
    const CUT_OFF = 80;
   
    const passChecker(score) {
        return score > CUT_OFF ? '합격!' : '불합격!';
    }
   
    console.log(passChecker(90));

   ❌ 조건에 따라 변수를 선언하거나 반복문 사용 불가 (모든 if문 대체 불가)

04~06. Spread 구문

→ 하나로 묶여있는 값을 각각의 개별 값으로 펼치는 방식 (Spread문 자체가 값 X, 여러 값의 목록으로 평가)

↔️ Rest Parameter : 여러개의 Argument를 하나로 묶는 방식

const numbers = [1, 2, 3];

console.log(**...numbers**);  // 1 2 3
console.log(1, 2, 3);     // 1 2 3

➕ Slice를 사용하지 않고도 배열 복사 가능 (바로 요소 추가도 가능)

const webPublishing = ['HTML', 'CSS'];
const interactiveWeb = [...webPublishing, 'JavaScript'];

// const interactiveWeb = [...webPublishing];
// interactiveWeb.push('JavaScript');

console.log(webPublishing);   // ['HTML', 'CSS']
console.log(interactiveWeb);  // ['HTML', 'CSS', 'JavaScript']

️⃣ *객체 Spread**

const latte = {
  esspresso: '30ml',
  milk: '150ml'
};

const cafeMocha = {
  ...latte,
  chocolate: '20ml',
}

console.log(latte); // {esspresso: "30ml", milk: "150ml"}
console.log(cafeMocha); // {esspresso: "30ml", milk: "150ml", chocolate: "20ml"}

→ 객체로는 새로운 배열을 만들거나 함수의 아규먼트로 사용 불가

→ 반드시 객체를 표현하는 중괄호 안에서 활용

07~08. 모던한 프로퍼티 표기법

const title = 'Codeit';
const birth = 2024;
const job = '프로그래밍 강사';

const user = {
    title,
    birth,
    job,
};

console.log(user);

→ 변수나 함수의 이름이 같다면 이렇게 표기 가능

→ 내부에서 사용하는 함수의 경우 function과 : 생략 가능

// 계산된 속성명 (computed property name)
const user = {
    // [표현식]: 값,
    ['Code' + 'it']: 'value',
};

console.log(user); // {Codeit: "value"}

09. 옵셔널 체이닝

중첩된 객체의 프로퍼티를 다룰 때 null 혹은 undefined가 아니라는 것을 검증하고 접근해야 에러를 방지 가능

→ AND 연산자를 활용한 방법도 객체의 이름이나 프로퍼티의 이름이 길어질수록 가독성이 나빠지는 문제 발생

→ 훨씬 더 코드를 간결하게 사용할 수 있는 문법이 옵셔널 체이닝(Optional Chaining)

옵셔널 체이닝 연산자 `?.`

function printCatName(user) {
  console.log(user.cat?.name);
}

function printCatName(user) {
  console.log((user.cat === null || user.cat === undefined) ? undefined : user.cat.name);
}

function printCatName(user) {
  console.log(user.cat?.name ?? '함께 지내는 고양이가 없습니다.');
}

10~15. Destructuring (구조 분해)

구조 분해

const rank = ['유나', '효준', '민환', '재하', '규식'];

const [macbook, ipad, airpods, ...coupon] = rank; // 적을 경우 undefined 값 할당

console.log(macbook);
console.log(ipad);
console.log(airpods);
console.log(coupon);

[macbook, ipad] = [ipad, mackbook]; // 다른 변수를 생성하지 않고도 값을 바꿔서 할당 가능

객체 구조 분해

const macbook = {
    title: '맥북 프로 16형',
    price: 3690000,
    memory: '16GB',
    storage: '1TB SSD 저장 장치',
    display: '16형 Retina 디스플레이',
}

// const title = macbook.title;
// const price = macbook.price;
const { title, price } = macbook; // 같은 변수의 이름이 있으면 그 값이 할당됨 아니라면 undefined 값
const { title, ...rest } = macbook; // 앞에 선언된 것을 제외한 프로퍼티를 할당
const { title: product, price } = macbook; // 프로퍼티를 다른 이름으로 선언하고 싶다면 : 사용
const { [propertyName]: product, price } = macbook;

console.log(title);
console.log(price);
console.log(product);

함수 구조 분해

function getArray() {
    return ['컴퓨터', '냉장고', '세탁기']; // 위에서 바로 활용 가능
}

const [el1, el2, el3] = getArray();

console.log(el1);
console.log(el2);
console.log(el3);

객체 구조 분해

function printSummary(object) {
    const { title, color, price } = object; // 위에서 바로 활용 가능

    console.log(`선택한 상품은 '$title}'입니다.`);
    console.log(`색상은 ${color}이며,`);
    console.log(`가격은 ${price}원 입니다.`);
};

printSummary(macbook);

const btn = document.querySelector('#btn');

btn.addEventListener('click', ({ target }) => {
    target.classList.toggle('checked');
});

// + 중첩 객체 구조 분해
btn.addEventListener('click', ({ target: { classList } }) => {
    classList.toggle('checked');
});

btn.addEventListener('click', ({ target }) => {
    const { classList } = target;
    classList.toggle('checked');
});

16~19. 에러와 에러 객체, try catch문

→ Syntax Error, Type Error 등 발생하는 에러

// try catch 문

try {
    // 코드 (에러가 발생한 이후 시점의 코드는 작동 X)
} catch(error) {
    // 에러가 발생했을 때 동작할 코드

    console.error(error);
    /*
    console.log(error);
    console.log(error.name);
    console.log(error.message);
    */
}

20. finally문

try {
  // 실행할 코드
} catch (err) {
  // 에러가 발생했을 때 실행할 코드
} finally {
  // 항상 실행할 코드
}

→ finally문에서도 에러 처리가 필요하다면 중첩해서 활용

try {
  try {
    // 실행할 코드
  } catch (err) {
    // 에러가 발생했을 때 실행할 코드
  } finally {
    // 항상 실행할 코드
  }
} catch (err) {
  // finally문에서 에러가 발생했을 때 실행할 코드
}

21. 퀴즈왕의 길은 험난하다

• 실습 코드

    const quiz1 = {
      question: '다음 중 스승의 날과 생일이 같은 인물은 누구일까요?',
      example: [ '율곡 이이', '퇴계 이황', '세종대왕', '신사임당'],
      answer: 3,
      solution: '훈민정음 창제 등 우리나라 문화와 교육 발전에 남긴 업적이 가장 큰 인물이라는 평가와 함께, 이 시대의 스승이 세종대왕처럼 존경받았으면 하는 바람으로 세종대왕의 탄생일이 스승의 날로 지정되었습니다.',
    };
  
    const quiz2 = {
      question: '다음 중 희노애락에 속하지 않는 것은 무엇일까요?',
      example: ['사랑', '기쁨', '즐거움'],
      answer: 1,
      solution: '희노애락에서의 애를 사랑 애(愛)라고 자칫 오해할 수가 있지만, 희노애락의 애는 슬플 애(哀)입니다. 기쁨은 기쁠 희(喜), 즐거움은 즐거울 락(樂)에 담겨 있습니다.',
    };
  
    function printQuiz({ question, example }) {
      let exMsg = '';
  
      try {
        for (let i = 0; i < example.length; i++) {
          exMsg += `${i + 1}. ${example[i]}  `;
        }
  
        console.log(question);
        console.log(exMsg);
      } catch(error) {
        console.log(error.name);
      }
    }
  
    // 테스트 코드
    printQuiz(quiz1);
    printQuiz(1);
    printQuiz("");
    printQuiz({});
    printQuiz(quiz2);

5️⃣ 자바스크립트의 유용한 내부 기능

❗01. 배열 메소드 1 : forEach와 map

• forEach

    const members = ['영훈', '윤수', '동욱', '태호'];
  
    for (let member of members) {
        console.log(`{members}님이 입장하셨습니다.`);
    }
  
    members.forEach((member, i) => {
        console.log(`${i} ${member}님이 입장하셨습니다.`);
    });

  → forEach에서 첫번째 인자는 필수, index는 선택

    const firstNames = ['영훈', '윤수', '동욱', '태호'];
    const lastNames = ['강', '이', '손', '성'];
  
    firstNames.forEach((firstName, i) => {
        console.log(`${lastNames[i]}${firstName}님이 입장하셨습니다.`);
    });

  → 여러 배열에서 같은 위치의 값을 사용하도록 활용 가능

• map

    const firstNames = ['영훈', '윤수', '동욱', '태호'];
    const lastNames = ['강', '이', '손', '성'];
  
    const fullNames = firstNames.map((firstName, i) => {
        return lastNames[i] + firstName;
    });
  
    console.log(fullNames);

  → 새로운 배열을 return 한다는 차이점❗

02. 할 일 정리

• 실습 코드

    const list = document.querySelector('.list');
    const data = [{
        title: '자바스크립트 공부하기',
        isClear: true,
      }, {
        title: '쓰레기 분리수거',
        isClear: false,
      }, {
        title: '고양이 밥주기',
        isClear: true,
      }, {
        title: '독서하기',
        isClear: false,
      }, {
        title: '영어 공부하기',
        isClear: false,
      }
    ];
  
    // 여기에 코드를 작성해 주세요.
    data.forEach((todo, i) => { // 1번 조건
      const li = document.createElement('li'); // 2번 조건
  
      if (todo.isClear) {
        li.classList.add('item', 'done'); // 4번 조건
      } else {
        li.classList.add('item'); // 3번 조건
      }
  
      li.textContent = `${i + 1}. ${todo.title}`; // 5번 조건
      list.appendChild(li); // 6번 조건
    });

03. 셜록 훈즈

• 실습 코드

    const quiz = ['YUMMY', 'COUNT', 'ABUSE', 'SOUND', 'SWING'];
  
    // 여기에 코드를 작성하세요
    const answer = quiz.map((word, i) => {
      return word[i];
    });
  
    // 테스트 코드
    console.log(answer);

❗04. 배열 메소드 2 : filter와 find

• filter

    const devices = [
        { name: 'GalaxyNote', brand: 'Samsung' },
        { name: 'MacbookPro', brand: 'Apple' },
        { name: 'iPad', brand: 'Apple' },
        { name: 'GalaxyWatch', brand: 'Samsung' },
        { name: 'iMac', brand: 'Apple' },
        { name: 'GalaxyBuds', brand: 'Samsung' },
        { name: 'Gram', brand: 'LG' },
        { name: 'GalaxyBook', brand: 'Samsung' },
        { name: 'SurfacePro', brand: 'Microsoft' },
        { name: 'ZenBook', brand: 'Asus' },
        { name: 'MacbookAir', brand: 'Apple' },
    ];
  
    const apples = devices.filter((el) => el.brand === 'Apple');
  
    console.log(apples);

  → filtering 된 새로운 배열 생성

• find

    const myLaptop = devices.find((el) => el.name === 'MacbookAir');
  
    console.log(myLaptop);

  → 한가지의 값을 찾기 (같은 값이 여러개라면 가장 위에 있는 것을 기준으로 선택) → 반복문이 중단

05. 서울 김서방 찾지 않기

• 실습 코드

    const seoul = ['김영훈', '김윤수', '김동욱', '강대위', '김영준',
      '김규식', '김태호', '김효신', '손효준', '김현승', '김재하', '김유나',
      '김재훈', '김혜선', '김민환', '김규리', '김소원', '김우재', '최영준',
      '김태순', '김종훈', '김성환', '김승용', '김지혜', '이승욱', '김도현',
      '김승규', '윤하은', '김유진', '김정민', '김혜정', '김예진', '김여진',
      '김성희', '김혜수', '김인선', '김상필', '김혜진', '서상원', '김상혜',
      '김민기', '김그루', '김희지'];
  
    // 여기에 코드를 작성하세요
    const notKims = seoul.filter((name) => {
      return name[0] !== '김';
    });
  
    console.log(notKims); // (6) ["강대위", "손효준", "최영준", "이승욱", "윤하은", "서상원"]

06. 이메일 찾기

• 실습 코드

    const nameInput = document.querySelector('#user-name');
    const phoneInput = document.querySelector('#phone-number');
    const findBtn = document.querySelector('#find');
  
    const data = [
      { userName: '막대기', phoneNumber: '01012341111', email: 'stick@go_do_it.kr' },
      { userName: 'young', phoneNumber: '01012342222', email: 'kang@go_do_it.kr' },
      { userName: '코린이', phoneNumber: '01012343333', email: 'corin2@go_do_it.kr' },
      { userName: 'captain', phoneNumber: '01012344444', email: 'crew@go_do_it.kr' },
      { userName: 'YH', phoneNumber: '01012345555', email: 'whyH@go_do_it.kr' },
      { userName: '망고쥬스', phoneNumber: '01012346666', email: 'drinkMango@go_do_it.kr' },
      { userName: 'nemoming', phoneNumber: '01012347777', email: 'ractAngle@go_do_it.kr' },
      { userName: '강그루', phoneNumber: '01012348888', email: 'riverTree@go_do_it.kr' },
      { userName: '개룩발룩', phoneNumber: '01012349999', email: 'checkShirts@go_do_it.kr' },
      { userName: '오렌지쥬스', phoneNumber: '01012341010', email: 'delmonte@go_do_it.kr' },
    ];
  
    function findEmail() {
      const nameValue = nameInput.value;
      const phoneValue = phoneInput.value;
  
      // 여기에 코드를 작성하세요
      const user = data.find((el) => nameValue === el.userName && phoneValue === el.phoneNumber);
  
      const message = user
        ? `${user.userName}님의 이메일은 ${user.email} 입니다.`
        : '이메일을 찾을 수 없습니다. 입력 정보를 다시 확인해 주세요.';
  
      alert(message);
    }
  
    findBtn.addEventListener('click', findEmail);

❗07. 배열 메소드 3 : some과 every

// some과 every
const numbers = [1, 3, 5, 7, 9];

// some: 조건을 만족하는 요소가 1개 이상 있는지
const someReturn = numbers.some((el, i) => {
    console.log('some: ', i);
    return el > 5;
});

// every: 모든 요소가 조건을 만족하는지 -> 조건을 만족하지 않는 요소가 있다면 바로 중단
const everyReturn = numbers.every((el, i) => {
    console.log('every: ', i);
    return el > 5;
});

console.log('some: ', someReturn);
console.log('every: ', everyReturn);

08. 이중 스파이가 있다

• 실습 코드

    const spait = [
      { codeName: 'ApplePie', members: ['스파이', '스파이', '스파이', '스파이', '스파이'] },
      { codeName: 'BigBoss', members: ['스파이', '스파이', '스과이', '스파이', '스파이'] },
      { codeName: 'CEO', members: ['스파이', '스파이', '스파이', '습하이', '스파이'] },
      { codeName: 'DeathNote', members: ['스파이', '스파이', '스파이', '스파이', '스파이'] },
      { codeName: 'EarlyBird', members: ['스파이', '스마이', '스파이', '스파이', '스파이'] },
      { codeName: 'Faker', members: ['스파이', '스파이', '스파이', '스파이', '스파이'] },
    ];
  
    function checkSpy(team) {
      // 여기에 코드를 작성하세요
      const result = team.members.some((member) => member !== '스파이');
      let message = '';
  
      if (result) {
        message = `[주의!] 팀 ${team.codeName} 에 이중 스파이가 있습니다!`;
      } else {
        message = `팀 ${team.codeName} 에는 이중 스파이가 없습니다.`;
      }
  
      console.log(message);
    }
  
    // 테스트 코드
    spait.forEach((team) => checkSpy(team));

❗09. 배열 메소드 4 : reduce

// reduce
const numbers = [1, 2, 3, 4];

numbers.reduce((acc, el, i, arr) => {
    return nextAccValue;
}, initialAccValue);

10. 세계적인 경력의 소유자

• 실습 코드

    const data = [ 
      { company: 'Naber', month: 3 },
      { company: 'Amajohn', month: 12 },
      { company: 'Coogle', month: 10 },
      { company: 'Ittel', month: 6 },
      { company: 'Sasung', month: 4 },
      { company: 'CaCao', month: 3 },
      { company: 'Microhard', month: 17 },
    ];
  
    // 여기에 코드를 작성하세요
    const totalCareer = data.reduce((acc, el) => acc + el.month, 0);
  
    console.log(`상원이의 경력은 총 ${totalCareer}개월입니다.`);

11. sort, reverse

• sort

    const numbers = [1, 10, 4, 21, 36000];
  
    // 오름차순 정렬
    numbers.sort((a, b) => a - b);
    console.log(numbers); // (5) [1, 4, 10, 21, 36000]
  
    // 내림차순 정렬
    numbers.sort((a, b) => b - a);
    console.log(numbers); // (5) [36000, 21, 10, 4, 1]

  → 메소드를 실행하는 원본 배열의 요소들을 정렬

• reverse

    const letters = ['a', 'c', 'b'];
    const numbers = [421, 721, 353];
  
    letters.reverse();
    numbers.reverse();
  
    console.log(letters); // (3) ["b", "c", "a"]
    console.log(numbers); // (3) [353, 721, 421]
  

  → 배열의 순서를 뒤집어 주는 메소드

  → 원본 배열의 요소들을 뒤집어 정렬

12. Map, Set

• Map

  • map.set(key, value): key를 이용해 value를 추가하는 메소드.

  • map.get(key): key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined를 반환.

  • map.has(key): key가 존재하면 true, 존재하지 않으면 false를 반환하는 메소드.

  • map.delete(key): key에 해당하는 값을 삭제하는 메소드.

  • map.clear(): Map 안의 모든 요소를 제거하는 메소드.

  • map.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)

    → 메소드를 통해 값을 다루기 때문에, 다양한 자료형을 key로 활용할 수 있다는 장점

• Set

  • set.add(value): 값을 추가하는 메소드. (메소드를 호출한 자리에는 추가된 값을 가진 Set 자신을 반환.)

  • set.has(value): Set 안에 값이 존재하면 true, 아니면 false를 반환하는 메소드.

  • set.delete(value): 값을 제거하는 메소드. (메소드를 호출한 자리에는 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환.)

  • set.clear(): Set 안의 모든 요소를 제거하는 메소드.

  • set.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)

    → ❗중복을 허용하지 않는 값들을 모을 때 유용

6️⃣ 자바스크립트 모듈

01. 모듈이란?

1. 코드를 효율적으로 관리할 수 있다!
2. 다른 프로그램에서 재사용할 수 있다!

02, 04. 모듈 파일의 조건

→ 다른 파일과 함수명이 동일하면 안 됨

→ 따라서, 모듈 스코프를 가지고 있어야 함 (위의 문제 해결) <script type=”module” src=”index.js”></script>

03. Live Server 설치하기

type=”module”을 사용했을 때 발생하는 에러 → Live Server로 서버를 통해 실행 시 해결

05. 모듈 문법

export를 통해 다른 파일에서 사용할 수 있도록 ➕ import { title, print } from ‘./other.js’;처럼 다른 파일에서 불러와서 사용

→ 여러개의 파일을 하나의 파일에 불러와서 html에서는 하나의 js만 사용

06. 메뉴 추가 기능 붙이기

• 실습 코드

    const addInput = document.querySelector('.add-input');
    const list = document.querySelector('.list');
  
    function add(data) {
      const inputValue = addInput.value;
      const index = data.length;
  
      const li = document.createElement('li');
      li.classList.add('item');
      li.innerHTML = `<b>${index + 1}</b>${inputValue}<button class="del-btn" data-index="${index}">x</button>`;
      list.append(li);
  
      data.push(inputValue);
  
      addInput.value = '';
      addInput.focus();
    }
  
    function emptyAlert() {
      alert('고민되는 메뉴를 입력해 주세요.');
      addInput.focus();
    }
  
    function maxAlert() {
      alert('메뉴는 최대 5개까지만 고민할 수 있습니다.');
      addInput.value = '';
    }
  
    // 아래 코드를 수정해 주세요
    export function addMenu(data) {
      const inputValue = addInput.value;
  
      if (inputValue === '') {
        emptyAlert();
      } else if (data.length > 4) {
        maxAlert();
      } else {
        add(data);
      }
    }

    // 여기에 코드를 작성하세요
    import { addMenu } from "./add.js";
  
    const data = [];
    const addBtn = document.querySelector('.add-btn');
    const addInput = document.querySelector('.add-input');
  
    addBtn.addEventListener('click', () => addMenu(data));
    addInput.addEventListener('keypress', (e) => e.code === 'Enter' && addMenu(data));

07~08. 이름 바꾸기

import { title **as** printerTitle, print } from ‘./other.js’;

• 실습 코드

    import { addMenu } from './add.js';
    // 여기에 코드를 작성하세요
    import { deleteMenuByIndex as deleteMenu } from './delete.js';
  
    const data = [];
    const addBtn = document.querySelector('.add-btn');
    const addInput = document.querySelector('.add-input');
    const list = document.querySelector('.list');
  
    addBtn.addEventListener('click', () => addMenu(data));
    addInput.addEventListener('keypress', (e) => e.code === 'Enter' && addMenu(data));
    list.addEventListener('click', ({ target }) => target.tagName === 'BUTTON' && deleteMenu(data, target.dataset.index));

09. 한꺼번에 다루기

import * as otherJS from ‘./other.js’;

→ console.log(otherJS.title);

export { title, print };

→ 이름 변경시 export할 때 미리 변경하기 ex. export { title **as** printerTitle , print };

10. 태그 정리하기

• 실습 코드

  import { addBtn, addInput, list } from './tags.js';

  import { addInput, list } from './tags.js';

  import { list } from './tags.js';

    const addBtn = document.querySelector('.add-btn');
    const addInput = document.querySelector('.add-input');
    const list = document.querySelector('.list');
  
    // 여기에 코드를 작성해 주세요. ( 모든 변수를 한 번에 export해 주세요. )
    export { addBtn, addInput, list };

11. default export

export default title;

→ 딱 한번만 사용 가능 (하나의 대상만을 export)

import title from ‘./other.js’;

→ 중괄호 없이 사용 가능

12. 간결하게 기능 붙이기

• 실습 코드

  export default addMenu;

  export default deleteMenu;

  export default rollMenu;

    import { addBtn, addInput, list, rollBtn } from './tags.js';
    // 여기에 코드를 작성하세요
    import addMenu from './add.js';
    import deleteMenu from './delete.js';
    import rollMenu from './roll.js';
  
    const data = [];
  
    addBtn.addEventListener('click', () => addMenu(data));
    addInput.addEventListener('keypress', (e) => e.code === 'Enter' && addMenu(data));
    list.addEventListener('click', ({ target }) => target.tagName === 'BUTTON' && deleteMenu(data, target.dataset.index));
    rollBtn.addEventListener('click', () => list.classList.contains('rolling') || rollMenu(data));

13. 복습과 활용

생략

14. 가져와서 다시 내보내기

• 실습 코드

    import { addBtn, addInput, list, rollBtn } from './tags.js';
    // 여기에 코드를 작성하세요
    import { addMenu, deleteMenu, rollMenu } from './functions.js';
  
    const data = [];
  
    addBtn.addEventListener('click', () => addMenu(data));
    addInput.addEventListener('keypress', (e) => e.code === 'Enter' && addMenu(data));
    list.addEventListener('click', ({ target }) => target.tagName === 'BUTTON' && deleteMenu(data, target.dataset.index));
    rollBtn.addEventListener('click', () => list.classList.contains('rolling') || rollMenu(data));

    // 여기에 코드를 작성해 주세요.
    import addMenu from './functions/add.js';
    import deleteMenu from './functions/delete.js';
    import rollMenu from './functions/roll.js';
  
    export { addMenu, deleteMenu, rollMenu };

이미지 프레임을 캡쳐하고 다운하는 라이브러리

html2canvas

→ 여러 벨로그를 통해 이번에 진행한 프로젝트에서 이미지 프레임 부분을 캡쳐 후 다운한 방법, 그리고 라이브러리를 소개하려고 한다.

문제 발생 (html-to-image)

사실 기존에는,, html-to-image라는 라이브러리를 사용하려고 했다. html2canvas 라이브러리를 사용하면서 적용해준 css가 작동하지 않는 경우를 서치를 통해 보았기 때문이다. 하지만 가장 큰 이슈로 인해 html2canvas를 사용하게 되었다.

safari 및 ios 에서 제대로 저장되지 않는 이슈

→ 위의 사진과 같이 프레임 없이 사진의 공간 부분만, 혹은 프레임과 라벨까지만 저장되는 경우가 대다수였고 랜덤으로 저장이 잘 되는 것을 확인할 수 있다.

• https://velog.io/@shinpanda/IOS-환경서-html-to-image-png-다운로드-문제1
• https://velog.io/@uuuuooii/html-to-image-iOS-Safari에서-이미지가-표시되지-않는-이슈

→ 위의 두 벨로그를 참고하여 일부 사파리에서는 캔버스를 제대로 렌더링하기 위해 약간의 지연이 생긴다는 것을 알 수 있었다. 하지만 렌더링 시간을 과하게 늘리는 방법도, 여러번 렌더링해서 시간을 늘리는 방법도 바람직하지 않으며 safari 환경에서만 수정한다고 해서 만능적인 해결이 될 순 없다는 것을 깨닫고 과감하게 라이브러리를 바꿔보기로 결정했다.

문제 해결 과정 (html2canvas)

정말 하루동안 붙잡고 있었던 게 무색하게도,, html2canvas를 사용하자마자 safari에서도 원하던 대로 잘 실행되기 시작했다. 하지만 바로 다른 에러를 마주할 수 있었다 🥲

html2canvas의 object-fix 미지원으로 인한 이미지 비율 문제

공식 문서에 따르면 현재 지원하지 않는 CSS 리스트는 다음과 같다.

• background-blend-mode
• border-image
• box-decoration-break
• box-shadow
• filter
• font-variant-ligatures
• mix-blend-mode
• object-fit
• repeating-linear-gradient()
• writing-mode
• zoom

하지만 프레임의 크기에 맞추어 사진을 넣어주고 싶었고 그렇기에 사용하고 있던 object-fit: cover; 라는 코드를 대체하여 코드를 작성할 필요가 있었다.

내가 사용한 방법은 2가지이고 그 중에서 2번 방법을 사용하였다.

1. div 태그의 background-image 의 url 에 이미지를 삽입하여 다운
2. props를 전달하여 경우에 따라 width, height 조절

• https://velog.io/@rachel28/next-image-html2canvas-html-to-image

→ 위의 벨로그를 참고하여 background-image 의 url 에 이미지를 삽입하여 (props로 url 전달) 이미지 비율을 맞추는 것에는 성공했지만 이미지의 해상도가 저하되는 문제가 발생하였다. 🙃 따라서, 다른 방법을 고안해야했고 그게 바로 2번 방법이었다

→ 벨로그에 추천한 patch-package를 사용해 직접 라이브러리에 object-fit 속성 코드를 삽입하는 방법은 배포 환경에서 사용해야하는 서비스이기 때문에 패스했다

object-fit: cover; 를 대체하는 방법

상위 요소에 overflow: hidden;을 적용을 한 후

가로가 긴 사진인지 세로가 긴 사진인지 판단 후 props를 전달하여 100%가 될 경우를 적용

useEffect(() => {
    const setDirection = (image) => {
      const width = image.naturalWidth;
      const height = image.naturalHeight;

      if (width === height) {
        // 가로와 세로 크기가 같을 경우
        setHorizontalImage(true); // 가로로 처리
      } else if (width > height) {
        setHorizontalImage(true); // 가로 이미지
      } else {
        setHorizontalImage(false); // 세로 이미지
      }
    };

    const image = document.getElementById(`img${index}`);
    if (image) {
      image.onload = () => {
        setDirection(image);
      };
    }
  }, [imagePreview]);


// 구조 부분
            <P.FilePreview $horizontal={horizontalImage}>
        {imagePreview && <img id={`img${index}`} src={imagePreview} alt="Preview" />}
      </P.FilePreview>

위와 같이 naturalWidth를 받아 이미지의 사이즈를 판단한 후 props를 전달하는 방식을 선택했다. styled-component를 사용하고 있었고 따라서 css는 다음과 같이 적용시켜주었다.

export const FilePreview = styled.div`
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;

  ${({ $horizontal }) =>
    $horizontal
      ? `
    img {
      height: 100%;
      width: auto;
    }
  `
      : `
    img {
      height: auto;
      width: 100%;
    }
  `}
`;

Input → heic 확장자 파일 문제 해결

테스트를 진행하다가 마주친 기묘한 문제,,

Input에서 아래와 같이 type을 파일로 받을 때 image/* 을 accept 시켜주어도 현재 아이폰 카메라로 찍히는 사진의 확장자인 heic는 허용해주지 않는 문제를 발견하였다. 따라서 .heic도 추가해주도록 코드를 추가적으로 작성했다.

<P.File
    type="file"
    name={`file${index}`}
    id={`file${index}`}
    accept="image/*, .heic"
    onChange={handleProfileImageChange}
/>

heic 이미지를 받을 수 있게 처리해주는 handleProfileImageChange 함수는 다음과 같다.

heic2any 라는 라이브러리를 사용

const handleProfileImageChange = async (event) => {
    const file = event.target.files[0];
    if (file) {
      // HEIC 이미지인지 확인
      const isHeic = file.type === "image/heic";

      if (isHeic) {
        // HEIC 이미지일 경우에만 디코딩
        const imageBuffer = await file.arrayBuffer();

        // 이미지를 Blob으로 변환
        const imageBlob = new Blob([imageBuffer]);
        const jpegBlob = await heic2any({ blob: imageBlob, toType: "image/jpeg" });

        // Blob URL 생성
        const imageUrl = URL.createObjectURL(jpegBlob);
        setImagePreview(index, imageUrl);
      } else {
        // HEIC가 아닌 경우는 기존 방식으로 처리
        const reader = new FileReader();
        reader.onloadend = () => {
          setImagePreview(index, reader.result);
        };
        reader.readAsDataURL(file);
      }
    }
  };

전체 해상도 문제 개선

사실 이 문제의 경우, 라이브러리를 변경해서 사용하고 싶어 서치하다가 해당 글을 발견하고 미리 적용해준 부분이다.

const canvas = await html2canvas(ref.current, { scale: 4 });

→ 중요한 부분은 { scale: 4 }을 통해서 다운받는 이미지의 사이즈를 4배로 키워 출력한 것이다.

const onCaptureClick = async () => {
    if (ref.current === null) {
      return;
    }

    const captureImg = async () => {
      if (ref.current) {
        const canvas = await html2canvas(ref.current, { scale: 4 });
        const element = document.createElement("a");
        element.href = canvas.toDataURL("image/png");
        element.download = "2024 근화제 찬란.png";
        element.click();
      }
    };

    captureImg();
  };

브라우저 별 다운로드 문제 해결

QA를 진행하면서 발견된 문제로,, PC와 아이폰 기본 브라우저인 사파리와 등을 제외하고 모바일 크롬 등에서 사진 다운로드가 진행되지 않은 문제가 있는 것을 발견할 수 있었다. 그래서 추가로 라이브러리를 사용해주었다.

file-saver

그래서 위의 코드를 아래와 같은 코드로 수정해주었다.

const onCaptureClick = async () => {
    if (ref.current === null) {
      return;
    }

    const captureImg = async () => {
      if (ref.current) {
        const canvas = await html2canvas(ref.current, { scale: 4 });
        canvas.toBlob((blob) => {
          if (blob !== null) {
            saveAs(blob, "2024 근화제 찬란.png");
          }
        });
      }
    };

    captureImg();
  };

최종 결과

위와 같이 원하는 프레임에 원하는 사진을 비율에 맞추어 잘 저장시켜준 것을 볼 수 있다.

즉, 설치해야 하는 라이브러리는 총 3가지이다.

1. html2canvas
2. heic2any
3. file-saver

일부 코드 (프레임 속 사진 박스 컴포넌트)

import React, { useState, useEffect } from "react";
import heic2any from "heic2any";
import * as P from "../styles/PhotoBoxStyle";

import PhotoCam from "../img/photo_cam_32x32.png";

function PhotoBox({ index, setImagePreview, imagePreview }) {
  const [horizontalImage, setHorizontalImage] = useState(false);

  const handleProfileImageChange = async (event) => {
    const file = event.target.files[0];
    if (file) {
      // HEIC 이미지인지 확인
      const isHeic = file.type === "image/heic";

      if (isHeic) {
        // HEIC 이미지일 경우에만 디코딩
        const imageBuffer = await file.arrayBuffer();

        // 이미지를 Blob으로 변환
        const imageBlob = new Blob([imageBuffer]);
        const jpegBlob = await heic2any({ blob: imageBlob, toType: "image/jpeg" });

        // Blob URL 생성
        const imageUrl = URL.createObjectURL(jpegBlob);
        setImagePreview(index, imageUrl);
      } else {
        // HEIC가 아닌 경우는 기존 방식으로 처리
        const reader = new FileReader();
        reader.onloadend = () => {
          setImagePreview(index, reader.result);
        };
        reader.readAsDataURL(file);
      }
    }
  };

  useEffect(() => {
    const setDirection = (image) => {
      const width = image.naturalWidth;
      const height = image.naturalHeight;

      if (width === height) {
        // 가로와 세로 크기가 같을 경우
        setHorizontalImage(true); // 가로로 처리
      } else if (width > height) {
        setHorizontalImage(true); // 가로 이미지
      } else {
        setHorizontalImage(false); // 세로 이미지
      }
    };

    const image = document.getElementById(`img${index}`);
    if (image) {
      image.onload = () => {
        setDirection(image);
      };
    }
  }, [imagePreview]);

  return (
    <P.PhotoBox>
      <P.UploadLabel htmlFor={`file${index}`}>
        {!imagePreview && <img src={PhotoCam} alt="이미지 업로드" />}
      </P.UploadLabel>
      <P.File
        type="file"
        name={`file${index}`}
        id={`file${index}`}
        accept="image/*, .heic"
        onChange={handleProfileImageChange}
      />
      <P.FilePreview $horizontal={horizontalImage}>
        {imagePreview && <img id={`img${index}`} src={imagePreview} alt="Preview" />}
      </P.FilePreview>
    </P.PhotoBox>
  );
}

export default PhotoBox;

import styled from "styled-components";

export const PhotoBox = styled.div`
  width: 152px;
  height: 184px;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
`;

export const UploadLabel = styled.label`
  width: 100%;
  height: 100%;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 15;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  img {
    width: 32px;
    height: 32px;
  }

  &:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }
`;

export const File = styled.input``;

export const FilePreview = styled.div`
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;

  ${({ $horizontal }) =>
    $horizontal
      ? `
    img {
      height: 100%;
      width: auto;
    }
  `
      : `
    img {
      height: auto;
      width: 100%;
    }
  `}
`;

화면을 캡쳐하여 프로젝트를 진행하고 싶은 누군가에게 도움이 되길,,, 🤧

Ch5. 프로그래밍과 데이터 in JavaScript

1️⃣ 객체

01~02. 객체와 프로퍼티

→ 객체 (object) : 다양한 값을 저장할 수 있음

{
    brandName: '코드잇',
    bornYear: 2017,
    isVeryNice: true,
    worstCourse: null
    // 값의 이름(key, property name): 값(value, property value) -> 속성(property)
}

️⃣ *Property Name 주의 사항!**

1. 첫 번째 글자는 반드시

문자, 밑줄(_), 달러 기호($) 중 하나로 시작! 2. 띄어쓰기 금지! 3. 하이픈(-) 금지! 4. But ‘1stCousre’처럼 따옴표로 감싸준다면 가능 → 문자열이기 때문

#️⃣ Property Value

1. 모든 자료형 가능
2. 값에 객체도 가능 (객체 안에 객체)

03. 객체에서 데이터 접근하기

1. 점 표기법 (objectName.propertyName) → 위의 1~3번을 지키지 않았을 경우 사용이 어려움

   ex. console.log(codeit.bornYear);

2. 대괄호 표기법 (objectName[’propertyName’])

   ex. console.log(codeit[’born Year’]); & console.log(codeit.bestCourse[’title’]);

• 없는 값을 표기하려고 한다면 undefined 출력

04. 영어 단어장 1

• 실습 코드

    let myVoca = {
        // 여기에 코드를 작성하세요
      function: '함수',
      variable: '변수',
      constant: '상수',
      local: '지역의',
      global: '전반적인'
    };
  
    console.log(myVoca);
    console.log(myVoca.local);
    console.log(myVoca.constant);
    console.log(myVoca.function);

05. 객체 다루기

1. 값 재할당 codeit.name = ‘codeit’;
2. 추가 가능 (마지막에 추가) codeit.ceo = ‘강영훈’;
3. 삭제 가능 delete codeit.worstCourse;
4. 객체 내부에 property 값 여부 확인하여 불린형 출력 console.log(’name’ in codeit); → true

06. 영어 단어장 2

• 실습 코드

    let myVoca = {
        function: '함수',
        variable: '변수',
        constant: '상수',
        local: '지역의',
        global: '전반적인',
    };
  
    // 1. 이미 외운 단어 3개를 삭제해 주세요
    // 여기에 코드를 작성하세요
    delete myVoca.function;
    delete myVoca.constant;
    delete myVoca.local;
  
    console.log(myVoca);
    console.log(myVoca.constant);
  
    // 2. 오늘 외울 단어 4개를 추가해 주세요
    // 여기에 코드를 작성하세요
    myVoca.extend = '확장하다';
    myVoca.export = '내보내다';
    myVoca.import = '불러오다';
    myVoca['default value'] = '기본값';
  
    console.log(myVoca);
    console.log(myVoca.export);
  
    // 3. default value의 뜻을 출력해 주세요
    // 여기에 코드를 작성하세요
    console.log(myVoca['default value'])

07. 객체와 메소드

메소드 (Method) : property 값으로 함수를 넣은 것

let greetings = {
    sayHello: function (name) {
        console.log(`Hello ${name}!`);
    },
    sayHi: function () {
        console.log('Hi!');
    },
    sayBye: function () {
        console.log('Bye!');
    },
}

greetings.sayHello('Codeit');
greetings['sayHello']('Codeit');

08. 영어 단어장 3

• 실습 코드

    let myVoca = {
      // 코드를 작성해 주세요.
      addVoca: function (eng, kor) {
        myVoca[eng] = kor;
      },
      deleteVoca: function (eng) {
        delete myVoca[eng];
      },
      printVoca: function (eng) {
        console.log(`"${eng}"의 뜻은 "${myVoca[eng]}"입니다.`);
      }
    };
  
    // addVoca메소드 테스트 코드
    myVoca.addVoca('parameter', '매개 변수');
    myVoca.addVoca('element', '요소');
    myVoca.addVoca('property', '속성');
    console.log(myVoca);
  
    // deleteVoca메소드 테스트 코드
    myVoca.deleteVoca('parameter');
    myVoca.deleteVoca('element');
    console.log(myVoca);
  
    // printVoca메소드 테스트 코드
    myVoca.printVoca('property');

09~10. for…in 반복문

let codeit = {
    name: '코드잇',
    bornYear: 2017,
    isVeryNice: true,
    worstCourse: null,
    bestCourse: '자바스크립트 프로그래밍 기초'
}

for (let k in codeit) {
    console.log(k);
    console.log(codeit[k]);
}

11. 순이들의 시험 결과

• 실습 코드

    let hyesoonScore = {
        '데이터 모델링의 이해': 10,
        '데이터 모델과 성능': 8,
        'SQL 기본': 22,
        'SQL 활용': 18,
        'SQL 최적화 기본 원리': 20,
    };
  
    let minsoonScore = {
        '데이터 모델링의 이해': 14,
        '데이터 모델과 성능': 8,
        'SQL 기본': 12,
        'SQL 활용': 4,
        'SQL 최적화 기본 원리': 16,
    };
  
    function passChecker(scoreObject) {
        // 여기에 코드를 작성하세요]
        let scoreTotal = 0;
  
      for (let key in scoreObject) {
        scoreTotal += scoreObject[key];
      }
  
      if(scoreTotal >= 60) {
        console.log('축하합니다! 합격입니다!');
      } else {
        console.log('아쉽지만 불합격입니다..');
      }
    }
  
    passChecker(hyesoonScore);
    passChecker(minsoonScore);

12~13. Date 객체

• 내장 객체 : 자바스크립트가 기본으로 가지고 있는 객체

1️⃣

// Date
let myDate = new Date();

console.log(myDate);

→ Thu May 30 2024 00:00:00 GMT+0900 (대한민국 표준시)

→ 요일 월 일 년도 시간 시간대

2️⃣

new Date(특정한 값); // 원하는 날짜 생성

// new Date(milliseconds)
let myDate = new Date(1000);

→ 1970년 1월 1일 00:00:00 UTC + 1000밀리초

3️⃣

// new Date('YYYY-MM-DD')
let myDate = new Date('2024-05-30');

// new Date('YYYY-MM-DDThh:mm:ss')
let myDate = new Date('2024-05-30T18:30:59');

→ Thu May 30 2024 00:00:00 GMT+0900 (대한민국 표준시)

→ Thu May 30 2024 18:30:59 GMT+0900 (대한민국 표준시)

4️⃣

new Date(YYYY, MM, DD, hh, mm, ss, ms);

→ 년도와 월 필수, 나머지 생략 가능 : new Date(YYYY, MM, 1, 0, 0, 0, 0);

🚨 month는 0부터 시작

5️⃣

// Date.getTime()
let myDate = newDate(2024, 05, 30, 18, 30, 59);

console.log(myDate.getTime());

→ myDate 객체가 1970년 1월 1일 00:00:00 UTC 부터 몇 밀리초 지났는지? (타임스탬프 Time Stamp)

️⃣ *지금으로부터 몇 초, 몇 분, 몇 시간이 차이나는지 계산**

let myDate = newDate(2024, 05, 30, 18, 30, 59);
let today = new Date();

let timeDiff = myDate.getTime() - today.getTime();

console.log(timeDiff + '밀리초');
console.log(timeDiff + '초');
console.log(timeDiff / 1000 / 60 + '분');
console.log(timeDiff / 1000 / 60 / 60 + '시간');

➕ 추가적인 메서드

1. myDate.getFullYear();
2. myDate.getMonth(); → 0부터 시작하는 것 주의
3. myDate.getDate(); → 일자
4. myDate.getDay(); → 요일 (일요일부터 0 ~ 6까지)
5. myDate.getHours();
6. myDate.getMinutes();
7. myDate.getSeconds();
8. myDate.getMilliseconds();
9. myDate.toLocaleDateString(); → myDate가 가진 날짜에 대한 정보 (년. 월. 일)
10. myDate.toLocaleTimeString(); → myDate가 가진 시간에 대한 정보 (시:분:초)
11. myDate.toLocaleString(); → myDate가 가진 날짜와 시간에 대한 정보 (년. 월. 일 시:분:초)
12. Date.now() === myDate.getTime() → Date.now() 현 시점의 날짜 값

etc..

14. 우수사원 재상이

• 실습 코드

    let today = new Date(2112, 7, 24);
    let jaeSangStart = new Date(2109, 6, 1);
  
    function workDayCalc(startDate) {
        // 여기에 코드를 작성하세요
        let timeDiff = today - startDate;
        let timeDate = timeDiff / 1000 / 60 / 60 / 24 + 1;
        console.log(`오늘은 입사한 지 ${timeDate}일째 되는 날 입니다.`);
    }
  
    workDayCalc(jaeSangStart);

2️⃣ 배열

01. 배열

// 배열 (Array)
let courseRanking = [
    '자바스크립트 프로그래밍 기초',
    'Git으로 배우는 버전 관리',
    '컴퓨터 개론',
    '파이썬 프로그래밍 기초'
]

// index == PropertyName (0~...)
console.log(배열이름[index])
console.log(courseRanking[0]);

→ 값 : 요소 (element)

02. 배열 인덱싱 연습하기

• 실습 코드

    let dataType = ['number', 'string', 'boolean', 'null', 'undefined', 'object'];
  
    // 여기에 코드를 작성하세요
    for(let i = 0; i < 6; i++) {
      console.log(dataType[i]);
    }

03. 배열 다루기

1. 배열명.length, 배열명[’length’] 배열의 길이
2. 배열명[없는 인덱스] = ‘새로운 값’ 배열에 요소 추가 → 없는 인덱스를 건너뛴다면 empty로 표시, 문제 발생 가능성 높음
3. 배열명[수정할 값의 인덱스] = ‘수정 값’ 배열 값의 재할당 가능
4. delete 배열명[삭제할 값의 인덱스] empty로 값만 삭제되고 제대로된 삭제 X

04. 온도 바꾸기

• 실습 코드

    let celsiusTemps = [27, 25, 26, 22, 28, 27, 21];
    let fahrenheitTemps = [];
  
    // 여기에 코드를 작성하세요
    for (let i = 0; i < celsiusTemps.length; i++) {
      fahrenheitTemps[i] = ( celsiusTemps[i] * 9 / 5 ) + 32;
    }
  
    // fahrenheitTemps 테스트
    console.log(fahrenheitTemps);

05~09. 배열 메소드

️⃣ *splice**

1. members.splice(4); 배열의 5번째 값을 완전히 삭제 but 5번째부터 마지막 값까지 모든 값을 삭제한다는 문제
2. members.splice(2, 3); 삭제할 개수를 조절 가능 → 2번 인덱스부터 3개의 값 삭제
3. members.splice(2, 3, 'NiceCodeit', 'HiCodeit'); 삭제한 자리에 요소 추가 (여러개 가능 → 이때 뒤는 순서가 밀림)
4. members.splice(2, 0, 'NiceCodeit', 'HiCodeit'); 삭제되지 않고 2번 인덱스에 요소 추가
5. members.splice(2, 1, 'NiceCodeit'); 2번 인덱스의 값을 수정 (삭제하고 추가함으로써, 여러개 수정도 가능)

#️⃣ 경우에 따라 더 간편한 메소드

1. members.shift(); 배열의 첫 요소를 삭제
2. members.pop(); 배열의 마지막 요소를 삭제
3. members.unshift(추가할 값); 배열의 첫 요소로 값 추가
4. members.push(추가할 값); 배열의 마지막 요소로 값 추가

▶️ 추가 메소드

1. 배열에서 특정 값 찾는 메소드
   1. brands.indexOf('Kakao')
      1. 만약 포함되어 있다면, item이 있는 인덱스가 리턴
      2. 포함되어 있지 않다면, -1이 리턴
      3. 여러 번 포함되어 있으면, 처음 발견된 인덱스가 리턴
   2. brands.lastIndexOf('Kakao') 탐색을 뒤에서부터 진행
   3. brands.includes('Kakao') true/false로 여부만 확인
2. 배열 뒤집기
   1. brands.reverse(); 배열의 순서를 뒤집는 메소드

10. for…of 반복문

// for...of

for (변수 of 변수) {
    동작부분;
}

let influencer = ['suwonlog', 'small.tiger', 'Minam.ludens', 'cu_convenience24']

for (let element of influencer) {
    console.log(element);
}

for (let index in influencer) {
    console.log(influencer[index]);
}

11. 투표 집계하기

• 실습 코드

    // 투표 결과 리스트
    let votes = [
      '이재식', '이재식', '이규하', '이규하', '이규하',
      '이재식', '이재식', '이규하', '이규하', '이재식',
      '이규하', '이규하', '이규하', '이규하', '이재식',
      '이재식', '이규하', '이재식', '이재식', '이재식',
      '이재식', '이재식', '이규하', '이규하', '이규하',
      '이규하', '이규하', '이재식', '이규하', '이규하',
      '이규하', '이규하', '이재식', '이규하', '이규하',
      '이규하', '이재식', '이재식', '이재식', '이규하',
    ];
  
    // 후보별 득표수 객체
    let voteCounter = {};
  
    // votes 배열을 이용해서 voteCounter 객체를 정리하기
    for (let name of votes) {
      // 여기에 코드를 작성하세요
      if (voteCounter[name]) {
        voteCounter[name]++;
      } else {
        voteCounter[name] = 1;
      }
    }
  
    // 후보별 득표수 출력
    console.log(voteCounter);

12. 다차원 배열

// 다차원 배열 (multidimenstional array)
let twoDimensional = [[1, 2], [3, 4]];

console.log(twoDimensional[0][1]); // 2

13. 팀 나누기

• 실습 코드

    let groups = [
        ['영준', '캡틴'], 
        ['태순', '우재'],
        ['재훈', '지웅'],
        ['윤형', '동욱'],
        ['규식', '소원'],
    ];
  
    let teams = [
        [],
        [],
    ];
  
    // 여기에 코드를 작성하세요
    for(let i = 0; i < groups.length; i++) {
      for(let j = 0; j < groups[i].length; j++) {
        teams[j][i] = groups[i][j];
      }
    }
  
    // 테스트 코드
    console.log(teams[0]);
    console.log(teams[1]);

3️⃣ 자료형 심화

01. 다양한 숫자 표기법

1. let millionaire = 1000000000;
2. let myNumber = 1e9; 지수 표기법
3. let hex1 = 0xff; & let hex2 = 0xFF; // 255 16진법 (Hexadecimal)
4. let octal = 0o377; // 255 8진법 (Octal)
5. let binary = 0b11111111; // 255 2진법 (binary numeral system)

02~03. 숫자형 메소드

1. myNumber.toFixed(3); 0~100 사이의 숫자만큼 소수점 아래의 자릿수를 고정 (반올림, 없는 숫자는 0으로 표시)
   1. Number(myNumber.toFixed(3)); string 값으로 변환시키기 때문에 다시 number로 전환해주는 처리 필요 → 이때는 0 표시 X
   2. +myNumber.toFixed(3); 위의 Number와 같은 역할
2. myNumber.toString(2); 파라미터에 전달하는 숫자(2~36 사이)의 진법으로 변환해주는 메소드
   1. 255..toString(2); 위와 같은데 변수를 정의하지 않고 사용하는 방법
   2. (255).toString(2); 위와 동일

04. Math 객체

1. Math.abs(10); && Math.abs(-10); // 10 절댓값
2. Math.max(2, -1, 4, 5, 0); 최댓값
3. Math.min(2, -1, 4, 5, 0); 최솟값
4. Math.pow(2, 3); 거듭제곱 (2의 3제곱)
5. Math.sqrt(25); //5 제곱근
6. Math.round(2.3); 소수점 부분 반올림
7. Math.floor(2.4); 소수점 부분 버림
8. Math.ceil(2.4); 소수점 부분 올림
9. Math.random(); 0 이상 1 미만의 값이 랜덤으로 리턴

05. 바보 자바스크립트?

→ 0과 1로 코드를 변환하면서 생기는 무한 소수 문제로 인해 오류 발생

06. 이자 계산기

• 실습 코드

    // 여기에 코드를 작성하세요
    function interestCalculator(rate, payment, term) {
      let interest = payment * term * (term + 1) / 2 * rate / 12;
      console.log(Math.round(interest));
    }
  
    // 이율이 4.3%일 때 매월 80만원씩 24개월 납입할 경우
    interestCalculator(0.043, 800000, 24);
  
    // 이율이 4.3%일 때 매월 60만원씩 24개월 납입할 경우
    interestCalculator(0.043, 600000, 24);

07~08. 문자열 심화

1. myString.length; length 프로퍼티, 문자열의 길이 (공백 포함)
2. 문자열 요소 접근
   1. myString[3]; 대괄호 표기법
   2. myString.charAt(3); charAt 메소드
3. 문자열 요소 탐색
   1. myString.indexOf(’i’); 앞 부터 탐색
   2. myString.lastIndexOf(’i’); 뒤 부터 탐색
4. 문자열 대소문자 변환 (통일)
   1. myString.toUpperCase(); 대문자
   2. myString.toLowerCase(); 소문자
5. 양 끝 공백 제거
   1. myString.trim(); trim 메서드
6. 부분 문자열 접근 slice(start, end)
   1. myString.slice(0, 2); 0~1번 인덱스의 문자열 접근
   2. myString.slice(3); 시작 지점부터 끝까지 접근
   3. myString.slice(); 문자열 전체 접근

→ 배열은 'mutable(바뀔 수 있는)' 자료형 VS 문자열은 'immutable(바뀔 수 없는)' 자료형

09. 그래, 우리 함께

• 실습 코드

    let lyrics = "[재석]너에게 나 하고 싶었던 말 고마워 미안해 함께 있어서 할 수 있어서 웃을 수 있어[준하] 정말 고마웠어 내 손을 놓지 않아줘서 힘을 내볼게 함께 있다면 두렵지 않아[홍철] 내가 늘 웃으니까 내가 우습나 봐 하지만 웃을 거야 날 보고 웃는 너 좋아[명수] 자꾸만 도망치고 싶은데 저 화려한 큰 무대 위에 설 수 있을까? 자신 없어..[하하] 지금까지 걸어온 이 길을 의심하지는 마 잘못 든 길이 때론 지도를 만들었잖아[형돈] 혼자 걷는 이 길이 막막하겠지만 느리게 걷는 거야 천천히 도착해도 돼[길] 술 한 잔 하자는 친구의 말도 의미 없는 인사처럼 슬프게 들릴 때 날 찾아와";
  
    let hyungdon = null;
  
    // 여기에 코드를 작성하세요
    let startIndex = lyrics.indexOf('[형돈]');
    let endIndex = lyrics.indexOf('[길]');
  
    hyungdon = lyrics.slice(startIndex, endIndex);
  
    // 테스트 코드
    console.log(hyungdon);

10~11. 기본형과 참조형

• 기본형 (Primitive Type) → 변수 = 값

  : Number, String, Boolean, Null, Undefined

• 참조형 (Reference Type) → 변수 = 주소값

  : Object

12. 참조형 복사하기

// 참조형 복사하기 (Reference Type Copy) -> 복사하여 독립적으로 사용
let numbers1 = [1, 2, 3];
let numbers2 = numbers1.slice(); // slice의 특성을 이용하여 복사

numbers2.push(4);

console.log(numbers1);
console.log(numbers2);

// 객체의 경우 사용할 수 없는 slice를 대체
let course1 = {
    title: '파이썬 프로그래밍 기초',
    language: 'Python'
}

let course2 = {};

for (let key in course1) {
    course2[key] = course1[key];
}

course2.title = '알고리즘의 정석';

console.log(course1);
console.log(course2);

// 위의 for문을 함수로 만들어 효율적으로 작성
function cloneObject(object) {
    let temp = {};

    for (let key in object) {
        temp[key] = object[key];
    }

    return temp;
}

let course1 = {
    title: '파이썬 프로그래밍 기초',
    language: 'Python'
}

let course2 = cloneObject(course1);

course2.title = '알고리즘의 정석';

console.log(course1);
console.log(course2);

But 이 경우 객체 안에 배열이 있다면 참조형이 적용되어 course1에도 추가되는 문제 발생

아래의 코드로 해결 가능

function cloneObject(object) {
    if (object == null || typeof object !== 'object') {
        return object;
    }

    let temp;
    if (Array.isArray(object)) {
        temp = [];
    } else {
        temp = {};
    }

    for (let key of Object.keys(object)) {
        temp[key] = cloneObject(object[key]);
    }

    return temp;
}

13. 레시피 만들기

• 실습 코드

    // 아래 코드중 잘못된 부분을 수정해 주세요
    let espresso = ['espresso'];
  
    let americano = espresso.slice();
    americano.push('water');
  
    let caffeLatte = espresso.slice();
    caffeLatte.push('milk');
  
    // 여기에 caffeMocha와 vanillaLatte 레시피를 만들어 주세요
    let caffeMocha = caffeLatte.slice();
    caffeMocha.push('chocolateSyrup');
  
    let vanillaLatte = caffeLatte.slice();
    vanillaLatte.push('vanillaSyrup');
  
    // 테스트 코드
    console.log(espresso);
    console.log(americano);
    console.log(caffeLatte);
    console.log(caffeMocha);
    console.log(vanillaLatte);

14~15. const, 변수와 상수 사이

상수 (constant) → const → 변수 (variable)

• 변수로 입력받아서 상수로 사용하는 경우가 많음

변수 const

myName

VS

상수 const

MY_NAME

16. 변수, 그땐 그랬지

var 변수

• 키워드 다음에 변수이름을 써서 선언
• 키워드와 변수이름, 그리고 할당연산자와 값으로 선언과 동시에 값을 할당 가능
• 중복 선언이 가능 → 값 재할당 X
• Scope의 문제
  • 지역변수의 구분이 함수에만 있기 때문에 if, for, while, switch 등 다양한 상황에서 선언한 변수가 자칫, 전역변수의 역할
• 변수가 끌어올려 지는 현상을 '호이스팅(hoisting)'

4️⃣ 과제로 복습하기

01. 팩토리얼

• 실습 코드

    function factorial(n) {
      let result = 1;
  
        // 여기에 코드를 작성해 주세요.
      for(let i = 1; i <= n; i++) {
        result *= i;
      }
  
      return result;
    }
  
    // 테스트 코드
    console.log(factorial(12));
    console.log(factorial(6));
    console.log(factorial(3));
    console.log(factorial(0));

02. 거스름돈 구하기

• 실습 코드

    function calculateChange(payment, cost) {
      // 여기에 코드를 작성하세요
      let leftMoney = payment - cost;
      let bigFive = 0, bigOne = 0, five = 0, one = 0;
  
      if (leftMoney % 50000 != 0) {
        bigFive += Math.floor(leftMoney / 50000);
        leftMoney -= 50000 * bigFive;
      }
      if (leftMoney % 10000 != 0) {
        bigOne += Math.floor(leftMoney / 10000);
        leftMoney -= 10000 * bigOne;
      }
      if (leftMoney % 5000 != 0) {
        five += Math.floor(leftMoney / 5000);
        leftMoney -= 5000 * five;
      }
      one += Math.floor(leftMoney / 1000);
  
      console.log(`50000원 지폐: ${bigFive}장`);
      console.log(`10000원 지폐: ${bigOne}장`);
      console.log(`5000원 지폐: ${five}장`);
      console.log(`1000원 지폐: ${one}장`);
    }
  
    // 테스트 코드
    calculateChange(100000, 33000);
    console.log('');
    calculateChange(500000, 378000);

03. 팰린드롬

• 실습 코드

    function isPalindrome(word) {
      // 여기에 코드를 작성하세요
      for (let i = 0; i < Math.floor(word.length / 2); i++) {
        let left = word[i];
        let right = word[word.length - 1 - i];
        if (left !== right) {
          return false;
        }
      }
      return true;
    }
  
    // 테스트 코드
    console.log(isPalindrome("racecar"));
    console.log(isPalindrome("stars"));
    console.log(isPalindrome("기러기"));
    console.log(isPalindrome("123321"));
    console.log(isPalindrome("hello"));
    console.log(isPalindrome("kayak"));
  

Ch4. 프로그래밍 핵심 개념 in JavaScript

1️⃣ 자료형

01~02. 숫자형

• 기본적인 사칙 연산의 우선순위를 따름

→ 나머지 : %

→ 거듭제곱 : **

03~06. 문자열

• 코드 내에서 구분하기 위한 ‘’ “”

→ 문자열에서 따옴표를 사용하는 방법

1. console.log(”I’m Iron man”);
2. console.log(”He said “I\’m Iron man\””);
3. console.log(’He said “I\’m Iron man\”‘);
4. console.log(”He said \“I\’m Iron man\””);
5. console.log(’He said \“I\’m Iron man\”’);
6. console.log(He said \“I\’m Iron man\”);g

07~10. 불린형

→ 불린 (Boolean)

같다 : === / 같지 않다 : !==

AND : && / OR : || / NOT : !

11~12. typeof 연산자

typeof 값 → 값의 자료형을 표시 (number string boolean function 등)

• NaN : not a number

13. 연산자 우선순위

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Operator_precedence

14~17. 형 변환 (Type Conversion)

String, Number, Boolean

console.log(Number(’10’) + Number(’5’)); → 15

console.log(String(10) + String(5)); → 105

true → 1 / false → 0, 빈 문자열, NaN (falsy 값)

산술 연산 (+, -, , /, %, *)

• 문자열 계산이 우선 순위 : console.log(4 + ‘2’); → 42
• boolean의 경우 true false에 따라 숫자로 변환 후 계산

관계 비교 연산 (<, <=, >, >=)

• 비교가 불가능한 경우에도 false

같음 비교 연산 (===, !==, ==, !=)

• 일치, 불일치 (!==)
• 동등, 부등 (!=)

18~19. 템플릿 문자열

→ template : 일정한 틀, 형식

let year = 2024;
let month = 5;
let day = 30;

console.log(`생년월일은 ${year}년 ${month}월 ${day}일 입니다.`)

let myNumber = 3;

function getTwice(x) {
    return x * 2;
}

console.log(`${myNumber}의 두 배는 ${getTwice(myNumber)}입니다.`);

20~21. null과 undefined

• 값이 없다
  • null : 의도적으로 값을 비우는 경우 (의도적인 없음!)
  • undefined : 값이 주어지지 않은 경우 (처음부터 없음!)

22. 자료형 응용하기

• 실습 코드

    // 숫자형과 문자열 재료
    let material1 = 3;
    let material2 = '3';
    let material3 = 10;
    let material4 = '4';
    let material5 = 4;
  
    // 연산 결과
    let result1;
    let result2;
  
    // 연산을 통해 result1에 문자열 '34'를, result2에 숫자형 34를 할당
    // 여기에 코드를 작성하세요
    result1 = material2 + material4;
    result2 = material1 * material3 + material5
  
    // 테스트 코드
    console.log(result1);
    console.log(typeof result1);
    console.log(result2);
    console.log(typeof result2);

2️⃣ 추상화

01. 할당 연산자

// 할당 연산자 (Assignment operators)
let x = 5;

x = x - 2;
console.log(x);

02. 복합 할당 연산자

// 다음 세 줄은 같은 의미입니다
x = x + 1;
x += 1;
x++;

03. 함수의 실행 순서

• 위 → 아래로 실행
• 함수는 선언했을 때가 끝이 아니라 실행 필요

04~05. 함수 부려먹기

• 실습 코드 1

    // 여기에 코드를 작성하세요
    function logParticipant(name) {
      console.log(`${name}(이)가 대화에 참여했습니다.`);
    }
  
    // 테스트 코드
    logParticipant('동수');
    logParticipant('윤하');
    logParticipant('재준');
    logParticipant('동훈');
    logParticipant('영희');
    logParticipant('신욱');

• 실습 코드 2

    // 여기에 코드를 작성하세요
    function expressMultiplication(num1, num2) {
      let result = num1 * num2;
  
      console.log(`${num1} * ${num2} = ${result}`);
    }
  
    // 테스트 코드
    expressMultiplication(3, 4);
    expressMultiplication(3, 2);
    expressMultiplication(7, 5);
    expressMultiplication(8, 9);
    expressMultiplication(5, 5);
    expressMultiplication(9, 9);

06. return문 제대로 이해하기

• return문의 역할
  1. 결과값을 반환
  2. 함수의 실행을 중단 (이후에 작성된 코드를 Dead Code라고 함)

07~08. return과 console.log의 차이

return

: 함수를 실행하고 어떤 값을 돌려주는 것

VS

console.log

: 콘솔의 어떤 값을 출력해주는 것

09. 함수 부려먹기

• 실습 코드 3

    // 여기에 코드를 작성하세요
    function calculateRectangleArea(num1, num2) {
      return num1 * num2;
    }
  
    // 테스트 코드
    let area1 = calculateRectangleArea(3, 4);  // 가로 3, 세로 4인 직사각형의 넓이 계산
    let area2 = calculateRectangleArea(5, 8);  // 가로 5, 세로 8인 직사각형의 넓이 계산
    let area3 = calculateRectangleArea(7, 2);  // 가로 7, 세로 2인 직사각형의 넓이 계산
  
    console.log(`Area1: ${area1}, Area2: ${area2}, Area3: ${area3}`);

10. 옵셔널 파라미터

• 값을 전달하지 않았을 때 설정해두는 기본 파라미터

function introduce(nationality = ‘한국’) {}

11. 세트 메뉴 주문하기

• 실습 코드

    // 여기에 코드를 작성하세요
    function orderSetMenu(sandwich, drink = '스프라이트') {
      console.log(`주문하신 ${sandwich}, ${drink} 세트 메뉴 나왔습니다!`);
    }
  
    // 테스트 코드
    orderSetMenu('코드웨잇 클럽');
    orderSetMenu('터키베이컨 아보카도', '코카콜라');
    orderSetMenu('코드웨잇 멜트');
    orderSetMenu('이탈리안 비엠티', '닥터페퍼');
    orderSetMenu('에그마요', '환타 오렌지');

12~13. 변수의 scope

• Scope : 범위, 영역
• {} : 블록문 (Block Statement)
  • 로컬 변수, 지역 변수 (Local Variable) → 전역 변수보다 우선순위가 상위
• 전체 영역 → 글로벌 변수, 전역 변수 (Global Variable)

14~15. 상수

• 상수 (Constant) : 절대 변하지 않는 일정한 값

  const pi = 3.14; → 값 재할당 불가

  이름 규칙 필요

16. 함수 변수 복습하기

• 실습 코드

    // 아래에 adultTag, teenagerTag, errorTag, transferTag라는 변수들을 작성해 주세요
    let adultTag = '삑!';
    let teenagerTag = '삑삑!';
    let transferTag = '환승입니다.'
    let errorTag = '삑삑삑!'
  
    // 아래에 tagCase파라미터를 가지는 tagNotification() 함수를 작성해 주세요
    function tagNotification(notice) {
      console.log(`${notice}`)
    }
  
    // 테스트 코드
    tagNotification(adultTag);
    tagNotification(teenagerTag);
    tagNotification(transferTag);
    tagNotification(errorTag);
    tagNotification(adultTag);

3️⃣ 제어문

01. if문

if (조건부분) {
    동작부분
} else {
    조건이 아닐 때 동작부분
}

02. 롤러코스터, 탈 수 있을까?

• 실습 코드

    // 파라미터 height을 활용하는 checkHeight 함수를 완성하세요
    function checkHeight(height) {
        // 여기에 코드를 작성하세요
        if(height >= 140) {
          console.log('탑승이 가능합니다.');
        } else {
          console.log('탑승이 불가능합니다.');
        }
    }
  
    // 테스트 코드
    checkHeight(140);
    checkHeight(135);
    checkHeight(170);

03. else if문

if (조건부분) {
    동작부분
} else if (다른 조건부분) {
    다른 조건일 때 동작부분
} else {
    모든 조건이 아닐 때 동작부분
}

→ 간결하고 읽기 쉬운 코드 작성 가능 (not 중첩)

04. 학점 계산기

• 실습 코드

    function printGrade(midtermScore, finalScore){
        let totalScore = midtermScore + finalScore;
      // 여기에 코드를 작성하세요
      if (totalScore >= 90) {
        console.log('A');
      } else if (totalScore >= 80) {
        console.log('B');
      } else if (totalScore >= 70) {
        console.log('C');
      } else if (totalScore >= 60) {
        console.log('D');
      } else {
        console.log('F');
      }
    }
  
    // 테스트 코드
    printGrade(25, 35);
    printGrade(50, 45);
    printGrade(29, 24);
    printGrade(37, 42);

05. 서열 정리

• 실습 코드

    // 나의 나이와, 나의 성별을 저장하는 변수
    let myAge = 26;
    let myGender = 'male';
  
    // 호칭을 담은 변수
    let callOlderBrother = '형';
    let callOlderSister = '누나';
    let callFriend = '친구';
    let callYoungerSister = '여동생';
    let callYoungerBrother = '남동생';
  
    // 상대방의 나이와 성별에 따른 호칭을 리턴하는 함수 whatShouldICall를 완성하세요
    function whatShouldICallYou(yourAge, yourGender) {
      // 여기에 코드를 작성하세요
      if(yourAge == 26) {
        return callFriend;
      } else if(yourAge < 26) {
        if(yourGender == 'male') {
          return callYoungerBrother;
        } else {
          return callYoungerSister;
        }
      } else {
        if(yourGender == 'male') {
          return callOlderBrother;
        } else {
          return callOlderSister;
        }
      }
    }
  
    // 테스트 코드
    let result1 = whatShouldICallYou(25, 'female');
    let result2 = whatShouldICallYou(20, 'male');
    let result3 = whatShouldICallYou(26, 'female');
    let result4 = whatShouldICallYou(30, 'male');
    let result5 = whatShouldICallYou(31, 'female');
  
    console.log(result1);
    console.log(result2);
    console.log(result3);
    console.log(result4);
    console.log(result5);

06. switch문

switch (비교할 값) {
    case 조건값 1 :
        동작부분;
        break;
    case 조건값 2 :
        동작부분;
        break;
    default :
        동작부분;
}

→ break : case별로 동작을 하고 끊어주는 역할

→ default : 위의 모든 조건을 만족하지 않을 경우 실행

07. switch문 vs if문

범위를 만족하는 조건식을 만들 때는 if문을 활용하는 것이 효과적이고, 특정값을 만족하는 조건식을 만들 때는 switch문이 효과적

• if문으로 대체할 때는 반드시 등호 세 개를 사용해 일치 비교를 해야 한다
• switch문은 값들을 비교할 때 자료형을 엄격하게 구분한다

08. 등급별 티켓 가격

• 실습 코드

    // 각 등급별 가격
    let VIPPrice = 15;
    let RPrice = 13;
    let SPrice = 10;
    let APrice = 8;
  
    // 각 등급에 맞는 가격을 출력하는 함수 checkPrice를 완성하세요
    function checkPrice(grade) {
        // 여기에 코드를 작성하세요
        let price;
  
        switch(grade) {
          case 'VIP' :
            price = VIPPrice;
            console.log(`${grade}석은 ${price}만 원입니다.`)
            break;
          case 'R' :
            price = RPrice;
            console.log(`${grade}석은 ${price}만 원입니다.`)
            break;
          case 'S' :
            price = SPrice;
            console.log(`${grade}석은 ${price}만 원입니다.`)
            break;
          case 'A' :
            price = APrice;
            console.log(`${grade}석은 ${price}만 원입니다.`)
            break;
          default :
            console.log('VIP, R, S, A 중에서 하나를 선택해 주세요.');
        }
    }
  
    // 테스트 코드
    checkPrice('R');
    checkPrice('VIP');
    checkPrice('S');
    checkPrice('A');
    checkPrice('B');

09~12. for 반복문

for(초기화 부분; 조건부분; 추가동작부분;) {
    동작부분;
}

for(let i = 0; i < 10; i++) {
    console.log(`${i} 코드잇 최고!`);
}

→ 초기화 부분 : 생성한 변수는 for문의 로컬 변수, 지역 변수

• 필수 X → 글로벌 변수, 전역 변수를 사용해도 ok
• ex. for (; i <= 10; i++)

→ 추가 동작 부분

• 필수 X but i++; 과 같이 증가시키는 부분이 들어가도록 → 조건과 관련된 부분은 소괄호에 모아두는 것이 적합

13~15. while 반복문

while (조건부분) {
    동작부분
}

let i = 0;
while (i <= 10) {
    console.log(`${i} 코드잇 최고!`);
    i++;
}

→ 조건 부분이 충족하지 않을 때까지 동작 부분을 반복하여 실행

16~17. break와 continue

• break : 반복이 실행되는 중에 중단할 수 있는 역할
• continue : 아래 동작이 실행되지 않고 다음 단계로 넘어가게 해주는 역할

18. 구구단 만들기

• 실습 코드

    // 여기에 코드를 작성하세요
    let result;
  
    for(let i = 1; i < 10; i++) {
      for(let j = 1; j < 10; j++) {
        result = i * j;
        console.log(`${i} * ${j} = ${result}`);
      }
    }

19. 피보나치 수열

• 실습 코드

    // 여기에 코드를 작성하세요
    let num1 = 1;
    let num2 = 1;
    console.log(num1);
    console.log(num2);
  
    for (let i = 2; i < 50; i++) {
        let result = num1 + num2;
        console.log(result);
        num1 = num2;
        num2 = result;
    }

Ch3. 프로그래밍 시작하기 in JavaScript

1️⃣ 자바스크립트 첫 걸음

01. 자바스크립트 소개

→ 웹사이트를 만들고 싶다면 반드시 배워야 하는 프로그래밍 언어

• web 개발 및 다양한 분야에도 사용

02. 첫 번째 자바스크립트 코드

→ console.log(15)

03. 자바스크립트 프로그래밍 도구들

→ VSCode 사용

2️⃣ 프로그래밍 기본 개념

01. 세미콜론 (;)

→ 문장을 종료하는 방법

• 자바스크립트의 경우 줄 바꿈일 때 자동으로 세미콜론 처리를 해줌 (같은 줄에서는 사용하여 구분)
• 문장 끝에 반드시 사용

02. 코멘트

→ 주석

• 필요한만큼만 간결하게 사용
  • 어떤 의도로 코드가 작성 되었는지 설명할 때
  • 구현한 코드가 어떤 동작을 하는지 기록할 때
• console.log(10 + 5); // 15를 출력하는 코드입니다.
• console.log(10 + 5); /* 15를 출력하는 코드입니다. */

03. 자료형 개요

• 프로그래밍이란?
  • 컴퓨터를 통해 복잡한 계산을 하는 것

→ 자료형 (Data Type)

• 숫자 (Number)
  • 정수 (Integer)
  • 소수 (floating point)
• 문자열 (String) : 양 끝의 따옴표를 통일하여 사용
  • ex. “Hello” + “Codeit” → HelloCodeit
• 불린 (Boolean)
  • true & false : 어떤 조건에 의한 결과값

04. 추상화 개요

→ 추상화(Abstraction) : 구체적인 정보에서 꼭 필요한 핵심만 뽑아내는 것

ex. 지도

• 복잡한 것들을 목적에 맞게 단순화하는 것
  • 목적을 명확히
  • 불필요한 것들은 숨기기
  • 핵심만 드러내기

05. 변수 (Variable)

→ 변수를 먼저 선언 / 값을 저장하는 것

• let 변수명;

06. 작명 가이드

Rules

(1) JavaScript 식별자는 '문자(a-z, A-Z)', '밑줄(_)' 혹은 '달러 기호($)'로 시작해야 합니다. 두 번째 글자부터는 '숫자(0-9)'도 가능합니다.

(2) '대문자'와 '소문자'는 구별합니다. myname과 myName은 다른 이름입니다.

(3) '예약어(JavaScript가 찜해놓은 단어)'는 사용하면 안 됩니다. 예를 들어서 if, for, let 같은 것들이 있습니다. 강의를 듣다 보면 어떤 예약어가 있는지 차차 알게 되실 겁니다.

Recommend

(1) 의미 없는 이름은 좋지 않습니다.

(2) 너무 추상적인 이름은 좋지 않습니다.

(3) 모든 변수 이름은 'camelCase'로 쓰는 것이 좋습니다.

→ camelCase : 첫 번째 글자는 소문자로 하고, 띄어쓰기가 있는 각 단어의 첫 문자를 대문자로 표기하는 방식

07. 칼로리 계산기

• 실습 코드

    // 여기에 코드를 작성하세요
    let espresso = 10;
    let milk = 170;
    let chocolateSyrup = 50;
    let whippedCream = 60;
  
    // 메뉴별 칼로리 테스트
    console.log(espresso); // 에스프레소 칼로리
    console.log(espresso + milk); // 라떼 칼로리
    console.log(espresso + chocolateSyrup + milk); // 모카 칼로리
    console.log(espresso + chocolateSyrup + milk + whippedCream); // 모카(휘핑 추가) 칼로리

08. 함수

// 함수 선언
function 함수이름() { 
    명령;
    명령;
};

// 함수 호출
함수이름();

09. 자랑스러운 애국가

• 실습 코드

    // 여기에 코드를 작성하세요
    function printChorus() {
      console.log('무궁화 삼천리 화려 강산');
      console.log('대한 사람 대한으로 길이 보전하세');
    }
  
    // 애국가 가사
    console.log('1절');
    console.log('동해 물과 백두산이 마르고 닳도록');
    console.log('하느님이 보우하사 우리나라 만세');
    printChorus();
  
    console.log('2절');
    console.log('남산 위에 저 소나무 철갑을 두른 듯');
    console.log('바람서리 불변함은 우리 기상일세');
    printChorus();
  
    console.log('3절');
    console.log('가을 하늘 공활한데 높고 구름 없이');
    console.log('밝은 달은 우리 가슴 일편단심일세');
    printChorus();
  
    console.log('4절');
    console.log('이 기상과 이 맘으로 충성을 다하여');
    console.log('괴로우나 즐거우나 나라 사랑하세');
    printChorus();

10. 파라미터

→ Parameter (매개변수)

// 함수 선언
function 함수이름(파라미터) { 
    console.log(파라미터);
};

// 함수 호출
함수이름(값);

11. 내 노트북 용량은?

• 실습 코드

    // 여기에 코드를 작성하세요
    function teraToGiga(data) {
      let resultGiga = data * 1024;
      console.log('2TB는');
      console.log(resultGiga + 'GB 입니다.');
    }
  
    function teraToMega(data) {
      let resultMega = data * 1024 * 1024;
      console.log('2TB는');
      console.log(resultMega + 'MB 입니다.');
    }
  
    // TB -> GB 테스트
    teraToGiga(2);
    // TB -> MB 테스트
    teraToMega(2);

12. 여러 개의 파라미터

// 함수 선언
function 함수이름(파라미터, 파라미터2) { 
    console.log(파라미터 + 파라미터2);
};

// 함수 호출
함수이름(값, 값2);

13. 나의 체질량지수는?

• 실습 코드

    // 여기에 코드를 작성하세요
    function bmiCalculator(name, weight, height) {
      let bmi = weight / (height * height / 10000);
      console.log(name + '님의 체질량지수는 ' + bmi + '입니다.');
    }
  
    // 테스트 코드
    bmiCalculator('홀쭉이', 43.52, 160);
    bmiCalculator('코린이', 61.25, 175);
    bmiCalculator('통통이', 77.76, 180);

14. return문

Input → 정해진 일(함수 function) → Output (return - 반환 값)

// 함수 선언
function 함수이름() { 
    return 값;
};

// 함수 호출
console.log(함수이름());

15. 1년 뒤엔 얼마를 받을까?

• 실습 코드

    // 여기에 코드를 작성하세요
    function interestCalculator(amount, term, rate) {
      return amount * term * rate / 100;
    }
  
    // 조건 입력 테스트
    let myMoney = 3650000; // 맡긴 금액 (원)
    let saveTerm = 1; // 맡기는 기간 (년)
    let interestRate = 4; // 이자율 (%)
  
    // 수령액 계산 테스트
    let myInterest = interestCalculator(myMoney, saveTerm, interestRate);
    let totalMoney = myMoney + myInterest;
  
    // 출력 테스트
    console.log('맡긴 금액은 ' + myMoney + '원 입니다.');
    console.log('이자는 ' + myInterest + '원 입니다.');
    console.log('최종 받을 금액은 ' + totalMoney + '원 입니다.');

프론트엔드 프레임워크란? 웹사이트나 애플리케이션의 사용자 인터페이스를 쉽게 디자인, 구축하도록 돕는 소프트웨어 도구 모음

1️⃣ 프론트엔드 프레임워크가 제공하는 요소들

• UI 컴포넌트

  → 재사용 가능한 UI 컴포넌트(버튼, 폼, 카드 등)를 제공 → 일일이 다시 개발할 필요 X

• 상태 관리

  → 사용자와 상호작용하는 동안 다루는 상태를 효과적으로 관리하기 위한 방법이 포함 가능

• 라우팅

  → 싱글 페이지 애플리케이션(SPA)에서는 클라이언트 측 라우팅 관리를 위한 라이브러리나 모듈을 제공

• 데이터 바인딩

  → UI는 애플리케이션의 상태가 변경될 때 자동으로 업데이트 및 관리

• 생명주기 메서드

  → 컴포넌트ㆍ페이지가 생성, 업데이트, 소멸하는 과정에서 특정 로직을 실행 가능하도록 제공

• 유틸리티와 헬퍼

  → DOM 조작, Ajax 요청, 데이터 처리 등의 복잡한 작업을 쉽게 처리할 수 있도록 제공

2️⃣ 프론트엔드 프레임워크 사용 순위 (2022 기준)

→ 2022년 기준으로 실제 사용하는 상위 3개의 프론트엔드 프레임워크는 React, Angular, Vue.js

→ 이외에도 라이징 프레임워크인 Next.js 존재

3️⃣ 프레임워크 비교

→ CSR(Client-side Rendering) : SPA(Single Page Application) 기법을 사용하여 페이지를 렌더링

• 화면을 그리는 렌더링이 클라이언트에게서 발생 (클라이언트의 브라우저에서 페이지 발생)
• 페이지 간 전환이 부드러워지는 장점
• HTML과 JS를 다운로드 받는동안 클라이언트는 렌더링이 불가능, 즉 첫 페이지의 로딩이 느리다는 단점

→ SSR(Server Side Rendering)

• 서버 측에서 즉시 렌더링 가능하게끔 가공한 html 파일을 만들어 브라우저에게 보내고, 브라우저는 이를 다운하여 즉각 화면에 렌더링할 수 있는 방식
• 초기 로드 시 필요한 최소한의 코드만 다운로드하여 실행 → 앱의 초기 로딩 속도를 개선함

[출처]

• 2024에 가장 핫한 프론트엔드 프레임워크 순위는? | 작성자 코드잇
• https://velog.io/@dev_harrison/프론트엔드-프레임워크Front-End-Frameworks
• https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/
• https://megastudyitacademy.tistory.com/64
• https://haesoo9410.tistory.com/329
• https://blog.naver.com/hello-assemble/223406523154
• https://yeongjaekong.tistory.com/32#google_vignette

모바일 웹 사이트를 만들어줄 때 모든 페이지를 반응형으로 제작하기에는 어려움이 따른다. 그렇기 때문에 PC에만 특정 CSS 스타일을 적용하여 PC 환경에서 특정 값(ex- 375px)의 화면 크기를 가지고 배경에는 색을 넣어주는 작업을 종종 해준다.

그럼 이때 PC와 모바일 환경을 어떻게 구분해서 특정 CSS 값을 적용해주는 걸까?

CSS의 미디어쿼리

CSS의 미디어쿼리를 통해서 PC와 모바일 환경을 구분할 수 있다. 그 중에서도 중요한 속성은 @media 중 hover와 pointer이다.

1. hover
   • 사용자의 주 입력 장치(마우스 등)이 요소 위에 호버할 수 있는지 구분하는 속성이다.
   • none → 호버 X → 모바일 환경
   • hover → 호버 O → PC 환경

호버의 여부에 따라 가능하다면 PC 환경, 가능하지 않다면 모바일 환경이라고 생각할 수 있다. 그것을 바탕으로 아래와 같이 코드를 작성한다면 어딘가에선 문제가 발생한다,,

@media (hover: hover) {
 /* PC에 적용할 CSS */
}

“나는 잘 되는데?”라고 생각할 수 있지만 갤럭시 유저라면 “왜 PC에만 적용되는 것이 아니라 모바일에도 이 CSS가 적용이 되었지?”라는 문제에 직면할 수 있다 🤧

(실제로 배포를 위한 프로젝트를 진행하면서 이 문제를 해결하기 위해 며칠을 서치하여 해결했다,,)

그러나 일부 Android 버전에는 길게 누를 때 호버링을 에뮬레이트하는 기능이 있어 hover를 지원하는 것으로 판단한다. 따라서 같은 코드라도 아이폰과 갤럭시 유저가 다른 화면을 가지게 되는 결과가 나타난다. 모든 사용자에게 동일한 UX를 제공하려면 두 번째 조건을 추가해야한다.

1. pointer
   • 사용자가 포인팅 장치(마우스 등)를 가지는지 구분하는 속성이다.
   • none → 포인팅 장치 X → 모바일 환경
   • coarse → 부정확한 포인팅 장치(ex- 터치 스크린의 손가락) → 모바일 환경
   • fine → 정확한 포인팅 장치 (ex- 마우스) → PC 환경

마우스처럼 정확한 포인팅 장치가 있다는 것을 확인한다면, 정확히 PC에만 CSS 적용이 가능해진다.

@media (hover: hover) and (pointer: fine) {
 /* PC에 적용할 CSS */
}

@media (hover: hover) and (pointer: fine) 안에 들어가는 CSS 내용들은 이제 정확히 PC에만 적용이 된다! 드디어 갤럭시 유저에게도 PC 버전 스타일이 아닌 모바일 스타일이 적용된다.

PC에만 CSS가 적용된 최종 화면

이번 프로젝트에서는 PC 화면 뒤에 다른 디자인 없이 페이지의 크기(375px)만 지정해주었다. (각 페이지에 배경색이 주어진 경우가 대부분이었어서 구분선이 필요하지 않았다)

• 해당 부분 관련 코드

@media (hover: hover) and (pointer: fine) {
  .page-space {
    width: 375px;
  }
}

• PC 화면

• 모바일 화면

결론

갤럭시 에러를 만나지 않고 정확히 PC에만 CSS를 적용해주고 싶다면 아래의 코드를 사용하면 된다 😎

@media (hover: hover) and (pointer: fine) {
 /* PC에 적용할 CSS */
}

참고 링크

• https://ykwan0714.github.io/터치-디바이스-모바일에서-hover-제거하기/
• https://doqtqu.tistory.com/355

3.0 Understanding State

State → (값이 바뀔) 데이터가 저장되는 곳

• index.html → not good

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
        const root = document.getElementById("root");
        let counter = 0;
        function countUp() {
          counter = counter + 1;
          render();
        }
        function render() {
          ReactDOM.render(<Container />, root);
        }
        const Container = () => (
          <div>
            <h3>Total clicks: {counter}</h3>
            <button onClick={countUp}>Click me</button>
          </div>
        );
        render();
      </script>
    </html>

→ Total clicks: {counter} : {counter}로 변수를 가져올 수 있음

→ 초기의 렌더링만으로 끝내는 것이 아니라 리렌더링을 해줘야 변하는 UI 렌더링 가능

→ 현재 코드는 계속해서 모든 부분을 render 해주기 때문에 좋은 방식 X

→ vanillaJS와 달리 React.js는 UI에서 바뀐 부분만 업데이트 가능 (ex. button 업데이트 X, click 숫자만 업데이트)

3.1 setState part One

• index.html → Best way (not final)

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
        const root = document.getElementById("root");
        function App() {
          const [counter, modifier] = React.useState(0);
          return (
            <div>
              <h3>Total clicks: {counter}</h3>
              <button>Click me</button>
            </div>
          );
        }
        ReactDOM.render(<App />, root);
      </script>
    </html>

→ 함수를 계속 불러줄 필요 없이 데이터를 보관하고 자동으로 리렌더링하는 최고의 방법

→ const data = React.useState(0); : [초기값(0), 함수] 2개가 담겨있는 배열, 함수의 역할

3.2 setState part Two

• index.html → Best way (final)

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
        const root = document.getElementById("root");
        function App() {
          const [counter, setCounter] = React.useState(0);
          const onClick = () => {
            setCounter(counter + 1);
          };
          return (
            <div>
              <h3>Total clicks: {counter}</h3>
              <button onClick={onClick}>Click me</button>
            </div>
          );
        }
        ReactDOM.render(<App />, root);
      </script>
    </html>

→ React.useState : counter데이터를 숫자형 데이터로 전달, 데이터 값 바꿀 함수 같이 전달 (+ 함수로 바꾼 값 리렌더링)

3.3 Recap

위와 동일

3.4 State Functions

• index.html

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
        const root = document.getElementById("root");
        function App() {
          const [counter, setCounter] = React.useState(0);
          const onClick = () => {
            // setCounter(counter + 1);
            setCounter((current) => current + 1);
          };
          return (
            <div>
              <h3>Total clicks: {counter}</h3>
              <button onClick={onClick}>Click me</button>
            </div>
          );
        }
        ReactDOM.render(<App />, root);
      </script>
    </html>

→ 1. setCounter(10); : 새 값으로 변경 (하지만 더 이상의 업데이트 X)

→ 2. setCounter(counter + 1); : 이전 값을 이용해서 현재 값을 계산 (계속 업데이트 O)

→ 3. setCounter((current) => current + 1); : Best Way / 확실히 현재 값 보장 (안전)

3.5 Inputs and State

• index.html → Super Converter 中 Minutes ↔ Hours (1)

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
        const root = document.getElementById("root");
        function App() {
          const [minutes, setMinutes] = React.useState(0);
          const onChange = (event) => {
            setMinutes(event.target.value);
          };
          return (
            <div>
              <h1>Super Converter</h1>
              <label htmlFor="minutes">Minutes</label>
              <input value={minutes} id="minutes" placeholder="Minutes" type="number" onChange={onChange} />
              <h4>You want to convert {minutes}</h4>
              <label htmlFor="hours">Hours</label>
              <input id="hours" placeholder="Hours" type="number" />
            </div>
          );
        }
        ReactDOM.render(<App />, root);
      </script>
    </html>

→ NOT class YES className / NOT for YES htmlFor

→ 기본 input은 uncontrolled : value 값을 통제할 수 없음 → state 생성 필요

→ event.target.value : event를 사용하여 input 값 중 target의 value값 사용

3.6 State Practice part One

• index.html → Super Converter 中 Minutes ↔ Hours (2)

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
        const root = document.getElementById("root");
        function App() {
          const [minutes, setMinutes] = React.useState(0);
          const onChange = (event) => {
            setMinutes(event.target.value);
          };
          const reset = () => setMinutes(0);
  
          return (
            <div>
              <h1>Super Converter</h1>
              <div>
                <label htmlFor="minutes">Minutes</label>
                <input value={minutes} id="minutes" placeholder="Minutes" type="number" onChange={onChange} />
              </div>
  
              <div>
                <label htmlFor="hours">Hours</label>
                <input value={Math.round(minutes / 60)} id="hours" placeholder="Hours" type="number" disabled />
              </div>
  
              <button onClick={reset}>Reset</button>
            </div>
          );
        }
        ReactDOM.render(<App />, root);
      </script>
    </html>

→ Math.round() : 값 반올림해주는 함수

→ const reset = () => setMinutes(0); : 0으로 초기화

→ Hours : onChange 리스너가 없기 때문에 input 값 변경 불가 disabled 로 인해 입력 불가

3.7 State Practice part Two

• index.html → Super Converter 中 Minutes ↔ Hours (3)

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
        const root = document.getElementById("root");
        function App() {
          const [amount, setAmount] = React.useState(0);
          const [flipped, setFlipped] = React.useState(false);
          const onChange = (event) => {
            setAmount(event.target.value);
          };
          const reset = () => setAmount(0);
          const onFlip = () => {
            reset();
            setFlipped((current) => !current);
          };
  
          return (
            <div>
              <h1>Super Converter</h1>
              <div>
                <label htmlFor="minutes">Minutes</label>
                <input value={flipped ? amount * 60 : amount} id="minutes" placeholder="Minutes" type="number" onChange={onChange} disabled={flipped} />
              </div>
  
              <div>
                <label htmlFor="hours">Hours</label>
                <input value={flipped ? amount : Math.round(amount / 60)} id="hours" placeholder="Hours" type="number" onChange={onChange} disabled={!flipped} />
              </div>
  
              <button onClick={reset}>Reset</button>
              <button onClick={onFlip}>Flip</button>
            </div>
          );
        }
        ReactDOM.render(<App />, root);
      </script>
    </html>

→ filp click : minutes 입력 hours 입력 불가 ↔ minutes 입력 불가 hours 입력

→ disabled={flipped === true}/disabled={!flipped} : disabled를 통해 flipped props 전달

3.8 Recap

• index.html → Super Converter 中 Minutes ↔ Hours (4)

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
        const root = document.getElementById("root");
        function App() {
          const [amount, setAmount] = React.useState(0);
          const [inverted, setInverted] = React.useState(false);
          const onChange = (event) => {
            setAmount(event.target.value);
          };
          const reset = () => setAmount(0);
          const onInvert = () => {
            reset();
            setInverted((current) => !current);
          };
  
          return (
            <div>
              <h1>Super Converter</h1>
              <div>
                <label htmlFor="minutes">Minutes</label>
                <input value={inverted ? amount * 60 : amount} id="minutes" placeholder="Minutes" type="number" onChange={onChange} disabled={inverted} />
              </div>
  
              <div>
                <label htmlFor="hours">Hours</label>
                <input value={inverted ? amount : Math.round(amount / 60)} id="hours" placeholder="Hours" type="number" onChange={onChange} disabled={!inverted} />
              </div>
  
              <button onClick={reset}>Reset</button>
              <button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
            </div>
          );
        }
        ReactDOM.render(<App />, root);
      </script>
    </html>

→ flipped를 inverted로 변경 및 버튼 {inverted ? "Turn back" : "Invert"} 추가

3.9 Final Practice and Recap

• index.html → Super Converter 中 Minutes ↔ Hours + Km ↔ Miles

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
        const root = document.getElementById("root");
        function MinutesToHours() {
          const [amount, setAmount] = React.useState(0);
          const [inverted, setInverted] = React.useState(false);
          const onChange = (event) => {
            setAmount(event.target.value);
          };
          const reset = () => setAmount(0);
          const onInvert = () => {
            reset();
            setInverted((current) => !current);
          };
  
          return (
            <div>
              <div>
                <label htmlFor="minutes">Minutes</label>
                <input value={inverted ? amount * 60 : amount} id="minutes" placeholder="Minutes" type="number" onChange={onChange} disabled={inverted} />
              </div>
  
              <div>
                <label htmlFor="hours">Hours</label>
                <input value={inverted ? amount : Math.round(amount / 60)} id="hours" placeholder="Hours" type="number" onChange={onChange} disabled={!inverted} />
              </div>
  
              <button onClick={reset}>Reset</button>
              <button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
            </div>
          );
        }
        function KmToMiles() {
          return <h3>KM 2 M</h3>;
        }
        function App() {
          const [index, setIndex] = React.useState("xx");
          const onSelect = (event) => {
            setIndex(event.target.value);
          };
  
          return (
            <div>
              <h1>Super Converter</h1>
              <select value={index} onChange={onSelect}>
                <option value="xx">Select your units</option>
                <option value="0">Minutes & Hours</option>
                <option value="1">Km & Miles</option>
              </select>
              <hr />
              {index === "xx" ? "Please select your units" : null}
              {index === "0" ? <MinutesToHours /> : null}
              {index === "1" ? <KmToMiles /> : null}
            </div>
          );
        }
        ReactDOM.render(<App />, root);
      </script>
    </html>

→ select, value를 활용하여 메뉴바에서 선택하는 것으로 컴포넌트 불러오기

→ const [index, setIndex] = React.useState(); : useState에 아무 값도 지정해주지 않았기 때문에 처음에는 어느 화면도 X

#4 PROPS

4.0 Props

• index.html → 버튼 속 text만 변경해서 같은 컴포넌트 사용 中 using props.banana

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
        const root = document.getElementById("root");
        function Btn(props) {
          return (
            <button
              style={{
                backgroundColor: "tomato",
                color: "white",
                padding: "10px 20px",
                border: 0,
                borderRadius: 10,
              }}
            >
              {props.banana}
            </button>
          );
        }
  
        function App() {
          return (
            <div>
              <Btn banana="Save Changes" />
              <Btn banana="Continue" />
            </div>
          );
        }
        ReactDOM.render(<App />, root);
      </script>
    </html>

→ 컴포넌트 : 어떤 JSX를 반환하는 함수

→ props : 버튼으로부터 전달받는 properties / 인자

→ Btn({banana:"Save Changes"}) = <Btn banana="Save Changes" />

→ 현재 이 코드에서 props는 버튼이 전달 받는 유일한, 첫번째 인자 → 값은 모두 가져옴

• index.html → using {text, big}

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
        const root = document.getElementById("root");
        function Btn({ text, big }) {
          return (
            <button
              style={{
                backgroundColor: "tomato",
                color: "white",
                padding: "10px 20px",
                border: 0,
                borderRadius: 10,
                fontSize: big ? 18 : 16,
              }}
            >
              {text}
            </button>
          );
        }
  
        function App() {
          return (
            <div>
              <Btn text="Save Changes" big={true} />
              <Btn text="Continue" big={false} />
            </div>
          );
        }
        ReactDOM.render(<App />, root);
      </script>
    </html>

→ props는 오브젝트이기 때문에 property를 오브젝트로부터 꺼내는 shortcut 사용

4.1 Memo

• index.html → (+) function

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
        const root = document.getElementById("root");
        function Btn({ text, changeValue }) {
          return (
            <button
              onClick={changeValue}
              style={{
                backgroundColor: "tomato",
                color: "white",
                padding: "10px 20px",
                border: 0,
                borderRadius: 10,
              }}
            >
              {text}
            </button>
          );
        }
        const MemorizedBtn = React.memo(Btn);
  
        function App() {
          const [value, setValue] = React.useState("Save Changes");
          const changeValue = () => setValue("Revert Changes");
  
          return (
            <div>
              <MemorizedBtn text={value} changeValue={changeValue} />
              <MemorizedBtn text="Continue" />
            </div>
          );
        }
        ReactDOM.render(<App />, root);
      </script>
    </html>

→ props에 넣을 수 있는 것 : string, boolean, function 등

→ props는 일일이 추가해줘야 사용 가능

→ <Btn text="{value}" onClick={changeValue} /> : onClick은 이벤트리스너 X 하나의 props 이해를 위해 changeValue={changeValue}로 작성

→ React Memo : props가 변경되지 않을 때 컴포넌트를 리렌더링 하지 않고 싶을 때 사용

→ const MemorizedBtn = React.memo(Btn); : Btn을 Memo하여 변경된 것만 리렌더링

4.2 Prop Types

• index.html → using Prop Types

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
        const root = document.getElementById("root");
        function Btn({ text, fontSize = 16 }) {
          return (
            <button
              style={{
                backgroundColor: "tomato",
                color: "white",
                padding: "10px 20px",
                border: 0,
                borderRadius: 10,
                fontSize,
              }}
            >
              {text}
            </button>
          );
        }
        Btn.propTypes = {
          text: PropTypes.string.isRequired,
          fontSize: PropTypes.number,
        };
  
        function App() {
          return (
            <div>
              <Btn text="Save Changes" fontSize={18} />
              <Btn text="Continue" />
            </div>
          );
        }
        ReactDOM.render(<App />, root);
      </script>
    </html>

→ props에 타입을 지정해주어서 콘솔에서 오류 확인 가능 (다른 타입 작성하는 실수 방지)

4.3 Recap

위와 동일

#5 CREATE REACT APP

5.0 Introduction

→ create-react-app : React.js를 만드는 쉬운 방법

→ npx create-react-app 폴더명 : 리액트 앱 생성 명령어

→ npm start : 리액트 실행

→ package.json : 대부분의 내용이 담겨있음

→ 모든 폴더는 src 폴더 안에 위치

→ index.js : 가장 중요한 파일

→ 필요없는 파일 삭제 후 깨끗하게 시작 (App.js, index.js만 필요)

5.1 Tour of CRA

• App.js

    import Button from "./Button";
    import styles from "./App.module.css";
  
    function App() {
      return (
        <div>
          <h1 className={styles.title}>Welcome back!!!</h1>
          <Button text={"Continue"} />
        </div>
      );
    }
  
    export default App;

• App.module.css

    .title {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      font-size: 18px;
    }

• Button.js

    import PropTypes from "prop-types";
    import styles from "./Button.module.css";
  
    function Button({ text }) {
      return <button className={styles.btn}>{text}</button>;
    }
  
    Button.propTypes = {
      text: PropTypes.string.isRequired,
    };
  
    export default Button;

• Button.module.css

    .btn {
      color: white;
      background-color: tomato;
    }

• index.js

    import React from "react";
    import ReactDOM from "react-dom/client";
    import App from "./App";
  
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );

→ npm install prop-types : prop types를 사용하기 위해 설치하는 명령어

→ style을 모듈로 사용함으로써 같은 btn이라는 이름을 사용해도 다르게 적용 가능 (랜덤 방식으로 자동 생성 기능 존재)

#6 EFFECTS

6.0 Introduction

• App.js

    import { useState } from "react";
  
    function App() {
      const [counter, setValue] = useState(0);
      const onClick = () => setValue((prev) => prev + 1);
      console.log("call an api");
  
      return (
        <div>
          <h1>{counter}</h1>
          <button onClick={onClick}>click me</button>
        </div>
      );
    }
  
    export default App;

→ state가 변경될 때마다 리렌더링을 하게 되면 렌더링을 하고 싶지 않은 순간에도 진행

→ ex) API를 가져올 때 처음에만 렌더링하고 이후에 다시 정보를 가져올 필요 X

→ 첫번째 component render에서만 특정 코드들이 실행 (state 변화해도 코드 재실행 X)

→ useEffect 사용

6.1 useEffect

• App.js

    import { useState, useEffect } from "react";
  
    function App() {
      const [counter, setValue] = useState(0);
      const onClick = () => setValue((prev) => prev + 1);
      console.log("i run all the time");
  
      const iRunOnlyOnce = () => {
        console.log("call the API");
      };
      useEffect(iRunOnlyOnce, []);
  
      return (
        <div>
          <h1>{counter}</h1>
          <button onClick={onClick}>click me</button>
        </div>
      );
    }
  
    export default App;

→ useEffect : 두 개의 argument를 가지는 function (1. 우리가 실행하고 싶은 코드 / 2. dependency(ies) : 리액트가 변화를 지켜볼 인자)

→ 코드가 딱 한번만 실행될 수 있도록 보호하는 역할

6.2 Deps

• App.js

    import { useState, useEffect } from "react";
  
    function App() {
      const [counter, setValue] = useState(0);
      const onClick = () => setValue((prev) => prev + 1);
      // console.log("i run all the time");
  
      const [keyword, setKeyword] = useState("");
      const onChange = (event) => setKeyword(event.target.value);
  
      const iRunOnlyOnce = () => {
        // console.log("call the API");
        console.log("I run only once.");
      };
      useEffect(iRunOnlyOnce, []);
  
      useEffect(() => {
        // if (keyword !== "" && keyword.length > 5) {
        //   console.log("SEARCH FOR", keyword);
        // }
        console.log("I run when 'keyword' changes.");
      }, [keyword]);
  
      useEffect(() => {
        console.log("I run when 'counter' changes.");
      }, [counter]);
  
      useEffect(() => {
        console.log("I run when keyword & counter changes.");
      }, [keyword, counter]);
  
      return (
        <div>
          <input value={keyword} onChange={onChange} type="text" placeholder="Search here..." />
          <h1>{counter}</h1>
          <button onClick={onClick}>click me</button>
        </div>
      );
    }
  
    export default App;

→ useEffect를 사용하지 않았을 때 검색어를 입력할 때마다 모든게 리렌더링됨 (혹은 click 버튼을 누를 때마다 입력되어 있는 검색어를 같이 리렌더링)

useEffect(() => {
    console.log("SEARCH FOR", keyword);
  }, **[keyword]**);

→ 키워드가 변화할 때만 코드를 실행(리렌더링)

→ [] 처럼 두번째 argument가 비어있을 때, 지켜볼게 없기 때문에 처음 한번만 실행

→ if (keyword !== "" && keyword.length > 5) : 키워드가 없거나 짧을 때 실행 X 조건

→ [keyword, counter] : array이기 때문에 2가지의 변화를 확인할 수도 O

Memo VS useEffect

→ Memo : props가 변경되지 않았을 때 리렌더링 X

→ useEffect : props가 변경될 때 함수 실행 혹은 컴포넌트의 시작, 끝에만 실행

6.3 Recap

→ state를 변화시킬 때 component를 재실행

→ useEffect는 react.js가 동작하는 관점에서 방어막

6.4 Cleanup

• App.js

    import { useState, useEffect } from "react";
  
    function Hello() {
      // function byFn() {
      //   console.log("bye :(");
      // }
      // function hiFn() {
      //   console.log("created :)");
      //   return byFn;
      // }
  
      useEffect(() => {
        console.log("hi :)");
        return () => console.log("bye :(");
      }, []);
      return <h1>Hello</h1>;
    }
  
    function App() {
      const [showing, setShowing] = useState(false);
      const onClick = () => setShowing((prev) => !prev);
      return (
        <div>
          {showing ? <Hello /> : null}
          <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
        </div>
      );
    }
  
    export default App;

→ {showing ? <Hello /> : null} : 코드를 숨기는 것이 아니라 destroy 시키고 새로 생성

useEffect(() => {
    console.log("created :)");
    **return** () => console.log("destroyed :(");
  }, []);

→ Cleanup function return : 함수인데 component가 destroy될 때 뭔가 할 수 있도록 해 줌

→ ex) 컴포넌트가 없어질 때 분석 결과를 보내고 싶으면 분석 API 사용 등

→ 자주 사용하지는 X

1.1 Why React

React JS 자체가 작고, 대부분의 경우 React JS는 그냥 Javascript

1.2 Requirements

바닐라 JS (HTML, CSS, Javascript)

Node JS

브라우저 & Visual Studio Code

#2 THE BASICS OF REACT

2.1 Before React

• vanilla.html

    <!DOCTYPE html>
    <html>
      <body>
        <span>Total clicks: 0</span>
        <button id="btn">Click me</button>
      </body>
      <script>
        let counter = 0;
        const button = document.getElementById("btn");
        const span = document.querySelector("span");
        function handleClick() {
          //   console.log("i have been clicked");
          counter = counter + 1;
          span.innerText = `Total clicks: ${counter}`;
        }
        button.addEventListener("click", handleClick);
      </script>
    </html>

• index.html → bring react src

    <!DOCTYPE html>
    <html>
      <body></body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script></script>
    </html>

2.2 Our First React Element

React JS : Interactive한 UI 만들 수 있는 역할

React-dom : React element를 HTML에 두는 역할

주로 사용하지는 않는 방식

• index.html → using react hard way

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script>
        const root = document.getElementById("root");
        const span = React.createElement("span", { id: "sexy-span", style: { color: "red" } }, "Hello I'm a span");
        ReactDOM.render(span, root);
      </script>
    </html>

  render : React element를 가지고 HTML로 만들어 배치

2.3 Events in React

주로 사용하지는 않는 방식

• index.html → extra about property & eventListener

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script>
        const root = document.getElementById("root");
        const span = React.createElement(
          "h3",
          {
            onMouseEnter: () => console.log("mouse enter"),
          },
          "Hello I'm a span"
        );
        const btn = React.createElement(
          "button",
          {
            onClick: () => console.log("im clicked"),
            style: {
              backgroundColor: "tomato",
            },
          },
          "Click me"
        );
        const container = React.createElement("div", null, [span, btn]);
        ReactDOM.render(container, root);
      </script>
    </html>

2.4 Recap

createElement → 사용 X

❗ props 안에서 eventListener 등록 가능

2.5 JSX

createElement를 대체할 코드 → JSX (JavaScript를 확장한 문법)

• createElement, 이름, props, 내용 → html 코드와 가깝게

JSX : 브라우저가 이해할 수 있게 변환해주는 Babel(코드 변환 역할) 필요

• index.html → using JSX

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
        const root = document.getElementById("root");
        const Title = (
          <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
            Hello I'm a h3
          </h3>
        );
        const Button = (
          <button style={{ backgroundColor: "tomato" }} onClick={() => console.log("im clicked")}>
            Click me
          </button>
        );
        const container = React.createElement("div", null, [Title, Button]);
        ReactDOM.render(container, root);
      </script>
    </html>

2.6 JSX part Two

❗ Component → 반드시 대문자로 시작

(소문자일 경우 React와 JSX는 HTML 태그라고 생각)

• 내가 만든 요소 → 전부 대문자로 시작
• HTML 요소 → 소문자로 작성

컴포넌트를 다른 컴포넌트에 넣는 방법

• index.html → final code with JSX

  function(함수)로 만드는 방법은 2가지 모두 가능

    <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
      </body>
      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
        const root = document.getElementById("root");
        function Title() {
          return (
            <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
              Hello I'm a h3
            </h3>
          );
        }
        const Button = () => (
          <button style={{ backgroundColor: "tomato" }} onClick={() => console.log("im clicked")}>
            Click me
          </button>
        );
        const Container = () => (
          <div>
            <Title />
            <Button />
          </div>
        );
        ReactDOM.render(<Container />, root);
      </script>
    </html>

react-router-dom

• App.js

    import DayList from "./component/DayList";
    import Header from "./component/Header";
    import Day from "./component/Day";
    import { BrowserRouter, Route, Routes } from "react-router-dom";
  
    function App() {
      return (
        <BrowserRouter>
          <div className="App">
            <Header />
            <Routes>
              <Route exact path="/" element={<DayList />} />
              <Route path="/day" element={<Day />} />
            </Routes>
          </div>
        </BrowserRouter>
      );
    }
  
    export default App;

→ 강의에서는 switch 사용 but 오류 발생

→ Routes로 변경 후 element 사용 → 해결

→ 버전 차이?

Link to → a href 역할

• Header.js

    import { Link } from "react-router-dom";
  
    export default function Header() {
      return (
        <div className="header">
          <h1>
            <Link to="/">토익 영단어(고급)</Link>
          </h1>
          <div className="menu">
            <a href="#x" className="link">
              단어 추가
            </a>
            <a href="#x" className="link">
              Day 추가
            </a>
          </div>
        </div>
      );
    }

→ import { Link } from "react-router-dom"; : 라우터의 Link 기능 임포트

→ <Link to="/"> : 처음의 화면

• DayList.js

    import { Link } from "react-router-dom";
    import dummy from "../db/data.json";
  
    export default function DayList() {
      console.log(dummy);
      return (
        <ul className="list_day">
          {dummy.days.map((day) => (
            <li key={day.id}>
              <Link to={`/day/${day.day}`}>Day {day.day}</Link>
            </li>
          ))}
        </ul>
      );
    }

→ {/day/${day.day}} : 각 day 별 페이지로 연결

• Day.js

    import dummy from "../db/data.json";
    import { useParams } from "react-router-dom";
  
    export default function Day() {
      //   dummy.words;
  
      const day = useParams().day;
      const wordList = dummy.words.filter((word) => word.day === Number(day));
  
      return (
        <>
          <h2>Day {day}</h2>
          <table>
            <tbody>
              {wordList.map((word) => (
                <tr key={word.id}>
                  <td>{word.eng}</td>
                  <td>{word.kor}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </>
      );
    }

→ useParams : 각 day별 단어를 가져올 수 있게 하는 기능

→ Number(day) : json에 day를 숫자값으로 저장해줬기 때문에 숫자로 입력해야 데이터 사용 가능

• EmptyPage.js

    import { Link } from "react-router-dom";
  
    export default function EmptyPage() {
      return (
        <>
          <h2>잘못된 접근입니다.</h2>
          <Link to="/">돌아가기</Link>
        </>
      );
    }

→ 없는 주소에 접속했을 때 나오는 페이지

• App.js

    import DayList from "./component/DayList";
    import Header from "./component/Header";
    import Day from "./component/Day";
    import { BrowserRouter, Route, Routes } from "react-router-dom";
    import EmptyPage from "./component/EmptyPage";
  
    function App() {
      return (
        <BrowserRouter>
          <div className="App">
            <Header />
            <Routes>
              <Route exact path="/" element={<DayList />} />
              <Route path="/day/:day" element={<Day />} />
              <Route path="*" element={<EmptyPage />} />
            </Routes>
          </div>
        </BrowserRouter>
      );
    }
  
    export default App;

→ <Route path="*" element={<EmptyPage />} /> : 맨 아래에 없는 주소의 페이지에 대한 정의

json-server, REST API

Word 컴포넌트 생성

• Word.js

    import { useState } from "react";
  
    export default function Word({ word }) {
      const [isShow, setIsShow] = useState(false);
      const [isDone, setIsDone] = useState(word.isDone);
  
      function toggleShow() {
        setIsShow(!isShow);
      }
  
      function toggleDone() {
        setIsDone(!isDone);
      }
  
      return (
        <tr className={isDone ? "off" : ""}>
          <td>
            <input type="checkbox" checked={isDone} onChange={toggleDone} />
          </td>
          <td>{word.eng}</td>
          <td>{isShow && word.kor}</td>
          <td>
            <button onClick={toggleShow}>뜻 {isShow ? "숨기기" : "보기"}</button>
            <button className="btn_del">삭제</button>
          </td>
        </tr>
      );
    }

→ isShow, isDone → useState로 값 설정

→ toggleShow, toggleDone → 함수로 체크 박스 설정

• Day.js

    import dummy from "../db/data.json";
    import { useParams } from "react-router-dom";
    import Word from "./Word";
  
    export default function Day() {
      //   dummy.words;
  
      const day = useParams().day;
      const wordList = dummy.words.filter((word) => word.day === Number(day));
  
      return (
        <>
          <h2>Day {day}</h2>
          <table>
            <tbody>
              {wordList.map((word) => (
                <Word word={word} key={word.id} />
              ))}
            </tbody>
          </table>
        </>
      );
    }

→ import Word from "./Word"; : Word 컴포넌트 임포트

→ <Word word={word} key={word.id} /> : Word 컴포넌트를 key 값을 설정해주며 가져오기

json-server 사용

: 명령어 사용 후 port를 3001로 수정하면 json 값이 넘어온 것 확인 가능 (명령어로 port 3001로 설정해줌)

REST API

→ method로 CRUD 기능을 하는 것

• Create : POST
• Read : GET
• Update : PUT
• Delete : DELETE

useEffect, fetch()로 API 호출

→ dummy 값을 지우고 json 사용

useEffect

: Hook → useState와 마찬가지로 리액트에서 임포트

: 어떤 상태값이 바뀌었을 때 동작하는 함수 작성 가능

• DayList.js → 설명을 위한 코드 작성

    import { useEffect, useState } from "react";
    import { Link } from "react-router-dom";
  
    export default function DayList() {
      const [days, setDays] = useState([]);
      const [count, setCount] = useState(0);
  
      function onClick() {
        setCount(count + 1);
      }
  
      function onClick2() {
        setDays([
          ...days,
          {
            id: Math.random(),
            day: 1,
          },
        ]);
      }
  
      useEffect(() => {
        console.log("Count change");
      }, []);
  
      return (
        <>
          <ul className="list_day">
            {days.map((day) => (
              <li key={day.id}>
                <Link to={`/day/${day.day}`}>Day {day.day}</Link>
              </li>
            ))}
          </ul>
          <button onClick={onClick}>{count}</button>
          <button onClick={onClick2}>Day change</button>
        </>
      );
    }

useEffect(() => {
    console.log("Count change");
  }, [count]);

→ count(의존성 배열의 값)이 변경되었을 때만 함수(useEffect)가 실행

→ 의존성 배열

useEffect(() => {
    console.log("Count change");
  }, []);

→ 현재는 API 호출을 위해 사용하기 때문에 한번만 호출

→ [count] 부분(의존성 배열 부분)을 빈 배열을 입력

useEffect + API 호출

• DayList.js

    import { useEffect, useState } from "react";
    import { Link } from "react-router-dom";
  
    export default function DayList() {
      const [days, setDays] = useState([]);
  
      useEffect(() => {
        fetch("http://localhost:3001/days")
          .then((res) => {
            return res.json();
          })
          .then((data) => {
            setDays(data);
          });
      }, []);
  
      return (
        <ul className="list_day">
          {days.map((day) => (
            <li key={day.id}>
              <Link to={`/day/${day.day}`}>Day {day.day}</Link>
            </li>
          ))}
        </ul>
      );
    }

• Day.js

    import { useEffect, useState } from "react";
    import { useParams } from "react-router-dom";
    import Word from "./Word";
  
    export default function Day() {
      const day = useParams().day;
      const [words, setWords] = useState([]);
  
      useEffect(() => {
        fetch(`http://localhost:3001/words?day=${day}`)
          .then((res) => {
            return res.json();
          })
          .then((data) => {
            setWords(data);
          });
      }, [day]);
  
      return (
        <>
          <h2>Day {day}</h2>
          <table>
            <tbody>
              {words.map((word) => (
                <Word word={word} key={word.id} />
              ))}
            </tbody>
          </table>
        </>
      );
    }

→ 두 코드의 api를 가져와서 사용하는 useEffect 코드가 비슷

→ Custom Hook 제작 가능

Custom Hooks

Hook 만들기

→ src > hooks 폴더 만들기

→ useFetch.js 파일 생성

• useFetch.js

    import { useEffect, useState } from "react";
  
    export default function useFetch(url) {
      const [data, setData] = useState([]);
  
      useEffect(() => {
        fetch(url)
          .then((res) => {
            return res.json();
          })
          .then((data) => {
            setData(data);
          });
      }, [url]);
  
      return data;
    }

→ 변하는 부분이 url이기 때문에 입력받는 값으로

→ 공통되는 함수이므로 data, setData 로 변경

→ data 값 return

useFetch를 사용하여 수정한 파일

• DayList.js

    import { Link } from "react-router-dom";
    import useFetch from "../hooks/useFetch";
  
    export default function DayList() {
      const days = useFetch("http://localhost:3001/days");
  
      return (
        <ul className="list_day">
          {days.map((day) => (
            <li key={day.id}>
              <Link to={`/day/${day.day}`}>Day {day.day}</Link>
            </li>
          ))}
        </ul>
      );
    }

• Day.js

    import { useParams } from "react-router-dom";
    import useFetch from "../hooks/useFetch";
    import Word from "./Word";
  
    export default function Day() {
      const day = useParams().day;
      const words = useFetch(`http://localhost:3001/words?day=${day}`);
  
      return (
        <>
          <h2>Day {day}</h2>
          <table>
            <tbody>
              {words.map((word) => (
                <Word word={word} key={word.id} />
              ))}
            </tbody>
          </table>
        </>
      );
    }

PUT(수정), DELETE(삭제)

PUT(수정)

• Word.js

    import { useState } from "react";
  
    export default function Word({ word }) {
      const [isShow, setIsShow] = useState(false);
      const [isDone, setIsDone] = useState(word.isDone);
  
      function toggleShow() {
        setIsShow(!isShow);
      }
  
      function toggleDone() {
        // setIsDone(!isDone);
        fetch(`http://localhost:3001/words/${word.id}`, {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            ...word,
            isDone: !isDone,
          }),
        }).then((res) => {
          if (res.ok) {
            setIsDone(!isDone);
          }
        });
      }
  
      return (
        <tr className={isDone ? "off" : ""}>
          <td>
            <input type="checkbox" checked={isDone} onChange={toggleDone} />
          </td>
          <td>{word.eng}</td>
          <td>{isShow && word.kor}</td>
          <td>
            <button onClick={toggleShow}>뜻 {isShow ? "숨기기" : "보기"}</button>
            <button className="btn_del">삭제</button>
          </td>
        </tr>
      );
    }

→ function toggleDone() : useFetch 사용 및 수정 가능하게 변경

→ method: "PUT" : 게시글 수정

→ "Content-Type": "application/json" : 보내는 리소스의 타입이 json

DELETE(삭제)

• Word.js

    import { useState } from "react";
  
    export default function Word({ word: w }) {
      const [word, setWord] = useState(w);
      const [isShow, setIsShow] = useState(false);
      const [isDone, setIsDone] = useState(word.isDone);
  
      function toggleShow() {
        setIsShow(!isShow);
      }
  
      function toggleDone() {
        // setIsDone(!isDone);
        fetch(`http://localhost:3001/words/${word.id}`, {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            ...word,
            isDone: !isDone,
          }),
        }).then((res) => {
          if (res.ok) {
            setIsDone(!isDone);
          }
        });
      }
  
      function del() {
        if (window.confirm("삭제 하시겠습니까?")) {
          fetch(`http://localhost:3001/words/${word.id}`, {
            method: "DELETE",
          }).then((res) => {
            if (res.ok) {
              setWord({ id: 0 });
            }
          });
        }
      }
  
      if (word.id === 0) {
        return null;
      }
  
      return (
        <tr className={isDone ? "off" : ""}>
          <td>
            <input type="checkbox" checked={isDone} onChange={toggleDone} />
          </td>
          <td>{word.eng}</td>
          <td>{isShow && word.kor}</td>
          <td>
            <button onClick={toggleShow}>뜻 {isShow ? "숨기기" : "보기"}</button>
            <button onClick={del} className="btn_del">
              삭제
            </button>
          </td>
        </tr>
      );
    }

→ method: "DELETE" : 게시글 삭제

→ 삭제하는 값은 return 할 값이 없음

→ { word: w } : 새로운 변수명 가능

→ return null; : null 값을 줌으로써 공간을 비우고 새로고침하지 않고도 페이지에 바로 반영

POST(생성), useHistory()

POST(생성), useNavigate()

• Header.js

    import { Link } from "react-router-dom";
  
    export default function Header() {
      return (
        <div className="header">
          <h1>
            <Link to="/">토익 영단어(고급)</Link>
          </h1>
          <div className="menu">
            <Link to="/create_word" className="link">
              단어 추가
            </Link>
            <Link to="/create_day" className="link">
              Day 추가
            </Link>
          </div>
        </div>
      );
    }

• App.js

    import DayList from "./component/DayList";
    import Header from "./component/Header";
    import Day from "./component/Day";
    import { BrowserRouter, Route, Routes } from "react-router-dom";
    import EmptyPage from "./component/EmptyPage";
    import CreateWord from "./component/CreateWord";
    import CreateDay from "./component/CreateDay";
  
    function App() {
      return (
        <BrowserRouter>
          <div className="App">
            <Header />
            <Routes>
              <Route exact path="/" element={<DayList />} />
              <Route path="/day/:day" element={<Day />} />
              <Route path="/create_word" element={<CreateWord />} />
              <Route path="/create_day" element={<CreateDay />} />
              <Route path="*" element={<EmptyPage />} />
            </Routes>
          </div>
        </BrowserRouter>
      );
    }
  
    export default App;

• CreateWord.js

    import { useRef } from "react";
    import { useNavigate } from "react-router-dom";
    import useFetch from "../hooks/useFetch";
  
    export default function CreateWord() {
      const days = useFetch("http://localhost:3001/days");
      const navigate = useNavigate();
  
      function onSubmit(e) {
        e.preventDefault();
  
        fetch(`http://localhost:3001/words/`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            day: dayRef.current.value,
            eng: engRef.current.value,
            kor: korRef.current.value,
            isDone: false,
          }),
        }).then((res) => {
          if (res.ok) {
            alert("생성이 완료 되었습니다");
            navigate(`/day/${dayRef.current.value}`);
          }
        });
      }
  
      const engRef = useRef(null);
      const korRef = useRef(null);
      const dayRef = useRef(null);
  
      return (
        <form onSubmit={onSubmit}>
          <div className="input_area">
            <label>Eng</label>
            <input type="text" placeholder="computer" ref={engRef} />
          </div>
          <div className="input_area">
            <label>Kor</label>
            <input type="text" placeholder="컴퓨터" ref={korRef} />
          </div>
          <div className="input_area">
            <label>Day</label>
            <select ref={dayRef}>
              {days.map((day) => (
                <option key={day.id} value={day.day}>
                  {day.day}
                </option>
              ))}
            </select>
          </div>
          <button>저장</button>
        </form>
      );
    }

→ useRef() : dom에 접근할 수 있게 해줌 (ex. 스크롤 위치 확인, 포커스를 줄 때)

→ current : 해당 요소에 접근 가능

→ vaule : input에 입력된 값을 얻을 수 있음

→ 현재 버전에서 history 지원 X navigate 사용 : 해당 페이지로 이동 기능

• CreateDay.js

    import useFetch from "../hooks/useFetch";
    import { useNavigate } from "react-router-dom";
  
    export default function CreateWord() {
      const days = useFetch("http://localhost:3001/days");
      const navigate = useNavigate();
  
      function addDay() {
        fetch(`http://localhost:3001/days/`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            day: days.length + 1,
          }),
        }).then((res) => {
          if (res.ok) {
            alert("생성이 완료 되었습니다");
            navigate(`/`);
          }
        });
      }
  
      return (
        <div>
          <h3>현재 일수 : {days.length}일</h3>
          <button onClick={addDay}>Day 추가</button>
        </div>
      );
    }

→ 단어 추가와 비슷하지만 day만 추가해주는 기능

마무리 (추가 강의)

느린 네트워크 환경

• DayList.js

    import { Link } from "react-router-dom";
    import useFetch from "../hooks/useFetch";
  
    export default function DayList() {
      const days = useFetch("http://localhost:3001/days");
  
      if (days.length === 0) {
        return <span>Loading...</span>;
      }
  
      return (
        <ul className="list_day">
          {days.map((day) => (
            <li key={day.id}>
              <Link to={`/day/${day.day}`}>Day {day.day}</Link>
            </li>
          ))}
        </ul>
      );
    }

• Day.js

    import { useParams } from "react-router-dom";
    import useFetch from "../hooks/useFetch";
    import Word from "./Word";
  
    export default function Day() {
      const day = useParams().day;
      const words = useFetch(`http://localhost:3001/words?day=${day}`);
  
      return (
        <>
          <h2>Day {day}</h2>
          {words.length === 0 && <span>Loading...</span>}
          <table>
            <tbody>
              {words.map((word) => (
                <Word word={word} key={word.id} />
              ))}
            </tbody>
          </table>
        </>
      );
    }

통신 중 추가 불가능하게 하는 기능

• CreateWord.js

    import { useRef, useState } from "react";
    import { useNavigate } from "react-router-dom";
    import useFetch from "../hooks/useFetch";
  
    export default function CreateWord() {
      const days = useFetch("http://localhost:3001/days");
      const navigate = useNavigate();
      const [isLoading, setIsLoading] = useState(false);
  
      function onSubmit(e) {
        e.preventDefault();
  
        if (!isLoading) {
          setIsLoading(true);
          fetch(`http://localhost:3001/words/`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              day: dayRef.current.value,
              eng: engRef.current.value,
              kor: korRef.current.value,
              isDone: false,
            }),
          }).then((res) => {
            if (res.ok) {
              alert("생성이 완료 되었습니다");
              navigate(`/day/${dayRef.current.value}`);
              setIsLoading(false);
            }
          });
        }
      }
  
      const engRef = useRef(null);
      const korRef = useRef(null);
      const dayRef = useRef(null);
  
      return (
        <form onSubmit={onSubmit}>
          <div className="input_area">
            <label>Eng</label>
            <input type="text" placeholder="computer" ref={engRef} />
          </div>
          <div className="input_area">
            <label>Kor</label>
            <input type="text" placeholder="컴퓨터" ref={korRef} />
          </div>
          <div className="input_area">
            <label>Day</label>
            <select ref={dayRef}>
              {days.map((day) => (
                <option key={day.id} value={day.day}>
                  {day.day}
                </option>
              ))}
            </select>
          </div>
          <button
            style={{
              opacity: isLoading ? 0.3 : 1,
            }}
          >
            {isLoading ? "Saving..." : "저장"}
          </button>
        </form>
      );
    }

→ 여러번 클릭하여 빈 값이 추가되는 것을 막는 역할 (Loading 관련 부분)

부록 : 타입스크립트

→ 프로젝트 초기부터 사용하는 것이 좋음

→ but 이후에도 적용 가능하니 늦었다고 생각 X

타입스크립트

js 파일 → .ts

jsx 파일 (html 사용 파일) → .tsx로 변경

• Word.tsx

    import { useState } from "react";
  
    interface IProps {
      word: IWord;
    }
  
    export interface IWord {
      day: string;
      eng: string;
      kor: string;
      isDone: boolean;
      id: number;
    }
  
    export default function Word({ word: w }: IProps) {
      const [word, setWord] = useState(w);
      const [isShow, setIsShow] = useState(false);
      const [isDone, setIsDone] = useState(word.isDone);
  
      function toggleShow() {
        setIsShow(!isShow);
      }
  
      function toggleDone() {
        // setIsDone(!isDone);
        fetch(`http://localhost:3001/words/${word.id}`, {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            ...word,
            isDone: !isDone,
          }),
        }).then((res) => {
          if (res.ok) {
            setIsDone(!isDone);
          }
        });
      }
  
      function del() {
        if (window.confirm("삭제 하시겠습니까?")) {
          fetch(`http://localhost:3001/words/${word.id}`, {
            method: "DELETE",
          }).then((res) => {
            if (res.ok) {
              setWord({
                ...word,
                id: 0,
              });
            }
          });
        }
      }
  
      if (word.id === 0) {
        return null;
      }
  
      return (
        <tr className={isDone ? "off" : ""}>
          <td>
            <input type="checkbox" checked={isDone} onChange={toggleDone} />
          </td>
          <td>{word.eng}</td>
          <td>{isShow && word.kor}</td>
          <td>
            <button onClick={toggleShow}>뜻 {isShow ? "숨기기" : "보기"}</button>
            <button onClick={del} className="btn_del">
              삭제
            </button>
          </td>
        </tr>
      );
    }

type → any : 남발 X

interface → 여러개의 property에 각각 다른 타입 입력 가능

typescript → property 사용의 편리성 향상

setWord({ id: 0 }) → id 외의 값들을 옵션(ex. day?: string;)으로 하여 오류 해결

but 삭제 외에는 모든 값들이 필요해서 좋은 방법 X → ...word, 로 다른 값들을 넣어주는 방법으로 해결

export interface → 다른 파일에서도 인터페이스 사용 가능

• Day.tsx

    import { useParams } from "react-router-dom";
    import useFetch from "../hooks/useFetch";
    import Word, { IWord } from "./Word";
  
    export default function Day() {
      // const day = useParams().day;
      const { day } = useParams<{ day: string }>();
      const words: IWord[] = useFetch(`http://localhost:3001/words?day=${day}`);
  
      return (
        <>
          <h2>Day {day}</h2>
          {words.length === 0 && <span>Loading...</span>}
          <table>
            <tbody>
              {words.map((word) => (
                <Word word={word} key={word.id} />
              ))}
            </tbody>
          </table>
        </>
      );
    }

key={word.id} → word가 IWord라는 것을 못 찾기 때문에 오류 발생

→ Word에서 export로 해주고 임포트하여 설정 후 해결 가능

{ day } → useParams에서 가져오는 객체 내부에 day가 있는지 확신 X로 인한 오류 발생

→ <> generic 속에 타입을 설정하여 오류 해결

• DayList.tsx

    import { Link } from "react-router-dom";
    import useFetch from "../hooks/useFetch";
  
    export interface IDay {
      id: number;
      day: number;
    }
  
    export default function DayList() {
      const days: IDay[] = useFetch("http://localhost:3001/days");
  
      if (days.length === 0) {
        return <span>Loading...</span>;
      }
  
      return (
        <ul className="list_day">
          {days.map((day) => (
            <li key={day.id}>
              <Link to={`/day/${day.day}`}>Day {day.day}</Link>
            </li>
          ))}
        </ul>
      );
    }

IDay 라는 인터페이스를 만들어서 사용

• CreateWord.tsx

    import React, { useRef, useState } from "react";
    import { useNavigate } from "react-router-dom";
    import useFetch from "../hooks/useFetch";
    import { IDay } from "./DayList";
  
    export default function CreateWord() {
      const days: IDay[] = useFetch("http://localhost:3001/days");
      const navigate = useNavigate();
      const [isLoading, setIsLoading] = useState(false);
  
      function onSubmit(e: React.FormEvent) {
        e.preventDefault();
  
        if (!isLoading && dayRef.current && engRef.current && korRef.current) {
          setIsLoading(true);
  
          const day: dayRef.current.value;
          const eng: engRef.current.value;
          const kor: korRef.current.value;
  
          fetch(`http://localhost:3001/words/`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              day,
              eng,
              kor,
              isDone: false,
            }),
          }).then((res) => {
            if (res.ok) {
              alert("생성이 완료 되었습니다");
              navigate(`/day/${day}`);
              setIsLoading(false);
            }
          });
        }
      }
  
      const engRef = useRef<HTMLInputElement>(null);
      const korRef = useRef<HTMLInputElement>(null);
      const dayRef = useRef<HTMLSelectElement>(null);
  
      return (
        <form onSubmit={onSubmit}>
          <div className="input_area">
            <label>Eng</label>
            <input type="text" placeholder="computer" ref={engRef} />
          </div>
          <div className="input_area">
            <label>Kor</label>
            <input type="text" placeholder="컴퓨터" ref={korRef} />
          </div>
          <div className="input_area">
            <label>Day</label>
            <select ref={dayRef}>
              {days.map((day) => (
                <option key={day.id} value={day.day}>
                  {day.day}
                </option>
              ))}
            </select>
          </div>
          <button
            style={{
              opacity: isLoading ? 0.3 : 1,
            }}
          >
            {isLoading ? "Saving..." : "저장"}
          </button>
        </form>
      );
    }

submit하는 이벤트 → React.FormEvent

Ref의 current는 렌더링이 완료된 이후에도 없을 수 있음 → null인지 아닌지 체크해주는 것이 필요

dayRef.current && engRef.current && korRef.current → 값이 없으면 실행하지 X

• useFetch.ts

    import { useEffect, useState } from "react";
  
    export default function useFetch(url: string) {
      const [data, setData] = useState([]);
  
      useEffect(() => {
        fetch(url)
          .then((res) => {
            return res.json();
          })
          .then((data) => {
            setData(data);
          });
      }, [url]);
  
      return data;
    }

핵심 요약

💻 라우터 설치 명령어 npm install react-router-dom

💻 json 서버 설치 명령어 npm install -g json-server 💻 서버 위치, port 설정 명령어 json-server --watch ./src/db/data.json --port 3001 → 두 명령어 동시 사용

💻 typescript 설치 명령어 + npm install typescript @types/node @types/react/ @types/react-dom @types/jest → create-react-app으로 만들어진 프로젝트에 적용하려면 뒤에까지 꼭 입력 + npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom → 추가 설치한 라우터 돔까지

node_modules

: 필요한 모듈이 설치되어 있는 폴더 (git 업로드 X)

package.json → “dependencies”에 모듈 기록

npm install → 모듈 설치 가능

public

<div id="root"></div>

div id="root" → 리액트 코드가 실행돼서 만들어진 dom이 구현

src

: 대부분의 작업이 src 폴더 내부에서 진행

import App from './App';

→ 초기화면이 App.js이 사용된 페이지

• App.js

    import logo from "./logo.svg";
    import "./App.css";
  
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>Coding angma</p>
            <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
              Learn React
            </a>
          </header>
        </div>
      );
    }
  
    export default App;

class가 자바스크립트 예약어 → className으로 사용

JSX → 자바스크립트 내부에 html 코드를 작성하는 것

Hot Module Replacement(HMR)

명령어

• npm start : 개발모드로 프로그램을 실행
• npm build : 실제 배포모드로 만들어줌
• npm test : 테스트
• npm eject : 내부 설정파일을 꺼내는 역할 / 웹페이지 설정을 변경하고 싶을 때 사용

컴포넌트

: 각 부분을 컴포넌트로 만들어서 조립해서 사용

→ 코드 재사용 O / 유지 보수 수월

• 함수명 대문자로 시작

• 스타일 → 객체로 전달해야 적용 가능

• App.js → 객체 생성 및 첫 시도

    import "./App.css";
  
    function App() {
      const name = "Tom";
      const naver = {
        name: "네이버",
        url: "https://naver.com",
      };
      return (
        <div className="App">
          <h1 style={{ color: "#f0f", backgroundColor: "green" }}>
            Hello, {name}.<p>(2 + 3)</p>
          </h1>
          <a href={naver.url}>{naver.name}</a>
        </div>
      );
    }
  
    export default App;

  

• Hello.js → src > component 폴더 생성 > Hello.js

    const Hello = function() {
        <p>Hello</p>
    };
  
    export default Hello;

    const Hello = () => {
        <p>Hello</p>
    };
  
    export default Hello;

    export default function Hello() {
      return <p>Hello</p>;
    }

  App.js 에 반영

    import "./App.css";
    import Hello from "./component/Hello";
  
    function App() {
      return (
        <div className="App">
          <Hello />
        </div>
      );
    }
  
    export default App;

JSX → 하나의 태그만 받음 → div 태그로 묶어서 사용

CSS 작성법 (module css)

1. inline style

• Hello.js → inline style

    import World from "./World";
  
    export default function Hello() {
      return (
        <div>
          <h1
            style={{
              color: "#f00",
              borderRight: "2px soldid #000",
              marginBottom: "30px",
              opacity: 1,
            }}
          >
            Hello
          </h1>
          <World />
          <World />
        </div>
      );
    }

→ sytle은 객체로 처리해 작성

2. CSS 파일

index.css → 전체에 해당하는 css

App.css → App이라는 컴포넌트에 해당하는 css

→ 각 컴포넌트에 스타일이 적용되는 것이 아니라 hd 안에 전체 스타일이 작성되어 오버레이

❗ 개별 컴포넌트 스타일 css 파일명 → Hello.module.css import sytles from "./Hello.module.css"; <div className={sytles.box}>Hello</div>

• Hello.js → Css file

    import World from "./World";
    import sytles from "./Hello.module.css";
  
    export default function Hello() {
      return (
        <div>
          <h1
            style={{
              color: "#f00",
              borderRight: "2px soldid #000",
              marginBottom: "30px",
              opacity: 1,
            }}
          >
            Hello
          </h1>
          <div className={sytles.box}>Hello</div>
        </div>
      );
    }

→ 같은 class명을 사용해도 다른 스타일 적용 가능

이벤트 처리 (Handling Events)

• Hello.js → Handling Events / 2 ways

    import World from "./World";
    import sytles from "./Hello.module.css";
  
    export default function Hello() {
      function showName() {
        console.log("Mike");
      }
  
      return (
        <div>
          <h1>Hello</h1>
          <button onClick={showName}>Show name</button>
          <button
            onClick={() => {
              console.log(30);
            }}
          >
            Show age
          </button>
        </div>
      );
    }

2가지의 방식 → inline의 경우 매개변수를 전달하기 편함

• Hello.js → 다른 방법으로 같은 코드 작성

        function showText(e) {
        console.log(e.target.value);
      }
  
        <input type="text" onChange={showText} />
  
    // =
  
        <input
        type="text"
        onChange={(e) => {
          console.log(e.target.value);
        }}
       />
  
    // =
  
      function showText(txt) {
        console.log(txt);
      }
  
      <input
        type="text"
        onChange={(e) => {
          const txt = e.target.value;
          showText(txt);
        }}
      />

state, useState

state : 컴포넌트가 가지고 있는 상태값

→ 속성값이 변하면 리액트는 자동으로 ui를 업데이트

Hooks API → useState

• Hello.js → useState

    import { useState } from "react";
  
    export default function Hello() {
      // let name = "Mike";
      const [name, setName] = useState("Mike");
  
      function changeName() {
        const newName = name === "Mike" ? "Jane" : "Mike";
        // document.getElementById("name").innerText = name;
        setName(newName);
      }
  
      return (
        <div>
          <h1>state</h1>
          <h2 id="name">{name}</h2>
          <button onClick={changeName}>Change</button>
        </div>
      );
    }
  
    // =
      function changeName() {
        setName(name === "Mike" ? "Jane" : "Mike");
      }
  
    // =
     <button
       onClick={() => {
         setName(name === "Mike" ? "Jane" : "Mike");
       }}
      >
      Change
      </button>

동일한 컴포넌트라도 state는 각각 관리

→ 반복해서 3번을 쓰더라도 가운데 버튼을 누르면 가운데의 이름만 변경

props

props(properties) : 속성값

→ 컴포넌트 내부에서 변경 불가능

→ 변경하고 싶다면 컴포넌트 내부에서 state를 다시 만들어야 됨

• Hello.js → props로 age를 가져오는 원본 코드 / 2가지

    import { useState } from "react";
  
    export default function Hello(props) {
      const [name, setName] = useState("Mike");
  
      return (
        <div>
          <h2 id="name">
            {name}({props.age})
          </h2>
          <button
            onClick={() => {
              setName(name === "Mike" ? "Jane" : "Mike");
            }}
          >
            Change
          </button>
        </div>
      );
    }

  • props → age 사용 코드

      import { useState } from "react";
    
      export default function Hello({ age }) {
        const [name, setName] = useState("Mike");
    
        return (
          <div>
            <h2 id="name">
              {name}({age})
            </h2>
            <button
              onClick={() => {
                setName(name === "Mike" ? "Jane" : "Mike");
              }}
            >
              Change
            </button>
          </div>
        );
      }

원래 코드에서 props를 age만 사용하고 있기 때문에 이 코드도 사용 가능

• Hello.js → age값 변경

    import { useState } from "react";
  
    export default function Hello(props) {
      const [name, setName] = useState("Mike");
      const [age, setAge] = useState(props.age);
  
      return (
        <div>
          <h2 id="name">
            {name}({age})
          </h2>
          <button
            onClick={() => {
              setName(name === "Mike" ? "Jane" : "Mike");
              setAge(age + 1);
            }}
          >
            Change
          </button>
        </div>
      );
    }

• Hello.js → age 값 조건으로 msg 출력

    import { useState } from "react";
  
    export default function Hello({ age }) {
      const [name, setName] = useState("Mike");
      const msg = age > 19 ? "성인 입니다." : "미성년자 입니다.";
  
      return (
        <div>
          <h2 id="name">
            {name}({age}) : {msg}
          </h2>
          <button
            onClick={() => {
              setName(name === "Mike" ? "Jane" : "Mike");
            }}
          >
            Change
          </button>
        </div>
      );
    }

더미 데이터 구현, map() 반복문

dummy data → json 파일

map

반복문 → map 사용

: 배열을 받아서 또 다른 배열을 반환

→ 반환되는 배열의 요소는 jsx로 작성

날짜 필러팅을 통해 날짜의 단어 출력

• App.js

    import DayList from "./component/DayList";
    import Header from "./component/Header";
    import Day from "./component/Day";
  
    function App() {
      return (
        <div className="App">
          <Header />
          <DayList />
          <Day />
        </div>
      );
    }
  
    export default App;

• Header.js

    export default function Header() {
      return (
        <div className="header">
          <h1>
            <a href="/">토익 영단어(고급)</a>
          </h1>
          <div className="menu">
            <a href="#x" className="link">
              단어 추가
            </a>
            <a href="#x" className="link">
              Day 추가
            </a>
          </div>
        </div>
      );
    }

• DayList.js

    import dummy from "../db/data.json";
  
    export default function DayList() {
      console.log(dummy);
      return (
        <ul className="list_day">
          {dummy.days.map((day) => (
            <li key={day.id}>Day {day.day}</li>
          ))}
        </ul>
      );
    }

• Day.js

    import dummy from "../db/data.json";
  
    export default function Day() {
      //   dummy.words;
      const day = 3;
      const wordList = dummy.words.filter((word) => word.day === day);
  
      return (
        <>
          <table>
            <tbody>
              {wordList.map((word) => (
                <tr key={word.id}>
                  <td>{word.eng}</td>
                  <td>{word.kor}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </>
      );
    }

• data.json

    {
      "days": [
        { "id": 1, "day": 1 },
        { "id": 2, "day": 2 },
        { "id": 3, "day": 3 },
        { "id": 4, "day": 4 }
      ],
      "words": [
        { "id": 1, "day": 1, "eng": "book", "kor": "책", "isDone": false },
        { "id": 2, "day": 2, "eng": "car", "kor": "자동차", "isDone": false },
        { "id": 3, "day": 3, "eng": "school", "kor": "학교", "isDone": false },
        { "id": 4, "day": 3, "eng": "pencil", "kor": "연필", "isDone": false },
        { "id": 5, "day": "3", "eng": "window", "kor": "창문", "isDone": false },
        { "id": 6, "day": "3", "eng": "house", "kor": "집", "isDone": false },
        { "id": 7, "day": "2", "eng": "mouse", "kor": "쥐", "isDone": false },
        { "id": 8, "day": "4", "eng": "monkey", "kor": "원숭이", "isDone": false },
        { "id": 9, "day": "4", "eng": "apple", "kor": "사과", "isDone": false },
        { "id": 10, "day": "3", "eng": "apple", "kor": "사과", "isDone": false }
      ]
    }

핵심 요약

💻 리액트 프로젝트 생성 명령어 npx create-react-app 프로젝트명(폴더명)

❗ 브라우저 실행 / 종료 명령어 npm start / Ctrl + C

🔖 개별 컴포넌트 스타일 css 파일명 → Hello.module.css import sytles from "./Hello.module.css"; <div className={sytles.box}>Hello</div>

⭐ State, Props 화면에 데이터를 갱신 → 두가지 사용해 처리

✏️ 다음 스터디

날짜별로 클릭했을 때 해당 단어 출력 → 새로운 페이지 생성 & 라우터 사용