[Javascript] Javascript 웹 개발 필수 개념

JavaScript로 프론트엔드 개발을 하려고 할 때 중요한 개념들을 잘 이해하고 있어야 웹 애플리케이션을 효율적이고 효과적으로 개발할 수 있습니다.

1. DOM(Document Object Model) 조작

1.1 DOM 선택자

HTML 문서의 요소를 선택하고 조작할 수 있습니다.

• getElementById: 특정 ID를 가진 요소를 선택합니다.
• getElementsByClassName: 특정 클래스를 가진 요소를 모두 선택합니다.
• getElementsByTagName: 특정 태그 이름을 가진 요소를 모두 선택합니다.
• querySelector: CSS 선택자를 사용하여 첫 번째 요소를 선택합니다.
• querySelectorAll: CSS 선택자를 사용하여 모든 요소를 선택합니다.

예시:

let element = document.getElementById('my-element');
let elements = document.getElementsByClassName('my-class');
let tags = document.getElementsByTagName('div');
let firstElement = document.querySelector('.my-class');
let allElements = document.querySelectorAll('.my-class');

1.2 DOM 조작

HTML 요소의 내용을 변경하거나 스타일을 조작할 수 있습니다.

• 텍스트 변경: innerText 또는 textContent 사용
• HTML 변경: innerHTML 사용
• 속성 변경: setAttribute와 getAttribute 사용
• 스타일 변경: style 속성 사용

예시:

let element = document.getElementById('my-element');
element.innerText = 'New Text';
element.innerHTML = '<strong>New HTML</strong>';
element.setAttribute('data-custom', 'value');
element.style.color = 'red';

2. 이벤트 처리

2.1 이벤트 리스너

사용자 상호작용(클릭, 입력 등)에 반응하는 코드를 작성합니다.

• 이벤트 추가: addEventListener 사용
• 이벤트 제거: removeEventListener 사용

예시:

let button = document.getElementById('my-button');
button.addEventListener('click', function() {
  alert('Button clicked!');
});

3. 비동기 JavaScript

3.1 콜백 함수

비동기 작업이 완료된 후 호출되는 함수입니다.

예시:

function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;
  script.onload = () => callback(script);
  document.head.append(script);
}

loadScript('/my/script.js', function() {
  console.log('Script loaded!');
});

3.2 프로미스(Promises)

비동기 작업의 완료 또는 실패를 나타내는 객체입니다.

예시:

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Success!'), 1000);
});

promise.then(message => {
  console.log(message); // 'Success!'
}).catch(error => {
  console.error(error);
});

3.3 async/await

프로미스를 더 간단하게 사용할 수 있는 문법입니다.

예시:

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

4. 모듈화

4.1 ES6 모듈

코드를 모듈화하여 재사용성을 높이고 유지보수를 용이하게 합니다.

예시:

// math.js

export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// main.js

import { add, multiply } from './math.js';
console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 6

5. 상태 관리

5.1 로컬 상태 관리

컴포넌트 내에서 상태를 관리합니다. (주로 React와 같은 프레임워크에서 사용)

예시 (React):

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

5.2 글로벌 상태 관리

애플리케이션 전체에서 상태를 관리합니다. (Redux, Context API 등 사용)

예시 (Redux):

import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

store.subscribe(() => console.log(store.getState()));

store.dispatch({ type: 'INCREMENT' });

6. 데이터 페칭

6.1 Fetch API

서버로부터 데이터를 가져오는 기본적인 방법입니다.

예시:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

6.2 Axios

더 강력한 HTTP 클라이언트 라이브러리입니다.

예시:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

7. CSS와 함께 사용하기

7.1 클래스 토글링

JavaScript를 사용하여 요소의 클래스를 추가하거나 제거합니다.

예시:

let element = document.getElementById('my-element');
element.classList.add('active');
element.classList.remove('active');
element.classList.toggle('active');

7.2 스타일 변경

JavaScript를 사용하여 요소의 스타일을 직접 변경합니다.

예시:

let element = document.getElementById('my-element');
element.style.color = 'red';
element.style.backgroundColor = 'blue';

8. 프레임워크 및 라이브러리

8.1 React

컴포넌트 기반의 UI 라이브러리로, 복잡한 사용자 인터페이스를 효율적으로 구축할 수 있습니다.

주요 개념:

• 컴포넌트
• 상태(state)
• 프롭스(props)
• 훅(Hooks)

8.2 Vue.js

점진적인 프레임워크로, 기존 프로젝트에 점진적으로 통합할 수 있습니다.

주요 개념:

• 뷰 인스턴스
• 컴포넌트
• 디렉티브 (v-bind, v-model 등)

8.3 Angular

완전한 프레임워크로, 대규모 애플리케이션 개발에 적합합니다.

주요 개념:

• 컴포넌트
• 서비스
• 의존성 주입
• RxJS를 사용한 반응형 프로그래밍

9. 성능 최적화

9.1 코드 스플리팅

애플리케이션을 여러 개의 작은 청크로 분할하여 로딩 시간을 단축합니다.

9.2 레이지 로딩

필요할 때만 모듈이나 컴포넌트를 로드합니다.

9.3 메모이제이션

반복된 계산을 저장하여 성능을 향상시킵니다.

예시:

import { memoize } from 'lodash';

const expensiveFunction = memoize((num) => {
  // 복잡한 계산
});

10. 테스트

10.1 단위 테스트

개별 함수나 컴포넌트를 테스트합니다. (Jest, Mocha 등 사용)

10.2 통합 테스트

여러 컴포넌트나 모듈이 함께 작동하는 것을 테스트합니다.

10.3 E2E 테스트

전체 애플리케이션을 테스트합니다. (Cypress, Selenium 등 사용)