📌 문제 설명

정수 number와 n, m이 주어집니다. number가 n의 배수이면서 m의 배수이면 1을 아니라면 0을 return하도록 solution 함수를 완성해주세요.

📌 제한사항

10 ≤ number ≤ 100 2 ≤ n, m < 10

- 내 풀이

function solution(number, n, m) {
  return number % n === 0 && number % m === 0 ? 1 : 0
}

- 다른 사람 풀이

function solution(number, n, m) {
  return +!(number % n || number % m);
}

문제) 프로그래머스 - 대문자로 바꾸기

📌 문제 설명

알파벳으로 이루어진 문자열 myString이 주어집니다. 모든 알파벳을 대문자로 변환하여 return 하는 solution 함수를 완성해 주세요.

📌 제한사항

1 ≤ myString의 길이 ≤ 100,000 myString은 알파벳으로 이루어진 문자열입니다.

- 내 풀이

const solution = (myString) => myString.toUpperCase()

문제) 프로그래머스 - 문자열 곱하기

📌 문제 설명

문자열 my_string과 정수 k가 주어질 때, my_string을 k번 반복한 문자열을 return 하는 solution 함수를 작성해 주세요.

📌 제한사항

1 ≤ my_string의 길이 ≤ 100 my_string은 영소문자로만 이루어져 있습니다. 1 ≤ k ≤ 100

- 내 풀이

function solution(my_string, k) {
    let str = ''

    for(let i = 0; i < k; i++){
        str += my_string
    }

    return str;
}

- 다른 사람 풀이

function solution(my_string, k) {
    return my_string.repeat(k)
}

문제) 프로그래머스 - 문자열로 변환

📌 문제 설명

정수 n이 주어질 때, n을 문자열로 변환하여 return하도록 solution 함수를 완성해주세요.

📌 제한사항

1 ≤ n ≤ 10000

- 내 풀이

function solution(n) {
    var answer = n.toString();
    return answer;
}

- 다른 사람 풀이

const solution = String

function solution(n) {
    return n+"";
}

문제) 프로그래머스 - 두 수의 연산값 비교하기

📌 문제 설명

연산 ⊕는 두 정수에 대한 연산으로 두 정수를 붙여서 쓴 값을 반환합니다. 예를 들면 다음과 같습니다.
12 ⊕ 3 = 123 3 ⊕ 12 = 312 양의 정수 a와 b가 주어졌을 때, a ⊕ b와 2 * a * b 중 더 큰 값을 return하는 solution 함수를 완성해 주세요.
단, a ⊕ b와 2 * a * b가 같으면 a ⊕ b를 return 합니다.

📌 제한사항

1 ≤ a, b < 10,000

- 내 풀이

function solution(a, b) {
    let sum = String(a) + String(b)
    let answer = Math.max(Number(sum), 2*a*b)
    return answer;
}

- 다른 사람 풀이

function solution(a, b) {
    let num1 = parseInt(a+""+b+"");
    let num2 = 2*a*b;
    return num1 > num2 ? num1 : num2;
}

1️⃣ API 라우트 만들기 2️⃣ 리퀘스트 다루기 3️⃣ 리스폰스 다루기 4️⃣ 실습

1️⃣ API 라우트 만들기

• pages > api 폴더 생성 > short-links 파일생성 api 폴더명은 규칙이기 때문에 다른 이름으로 변경할 수 없음 endpoint: /api/short-links

📝 short-links.js

export default function handler(req, res) {
  res.send('안녕 API!');
}

📝 request.http

GET http://localhost:3000/api/short-links

상단에 떠 있는 Send Request 클릭

2️⃣ 리퀘스트 다루기

- 리퀘스트 객체

req.cookies: session-id req.method: 요청 매서드를 대문자로 보여줌 (GET/ POST) req.body: 바디 내용 req.query: 쿼리스트링 ( ?q='여기에 들어오는 값') req.id: 페이지 넘버

🍪 쿠키란? 간단한 사용자 정보를 저장하거나 로그인하고 나서 인증정보를 브라우저에 저장한 뒤 request할 때마다 보내 줄 때 활용한다.

📝 [id].js

export default function handler(req, res) {
  res.send(req.method); // GET, POST 대문자로 찍힘
  //   res.send(req.cookies);
  //   쿠키란? 쿠키에는 간단한 사용자 정보를 저장 or 로인하고 나서 인증정보를 브라우저에 저장 한 뒤 request 할때마다 보내 줄 때 활용 함

  //   res.send(req.body);

  //   res.send(req.query);  // 쿼리스트링 ?q='여기에 들어오는 값'

  //   res.send(req.id);  // 페이지 넘버
}

📝 request.http

GET http://localhost:3000/api/short-links/123?q=codeit

###

GET http://localhost:3000/api/short-links/123

