javascriptStudy

자바스크립트 심화 학습 문제

49장: Babel과 Webpack

문제 1

Babel 설정 파일을 작성하여 ES6+ 코드를 ES5로 변환하는 환경을 구성하세요.

문제 2

Webpack을 사용하여 여러 JS 파일을 하나로 번들링하는 설정을 작성하세요.

문제 3

CSS와 이미지 파일을 번들링하는 webpack 설정을 구현하세요.

프로그래머스 추천 문제

9로 나눈 나머지

• 모듈화와 번들링 개념 이해도 테스트
• 10분 이내 해결 가능

48장: 모듈

문제 1

ES6 모듈 시스템을 사용하여 계산기 기능을 모듈화하세요.

문제 2

CommonJS와 ES6 모듈을 함께 사용하는 프로젝트 구조를 설계하세요.

문제 3

순환 참조가 발생하는 모듈 예제를 만들고, 이를 해결하는 방법을 구현하세요.

47장: 에러 처리

문제 1

커스텀 에러 클래스를 만들고, 적절한 에러 처리 예제를 구현하세요.

문제 2

try-catch 문을 사용하여 비동기 함수의 에러를 처리하는 예제를 작성하세요.

문제 3

에러 로깅 시스템을 구현하세요. 발생한 에러를 파일이나 서버에 기록해야 합니다.

46장: 제너레이터와 async/await

문제 1

제너레이터를 사용하여 피보나치 수열을 생성하는 함수를 구현하세요.

문제 2

async/await를 사용하여 여러 API를 순차적으로 호출하고 결과를 처리하는 함수를 작성하세요.

문제 3

제너레이터를 사용하여 비동기 작업을 동기적으로 처리하는 예제를 구현하세요.

프로그래머스 추천 문제

연속된 수의 합

• 제너레이터와 async/await 개념 적용
• 모듈화된 코드 구조 연습
• 에러 처리 패턴 학습
• 15분 이내 해결 가능
• 핵심 개념:
• 제너레이터를 활용한 수열 생성
• 비동기 처리와 에러 핸들링
• 모듈 분리와 재사용

옹알이 (2)

• 모듈화된 정규표현식 처리
• 에러 바운더리 설정
• async/await 패턴 활용
• 15분 이내 해결 가능
• 핵심 개념:
• 에러 처리와 로깅
• 모듈 간 의존성 관리
• 비동기 패턴 최적화

45장: 프로미스

문제 1

Promise.all()을 사용하여 여러 개의 이미지를 동시에 로드하는 함수를 작성하세요.

문제 2

프로미스 체이닝을 사용하여 사용자 데이터를 가져오고, 해당 사용자의 게시물을 가져오는 함수를 구현하세요.

문제 3

Promise.race()를 사용하여 타임아웃 기능이 있는 fetch 함수를 구현하세요.

44장: REST API

문제 1

간단한 TODO API를 호출하는 클라이언트 코드를 작성하세요.

문제 2

API 응답을 캐싱하는 기능을 구현하세요.

문제 3

에러 처리가 포함된 API 호출 래퍼 함수를 작성하세요.

43장: Ajax

문제 1

XMLHttpRequest를 사용하여 데이터를 가져오는 함수를 구현하세요.

문제 2

fetch API를 사용하여 이미지를 업로드하는 기능을 구현하세요.

문제 3

axios를 사용하여 인터셉터를 구현하세요.

프로그래머스 추천 문제

귤 고르기

• Promise와 비동기 데이터 처리
• REST API 호출 패턴 연습
• Map을 활용한 데이터 집계
• 15분 이내 해결 가능
• 핵심 개념:
• Promise.all을 활용한 데이터 처리
• API 응답 데이터 정렬
• 비동기 상태 관리

과일 장수

• Ajax 요청 처리와 유사한 로직
• Promise 체이닝 활용 가능
• REST API 응답 처리 패턴 학습
• 10분 이내 해결 가능
• 핵심 개념:
• 비동기 데이터 정렬
• Promise를 활용한 순차 처리
• API 응답 데이터 가공

42장: 비동기 프로그래밍

문제 1

