im-p0ssible.log

[React] React hook

Mon, 16 Jun 2025 14:46:21 GMT

Hook

컴포넌트의 최상위 수준이나 커스텀 훅 내부에서만 사용 가능 (조건문, 반복문, 일반 함수 블럭 {} 내부에서 사용 불가능)

useState

컴포넌트에 state 변수를 추가할 수 있는 리액트 훅.

useState()

상태값(컴포넌트에서 관리하는 데이터)를 추가하기 위한 훅
컴포넌트가 렌더링 되는 동안에만 사용할 수 있는 특별한 함수
useState가 호출되는 순서대로 배열에 순서대로 저장되므로 리렌더링 될때에도 순서가 정확히 지켜져야 한다.
state로 만든 변수는 컴포넌트가 여러번 사용돼도 각각의 값을 따로 관리
```
const [state, setState] = useState(initialState);
```
매개변수*
initialState: 상태값의 초기값(초기 렌더링에 사용되고 리렌더링때는 무시됨)
리턴값*
state: 저장된 상태값
setState: 상태값을 변경하는 setter함수. setter를 통해 상태가 변경되면 해당 컴포넌트는 다시 렌더링됨
```
const [count, setCount] = useState(0);
```

const handleChange = () => { // setter 함수를 이용하여 상태값 변경 setCount(count + 1); }


## useEffect
- 컴포넌트 생명주기 이벤트를 등록하기 위한 훅
- 컴포넌트가 렌더링 이후에 수행해야 할 일을 부여하는 훅 -> 렌더링 이후(DOM 업데이트 수행 후) 매번 수행
- 컴포넌트가 리턴이 된 후(화면 렌더링 이후) 실행되는 것과 같은 효과

```jsx
useEfect(setup, dependencies?);

매개변수

setup: Effect 로직이 포함된 함수
- cleanup: setup 함수가 리턴한 함수로 컴포넌트가 업데이트 되거나(setup 함수 재실행될 때) 언마운트 될 때 호출 setup 함수를 사용하면 렌더링이 될 때 이전에 남은 함수가 실행되기 때문에 이런 메모리 누수를 막기 위해 cleanup 함수 사용
dependencies (선택사항): setup 함수 코드 내부에서 참조되는 모든 반응형 값들이 포함된 배열 -> 검사하고자 하는 값으로, 해당 배열 속 하나라도 수정되었을 경우 setup 함수 호출됨
- 빈 배열 \[] 을 지정하면 마운트 된 후 setup 함수 한번만 호출
- dependencies를 지정하지 않으면 컴포넌트가 업데이트 될 때 항상 setup 함수 호출

리턴값

undefined

useEffect(() => {
  // setup 함수 호출
  const timer = setInterval(() => {
    ...
  }, 1000);

  // cleanup 함수 호출
  return () => {
    clearInterval(timer)
  };
});

useReducer

useState와 같은 상태 업데이트 훅으로, 컴포넌트 외부에서 상태관리를 하고 싶을 때 사용

reducer 함수는 순수 함수여야한다.

const [state, dispatch] = useReducer(reducer, initialArg, init?);

매개변수*
initialArg: state에 전달 할 초기 값
init(선택사항): 초기 state를 반환하는 초기화 함수
- 할당되었을 경우 초기 state는 initialArg를 인자로 받아 호출한 결과가 할당
- 할당되지 않았을 경우 초기 state는 initialArg로 설정
반환값*
두개의 엘리먼트로 구성된 배열 반환
1. state: 상태값이 저장된 getter -> 컴포넌트에서 사용될 상태
2. dispatch: 상태값을 변경하는 setter 함수로, dispatch에 전달된 인자값이 reducer의 두번째 인자값 (action)으로 전달됨
```
function reducer(state, action){...}
```
매개변수*
reducer: state와 action을 인자로 받아 새로운 state를 반환하는 함수
- state: 리듀서에 전달되는 상태값
- action: dispatch에 전달한 인자값으로 수행할 작업의 종류와 필요한 인자값을 포함한 동작을 정의한 객체* 일반적으로 type 속성에 동작, value 속성에 값을 지정
```
interface CounterAction {
type: 'UP' | 'DOWN' | 'RESET';
value: number;
}
```

// counterReducer 함수 정의 // counterReducer 함수가 현재 상태(state), action을 받아와서 // action의 type에 따라 상태를 변경하고 새로운 상태를 반환 function counterReducer(state: number, action: CounterAction): number { let newState = state;

... // action으로 전달 받은 동작(type: UP, DOWN, RESET)과 값(value)으로 state를 변경 ...

// 변경된 state 반환 return newState }

function App(){ // useReducer를 사용하여 상태 관리 // counterReducer 함수에 initCount를 전달하고 // useReducer은 현재 상태(count)와 상태를 변경하는 함수(countDispatch)를 반환하여 상태 관리 const [count, countDispatch] = useReducer(counterReducer, initCount); ...

return ( // 버튼 컴포넌트에서 countDispatch 함수 사용 }


## useRef
- 컴포넌트가 다시 렌더링되어도 기존 상태값을 유지하는 변수 생성
- 함수 내부에 정의하는 지역변수는 컴포넌트가 리렌더링 되면 값이 초기화되는데, 이를 막기 위해 사용
```jsx
const ref = useRef(initialValue);

매개변수

initialValue: 초기값
리턴값*

{current: initialValue} 객체 반환 -ref.current 형식으로 사용

// useRef 훅을 사용하여 리렌더링 되어도 값이 유지되는 stepRef를 생성하여 저장
const stepRef = useRef(initCount);

function handleChange(e: React.ChangeEvent) { const newStep = Number(e.target.value); // stepRef의 current에 새로운 값 지정 stepRef.current = newStep }

return ( }


- JSX 태그에 `ref` 속성을 추가하면 브라우저 DOM 엘리먼트에 직접 접근 가능
```jsx
const refElem = useRef(null);

매개변수

null: 초기값
리턴값*

DOM 요소가 있는 속성 하나가 정의된 객체

// useRef 훅을 사용하여 초기값이 null인 ref 객체 선언
const stepElem = useRef(null);

function handleChange() { // input에 접근에 focus()와 같은 메서드 호출 stepElem.current?.focus(); }

// ref 속성으로 조작하려는 DOM 노드의 JSX에 전달 return ( )


### useState useRef 차이점
- `useState`: 리액트에서 직접 상태 관리하는 제어 컴포넌트
    -> 값이 변경되면 즉시 리렌더링
- `useRef`: 브라우저에서 입력값을 관리하는 비제어 컴포넌트
    -> 값이 변경되어도 리렌더링이 필요 없을 때 사용


## useMemo
- 지정한 **함수**를 호출하여 반환받은 결과값을 내부에 저장(캐싱)하는 함수
- 마지막으로 렌더링된 결과를 메모이제이션한다.
```jsx
const calculateValue = function(){..};
const cachedValue = useMemo(calculateValue, [dependencies]);

매개변수

calculateValue: 캐싱할 값을 계산하여 반환하는 순수 함수
dependencies: 의존 객체 배열
- calculateValue 코드 내에서 참조된 모든 반응형 값들의 목록(props, state, 컴포넌트 바디에 직접 선언된 모든 변수와 함수 포함)
- 배열의 값 중 하나라도 변경되면 calculateValue 함수 재호출
- 하나도 변경되지 않으면 캐시된 값 반환 -> 재사용
- 빈 배열 지정시 매번 캐시된 값을 반환
리턴값*
calculateValue 함수를 호출한 결과값 다음 렌더링중에 dependencies가 변경되지 않으면 캐시된 결과 반환 변경되었으면 calculateValue 함수를 재호출한 결과값

const isPrime = function(num: number){
  ...

  return prime;
};

// 리렌더링 되었을 때 이전 num값과 비교하여 num이 바뀔 경우에만 isPrime 함수를 재호출
// 리렌더링 되었을 때 이전 num값과 비교하여 num이 바뀌지 않을 경우 메모이제이션 된 값 반환
const prime = useMemo(() => isPrime(num), [num])

React.memo

컴포넌트를 메모이제이션 해준다
컴포넌트를 memoize한 후 리렌더링 될 때 props가 변경되지 않으면 memoize된 컴포넌트 반환
리렌더링 될 때 눈에 띄게 지연이 발생하는 경우 사용
리렌더링 될 때 props가 자주 변경되지 않는 컴포넌트에 사용
```
const MemoizedComponent = React.memo(SomeComponent, arePropsEqual?)
```
매개변수*
SomeConponent: memoize할 컴포넌트
arePropsEqual?: memoize된 컴포넌트를 반환할지, 컴포넌트를 다시 호출할지 결정하는 함수
- 컴포넌트의 이전 props 및 새로운 props를 인자로 받는 함수
- true: memoize된 컴포넌트 사용
- false: 컴포넌트를 다시 호출한 결과값 아요
- 생략 시 이전 props와 새로운 props를 얕은 비교하여 같으면 true, 다르면 false를 반환
리턴값*

// 컴포넌트 export할 때 사용
export default React.memo(Component);

부모가 정의한 이벤트 리스터를 자식에게 props로 전달할 때 부모가 리렌더링 되는 경우 자식도 리렌더링 되지만, 이때 props가 바뀌지 않으면 자식은 기존 DOM을 재사용하도록 메모이제이션 할 수 있음
- 이벤트 리스터를 컴포넌트 내부에서 정의하면 부모가 리렌더링될 때 리스너 함수도 새로 생성되므로 자식에 전달하는 props가 바뀌어 메모이제이션 되지 않고 자식도 리렌더링 발생
- useCallback을 사용하면 부모 컴포넌트가 재호출되어도 리스너가 수정되지 않고 유지되므로 자식도 기존 DOM을 재사용하여 성능이 향상됨

useCallback

컴포넌트 내부에서 정의한 함수를 캐시
컴포넌트가 다시 렌더링되어도 함수가 다시 생성되지 않고 캐시된 함수 사용
useCallback을 사용하면 부모 컴포넌트가 재호출되어도 리스너가 수정되지 않고 유지되므로 자식도 기존 DOM을 재사용하여 성능이 향상됨
```
const cachedFn = useCallback(fn, dependencies);
```
매개변수*
fn: 캐싱할 함수
dependencies: 의존 객체 배열
- fn내에서 참조되는 모든 반응형 값(proprs, state, 컴포넌트 안에서 직접 선언된 모든 변수와 함수)
- dependencies의 값이 바뀌면 새로운 함수를 생성하여 반환
- 빈 배열 지정시 매번 캐시된 함수를 반환
리턴값*
최초에는 fn 함수 반환
다음 렌더링부터는 dependencies가 변하지 않았다면 이전에 캐시된 함수 반환

dependencies가 변했다면 새로 생성된 fn함수 반환

const handlePayment = useCallback(() => {
alert(`배송비 ${shippingFees}원이 추가됩니다. 상품을 결제하시겠습니까?`);
}, [shippingFees]);

useMemo vs. React.memo vs. useCallback

useMemo

함수를 인자로 전달하고, 전달된 함수의 실행 결과(리턴값)를 memoize

React.memo

컴포넌트를 인자로 전달하고, 전달된 컴포넌트를 memoize

useCallback

함수를 인자로 전달하고, 전달된 함수를 memoize

차이점: 함수의 리턴 값 vs. 컴포넌트 vs. 함수 자체

리액트 컴파일러

자동 메모이제이션 useMemo, useCallback, React.memo를 사용하지 않아도 최적화된 코드 생성해줌
정밀한 의존성 추척 객체 전체가 아닌 실제 사용되는 속성만 추적
JSX 레벨 최적화 JSX 요소들을 개별적으로 캐싱

설치

npm i -D babel-plugin-react-compiler@rc

Vite 설정 - vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          ["babel-plugin-react-compiler", {
            // React 17, 18 사용 시
            runtimeModule: "react-compiler-runtime"
          }]
        ]
      }
    })
  ],
  // ...
});

