JS프론트엔드 기초 개념 정리

화살표 함수와 일반 함수의 차이

화살표 함수(Arrow Function)는 ES6에서 도입된 함수 표현식으로, 기존의 function 키워드를 사용하는 일반 함수와 차이점이 존재한다.

차이점

1. this 바인딩
   • 화살표 함수는 자신만의 this를 가지지 않고, 선언된 스코프의 this를 그대로 사용한다.
   • 일반 함수는 호출 방식에 따라 this가 달라진다.
2. arguments 객체
   • 화살표 함수는 arguments 객체를 가지지 않으며, 필요할 경우 rest parameter (...args)를 사용해야 한다.
   • 일반 함수는 arguments 객체를 사용할 수 있다.
3. 사용 방식
   • 화살표 함수는 짧고 간결하게 작성할 수 있으며, 익명 함수로 주로 사용된다.
   • 일반 함수는 생성자 함수, 프로토타입 메서드 등에서 사용될 수 있다.

function regularFunction() {
    console.log(this); // 호출 방식에 따라 this가 달라짐
}

const arrowFunction = () => {
    console.log(this); // 상위 스코프의 this를 사용함
}

 

 

 

 

클로저(Closure)의 정의와 활용 예시

 

클로저란, 함수가 선언될 당시의 렉시컬 스코프(Lexical Scope)를 기억하고 유지하는 함수를 의미한다. 즉, 내부 함수가 외부 함수의 변수를 기억하는 방식이다.

활용 예시

1. 데이터 은닉
2. 상태 유지
3. 함수형 프로그래밍 패턴

 

function counter() {
    let count = 0; // 외부 스코프 변수
    return function () {
        count++;
        console.log(count);
    };
}

const increment = counter();
increment(); // 1
increment(); // 2
increment(); // 3

 

 

 

 

무거운 번들 라이브러리를 처리해서 유저에게 보여줘야 할 때

무거운 번들 라이브러리를 사용할 경우, 사용자 경험을 해치지 않도록 최적화가 필요하다.

해결 방법

1. 코드 스플리팅(Code Splitting) & Lazy Loading
   • React.lazy()와 Suspense를 활용하여 필요할 때만 로딩하도록 설정한다.

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <HeavyComponent />
        </Suspense>
    );
}

 

    2. 트리 셰이킹(Tree Shaking)

• 사용하지 않는 모듈을 제거하여 번들 크기를 줄인다. 

    3. CDN 활용

• 무거운 라이브러리는 C무거운 번들 라이브러리를 처리해서 유저에게 보여줘야 할 때해결 방법
  1. 코드 스플리팅(Code Splitting) & Lazy Loading 

                 1)  React.lazy()와 Suspense를 활용하여 필요할 때만 로딩하도록 설정한다.

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <HeavyComponent />
        </Suspense>
    );
}

 

                2) DN을 통해 로딩하면 브라우저 캐싱을 활용할 수 있다.

 

 

  4. 웹팩 최적화

• Webpack의 splitChunks 옵션을 사용하여 공통 모듈을 분리한다.

optimization: {
    splitChunks: {
        chunks: 'all',
    },

 

 

 

 

 

 

 

useState에서 set(count + 1)이 3개 연달아 있지만 숫자가 1만 올라가는 이유

React의 useState는 비동기적으로 상태를 업데이트한다. 따라서 setState를 여러 번 호출해도 배치 처리(Batching)가 일어나 한 번만 업데이트될 수 있다.

해결 방법

업데이트 함수를 사용하는 방식으로 해결할 수 있다.

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

const handleClick = () => {
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
};

 

이렇게 하면 prev 값을 기준으로 3번 증가하여 최종적으로 3이 증가한다.

 

 

 

 

ES6에서 추가된 주요 기능

1. let과 const
2. 템플릿 리터럴 (Template Literals)
3. 디스트럭처링 (Destructuring)
4. 화살표 함수 (Arrow Functions)
5. 기본 매개변수 (Default Parameters)
6. 스프레드 연산자와 rest 파라미터
7. 클래스 문법 (Class Syntax)
8. 모듈 시스템 (Modules: import/export)

const person = { name: "John", age: 30 };
const { name, age } = person; // 객체 디스트럭처링

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4]; // 스프레드 연산자

 

 

 

 

 

JWT란 무엇이며, 어떻게 보안 처리가 되는가?

JWT(JSON Web Token)는 클라이언트와 서버 간의 인증 및 정보 교환을 위한 토큰 기반 인증 방식이다.

JWT 구조

1. Header (알고리즘, 타입)
2. Payload (사용자 정보, 만료 시간 등)
3. Signature (서명을 통해 변조 방지)

header = {
  "alg": "HS256",
  "typ": "JWT"
}

payload = {
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 15162390

보안 처리 방법

1. 서명(Signature) 검증
   • 서버에서 발급한 서명을 검증하여 위변조 여부를 판단한다.
2. 토큰 만료 시간 설정 (Expiration Time, exp)
   • 토큰의 만료 시간을 짧게 설정하여 보안을 강화한다.
3. HTTPS 사용
   • 네트워크에서 JWT가 노출되지 않도록 HTTPS를 사용해야 한다.
4. 리프레시 토큰 (Refresh Token) 활용
   • 액세스 토큰이 만료되면 리프레시 토큰을 통해 새 토큰을 발급한다.