setTimeout을 사용하여 순차적으로 실행되는 애니메이션을 구현하세요.

문제 2

콜백 지옥을 프로미스를 사용하여 리팩토링하는 예제를 작성하세요.

문제 3

비동기 함수의 에러 처리 방법을 보여주는 예제를 구현하세요.

41장: 타이머

문제 1

setInterval을 사용하여 디지털 시계를 구현하세요.

문제 2

debounce 함수를 구현하세요. 검색 입력창에 적용해보세요.

문제 3

throttle 함수를 구현하세요. 무한 스크롤에 적용해보세요.

40장: 이벤트

문제 1

버튼을 클릭할 때마다 랜덤한 색상으로 배경색이 변하는 기능을 구현하세요.

문제 2

드래그 앤 드롭으로 항목을 이동할 수 있는 간단한 할일 목록을 만드세요.

문제 3

이미지 슬라이더를 구현하세요. 이전/다음 버튼으로 이미지를 전환하세요.

프로그래머스 추천 문제

햄버거 만들기

• 이벤트 핸들링과 비동기 처리 개념 적용
• 순차적인 데이터 처리와 타이머 활용
• 스택 자료구조와 비동기 이벤트 처리
• 15분 이내 해결 가능

카드 뭉치

• 이벤트 큐 개념을 이용한 카드 처리
• 비동기 처리와 타이머 개념 응용
• 순차적 처리와 조건 처리
• 10분 이내 해결 가능

39장: DOM

문제 1

입력받은 데이터로 동적으로 테이블을 생성하는 함수를 작성하세요.

문제 2

트리 구조의 메뉴를 DOM API를 사용하여 구현하세요.

문제 3

form 유효성 검사를 구현하세요.

38장: 브라우저의 렌더링 과정

문제 1

브라우저의 렌더링 과정을 최적화하는 예제를 작성하세요.

문제 2

레이아웃 스래싱을 발생시키는 코드를 작성하고, 최적화하세요.

문제 3

requestAnimationFrame을 사용하여 부드러운 애니메이션을 구현하세요.

37장: Set과 Map

문제 1

주어진 배열에서 중복을 제거하고 고유한 값만 남기는 함수를 구현하세요.

문제 2

학생들의 성적을 관리하는 시스템을 Map을 사용하여 구현하세요.

문제 3

최근 검색어 기능을 구현하세요. 최대 5개까지 저장하세요.

프로그래머스 추천 문제

모의고사

• Set과 Map을 활용한 데이터 처리
• DOM 조작과 렌더링 최적화 개념 적용 가능
• 15분 이내 해결 가능

실패율

• Map을 활용한 데이터 집계
• 브라우저 렌더링 최적화 개념 응용
• 정렬과 DOM 조작 개념 적용
• 15분 이내 해결 가능

36장: 디스트럭처링 할당

문제 1

복잡한 객체에서 필요한 데이터만 추출하여 새로운 객체를 만드세요.

문제 2

배열의 첫 번째 요소와 나머지 요소를 분리하는 함수를 작성하세요.

문제 3

중첩된 객체에서 특정 깊이의 값만 추출하는 함수를 구현하세요.

35장: 스프레드 문법

문제 1

여러 개의 배열을 병합하고 중복을 제거하는 함수를 작성하세요.

문제 2

객체를 깊은 복사하는 함수를 스프레드 문법을 사용하여 구현하세요.

문제 3

함수에 가변 인자를 전달받아 모든 인자의 합을 구하는 함수를 작성하세요.

34장: 이터러블

문제 1

range 함수를 구현하세요. 시작값과 끝값을 받아 순회하세요.

문제 2

무한 피보나치 수열을 생성하는 이터레이터를 구현하세요.

문제 3

커스텀 이터러블 객체를 만들어 for...of 문으로 순회하세요.

프로그래머스 추천 문제

배열 만들기 2

• 이터러블과 제너레이터 활용
• 15분 이내 해결 가능

두 개 뽑아서 더하기

• Set과 디스트럭처링 활용
• 10분 이내 해결 가능

33장: Symbol

문제 1