use no memo

메모이제이션을 사용하고 싶지 않을 경우 명시
```
function Product({ ... }) {
"use noe memo";
...
}
```

ESLint

리액트 컴파일러를 사용하기 위해서는 리액트 규칙을 준수해야한다
따라서 ESLint 규칙을 추가해서 사용

설치

npm install -D eslint-plugin-react-hooks@^6.0.0-rc.1

Eslint 설정 - esline.config.js

// eslint.config.js
import * as reactHooks from 'eslint-plugin-react-hooks';
// ...

export default tseslint.config(
  // ...
  {
    // ...
    plugins: {
      'react-hooks': reactHooks,
      // ...
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      // ...
    },
  },
)

[React] 리액트 기초

Mon, 02 Jun 2025 08:57:55 GMT

React

SPA를 개발하기 위해 리액트를 사용한다
React 는 컴포넌트 기반의 프론트엔드 라이브러리
React 컴포넌트 이름은 항상 대문자로 시작
export import를 통해 모듈로 사용 모듈을 사용하려면
```
const sum = function(x, y){
  return x + y;
}

// lodash의 curry 함수를 사용해서 sum을 커링
const currySum = _.curry(sum);
console.log(currySum(30)(40));
```
Partial application
```
- 부분 적용 함수로, 기존 함수의 매개변수 중 일부를 미리 채워둔 상태의 함수
- 커링된 함수를 일부 단계까지만 호출한 후 반환받은 함수를 나중에 나머지 인자를 전달해서 실행
- lodash 의 _.partial() 함수 사용
```
```
// html 파일에 해당 라이브러리 추가
```
```
const sum = function(x, y){
  return x + y;
}

const sum100 = _.partial(sum, 100); // sum 함수의 x에 100을 미리 넣어둔다
console.log(sum100(10));  // sum 함수에 나머지 인자를 전달

// y에 값을 미리 넣어두고 싶은 경우
const sum100 = _.partial(sum, _, 100)
```
bind
```
- lodash의 _.partial() 함수와 비슷하나 미리 전달하는 인자에 this도 지정하는 기능이 추가됨
```
메모이제이션
```
- 이전의 계산 결과를 기억하는 함수
- 함수의 속성값으로 계산 결과를 캐시한다
- 공통 함수로 사용하는 것이 좋다
```
```
Function.prototype.memo = function(key){
  // 캐시를 위한 코드
  this._cache = this._cache || {};
  if(this._cache[key] !== undefined){ 
    return this._cache[key];
  }else{
    return this._cache[key] = this(key);
  }
};
```

[JS] class

Thu, 24 Apr 2025 09:02:00 GMT

class

- class는 함수이며, 선언문과 표현식 방식으로 사용
- 생성자 함수를 쉽게 기술해주고, 객체를 생성하고 prototype 기반의 상속을 보다 명료하게 표현
- class 선언문은 호이스팅이 되지만, TDZ 제한으로 인해 초기화 전에 호출하면 에러 발생

class 선언문

class ClassName {
  ...
}

class 표현식

const ClassName = class {
  ...
}

class 메서드 정의

- 멤버 변수의 초기화는 constructor 메서드에 정의
- class의 바디에는 클래스 멤버변수(속성)와 메서드 정의

constructor 메서드

- 객체를 생성하고 초기화하는 메서드(생략 가능)
- 하나만 작성 가능
- super()로 부모의 생성자 호출 가능

class HighSchool{
  constructor(kor, eng){
    this.kor = kor;
    this.eng = eng;
  }
}

const s1 = new HighSchool(100, 91);

prototype 메서드 정의

- 클래스 내부에 생성
- 클래서 인스턴스 생성 후 인스턴스.메서드명()으로 호출