###

POST  http://localhost:3000/api/short-links/123
Content-Type: application/json

{
    "title": "codeit"
}

###

Get http://localhost:3000/api/short-links/123
Cookie: session-id=codeit1234

3️⃣ 리스폰스 다루기

- 리스폰스 객체

함수 체이닝 방식으로 사용하기 때문에, res.status(201).send()처럼 함수를 이어서 사용할 수 있습니다.

📝 index.js

export default function qrcodes(req, res) {
  switch (req.method) {
    case 'POST':
      res.status(201).send({
        title: '위키피디아 Next.js',
        url: 'https://en.wikipedia.org/wiki/Next.js',
      });
    case 'GET':
      res.send([
        {
          id: 'abc',
          title: '위키피디아 Next.js',
          url: 'https://en.wikipedia.org/wiki/Next.js',
        },
        {
          id: 'def',
          title: '코드잇 자유게시판',
          url: 'https://codeit.kr/community/general',
        },
        {
          id: 'ghi',
          title: '코드잇 질문답변',
          url: 'https://www.codeit.kr/community/questions',
        },
      ]);
      break;

    default:
      res.status(404).send();
  }
}

클라이언트사이드 렌더링

🚧 문제점

• 텅 빈 화면을 먼저 띄운다(빈 html을 먼저 읽음) -> js 전부 로딩 -> react 동작 -> 제대로 된 화면을 보여준다.
• 초기 로딩이 느리다.
• 검색 엔진에 제공할 수 있는 정보가 적다. SEO에 취약함

✅ 프리렌더링 해놓음 (미리 만들어서 전달) BUT, 이렇게 되면 서버가 필요하다.(프리렌더링은 서버에서 렌더링하기 위함임) 이러한 문제를 해결해 줄 수 있는 프레임워크 등장! 👉 Next.js 🥳

📌 Next.js

서버사이드 렌더링