Symbol을 사용하여 객체의 프라이빗 프로퍼티를 구현하는 예제를 작성하세요. 특정 메서드로만 접근 가능한 데이터를 관리해보세요.

문제 2

Symbol.iterator를 구현하여 커스텀 이터러블 객체를 만드세요. 피보나치 수열을 생성하는 이터러블 객체를 구현해보세요.

문제 3

내장 심볼(Built-in Symbol)을 사용하여 객체의 기본 동작을 커스터마이징하는 예제를 만드세요. (Symbol.toPrimitive, Symbol.toStringTag 등 활용)

32장: String

문제 1

이메일 주소를 파싱하는 함수를 작성하세요. 정규표현식과 문자열 메서드를 사용하여 사용자 이름, 도메인, 최상위 도메인을 분리하세요.

문제 2

마크다운 텍스트를 HTML로 변환하는 간단한 파서를 구현하세요. (#, *, -, > 등의 기본적인 마크다운 문법 지원)

문제 3

문자열에서 모든 HTML 태그를 제거하고 순수 텍스트만 추출하는 함수를 작성하세요. 정규표현식과 String 메서드를 활용하세요.

31장: RegExp

문제 1

신용카드 번호를 검증하는 정규표현식을 작성하세요. 다양한 카드사의 포맷(VISA, MasterCard, AMEX)을 지원해야 합니다.

문제 2

로그 파일에서 특정 패턴의 데이터를 추출하는 함수를 구현하세요. 날짜, IP 주소, 에러 메시지 등을 정규표현식으로 파싱하세요.

문제 3

URL을 파싱하여 프로토콜, 호스트, 경로, 쿼리 파라미터, 해시 등을 분리하는 함수를 정규표현식을 사용하여 구현하세요.

프로그래머스 알고리즘 문제

신규 아이디 추천

• 정규표현식과 문자열 메서드를 활용하는 문제
• 문자열 처리와 패턴 매칭 연습 가능

파일명 정렬

• 정규표현식을 사용한 문자열 파싱
• Symbol.iterator를 활용한 정렬 로직 구현 가능

30장: Date

문제 1

특정 날짜까지 남은 일수, 시간, 분, 초를 계산하는 카운트다운 함수를 구현하세요. D-day 계산기 형태로 만들어보세요.

문제 2

두 날짜 사이의 평일 수를 계산하는 함수를 작성하세요. 공휴일 목록을 받아서 공휴일도 제외할 수 있도록 구현하세요.

문제 3

특정 연도와 월을 입력받아 해당 월의 달력을 콘솔에 출력하는 함수를 만드세요. 주말은 다른 색으로 표시되도록 구현하세요.

29장: Math

문제 1

주어진 좌표들로 이루어진 도형의 넓이와 둘레를 계산하는 함수를 구현하세요. Math 객체의 다양한 메서드를 활용하세요.

문제 2

주사위 게임 시뮬레이터를 만드세요. n면체 주사위를 m번 던졌을 때의 통계(평균, 최빈값, 분산 등)를 계산하는 기능을 구현하세요.

문제 3

원주율(π)을 사용하여 원기둥의 부피와 표면적을 계산하는 함수를 작성하세요. 결과값을 원하는 소수점 자리수로 반올림할 수 있도록 구현하세요.

28장: Number

문제 1

주어진 숫자를 특정 단위로 포맷팅하는 함수를 만드세요. 예를 들어, 1000 -> 1k, 1000000 -> 1M 등으로 변환하세요.

문제 2

다양한 진법의 숫자를 변환하는 계산기를 구현하세요. 2진수, 8진수, 16진수 간의 상호 변환이 가능해야 합니다.

문제 3

금융 계산기를 만드세요. 이자율 계산, 대출 상환금 계산 등을 구현하고, 소수점 처리와 통화 표시를 적절히 해주세요.

프로그래머스 알고리즘 문제

옹알이 (1)

• Number와 Math 객체의 메서드를 활용할 수 있는 문제
• 문자열 처리와 숫자 변환 연습 가능

다음에 올 숫자

• 수열의 규칙을 찾고 Math 객체를 활용하여 계산하는 문제
• 숫자 처리와 패턴 인식 능력 향상

27장: 배열

문제 1

배열의 고차 함수(map, filter, reduce)를 사용하여 학생들의 성적 데이터를 처리하는 함수를 작성하세요. 평균 점수 계산, 특정 점수 이상의 학생 필터링, 각 과목별 최고점 찾기 등의 기능을 구현하세요.

문제 2

배열의 다양한 메서드(splice, slice, concat)를 사용하여 주어진 배열에서 특정 요소들을 추출하고 새로운 배열을 만드는 함수를 작성하세요.

문제 3

유사 배열 객체를 실제 배열로 변환하고, 배열의 메서드를 사용하여 데이터를 처리하는 예제를 작성하세요.

26장: ES6 함수의 추가 기능

문제 1

화살표 함수와 일반 함수의 차이점을 보여주는 예제를 작성하세요. this 바인딩, arguments 객체, 생성자 함수로서의 사용 등의 차이를 포함하세요.

문제 2

매개변수 기본값, Rest 파라미터, 명명된 매개변수를 활용하여 다양한 옵션을 처리할 수 있는 함수를 작성하세요.

문제 3

메서드의 축약 표현을 사용하여 계산기 객체를 만들고, 다양한 연산을 수행하는 메서드를 구현하세요.

25장: 클래스

문제 1

은행 계좌를 나타내는 Account 클래스를 만들고, 입금, 출금, 잔액 조회 기능을 구현하세요. 잔액이 부족할 경우 출금이 불가능하도록 처리하세요.

문제 2

상속을 사용하여 Vehicle, Car, Motorcycle 클래스를 구현하세요. 각 클래스는 적절한 속성과 메서드를 가져야 하며, 오버라이딩을 통해 각각의 특성을 구현하세요.

문제 3

private 필드와 static 메서드를 사용하여 도서관 회원 관리 시스템을 구현하세요. 회원 ID는 자동으로 생성되어야 하며, 대출 현황을 private하게 관리해야 합니다.

프로그래머스 알고리즘 문제

등수 매기기

• 배열 메서드와 클래스를 활용할 수 있는 문제
• sort, map 등의 배열 메서드 활용 가능

평행

• 클래스와 메서드를 활용한 기하학적 계산 문제
• 배열 처리와 수학적 로직을 구현할 수 있는 문제

24장: 클로저

문제 1

카운터를 만드는 함수를 클로저를 사용하여 구현하세요. 이 카운터는 증가(increment), 감소(decrement), 현재 값 확인(getValue) 기능이 있어야 합니다.

문제 2

개인정보를 안전하게 보관하는 프라이빗 변수를 클로저를 사용하여 구현하세요. 이름과 나이는 특정 메서드로만 접근이 가능해야 합니다.

문제 3

클로저를 사용하여 여러 개의 카운터를 생성하고, 각각의 카운터가 독립적으로 동작하는 예제를 만드세요. 그리고 클로저가 이런 동작을 가능하게 하는 원리를 설명하세요.

23장: 실행 컨텍스트

문제 1

다음 코드의 실행 컨텍스트가 생성되고 실행되는 과정을 단계별로 설명하세요:

const x = 1;
function foo() {
    const y = 2;
    function bar() {
        const z = 3;
        console.log(x + y + z);
    }
    bar();
}
foo();

문제 2

호이스팅이 실행 컨텍스트와 어떤 관계가 있는지 설명하고, var, let, const의 호이스팅 차이를 예제를 들어 설명하세요.

문제 3

실행 컨텍스트의 구성 요소인 LexicalEnvironment와 VariableEnvironment의 차이점을 설명하고, 이들이 코드 실행에 어떤 영향을 미치는지 예제를 들어 설명하세요.

22장: this

문제 1

다음 코드에서 this가 어떤 값을 가리키는지 설명하고, 각각의 경우에 this 바인딩이 어떻게 결정되는지 설명하세요:

const obj = {
    name: 'Object',
    getName() {
        console.log(this.name);
    },
    inner: {
        name: 'Inner',
        getName() {
            console.log(this.name);
        }
    }
};

문제 2

call, apply, bind 메서드를 사용하여 this 바인딩을 명시적으로 변경하는 예제를 작성하세요. 각 메서드의 차이점도 설명하세요.

문제 3

화살표 함수와 일반 함수의 this 바인딩 차이를 보여주는 예제를 작성하고, 이러한 차이가 발생하는 이유를 설명하세요.

프로그래머스 알고리즘 문제

카운트 업

• 클로저와 스코프 개념 연습 가능
• 배열 생성과 조작 연습

수 조작하기 1

• this 바인딩과 메서드 체이닝 연습 가능
• 문자열과 조건문 처리 연습

21장: 빌트인 객체

문제 1

Math 객체를 사용하여 주어진 배열에서 최대값과 최소값을 찾고, 모든 요소의 합과 평균을 계산하는 함수를 작성하세요.

문제 2

String 객체의 메서드를 사용하여 주어진 문자열에서 모든 모음을 제거하고, 단어의 첫 글자만 대문자로 변환하는 함수를 작성하세요.

문제 3

Date 객체를 사용하여 현재 날짜로부터 100일 후의 날짜를 계산하고, 그 날짜가 무슨 요일인지 출력하는 함수를 작성하세요.

20장: strict mode

문제 1

다음 코드를 strict mode로 실행했을 때 어떤 에러가 발생하는지 설명하고, 이를 수정하세요:

function example() {
  x = 10;
  delete Object.prototype;
  function inner() {}
  delete inner;
}

문제 2

strict mode가 왜 필요한지 설명하고, 이를 적용했을 때의 장점을 3가지 이상 나열하세요.

문제 3

strict mode에서 this의 동작이 어떻게 변하는지 예제를 들어 설명하세요.

19장: 프로토타입

문제 1

Person 생성자 함수를 만들고, 프로토타입을 이용해 모든 인스턴스가 공유하는 introduce 메서드를 추가하세요. 이 메서드는 person의 이름과 나이를 출력해야 합니다.

문제 2

프로토타입 체인을 이용하여 Animal, Dog, Labrador 객체를 생성하고, 각각의 프로토타입에 적절한 메서드를 추가하세요. 그리고 Labrador 인스턴스를 만들어 모든 메서드를 호출해보세요.

문제 3

프로토타입의 동작 방식에 대해 설명하세요. 객체에서 프로퍼티를 찾는 과정은 어떻게 이루어지나요?

2번째 스터디 알고리즘문제 (프로그래머스)

배열에서 문자열 대소문자 변환하기

순서 바꾸기

18장: 함수와 일급 객체

문제 1

함수를 인자로 받아 실행 시간을 측정하는 고차 함수 measureTime을 작성하세요. 이 함수는 전달받은 함수를 실행하고, 실행에 걸린 시간을 밀리초 단위로 반환해야 합니다.

문제 2

자바스크립트에서 함수가 일급 객체라는 것은 무엇을 의미하나요? 그리고 이것이 프로그래밍에 어떤 이점을 제공하나요?

문제 3

add, subtract, multiply, divide 함수를 작성하고, 이들을 객체의 메서드로 저장하는 calculator 객체를 생성하세요. 그리고 calculate 함수를 작성하여 연산자와 두 개의 숫자를 입력받아 calculator 객체의 적절한 메서드를 호출하도록 구현하세요.

17장: 생성자 함수에 의한 객체 생성

문제 1

학생 정보를 관리하는 Student 생성자 함수를 작성하세요. 이 함수는 이름, 나이, 학년을 프로퍼티로 가지며, 학생 정보를 출력하는 메서드를 포함해야 합니다.

문제 2

생성자 함수와 일반 함수의 차이점은 무엇인가요? 그리고 new 연산자를 사용하지 않고 생성자 함수를 호출하면 어떤 일이 발생하나요?

문제 3

Circle 생성자 함수를 만들어 원의 반지름을 입력받고, 원의 넓이와 둘레를 계산하는 메서드를 추가하세요. 그리고 이를 이용해 여러 개의 Circle 객체를 생성하고 정보를 출력해보세요.

1번째 스터디 알고리즘 문제 (프로그래머스)

조건에 맞게 수열 변환하기 3

배열의 길이에 따라 다른 연산하기