class HighSchool{
  constructor(kor, eng){
    this.kor = kor;
    this.eng = eng;
  }

  // prototype 메서드 정의
  sum() {
    return this.kor + this.eng;
  }
  avg() {
    return Math.round(this.sum() / 2);
  }
}

const s1 = new HighSchool(100, 91);
console.log(s1.sum());
console.log(s1.avg());

class 상속

extends

- 상속을 통해 자식 클래스 정의
- class 자식클래스명 extends 부모클래스명 {}

class HighSchool{
  constructor(kor, eng){
    this.kor = kor;
    this.eng = eng;
  }
  sum() {
    return this.kor + this.eng;
  }
  avg() {
    return Math.round(this.sum() / 2);
  }
}

const s1 = new HighSchool(100, 91);
console.log(s1.sum());
console.log(s1.avg());


class College extends HighSchool{
  constructor(kor, eng){
    super(kor, eng); // 부모(HighSchool)의 생성자 호출
  }

  // 자식 함수에서 메서드 추가 가능
  grade(){
    let level = 'F';
    const avg = this.avg();
    if(avg >= 90){
      level = 'A';
    }else if(avg >= 80){
      level = 'B';
    }else if(avg >= 70){
      level = 'C';
    }else if(avg >= 60){
      level = 'D';
    }
    return level;
  }
}

const c1 = new College(80, 99);
console.log(c1.sum());
console.log(c1.avg());
console.log(c1.grade());

자식 함수에서 constructor를 생략할 경우 자동으로 constructor가 생성되며 부모의 생성자 함수를 가져오게 된다.

constructor를 생성하고 super()를 생략할 경우 에러가 발생한다.

// constructior()를 생략할 경우 자동으로 추가
constructor(...args){
  super(...args);
}

[JS] 함수 호출과 this

Wed, 23 Apr 2025 11:36:58 GMT

함수 호출

함수로 호출

- 함수명()
- this는 window 객체로, window 객체는 어디서나 참조 가능하므로 this를 사용할 필요 없음

function f1(){
  console.log(this); // window 객체 출력
  this.console.log('hello'); // this가 window 객체이기 때문에 hello 출력
  window.console.log('hi'); // hi 출력
  console.log('window 생략'); // window 생략 출략
};
const f2 = function(){
  console.log(this); // window 객체 출력
};

// 함수로 호출
f1();
f2();

console.log(this); // window 객체 출력

메서드로 호출

- 객체에 정의된 메서드를 호출할 때
- 객체.메서드명()
- this는 메서드를 정의한 객체
- 함수를 하나만 정의하고 여러 객체에서 메서드로 사용

const getPingName = function(){
  return this.name;
}

const baro = new Object();
baro.name = '바로핑';
baro.age = 9;
baro.getName = getPingName;

const rara = {
  name: '라라핑',
  age: 8,
  getName: getPingName
};

// 메서드로 호출
console.log(baro.age, baro.getName()); // getName()의 this는 baro, 9 바로핑 호출
console.log(rara.age, rara.getName()); // getName()의 this는 rara, 8 라라핑 호출

화살표 함수 호출

- 일반 함수나 메서드와 동일하게 호출하지만 함수 내부에 arguments나 this가 생성되지 않고 상위 컨텍스트의 arguments, this 사용

const getPingName = () => {
  return this.name; // 상위 Scope this를 찾는다 (window)
}

const baro = new Object();
baro.name = '바로핑';
baro.age = 9;
baro.getName = getPingName;

const rara = {
  name: '라라핑',
  age: 8,
  getName: getPingName
};

console.log(baro.age, baro.getName()); // getName()의 this는 global, 9 undefined 출력
console.log(rara.age, rara.getName()); // getName()의 this는 global, 8 undefined 출력
// 전역변수로 name이 선언되어있지 않기 때문에 undefined 출력

apply(), call() 메서드로 호출

- 함수에 정의된 메서드
- 함수명.apply() , 함수명.call()
- this는 apply(), call() 메서드의 첫번째 인자로 전달되는 객체
- this를 명시적으로 지정할 수 있음
- 콜백 함수 호출 시 주로 사용

function add(a, b){
  console.log(this);
  const result = a + b;
  return result;
}

console.log(add.apply({name: '어플'}, [50, 60])); // 110, this = {name: '어플'}
console.log(add.call({name: '콜'}, 30, 40)); // 70, this = {name: '콜'}

apply(p1, p2)

- 두개의 매개변수를 가짐
- 첫 번째 매개변수(p1): this로 사용할 객체 전달
- 두 번째 매개변수(p2): 함수에 전달할 인자값 배열

call(p1, p2, p3, ...)

- 여러개의 매개변수를 가짐
- 첫 번째 매개변수(p1): this로 사용할 객체 전달
- 두 번째 이후의 매개변수(p2, p2, p3, ...): 함수에 전달할 인자값을 차례대로 지정

배열의 push 메서드를 이용하여 객체를 배열처럼 동작시키기

- this로 지정된 Array 객체의 length 속성값에 해당하는 속성을 만들고 지정한 요소를 저장한 후 length를 하나 증가시킨다
- Array.prototype.push.call(객체, 추가할 요소)

const arr = { 
  length: 3,
  0: 'orange',
  1: 'yellow',
  2: 'green',
  push: function(elem){
    Array.prototype.push.call(this, elem);
  }
};

arr.push('black')
arr.push('white');

배열 데이터를 각각의 매개변수로 분리하여 전달

function smallest(nums){
  const min = Math.min.apply(...nums) // 전개 구문
  return min;
}

console.log(smallest([10,100]));  // 10
console.log(smallest([200,100,50,60,80,30]));  //30
console.log(smallest([100,20,60,50,70]));  // 20

생성자 함수

- new 함수명(), 함수명은 대문자로 시작
- this는 생성자를 통해 생성된 객체
- 생성자로 호출된 함수는 비어있는 객체를 새로 생성
- 새로 생성된 객체는 this 매개변수로 생성자 함수에 전달
- 명시적으로 반환하는 객체가 없다면 생성된 객체를 반환

function Ping(name, age){
  this.age = age;
  this.name = name;
  this.getName = function(){
  return this.name 
  };
}

const baro = new Ping('바로핑', 9); 
const rara = new Ping('라라핑', 8);
const copyPing = new Ping('카피핑', 12);

baro.age++;
baro.height = 120;

console.log(baro.age, baro.getName()); 
console.log(rara.age, rara.getName()); 
console.log(copyPing.age, copyPing.getName());

[JS] prototype

Wed, 23 Apr 2025 08:09:18 GMT

프로토타입

- 모든 함수가 기본으로 가지고 있는 속성으로 빈 객체로 생성된다
- prototype에 추가한 속성은 해당 함수가 생성자로 사용될 때 생성된 인스턴스 내부 링크로 참조되어 사용된다
- 생성자 함수를 통해 생성되는 인스턴스의 메서드를 정의하는 역할

const Score = function(kor, eng){
  this.kor = kor;
  this.eng = eng;
  // 생성자 내부에 메서드 정의
  this.sum = function(){
    return this.kor + this.eng;
  }
};
// 프로토타입에 메서드 정의 (함수 외부에 정의)
Score.prototype.avg = function(){ 
  return this.sum() / 2;
}

// 생성자 함수로 객체 생성
const s1 = new Score(90, 80);

생성자 함수 내부에 메서드를 정의할 경우

새로운 객체를 생성할 때 마다 sum 함수가 새로 생성되고 -> 각 객체마다 메서드 복사
메모리 관리에 비효율적

프로토타입에 메서드를 정의하는 경우

모든 인스턴스를 공유하기 때문에 같은 함수를 사용한다. -> 동일한 메서드 사용
메모리 관리에 효율적

프로토타입 체인