• 프리렌더링 웹페이지 로딩 이전에 하는 렌더링 👉 정적 생성 (빌드 할 때 html을 미리 만들어 놓는 것) 👉 export, getStaticProps 네이밍은 정해진 규칙임!

  export async function getStaticProps() {
  const res = await axios.get('/products');
  const products = res.data.results;
  
  return {
    props: {
      products,
  }
  }
  

export default function Home({ products }) { //... 생략 }

npm run build

👉 서버사이드 렌더링 (GET요철할 때 보내줌)
  - 장점
    초기 로딩이 빨라진다
    검색엔진 최적화가 된다
- Vercel 서버 호스팅
- 파일 시스템 기반 라우팅(편하게 개발 가능)



<hr>

# 🔨 Next.js 설치하기

npx create-next-app .

`.`: 현재 폴더에서 next.js 다운로드

>조마조마하게 지켜봤는데 역시나 `Error발생`..
맥북은 역시나 멀쩡하게 지나가는 일이 없다😭
심지어 에러난줄도 모르고 `npm run dev` 입력 함

![](https://velog.velcdn.com/images/iooi_alice/post/e0cab226-5691-43c6-b30f-e502ce6f6d8a/image.png)

>Error: Your cache folder contains root-owned files, due to a bug in npm ERR! previous versions of npm which has since been addressed.

번역기: 캐시 폴더에 버그로 인해 루트 소유 파일이 포함되어 있습니다.
npm 오류입니다! 이후 해결된 이전 버전의 npm입니다.

>please run:
npm ERR!   sudo chown -R 501:20 "/Users/heeeee_soo/.npm"

please를 믿어보기로 하고 아래와 같이 복붙했더니 에러가 해결됐다!!

sudo chown -R 501:20 "/Users/heeeee_soo/.npm"

한 숨 돌리고 다시 설치하려니까 이미 파일이 만들어진게 있어서 충돌난다는 메시지가 나타났다.

이전에 설치된 파일들 전체 삭제하고 다시 아래와 같이 next 설치 명령어 실행 후 성공했다! 

npx create-next-app .

<hr>

# 🎨 CSS 적용하기
### css module 적용하기
1️⃣ Home.module.css 파일 생성

2️⃣ 사용하는 page의 상단에 import
```jsx
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <h1 className={styles.title}>
     안녕? Next.js! 후후~
    </h1>
  )
}

3️⃣ 웹 전체에 css 파일 적용

// app.js

import '../styles/global.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

모듈이 아닌 전체 적용이기 때문에 styles를 붙이지 않고 import하면 됨

tsconfig.json 파일 생성

tsc --init

{
  "compilerOptions": {
    "target": "ESNext", // ES5:화살표 함수 없음(옛날버전), ESNext:최신버전
    "module": "ESNext", // CommonJS, ESNext
    "outDir": "dist", // 컴파일 된 자바스크립트 파일이 위치할 곳
    "strict": true, // 타입 검사를 얼마나 엄격하게 할건지(true, false)
    "moduleDetection": "force" // 전역 모듈을 개별 모듈로 변경해 줌(export{})
  },
  "include": ["src"] //src 모든 ts 파일 컴파일링해 줌
}

출처 | https://www.inflearn.com/course/lecture?courseSlug=%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8&unitId=154362&tab=curriculum

> npm init

👉 모든 옵션을 default로 enter 눌러서 진행한다

👉 package.json 파일 생성!

2️⃣ types/node

node.js가 제공하는 기본 기능들에 대해 미리 지정된 타입의 파일 제공

> npm i @types/node

3️⃣ 컴파일러 설치

✨ tsc로 컴파일하고 실행하기

tsc 파일명 은 특정 파일을 컴파일 하도록 타입스크립트 컴파일러에게 지시하는 명령어입니다. 위 명령어를 입력하면 src/index.ts 파일을 타입스크립트 컴파일러가 컴파일 합니다. 컴파일이 완료되면 자바스크립트 파일 src/index.js 이 생성됩니다.

> sudo npm install typescript -g

-g : global 설치, 컴퓨터 모든 곳에서 패키지 사용 가능 (한 번 설치하면 다른 프로젝트 시 따로 설치 안 해도 됨!)

> tsc -v
Version 5.1.6

> tsc src/index.ts

컴파일 된 자바스크립트 코드는 node를 이용해 실행합니다.

> node src/index.js
Hello Typescript

✨ TSX(TypeScript Execute)로 실행하기

🚧 ts-node는 Node 20 버전 이상에서는 더 이상 동작하지 않습니다. 따라서 아래에서 소개하는 tsx로 대체하여 설치 진행

> sudo npm i -g tsx

> tsx -v
tsx v4.7.0
node v20.7.0

한번의 명령어로 타입스크립트를 실행

> tsx src/index.ts
Hello TypeScript

출처 | https://www.inflearn.com/course/lecture?courseSlug=%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8&unitId=154361

템플릿 문자열을 사용한 예

function Button({ isPending, color, size, invert, children }) {
  const classNames = `Button ${isPending ? 'pending' : ''} ${color} ${size} ${invert ? 'invert' : ''}`;
  return <button className={classNames}>{children}</button>;
}

export default Button;

배열을 사용한 예

function Button({ isPending, color, size, invert, children }) {
  const classNames = [
    'Button',
    isPending ? 'pending' : '',
    color,
    size,
    invert ? 'invert' : '',
  ].join(' ');
  return <button className={classNames}>{children}</button>;
}

export default Button;

classnames 라이브러리를 사용한 예

$npm install classnames

import classNames from 'classnames';

function Button({ isPending, color, size, invert, children }) {
  return (
    <button
      className={classNames(
        'Button',
        isPending && 'pending',
        color,
        size,
        invert && 'invert',
      )}>
     { children }
   </button >
  );
}

export default Button;

https://www.npmjs.com/package/classnames

State -> 상태 상태가 변경될 때마다 화면을 새롭게 그려내는 방식으로 동작한다. useState라는 함수를 활용해서 state를 바꾼다. 보통 이렇게 Destructuring 문법으로 작성

const [num, setNum] = useState(1);

첫 번째 요소가 바로 state, 두 번째 요소 tate를 바꾸는 setter 함수 state를 변경하려면 변수에 새로운 값을 할당하는 방식이 아닌 Setter함수를 활용해야 함!

참조형 State

// ... 

  const [gameHistory, setGameHistory] = useState([]);

  const handleRollClick = () => {
    const nextNum = random(6);
    gameHistory.push(nextNum);
    setGameHistory(gameHistory); // state가 제대로 변경되지 않는다!
  };

// ...

gameHistory state는 배열 값 자체를 가지고 있는 게 아니라 그 배열의 주솟값을 참조하고 있기 때문에 push 메소드로 배열 안에 요소를 변경했다고 하더라도 결과적으로 참조하는 배열의 주솟값은 변경된 것이 아니게 됩니다.

리액트 입장에서는 gameHistory state가 참조하는 주솟값은 여전히 똑같기 때문에 상태(state)가 바뀌었다고 판단하지 않는 것이죠!

참조형 state를 활용할 때는 반드시 새로운 참조형 값을 만들어 state를 변경해야 합니다. 👉 Spread 문법(...) 을 활용

// ... 

  const [gameHistory, setGameHistory] = useState([]);

  const handleRollClick = () => {
    const nextNum = random(6);
    setGameHistory([...gameHistory, nextNum]); // state가 제대로 변경된다!
  };

// ...

//배열의 요소가 변한것이지 주소값은 처음 그대로이기 때문에 state가 변경되었다고
//판단하지 않아 화면을 새롭게 렌더링하지 않습니다.

✨ 참조형 state를 활용할 땐 반드시 새로운 참조형 값을 만들어서 state를 변경해야 한다는 점. 꼭 기억해 두세요!

Props는 Properties의 약자인데요, 컴포넌트에 지정한 속성들을 Props라고 부릅니다 문자열을 porp으로 전달할 경우에는 {}를 사용하지 않고 ""를 사용합니다. Destructuring 문법을 활용해서 조금 더 간결하게 코드를 작성할 수 있습니다.

✨ 실습으로 props 적용해보기

1. HandIcon 컴포넌트의 value라는 prop을 받을거에요
2. img의 src속성은 value의 값에 따라 다음과 같이 지정해 주세요

• 'rock' 인 경우 rockImg 를 보여줍니다.
• 'scissor' 인 경우 scissorImg 를 보여줍니다.
• 'paper' 인 경우 paperImg 를 보여줍니다.

1. 객체화 하기

이미지 객체화

const IMAGES = {
  rock: rockImg,
  scissor: scissorImg,
  paper: paperImg
}

전체 코드

import rockImg from './assets/rock.svg';
import scissorImg from './assets/scissor.svg';
import paperImg from './assets/paper.svg';

// 이미지 주소 객체화
const IMAGES = {
  rock: rockImg,
  scissor: scissorImg,
  paper: paperImg
}

function HandIcon ({value}) {
  const src = IMAGES[value]
  return <img src={src} alt={src} />
}

export default HandIcon;

2. 삼항으로 조건달기

내가 푼 방법

value === 'rock' ? rockImg : value === 'scissor' ? scissorImg : paperImg

전체 코드

import rockImg from './assets/rock.svg';
import scissorImg from './assets/scissor.svg';
import paperImg from './assets/paper.svg';

function HandIcon({value}) {
  const imgUrl = value === 'rock' ? rockImg : value === 'scissor'? scissorImg : paperImg
  return <img src={imgUrl} alt={imgUrl} />;
}

export default HandIcon;

📌 children prop

props에는 children이라는 조금 특별한 프로퍼티(prop, 프롭)가 있습니다. 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children 값에 담기게 됩니다.

✨ 실습으로 props 적용해보기

function Button({ children }) {
  return <button>{children}</button>;
}

export default Button;

import Button from './Button';
import Dice from './Dice';

function App() {
  return (
    <div>
      <div>
        <Button>던지기</Button>
        <Button>처음부터</Button>
      </div>
      <Dice color="red" num={2} />
    </div>
  );
}

export default App;

HTML과 다른 속성명

1. 속성명은 카멜케이스(Camel Case)로 작성

여러 단어가 조합된 HTML 속성들은 카멜 케이스로 작성한다. onClick, onBlur, onFocus, onMouseDown, onMouseOver, tabIndex 등과 같은 속성

2. 예외적으로 비표준 속성을 다룰 때 활용하는 data-* 속성은 카멜 케이스(Camel Case)가 아니라 기존의 HTML 문법 그대로 작성해야 한다.

 <button className="btn" data-status="대기중">대기중</button>

3. 예약어와 같은 속성명은 사용할 수 없다

for나 class처럼 자바스크립트의 문법에 해당하는 예약어와 똑같은 이름의 속성명은 사용할 수 없습니다.

• for -> htmlFor
• class -> className

    <label htmlFor="name">이름</label>
    <input id="name" className="name-input" type="text" />

4. 반드시 하나의 요소로 감싸기 - Fragment

부모 태그를 만들어 하나의 요소로 만들어 주어야 합니다.

  <div>
    <p>안녕</p>
    <p>리액트!</p>
  </div>

  <Fragment>
    <p>안녕</p>
    <p>리액트!</p>
  </Fragment>,

  <>
    <p>안녕</p>
    <p>리액트!</p>
  </>,

5. 중괄호 안에는 표현식만 가능하다!

• ❌ if 문
• ❌ for 문
• ❌ 함수 선언
• ❌ 자바스크립트 문장

root.render(
  <>
    <h1>나만의 {item} 주문하기</h1>
    <button onClick={handleClick}>확인</button>
  </>
);

1. node.js LTS 설치
2. vscode 설치

node -v  // 노드 버전 확인
npm -v //  npm 버전 확인

리액트 설치(현재 폴더에서 생성하기/이미 폴더를 생성한 경우)

npm init react-app .

리액트 설치(폴더 이름으로 생성)

npm init react-app <폴더이름>

개발 모드 실행

npm run start

개발 모드 종료

ctrl+C

개발된 프로젝트 빌드하기

npm run build

빌드한 것 로컬에서 실행하기

npx serve build

👉 serve 프로그램을 다운 받고 build 폴더에서 서버가 실행

acc, el, i, arr 매 반복마다 콜백함수의 return 값을 다음 acc로 전달

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

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

조건을 만족하는 요소가 1개 이상 있는지

조건을 만족하는지 확인할 때 사용 ture, false 값으로 나옴

const numbers = [1, 3, 5, 7, 9]

const someReturn = numbers.some((el, i) => {
  console.log('some:', i)
  return el > 5;
})

console.log(someReturn);

📌 every

조건을 만족하지 않는 요소가 1개 이상 있는지 = 모든 조건을 다 만족하는지

조건을 만족하는지 확인할 때 사용 ture, false 값으로 나옴

const numbers = [1, 3, 5, 7, 9]

const everyReturn = numbers.every((el, i) => {
  console.log('every:', i)
  return el > 5;
})

console.log(everyReturn);

주의

빈배열 []일 경우 콜백함수를 실행하지 않고 flase, true를 리턴한다.

const numbers = []  // 빈 배열

const someReturn = numbers.some((el, i) => {
  console.log('some:', i)
  return el > 5;
})

const everyReturn = numbers.every((el, i) => {
  console.log('every:', i)
  return el > 5;
})

console.log(someReturn);
console.log(everyReturn);

🔥 every 메소드는 빈 배열일 경우 무조건 true를 반환한다!!!

• 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용

• 하나만 있는 요소를 가져올 때도 반드시 배열로 반환함
• 조건을 만족하는 모든 값을 가져와야하기 때문에 처음부터 끝까지 반복 한다.

const fruits = [
  {name: 'banana', money: 1000 },
  {name: 'orange', money: 2000 },
  {name: 'grape', money: 1000 },
  {name: 'kiwi', money: 3000 },
  {name: 'guava', money: 2000 },
  {name: 'strawberry', money: 1000 },
  {name: 'lemon', money: 3000 },
  {name: 'peach', money: 4000 },
]

const cart = fruits.filter((el) => el.money === 1000);

console.log(cart);

📌 find

• 배열이 아닌 값만 반환한다.

• 위에서부터 검사하면서 조건에 맞는 값을 찾으면 반복을 멈추고 그 값만 반환하기 때문에 조건을 만족하는 하나의 값만 나온다.
• 조건에 맞지 않는 값을 찾으려 한다면 undefined 출력

const fruits = [
  {name: 'banana', money: 1000 },
  {name: 'orange', money: 2000 },
  {name: 'grape', money: 1000 },
  {name: 'kiwi', money: 3000 },
  {name: 'guava', money: 2000 },
  {name: 'strawberry', money: 1000 },
  {name: 'lemon', money: 3000 },
  {name: 'peach', money: 4000 },
]

const cart = fruits.filter((el) => el.money === 1000);

console.log(cart);

배열의 값을 하나씩 불러오고 인덱스와 배열을 가져올 수 있다. 새로운 변수에 할당하면 undefined 값을 부여받는다. 👉 새로운 배열로 반환할 수 없다. 👉 단순히 배열의 반복 작업을 필요할 때 사용한다.

const members = ['영훈', '윤수', '동욱', '태호'];

members.forEach((element) => {
  console.log(`${element}님이 입장하셨습니다.`)
})

members.forEach((element, i) => {
  console.log(`${i} ${element}님이 입장하셨습니다.`)
})

members.forEach((element, i, arr) => {
  console.log(`${i} ${element}님이 입장하셨습니다.`)
  console.log(arr);  // members 배열이 i번 찍힘
})

📌 map

map 메소드는 return 값으로 새로운 배열을 반환할 수 있다. 👉 반복 작업을 통해서 새로운 배열을 반환하고 싶을 때 사용한다.

const firstNames = ['영훈', '윤수', '동욱', '태호'];
const lastNames = ['김', '나', '박', '이'];

const fullNames = firstNames.map((element, i) => {
  return lastNames[i] + element;
})

-arrow function 적용

firstNames.map((element, i) => lastNames[i] + element)

🔥 주의

최대 반복 횟수는 배열의 길이 값 만큼만 반복한다. (무한루프에 빠지지 않음!)

1. 배열의 새로운 요소 추가될 때 => 배열의 길이만큼 추가

const members = ['영훈', '윤수', '동욱', '태호'];

members.forEach((element) => {
  console.log(`${element}님이 입장하셨습니다.`);
  members.push('새로운 멤버');
})

console.log(members);

배열의 길이: 4 👉 새로운 멤버 4번 추가됨

2. 배열의 길이가 줄어들 때 => 반복 횟수 줄어듦

const members = ['영훈', '윤수', '동욱', '태호'];

members.forEach((element) => {
  console.log(`${element}님이 입장하셨습니다.`);
  members.pop();
})

console.log(members);

pop()메서드는 배열의 마지막 요소를 제거하고 그 요소를 반환 👉 원본 배열을 수정!

📝 var

- 변수 선언

var example;  // 변수 선언문

선언단계와 초기화 단계가 동시에 진행된다. 선언단계를 통해 변수 이름을 등록하고, 초기화 단계를 통해 변수에 undefined를 할당해 초기화(최초로 값을 할당)한다. 👉 var 키워드로 선언한 변수는 어떠한 값도 할당하지 않아도 undefined라는 값을 가진다.

- 호이스팅

console.log(example);  // undefined

var example;  // 변수 선언문

자바스크립트 엔진은 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문 등)을 소스코드에서 찾아내 먼저 실행한다. 소스코드 평가 과정이 끝나면 비로소 변수 선언을 포함한 모든 선언물을 제외하고 소스코드를 순차적으로 실행한다. 👉 변수 선언문은 호이스팅에 의해 런타임 이전 단계에서 먼저 실행된다.

🔥 주의) 변수 선언은 런타임 이전에 먼저 실행되지만 값의 할당은 런타임에서 할당한다. 변수 선언과 할당을 하나의 문장으로 단축 표현해도 변수 선언, 값의 할당을 나누어서 실행한다. 👉 변수 선언 + 초기화 -> 값의 할당

console.log(example);  // undefined

var example = 10;  // 변수 선언 + 값 할당

console.log(example);  // 10

- 함수 레벨 스코프

같은 스코프 내에서 중복 선언이 허용되기 때문에 의도치 않게 변수값이 재할당되어 변경되는 부작용을 발생시킨다.

📝 let

중복 선언 허용하지않고 재할당만 가능 블록레벨 스코프 선언하기 전에 호출 시 Reference Error 발생 비어있는 값을 부여하면 undefined 반환

📝 cosnt

중복선언, 재할당 불가 하지만 객체를 할당하고 주소값을 참조하게 된다면 값의 변경이 가능해짐

에러가 발생하면?

그 순간 프로그램 자체가 멈춰버리고 그 이후의 코드는 더 이상 동작하지 않습니다. 동작을 멈추고 자동으로 에러 내용이 담긴 에러 객체가 만들어집니다.

에러 객체는 이름과 메시지를 가지고 있습니다

error.name, error.message

에러 유형

ReferenceError TypeError SyntaxError

의도적으로 에러 객체 만들기

const error = new TypeError('타입 에러가 발생했습니다.');

console.log(error.name)  // TypeError
console.log(error.message)  // 타입 에러가 발생했습니다.

throw error;

에러 발생시키기

throw new Error('에러가 발생했습니다.')

📌 try catch 문

예외 처리(Execption Handling)

• SyntaxError(문법에 어긋난 코드)와 달리 실행 가능한 코드에서 발생하는 에러를 다룹니다.

• try catch 문을 활용하면 에러 발생 시 프로그램을 멈추지 않고, 에러가 발생했을 때 동작할 코드를 다룰 수 있게 됩니다. 이후의 코드는 차례로 실행 가능합니다.
• try 문에서 에러가 발생해서 에러 객체가 만들어지면, 그 에러 객체를 catch 문 안에서 다룰 수 있습니다.

try {
  // 코드
} catch (error) {
  // 에러가 발생했을 때 동작할 코드
}

오류 발생 시점 이해하기

console.log('에러전');
const name = 'alice';
name = 'jiun';  // 🔥 error 발생! 

// 이후 코드 실행 중지

const course = 'java';
console.log(course);

👉 const를 재할당 했기 때문에 세번째 줄에서 TypeError 발생, 이후 코드는 실행되지 않는다.

try catch문 사용하기

try {
  console.log('에러전');
  const name = 'alice';
  name = 'jiun';

  const course = 'java';
  console.log(course);
} catch (error) {
  console.log(error);
  console.error(error);
  console.log(error.name);
  console.log(error.message);
}

catch()안의 파라미터 error는 객체이며, 원하는 다른 단어를 적어도 사용 가능하다. ex) errr, e ...등

try catch문 활용하기

function members(members) {
  try {
    for(const member of members) {
      console.log(member);
    }
  } catch (err){
    console.error(err);
    alert(`${err.name}가 발생했습니다. 콘솔창에서 확인해 주세요.`)
  }
}

const teamA = ['A', 'B', 'C' ,'D']
members(teamA);

const teamB = {name: 'Alice'}  // 🔥 에러 발생
members(teamB);
// 👉 객체는 for of문으로 돌릴 수 없음

const teamC = ['E', 'F', 'G' ,'H']
members(teamC);

정리

try catch 문은 각각의 코드블럭으로 이루어져 있기 때문에 try문에서 선언한 타이틀 변수는 catch문에서도 사용할 수 없고 밖에서도 사용이 불가능합니다. 각 스코프를 잘 생각해서 작성해야 합니다.

finally 문

try...catch문이 끝난 다음에 최종적으로 실행될 코드를 다룰 때 활용합니다. try문에서 에러가 발생하지 않는다면 try문의 코드가 모두 실행된 다음에, try문에서 에러가 발생한다면 catch문의 코드가 모두 실행된 다음 실행할 코드를 finally문에 작성하면 됩니다. 👉 try문에서 어떤 코드를 실행할 때 에러 여부와 상관 없이 항상 실행할 코드를 작성

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

finally문에서의 에러 처리는?

참고로 finally문에서 에러가 발생할 경우에는 다시 그 위에 있는 catch문으로 넘어가진 않습니다. 만약 finally문에서도 에러 처리가 필요한 경우에는 아래 처럼 try...catch문을 중첩해서 활용하는 방법이 있습니다.

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

삼항 연산자(Ternary operator)

조건 ? truthy 할 때 표현식 : falsy 할 때 표현식

function passChecker(score) {
  return score > CUT_OFF ? '합격' : '불합격!';
}

📌 Spread 구문

배열에 유용함 배열의 각각의 개별 값을 가져옴 배열을 좀 더 편하게 복사할 수 있음

const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3

const webPublishing = ['HTML', 'CSS'];
const interactiveWeb = webPublishing.slice();

interactiveWeb.push('JavaScript');

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

👉 slice(): 원본 배열이 그대로 보존 인자를 넘기지 않으면 배열의 처음 값부터 마지막 값까지 전체를 복제

스프레드 연산자 사용헤서 바꾸기

const interactiveWeb = [...webPublishing, 'JavaScript']

스프레드 연산자 사용해서 배열 합치기

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = [...arr1, ...arr2];
console.log(arr3);  // [1,2,3,4,5,6]

하나의 값으로 평가로 되는게 아닌 여러개의 목록으로 평가됨

const numbers = [1];
const number = ...numbers;  // SyntaxError!!!

배열을 객체에 담기

프로퍼티로 만들어진다! index를 갖게 됨

const members = ['태호', '종훈', '우재'];
const newObject = {...members};
console.log(newObject) // {0: '태호', 1: '종훈', 2: '우재'}

객체 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"}

주의 사항

• 객체로는 새로운 배열을 만들거나 함수의 아규먼트로 사용할 수는 없습니다.

• spread할 때는 반드시 객체를 표현하는 중괄호 안에서 활용해야 한다!!!!

함수 선언식

function printCodeit(){
  console.log('Codeit')
}

함수 표현식

함수 선언을 변수에 할당하거나 다른 함수의 아규먼트로 활용하면서 마치 함수 선언을 값처럼 활용해서 함수를 만드는 방식

const 함수명 = function(){}

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

📌 Parameter

👉 파라미터(Parameter) : 함수 소괄호 안어 들어가는 값 👉 아규먼트(Argument) : 함수를 호출하는 부분에서 값을 전달하는 부분

function greeting(name){
  console.log(`Hi! My name is ${name}`)
}

greeting('heesoo')

// 👉 파라미터 - name
// 👉 아규먼트 - 'heesoo'

파라미터 기본값

function greeting(name = 'Codeit', interest){
  console.log(`Hi! My name is ${name}!`)
  console.log(`I like ${interest}!`)
}

greeting('JavaScript');
// Hi! My name is JavaScript!
// I like undefined!

파라미터의 기본값과는 상관없이 아규먼트 순서대로 파라미터 안에 들어가기 때문에 name = 'Codeit'과 같이 기본값으로 지정되는 파라미터는 맨 뒤에 작성하는 것을 권장함

function greeting(name = 'Codeit', interest = 'JavaScript'){
  console.log(`Hi! My name is ${name}!`)
  console.log(`I like ${interest}!`)
}

greeting(undefined, 'Python');

👉 undefined을 아규먼트로 사용하면 파라미터의 기본값을 불러서 사용할 수 있음

📌 Arguments

함수 내부에서 arguments를 사용할 수 있음 = 유사배열 = 배열 메서드 사용 불가

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

📌 Rest Parameter

배열이기 때문에 배열의 메소드를 자유롭게 사용 가능 rest parameter를 먼저 사용하고 대체해야 될 경우에 arguments사용을 권장합니다.

function printArguments(...args) {
  // args 객체의 요소들을 하나씩 출력
  for (const arg of args) {
    console.log(arg); 
  }
}

printArguments('Young', 'Mark', 'Koby');

function printRankingList(first, second, ...others) {
  console.log('코드잇 레이스 최종 결과');
  console.log(`우승: ${first}`);
  console.log(`준우승: ${second}`);
  for (const arg of others) {
    console.log(`참가자: ${arg}`);
  }
}

printRankingList('Tommy', 'Jerry', 'Suri', 'Sunny', 'Jack');

📌 Arrow Function

👉 익명 함수를 좀 더 간결하게 표현할 수 있도록 ES2015에서 새롭게 등장한 함수 선언 방식 👉 함수를 정의할 때 활용될 수도 있고 콜백 함수로 전달할 때 활용할 수도 있습니다.

함수 정의

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

콜백 함수로 활용

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

현시점에 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트

데이터 타입의 특징과 종류

Falsy / Truthy

Falsy: false, null, undefined, 0, NaN, '' Truthy : true, 'Codeit', 123, -123, {}, []

AND / OR

(A && B) A : ture 👉 true가 올 경우 오른쪽 값을 반환 A : false 👉 flase값 바로 반환

(A || B) A : ture 👉 true값 바로 반환 A : false 👉 flase올 경우 오른쪽 값을 반환

console.log('Codeit' && 'JavaScript')  //'JavaScript'
console.log(null && undefined)  // null

console.log('String' && 123);  // 123
console.log({} || []);  // {}
console.log(0 && false);  // 0
console.log(null || undefined);  // undefined
console.log(NaN && 'Codeit');  // NaN
console.log('' || true);  // true
console.log('JavaScript' && null);  // null
console.log(3000 || undefined);  // 3000

AND 와 OR 연산자의 연산 우선순위

AND 와 OR 연산자 사이에서는 AND 연산자의 우선순위가 더 높습니다.

console.log(true || false && false); // true
console.log((true || false) && false); // false

console.log('Codeit' || NaN && false); // Codeit
console.log(('Codeit' || NaN) && false); // false

null 병합 연산자 ??

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

const example1 = null ?? 'I'; // I
const example2 = undefined ?? 'love'; // love
const example3 = 'Codeit' ?? 'JavaScript'; // Codeit

console.log(example1, example2, example3); // I love Codeit

example1과 2를 보시면, 지금 null 병합 연산자 왼편에 각각 null과 undefined가 있죠? 이렇게 연산자 왼편의 값이 null 이나 undefined라면 연산자 오른편의 값이 리턴되고, example3처럼 연산자 왼편의 값이 null 이나 undefined가 아니라면 연산자 왼편의 값이 리턴되는 원리로 동작합니다. 결과적으로 마지막 줄에서 콘솔에 출력되는 값은 I love Codeit이 되겠죠?

🔥 주의! 하지만 null 병합 연산자(??)는 왼편의 값이 null이나 undefined인지 확인하고 OR 연산자(||)는 왼편의 값이 falsy인지를 확인하기 때문에 아래 코드와 같이 null이나 undefined가 아닌 falsy 값을 활용할 때 결과가 서로 다르니깐, 이 부분은 꼭 기억해 두세요!

const title1 = false || 'codeit';
const title2 = false ?? 'codeit';

console.log(title1); // codeit
console.log(title2); // false

const width1 = 0 || 150;
const width2 = 0 ?? 150;  //null, undefined가 아니므로 0 출력

console.log(width1); // 150
console.log(width2); // 0

변수와 스코프

자바스크립트에는 다양한 변수 선언 키워드가 있습니다. 자바스크립트가 처음 등장할 때부터 사용되던 var와, 그리고 var의 부족함을 채우기위해 ES2015에서 새롭게 등장한 let과 const가 있는데요.

var 특징 변수 이름 중복선언 가능, 변수 선언 전에 사용 가능(호이스팅), 함수 스코프(함수를 기준으로 스코프를 구분) 특히나 중복된 이름으로 선언이 가능했던 특징은 여러 사람이 협업할 때 생각보다 자주 문제가 되곤 했었는데요. 이런 문제를 개선하기 위해 ES2015에서 let과 const가 등장했고, 다음과 같은 특징이 있습니다.

let, const 특징 변수 이름 중복선언 불가 (SyntaxError 발생) 변수 선언 전에 사용 불가 (ReferenceError 발생) 블록 스코프 덧붙여 const 키워드는 let 키워드와 다르게 값을 재할당할 수 없다는 특징도 있습니다. 그래서 ES2015 이후부터는 var보다 let과 const 키워드 사용이 권장된다는 사실도 참고해 두시면 좋을 것 같습니다.

✨ KeyboardEvent.type keydown: 키보드 버튼을 누른 순간 keypress: 키보드 버튼을 누른 순간 keyup: 키보드 버튼을 눌렀다 뗀 순간
✨ KeyboardEvent.key 이벤트가 발생한 버튼의 값
✨ KeyboardEvent.code 이벤트가 발생한 버튼의 키보드에서 물리적인 위치

keypress: 웹 표준에서 권장하지 않는 방법