- 모든 함수는 프로토타입 객체를 갖고있다.
- 모든 객체는 해당 객체를 만드는데 사용된 생성자를 참조하는 constructor 속성의 객체가 정의되어 있다.
- constructor 속성은 객체 생성 시 자동으로 연결되며, 객체와 생성자 함수 사이의 참조 링크를 제공한다.
- 프로퍼티는 해당 객체에서 먼저 찾고 실패했을 때 프로토타입을 확인한다

1. 객체에 해당 프로퍼티가 있으면 사용
2. 객체에 연결된 프로토타입에 해당 프로퍼티가 있으면 사용
3. 프로토타입에도 해당 프로퍼티가 없으면 연결된 프로토타입에서 찾는다
... 찾을 때 까지 반복
4. 최상위 프로토타입인 Object까지 찾아서 해당 프로퍼티가 없으면 그 값은 undefined

위 코드의 프로토타입 체인

1. s1 객체(Score 함수)에서 avg 메서드 탐색
2. s1의 프로토타입(Score.prototype)에서 avg 메서드 탐색
3. 찾으면 해당 메서드 실행

프로토타입 체인의 마지막 객체

- 모든 객체의 프로토타입 체인 마지막 객체는 Object이다.
- Array, String, Number, Data, Function 등 내장 객체와 Score, Ping 등 사용자가 정의한 객체는 모두 프로토타입 체인에 의해 자동으로 Object의 메서드를 사용할 수 있다.

내장된 생성자 함수의 프로토타입

- Object, Array, Function, Data 등
- 내장된 생성자 함수도 프로토타입 속성이 있으므로 해당 함수에 속성, 메서드를 추가해서 네이티브 객체의 기능을 확장할 수 있다.

typeof

- 객체의 타입을 반환
- 기본 데이터 타입과 함수를 제외한 모든 인스턴스에 대해 object로 반환

instanceof

- 객체가 지정한 생성자를 통해 생성되었는지 판단
- 직접 생성된 생성자가 아니더라도 프로토타입 체인에 있는 생성자라면 true 반환

프로토타입 체인을 이용한 상속

- 하위 생성자(자식)의 프로토타입을 상위 생성자(부모)의 객체로 지정
- 상위 생성자의 모든 속성을 물려받아 사용할 수 있음
- Object.create(): 지정한 prototype 객체를 참조하는 인스턴스 생성

// HighSchool
function HighSchool(kor, eng){
  this.kor = kor;
  this.eng = eng;
}

HighSchool.prototype.sum = function(){
  return this.kor + this.eng;
}

HighSchool.prototype.avg = function(){
  return Math.round(this.sum() / 2);
}


const s1 = new HighSchool(100, 91);
console.log(s1.sum());
console.log(s1.avg());

// College
function College(kor, eng){
  HighSchool.call(this, kor, eng)
}

// 상속 함수 불러오기
inherite(HighSchool, College)

// Child가 Parent를 상속받는다
function inherite(Parent, Child){
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child; 
}


College.prototype.grade = function(){
  let level = 'F';
  const avg = this.avg();
  if(avg >= 90){
    level = 'A';
  }else if(avg >= 80){
    level = 'B';
  }else if(avg >= 70){
    level = 'C';
  }else if(avg >= 60){
    level = 'D';
  }
  return level;
}

const c1 = new College(80, 99);
console.log(c1.sum());
console.log(c1.avg());
console.log(c1.grade());

console.log(College.prototype)

생성자 함수와 객체를 생성하고 prototype의 복잡함을 해결하기 위해 ES6에서 추가된 class 키워드를 사용하면 상속을 더 쉽게 사용할 수 있습니다.

[JS] 이벤트 핸들러

Tue, 15 Apr 2025 08:50:58 GMT

이벤트

- 브라우저에서 어떤 일이 일어났음을 알려주는 신호
- 클릭, 키보드 입력, 마우스 이동, 스크롤등의 작업

마우스 이벤트

- click: 해당 element를 클릭(눌렀다 떼기)했을 때 발생
- dbclick: 해당 element를 더블 클릭했을 때 발생
- mousemove: 해당 element에서 마우스를 움직였을 때 발생
- mouseover: 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생
- moustout: 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생
- mousedown: 해당 element에서 마우스 버튼을 눌렀을 때 발생
- mouseup: 해당 element에서 눌렀던 마우스 버튼을 떼었을 때 발생
- contextmenu: 마우스 오른쪽 버튼을 눌렀을 때 발생

키보드 이벤트

- keydown: 키가 눌렸을 때 발생
- keyup: 키가 올라갔을 때 발생

폼 이벤트

- focus: 해당 element에 포커스 되었을 때 발생
- blur: 해당 element에서 포커스를 잃을 때 발생
- input: 값을 수정할 때마다 발생
- change: element 변경이 끝나면 발생
- submit: form이 서버로 전송될 때 발생

스크롤 이벤트

- scroll: 스크롤바를 조작하면 발생

문서 로딩 이벤트

- load: HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생
- DOMContentLoaded: 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생
- beforeunload: 사용자가 사이트를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜줄 때 발생
- unload: 사용자가 진짜 떠나기 전에 사용자 분석 정보를 담은 통계자료를 전송하고자 할 때

window.addEventListner('load', function(){
  // 코드 작성
});

- 'load' 보다 사용자에게 더 빠르고 정상적인 동작을 제공하기에 DOM 관련 스크립트에서 유리하다

document.addEventListener('DOMContentLoaded', function(){
  // 코드 작성
});

on

- DOM Level 0 방식(비표준)
- HTML 태그에 인라인으로 직접 작성할 수 있다.
- 요소 노드의 on속성에 이벤트 핸들러를 등록하면 가 발생했을 때 등록한 핸들러가 호출됨
- `onclick`, `onmousemove`, `onkeydown`등

HTML

- HTML 요소의 `on` 속성의 값으로 이벤트 발생시 실행할 코드를 등록

Script

- `elem.on` 속성에 이벤트 핸들러 추가

onclick 중첩

- HTML과 script에 같은 함수가 생성되거나 script 내에서 같은 함수를 여러개 생성하는 경우 기존값이 사라지고 후위에 생성된 함수만 남기때문에 나중에 생성된 코드만 실행된다.


// 실행 결과 '누름 3'만 출력된다.

addEventListener

- DOM Level 2 방식(표준)    
- 요소 노드에 event 발생시 실행할 handler 함수 등록
- `elem.addEventListener(event, handler, [useCapture])`
    - event: 이벤트 이름(`click`, `mousemove`, `keydown` 등)
    - handler: 핸들러 함수
    - useCapture: 캡처링 단계의 이벤트 캐치 여부, false가 기본값이고 버블링 단계의 이벤트를 캐치

btn1.addEventListener('click', function(){
  // 코드 작성
});

addEventListener 중첩

- script 내에서 같은 함수를 여러개 생성하는 경우 기존 함수가 사라지지 않고 추가되는 방식이라 모든 함수를 출력한다.

btn.addEventListener('click', function(){
  console.log('누름 1');
});
btn.addEventListener('click', function(){
  console.log('누름 2');
});

// 실행 결과 '누름 1', '누름 2' 둘 다 출력된다.

removeEventListener

- 요소 노드에 event 발생시 실행할 handler 함수를 제거
- 핸들러를 등록할 때 지정했던 매개변수와 동일한 인자값의 핸들러가 삭제
- `fucntion 함수명()` 으로 선언해야만 제거된다.

// 제거 안되는 예시
const btn = document.querySelector('button');
btn.addEventListner('click', function(){
  console.log('버튼 클릭');
});
btn.removeEventListener('click', function(){
  console.log('버튼 클릭');
});

// 제거되는 예시
const btn = document.querySelector('button);
function handleClick(){
  console.log('버튼 클릭');
}
btn.addEventListener('click', handleClick, true);
btn.removeEventListener('click', handleClick, true);

[JS] 노드 생성, 추가, 삽입, 삭제, 복사

Tue, 15 Apr 2025 07:41:15 GMT

노드 생성

createElement(nodeName): 지정한 태그명으로 요소 노드 생성
createTextNode(nodeValue): 지정한 내용으로 텍스트 노드 생성

createAttribute(attributeName): 지정한 이름으로 속성 노드 생성

// 요소 노드  태그 생성
const newLi = document.createElement('li');

// 텍스트 노드 '우유' 생성 const newTxt = document.createTextNode('우유');


# 노드 추가
- `요소노드.appendChild(childNode)`: 지정한 노드`(childNode)`를 노드요소의 마지막 자식 노드로 추가
- 이미 DOM에 존재하는 노드를 추가하면 원래 위치에서 해당 노드를 제거하고 새 위치에 추가한다
```js
// newLi 노드 마지막에 newTxt 노드 추가
// 우유
newLi.appendChild(newTxt);

// shoppingList 노드 마지막에 newLi 노드 추가
shoppingList.appendChild(newLi);

노드 삽입

요소노드.inserBefore(newNode, targetNode): 지정한 노드(newNode)를 targetNode 앞에 삽입

// shoppingList의 firstChild 노드 앞에 newli를 추가
shoppingList.insertBefore(newLi, shoppingList.firstChild);

노드 삭제

요소노드.remocChild(childNode): 지정한 노드(childNode)를 삭제한다

이 방법보다는 보편적으로 요소노드.remove()를 사용한다.

// targetList[i] 노드의 firstLi 노드를 삭제한다.
targetList[i].removeChild(firstLi);

노드 복사

노드.colneNode(haveChild): 지정한 노드(haveChild)를 노드 맨 마지막으로 복사한다.
haveChild가 true면 하위모든 노드를 같이 복사하고, false면 지정한 노드만 복사한다. ```js // 노드 복사 const cloneLi = shoppingList.firstElementChild.cloneNode(true); // 복사한 노드 추가 shoppingList.appenChild(cloneLi);

[JS] 노드 찾기

Mon, 14 Apr 2025 08:36:53 GMT

노드

DOM 트리구조의 객체 하나하나를 노드라고 한다.
문서 노드, 요소 노드(태그), 속성 노드(요소의 속성), 텍스트 노드(요소의 내용) 등

노드 찾기


    두부
    계란
    라면

태그의 id 이용

document.getElementById(id)

id 속성값에 해당하는 노드 객체를 반환

// id가 "purchases"인 요소 노드 찾기
const shoppingList = document.getElementById("purchases");
// ul 반환

태그의 class 이용

document.getElementsByClassName(className)
class 속성값에 해당하는 노드의 목록을 반환

배열 형태로 반환되므로 인덱스 지정 필요

const shoppingList = document.getElementsByClassName('list')[0];
// ul 반환


### 태그명 이용
- `요소노드.getElementsByTagName(tagName)`
- 유사 배열 객체로 반환
- 인덱스 지정 가능
```js
// 태그명이 "li"인 요소 노드 찾기
const liList = shoppingList.getElementsByTagName('li');
// // [li, li, li] 반환

const secondLi = movies.getElementsByTagName('li')[1];

트리구조 이용

부모/자식 노드 찾기

요소 노드의 속성 | 설명 |----|----| childNodes|자식 노드가 배열 형태로 저장 firstChild|첫번째 자식 노드(요소, 텍스트, 주석) firstElementChild|첫번째 자식 요소 노트 lastChild|마지막 자식 노드(요소, 텍스트, 주석) lastElementChild|마지막 자식 요소 노드 parentNode|부모 노드

const firstItem = shoppingList.firstChild;
// 요소, 텍스트, 주소 등 모든 노드를 찾기 때문에 \n(줄바꿈) 반환

const firstItem = shoppingList.firstElementChild 
// 두부
 반환

형제 노드 찾기

요소 노드의 속성 | 설명 |---|----| previousSibling|바로 앞의 형제 노드(요소, 텍스트, 주석) previousElementSibling|바로 앞의 형제 노드 nextSibling|바로 뒤의 형제 노드(요소, 텍스트, 주석) nextElementSbling|바로 뒤의 형제 요소 노드

const secondItem = firstItem.previousElementSibling;
// 계란
 반환

CSS 셀렉터 이용

지정한 selector 구문에 매칭되는 노드 목록 중 첫번째 노드 반환 document.querySelector(selector)

지정한 selector 구문에 매칭되는 노드 목록 반환 document.querySelectorAll(selector)

const lastItem = document.querySelector('#purchases > li:last-child').firstChild.nodeValue;
// 라면 반환

nodeValue

노드 찾기를 하면 객체를 출력한다 ex)
두부

따라서 노드의 텍스트 값만 반환하기 위해 nodeValue 사용

// lastElementChild > shoppingList의 마지막 자식: 라면
// firstChild > 라면의 첫번째 노드 객체 선택: "라면"
// nodeValue > 실제 텍스트 값 반환: 라면
const lastItem = shoppingList.lastElementChild.firstChild.nodeValue
// 라면 반환

// nodeValue를 사용하여 텍스트 내용 수정
firstTextNode.nodeValue = '양파';

[JS] 변수 스코프

Fri, 11 Apr 2025 07:55:27 GMT

변수

var

함수 단위의 유효범위를 갖는 변수 선언문
사용하지 않는 것을 권한다.

let

블록 단위의 유효범위를 갖는 변수 선언문

const

블록 단위의 유효범위를 갖는 상수 선언문
const는 변수의 재할당을 막는다

전역 변수

함수 외부에서 선언한 변수
스크립트 내 어디에서나 접근 가능
페이지가 로딩될 때 한번 생성하여 값이 유지
브라우저 환경에서sms window 객체의 속성으로 지정됨
사용하지 않는 것이 좋다

지역 변수

함수 내부에서 선언한 변수
해당 함수 내부에서만 접근 가능
함수가 호출될 때마다 새로 생성하여 값이 초기화
함수 내부에서 선언하지 않고 바로 사용하는 변수는 전역 변수로 동작

const num1 = 20; // 전역 변수

function max(n1, n2){ // 지역 변수
  let result; // 지역 변수
  if(n1 > n2){
    result = n1;
  }else{
    result = n2;
  }
  return result;
}
console.log(max(10, num1)); // 20
console.log(max(200, num1)); // 200

변수 우선순위

가까운 곳부터 찾는다
지역 변수 영역에서 먼저 찾고, 없을 경우 전역 변수에서 찾는다

지역변수 유효 범위

자바스크립트에서의 var로 선언한 변수는 함수 단위의 유효범위를 갖는다
let과 const는 블록 단위의 유효범위를 갖는다.

[JS] 배열

Thu, 10 Apr 2025 08:23:43 GMT

배열

하나의 변수에 여러개의 값을 지정하는 데이터 구조
순서정보 index는 0부터 시작한다.
크기를 미리 지정하지 않는다.
배열명[index]

배열 생성 및 초기화

// Array 클래스로 배열 생성 및 초기화
const arr = new Array(1, 2, 3);

// JSON 표기법으로 배열 생성 및 초기화
const arr = [ 1, 2, 3 ];

요소 추가

push(): 배열의 메서드로, 일반 object에서는 사용이 불가능 배열의 마지막에 요소 추가

// 지정한 배열의 마지막에 요소를 추가
arr.push(10); // [ 1, 2, 3, 10 ]
arr[arr.length] = 300; [ 1, 2, 3, 10, 300 ]

arr[5] = 20; // [ 1, 2, 3, 10, 300, 20 ] arr[6] = 30; // [ 1, 2, 3, 10, 300, 20, 30 ]

// 중간 인덱스를 건너띄고 요소 추가 // 비어있는 배열은 undefined 값을 가짐 arr[10] = 200; // [ 1, 2, 3, 10, 300, 20, 30, , , , 200 ]


## 요소 갱신

// 기존 값을 변경 arr[1] = 100; // [ 1, 100, 3, 10, 20, 30, , , , 200 ]


## 배열 출력

console.log(arr); // 출력 결과: [ 1, 100, 3, 10, 300, 20, 30, <3 empty items>, 200 ]

// 배열의 길이 출력 console.log(arr.length); // 출력 결과: 11

// 배열의 마지막 값 출력 console.log(arr[arr.length-1]); // 출력 결과: 200


## 배열의 모든 요소 접근

// 배열 생성 const arr = [4, 1, 3, 8];

### for문

for(let i = 0; i


### for-of문
- index 사용 없이 배열 요소의 값만 꺼내서 사용

for(let elem of arr){ console.log(elem); } // 출력 결과: 4 1 3 8


## 2차원 배열

### 2차원 배열 생성

const numbers = [ [2, 4, 6, 8], [3, 6, 9, 12], [4, 8, 12, 16], [5, 10, 15, 20] ];


### 2차원 배열 출력

console.log(numbers[1]); // 출력 결과: [3, 6, 9, 12] console.log(numbers[2]); // 출력 결과: [4, 8, 12, 16]

console.log(numbers[0][2]); // 출력 결과: 6 console.log(numbers[3][2]); // 출력 결과: 15


### 2차원 배열 접근 

#### for문

let sum = 0; for (let i =0; i


#### for-of문

let sum = 0; for(rowArr of numbers){ for(elem of rowArr){ sum += elem } } console.log(sum); // 출력 결과: 140



# 유사 배열 객체
- 배열과 비슷하게 사용할 수 있는 객체
- length 속성 사용 가능, index를 통한 접근 가능, push 메서드 사용 불가능
- 읽기를 목적으로 사용된다
- 적은 비용으로 생성 가능

## 유사 배열 생성

const arr = { length: 3, // length 속성에 크기를 지정하고 0: 'orange', // 0부터 증가하는 객체를 지정 1: 'yellow', 2: 'green', } };

[JS] 함수 - Function

Thu, 03 Apr 2025 08:52:36 GMT

함수

- 명령어의 묶음으로 특정 기능을 재사용하고 싶을 때 작성
- 두번 이상 사용할 일이 있다면 함수로 만드는 것이 좋다.
- 함수를 선언해도 호출하지 않으면 실행하지 않는다.
- 매개변수는 필수가 아니다.

자바스크립트의 함수는 일급 객체이다. 함수 == (호출 + 객체)

// 형식
function 함수명 (매개변수) {
실행할 구문;
...
return 반환값
}

// 함수 호출 const result = 함수명(인자값)


## 일급 객체
    - 변수, 배열 엘리먼트, 다른 객체의 프로퍼티에 할당될 수 있다
    - 함수의 인자로 전달될 수 있다
    - 함수의 결과 값으로 반환될 수 있다
    - 리터럴로 생성될 수 있다
    - 동적으로 생성된 프로퍼티를 가질 수 있다
    - 콜백 함수, 고차 함수, 클로저 가능

### 콜백 함수
    - 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것
    - 특정한 상황이 되거나(이벤트 발생) 지정한 시간이 흐르면(timeout) 또는 특정 작업의 수행이 끝나면 호출하도록 지정한 함수
    - 익명함수 사용
```js
function sayHello(name, callback){
  const words = '안녕하세요 저는 ' + name + ' 입니다';

  callback(words);
}

sayHello("이름", function (name){
  console.log(name);
});

고차 함수

- 함수를 인자로 받거나 함수를 반환하는 함수
- `.map()`, `.filter()` 등
- Currying(함수를 반환), Partial application(함수를 인자로 받고 함수를 반환)

클로저

- 내부 함수가 외부 함수의 스코프에 접근할 수 있게 하며 외부 함수의 실행이 끝난 후에도 외부 함수의 변수에 접근할 수 있게 한다

함수 생성

선언문

- function 키워드로 시작하는 함수 정의
- 함수 이름: 생략 가능(익명함수, 기명함수)
- 매개변수 목록: 쉼표로 구분, 생략 가능, 괄호 필수
- 함구 본문: 생략 가능, 중괄호 필수

// 기명함수
function sayHello () {
  console.log('안녕 Function!');
}

// 함수 호출
sayHello();

표현식

- 함수 정의를 변수에 할당하여 변수명을 함수명처럼 사용
- 주로 익명함수 사용

익명함수

- 변수에 익명함수 지정

const add = function(x, y){
  const result = x + y;
  return result;
}
console.log(add(10, 20));

기명 함수

- 변수에 기명함수 지정
- 변수명을 함수명처럼 사용
- 함수명을 통한 접근은 해당 함수 내부에서만 사용 가능(재귀함수)

const add = function sum(x, y){
  const result = x + y;
  return result;
}

console.log(add(10, 20));
console.log(sum(10, 20)); // 에러 발생

// 함수명을 통한 접근 예시 (재귀함수)
const f = function factorial(n){
    if (n===1) return 1;
  return n * factorial(n-1);
};

console.log(f(5));
console.log(factorial(5)); // 에러 발생

new Function 생성자 함수

- `new`를 붙아고 대문자로 시작
- `functionBody`를 생성할 때 매개변수 괄호의 맨 끝에 적는다
- 가독성이 떨어져서 잘 사용 안함

const add = new Function('x', 'y', 'const result = x + y; return result;')

console.log(add(10, 20));

화살표 함수

- 함수 표현식의 대안으로 익명함수로만 정의 가능
- 실행할 코드가 하나만 있다면 함수 본문의 중괄호 생략 가능
- 매개변수가 하나만 있다면 매개변수의 괄호 생략 가능
- 매개변수가 없는 경우 빈 괄호 필수
- 선언문 방식에는 사용 불가능(익명함수로만 정의 가능하기 때문에)

// 기존 함수
let add10 = function(x) {
  return x + 10;
};

// 화살표 함수
add10 = x => {
  return x + 10;
}

// 화살표 함수 축약
add10 = x => x + 10;

참조 타입

Call by Value - 값에 의한 호출

- 기본 데이터 타입은 실제 데이터를 저장하고 다룸
- 값을 복사하여 전달하기 때문에 함수 안에서 변경한 값이 함수 밖에서는 유지되지 않음

Call by Reference - 참조에 의한 호출

- 참조형 데이터 타입은 실제 데이터가 있는 위치의 주소를 저장하고 다룸
- 주소를 전달하기 때문에 함수 안에서 변경한 값이 함수 밖에서도 유지됨

function add10(data1, data2) {
  data1 += 10;
  data2[0] += 10;
  console.log('함수 내부', data1, data2[0]); // 90 90
}

let d1 = 80; // 원시타입 - number
let d2 = [ 80 ]; // 참조 타입 - array(object)

console.log('함수 호출 이전', d1, d2[0]); // 80 80

add10(d1, d2);

console.log('함수 호출 이후', d1, d2[0]); // 80 90

매개변수와 인자의 수

- 자바스크립트는 약형언어이기 때문에 매개변수와 함수 호출에 사용되는 인자의 수가 달라도 에러가 발생하지 않는다.
-

매개변수 > 인자

- 부족한 인자에 대한 매개변수에는 undefine가 지정

function add(x, y, z)
  console.log(z); // undefined 출력
  return x + y;
}
console.log(add(3, 4)); // 7 출력

매개변수 < 인자

- 남는 인자에 대해서는 처리할 매개변수가 없기 때문에 무시됨

function add(x, y)
  return x + y;
}
console.log(add(3, 4, 5)); // 7 출력

암묵적 매개변수

- 모든 함우세어 명시적으로 선언하지 않고 암묵적으로 사용할 수 있는 매개변수
- arguments, this

arguments

- 함수 내에서 arguments 변수로 접근 가능
- 유사 배열 객체로 length 속성과 indexfh rkr dlswkdp wjqrms rksmd
- arguments 대신 나머지 매개변수(...) 사용 권장

function fn(n1, n2){
  let sum = 0;
  for(let i=0; i


나머지 매개변수(...)
function fn(n1=0, n2=0, ...nums){
  var sum = n1 + n2;
  for(var i=0; i

this
- 함수 내에서 this 키워드로 접근 가능
- 함수 컨텍스트 객체
- 함수를 호출한 객체에 대한 참조
순수 함수
- 동일한 입력값에 대해서 항상 동일한 출력을 하는 함수
- Side Effect가 없는 함수 -> 외부값에 영향을 주거나 받지 않는 함수
즉시 실행 함수 (IIFE 패턴)
- 함수 선언 후 곧바로 스스로를 호출하여 실행되는 함수
- 함수를 생성하고 호출하면 함수 내부에 선언된 변수는 사용하지 못하며 함수는 폐기된다.
- 외부에서 접근할 수 없는 독립적인 공간을 확보할 수 있음
- 코드를 함수로 감싸고 호출하면 해당 코드의 유표범위가 함수로 제한
- 함수 내에서 사용하는 변수는 외부에 노출되지 않으므로 외부 변수와 충돌이 발생하지 않는다.,
(() => {...})();
(() => {
  var alert = '즉시 실행 함수';
  console.log(alert);
})();

// 즉시 실행 함수로 alert를 선언했기 때문에 같은 이름의 변수를 사용해도 충돌이 발생하지 않는다
alert('작업 완료');



[JS] 객체 - Object
Thu, 03 Apr 2025 08:29:18 GMT
Object

연관있는 데이터를 하나의 객체로 만들어서 데이터 관리
객체(Object): 속성(데이터)와 기능(그 데이터 주체가 하는 일들)을 모은 단위
객체의 속성과 기능에 접근할 때는 dot 연산자(객체.속성)을 이용하거나 ['속성명'] 표기(객체['속성명'] 사용// 몰라핑 회원의 속성(객체, Object)
const user1 = new Object();
user1.userName = '이00';
user1.userNo = 3;
user1.userGender = 'male';
user1.userLevel = 'diamond'
user1.userPassword = '1234';
user1.userAge = '24';
user1.userEmail = 'asdfg@gmail.com';



// 호정핑 회원의 속성(객체, Object)
const user2 = new Object();
user2.userName = '김00';
user2.userNo = 4;
user2.userGender = 'male';
user2.userLevel = 'gold'
user2.userPassword = '1234';
user2.userAge = '30';
user2.userEmail = 'qwert@gmail.com';

## JSON 표기법
const foo = {
  name: '김00',
  age: 20,
  job: '학생',
  married: true
};

### 객체 내부에 함수 생성
const score = {
  userName: '박00',
  kor: 100,
  eng: 90,
  math: 85,
  sum: function(){ // 총점 반환
    // this = score, 메서드 내부에서 this가 사용될 때 this는 메서드를 가진 객체를 가리킴
    // 객체의 메서드가 자신의 속성을 접근할 때 this 사용
    // this, score 둘 다 동일하게 사용 가능
    // return score.kor + score.eng + score.math;
    return this.kor + this.eng + this.math; 
  },
  avg: function(){ // 평균 반환
    return this.sum() / 3;
  }
};
console.log(score.kor, score.eng, score['math'])
console.log('총점', score.sum()); // 함수 호출
console.log('평균', score.avg());

## 객체 속성 관리
const foo = {
  name: "김00",
  mainJob: "magician"
};
### 객체 속성 읽기
- 정의되지 않은 속성은 undefined로 출력
console.log(foo.name, foo["mainJob"], foo.subJob);
// 김00 magician undefined 출력

### 객체 속성 갱신
foo.mainJob = "fairy";
console.log(foo.name, foo["mainJob"], foo.subJob);
// 출력 결과: 김00 fairy undefined

### 객체 속성 동적 생성
foo.subJob = "celeb";
console.log(foo.name, foo["mainJob"], foo.subJob);
// 출력 결과: 김00 fairy celeb

### 객체 속성 삭제
- 여러개 한번에 삭제 불가능
delete foo.mainJob;
console.log(foo.name, foo["mainJob"], foo.subJob);
// 출력 결과: 푸푸핑 undefined celeb

### 객체의 모든 속성 읽기 (for-in)
for (let prop in foo) {
  console.log(prop, foo[prop]);
}
// 출력 결과: name 푸푸핑
subJob celeb
// 속성명 출력
for (let prop in foo) {
  console.log(prop);
}
// 출력 결과: name
subJob
// 속성값만 출력
for (let prop in foo) {
  console.log(foo[prop]);
}
// 출력 결과: 푸푸핑
celeb
```



[JS] 반복문
Wed, 02 Apr 2025 08:05:45 GMT
while

지정한 조건식이 참일 경우 조건이 거짓이 될 때까지 해당 블럭을 반복하여 수행
반복 횟수가 불확실하거나 특정 조건이 충족할 때까지 계속 실행해야 할 때 사용let sum = 0;
let i = 1; 


while(i <= 10){
  sum += i;
  i++;
}
console.log(sum);
// 55 출력

## do-while
- 조건이 맞지 않으면 아예 실행하지 않는 while문과 달리 처음에 한번 무조건 코드를 실행하고 그 다음부터 while문의 조건에 따라 실행
- 최소 한번은 실행해야하는 코드에 사용
do{
  // 반복할 구문;
} while (조건);
let i = 1;
let sum = 0;
do{
  sum += i;
  i++;
} while (i <= 10);


# for
- 지정한 횟수만큼 반복적인 작업을 할 경우 사용
- 배열을 순회할 때 사용
- 초기화: 조건식에 사용되는 변수를 초기화
- 조건식: 반복문을 실행할지 체크
- 증감식: 조건식에 사용되는 변수값을 증감
for(초기화; 조건식; 증감식) {
    // 반복할 구문;
}
// 1부터 10까지의 모든 수릐 합계를 출력
let sum = 0;
for (let i = 1; i <= 10; i++) {
  sum += i; //실행할 코드
}
console.log(sum);
// 1부터 10까지 홀수의 합계 출력. 25
sum = 0;
for(let i = 1; i <= 10; i+=2){
  sum += i;
}
console.log(sum);

# break
- 반복문이나 switch문을 즉시 종료해주는 명령어
- 자신과 가까운 반복문을 빠져나간다.
- 특별한 경우 아니면 잘 사용하지 않는다
// n ~ m 까지의 정수중에서 첫번째 짝수를 찾아서 출력하세요.
const n = 1;
const m = 10;
for(let i = n; i <= m; i++){
  if(i % 2 === 0){
    console.log(i);
    break;
  }
}

# continue
- 반복문 내에서 남아있는 코드를 건너뛰고 다음 반복으로 실행이 넘어감
- 특별한 경우 아니면 잘 사용하지 않는다
// n부터 m까지 홀수만 출력하세요
const n = 1;
const m = 10;
for(let i = n; i<=m; i++){
  if(i%2 !== 0){
    console.log(${ i } 는 홀수);
    continue // i++ 로 돌아간다.
  }
  console.log(${ i} 는 짝수);
}



[JS] 조건문
Tue, 01 Apr 2025 07:56:47 GMT
if문

지정한 조건식이 true일 경우 해당 구문 수행const age = 25;
// age가 20 이상이면 "성인" 출력
if (age >=20) {
console.log('성인');
}
// age가 20 미만이면 "미성년자" 출력
if (age < 20) {
console.log('미성년자');
}


// 성인 출력

# if ~ else
- 지정한 조건식이 참일 경우와 거짓일 경우 각각 해당 구문 수행
const age = 19;
// age가 20 이상이면 "성인" 출력하고 그렇지 않으면 "미성년자" 출력
if (age >=20) {
  console.log('성인');
} else {
  console.log('미성년자');
}
// 미성년자 출력

# if ~ else if
- 지정한 조건식이 참일 경우 해당 구문을 수행하고 거짓일 경우 else if 문의 조건식을 순차적으로 비교하여 참에 해당하는 구문 수행
const num = -4;
// num이 양수이면 "양수" 출력
if (num > 0){
  console.log('양수');
}else if (num < 0){
  console.log('음수');
}else{
  console.log(0);
}
// 음수 출력

# switch
- switch에 지정한 비교값과 매칭되는(===) case 구문 실행
- break 구문을 만날 때. ㅏ지 또는 마지막 case 구문까지 실행
/* 
1 ~ 12 사이의 월을 받아서 계절을 출력하는 프로그램
봄: 4월, 여름: 510월, 가을 11, 겨울: 123
1 ~ 12 사이의 숫자가 아닐 경우 "잘못된 입력" 출력 
*/
const month = 6;
switch (month) {
  case 4:
    console.log("봄");
    break;
  case 5:
  case 6:
  case 7:
  case 8:
  case 9:
  case 10:
    console.log("여름");
    break;
  case 11:
    console.log("가을");
    break;
  case 12:
  case 1:
  case 2:
  case 3:
    console.log("겨울");
    break;
  default:
    console.log("잘못된 입력");
}
// 여름 출력



[JS] 연산자
Mon, 31 Mar 2025 08:53:46 GMT
연산자
산술 연산자
// 덧셈
const sum = 1 + 2; // 3
// 뺄셈
const sum = 2 - 1; // 1
// 곱셈
const sum = 3 * 4; // 12
// 나눗셈
const sum = 4 / 2; // 2
// 나머지
const sum = 5 % 2; // 1
// 거듭제곱
const sum = 2 ** 3; //8
// 결합
const age = 20;
const result = "저는 " + age + "살 입니다.";
console.log(`저는 ${ age }살 입니다.`);
대입 연산자
// 기본 대입 연산자
const a = 3;
const b = 2;
// 덧셈 후 대입
a += b; // a = a + b
// 뺄셈 후 대입
a -+ b; // a = a - b
// 나눗셈 푸 대입
a /= b; // a = a / b
// 나머지 연산 후 대입
a %= b; // a = a % b
// 거듭제곱 후 대입
a **= b; // a = a ** b
증감 연산자
후위형

현재의 값을 먼저 사용한 후 값을 증가 또는 감소const count = 0;
count++; // 1 
count--; // 0

전위형

값을 먼저 증가 또는 감소한 후 변경된 값을 사용
```
const count = 0;
+count; // 1 
-count; // 0

예시
var x = 5;
var y = x++ + ++x + x++ - x--; 
// y = 5 + 7 + 7 - 8 = 11
// x = 7
비교 연산자

두 항을 비교하여 참이면 true, 거짓이면 false 반환

var a = 5;
var b = 10;
var c = '5';
var d = 5;

// > (크다)
console.log(a > b);

// < (작다)
console.log(a < b);

// >= (크거나 같다)
console.log(a >= d);

// <= (작거나 같다)
console.log(a <= d);

// 문자열 비교
console.log(a == c); // 동등, 5 = '5' = 5 == 5 = true
console.log(a === c); // 일치, 5 === '5' = number === string = false

console.log('ch05' > 'ch01'); //사전순으로 비교, true
console.log('ch15' > 'ch2'); //사전순으로 비교, 컴퓨터는 한글자씩 비교한다, false
// ch05, ch12, ch2, ch01 오름차순 정렬 순서
// ch01, ch05, ch12, ch2
일치 연산자 (===)

두 데이터의 타입과 값을 모두 비교하여 값이 같아도 타입이 다르면 falseconsole.log(a === c); // 일치, 5 === '5' = number === string = false
null === null // true
undefined === undefined // true
null === undefined // false

동등 연산자 (==)

두 데이터의 타입이 다르면 형 변환 후 일치 비교하여 타입이 달라도 값이 같으면 trueconsole.log(a == c); // 동등, 5 = '5' = 5 == 5 = true
null == undefined // true

논리 연산자

falsy: number 0, string '', boolean false, null, undefined
truthy: 100, ' ', 'hello', true, {}, []

|| : 논리합 (OR)

피연산자 둘 중 하나라도 true일 경우 true
둘 다 false일 경우 false
앞의 값이 ture면 앞의 값을 반환
앞의 값이 false이면 뒤의 값을 반환console.log('hello' || 'world'); // 둘 다 true, hello
console.log(90 || 30); //둘 다 true, 90
console.log(null || 'world'); // world
console.log(undefined || 'hello'); // hello
console.log(0 || 100); // 100
console.log('' || 'hello'); // hello


var id = 'hongf';
var invalidId = id.length < 4 || id.length > 12;
var invalidId = !(id.length >= 4 && id.length <= 12);
console.log('id 입력 조건에 맞지 않음', invalidId); // false

### && : 논리곱 (AND)
- 피연산자 둘 다 true일 경우 true
- 둘 중 하나라도 false일 경우 false
- 앞의 값이 true면 뒤의 값을 반환
- 앞의 값이 false면 앞의 값을 반환
console.log(true && true); // ture
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

### ! : 부정 (NOT)
- true면 false, false면 true
var id = 'hongf';
var invalidId = !(id.length >= 4 && id.length <= 12);
console.log(invalidId); // false


## 삼항 연산자
- 조건에 따라 값을 선택
- {조건} ? {참일 때의 값} : {거짓일 때의 값};
let num = 9;
let result = num % 2 === 0 ? '짝수' : '홀수';
console.log(${num}은 ${result}입니다.); // 9은 홀수입니다.
```
연산자 우선순위

괄호: ()
단항 연산자: +, -, ++(전위형), --(전위형), !, typeof, delete
산술 연산자: *, /, %, +, -
비교 연산자: >, <, >=, <=, ==, ===, !=, !==
논리 연산자: &&, ||
삼항 연산자
증감 연산자(후위형): ++, --


산술, 비교, 논리, 대입 연산자의 순서는 꼭 기억하라.
우선 순위가 헷갈리면 괄호 사용을 권장.

im-p0ssible.log

[React] React hook

Hook

useState

useState()

useReducer

React.memo

useCallback

useMemo vs. React.memo vs. useCallback

useMemo

React.memo

useCallback

리액트 컴파일러

use no memo

ESLint

[React] 리액트 기초

React

Partial application

bind

메모이제이션

[JS] class

class

class 선언문

class 표현식

class 메서드 정의

constructor 메서드

prototype 메서드 정의

class 상속

extends

[JS] 함수 호출과 this

함수 호출

함수로 호출

메서드로 호출

화살표 함수 호출

apply(), call() 메서드로 호출

apply(p1, p2)

call(p1, p2, p3, ...)

배열의 push 메서드를 이용하여 객체를 배열처럼 동작시키기

배열 데이터를 각각의 매개변수로 분리하여 전달

생성자 함수

[JS] prototype

프로토타입

프로토타입 체인

프로토타입 체인의 마지막 객체

내장된 생성자 함수의 프로토타입

typeof

instanceof

프로토타입 체인을 이용한 상속

[JS] 이벤트 핸들러

이벤트

마우스 이벤트

키보드 이벤트

폼 이벤트

스크롤 이벤트

문서 로딩 이벤트

on

HTML

Script

onclick 중첩

addEventListener

addEventListener 중첩

removeEventListener

[JS] 노드 생성, 추가, 삽입, 삭제, 복사

노드 생성

노드 삽입

노드 삭제

노드 복사

[JS] 노드 찾기

노드

노드 찾기

태그의 id 이용

태그의 class 이용

트리구조 이용

부모/자식 노드 찾기

형제 노드 찾기

CSS 셀렉터 이용

nodeValue

[JS] 변수 스코프

변수

var