👩🏻‍💻 Frontend 13기 2025-07-03 ~ 2025-12-29

내가 노력하고 도전한 만큼이 내 세계 💫 6 개월 동안 교육에서 학습한 것들을 기록해보려고 한다!

💡 학습 Tip

파레토의 법칙

• 100가지의 기능이 있다면 현업에서 쓰는 기능은 약 20% 정도 밖에 안 된다.
• 다 배우고 쓰려 하지 말고, 자주 쓰는 것부터 경험하면서 배우자.

First Word 법칙

• 자주 사용되는 단어를 나만의 언어로 정리하기.
• 딱딱한 정의보다 내가 쉽게 이해하기 쉬운 말로 기록하기

Study Preview

HTML

HTML

HTML 학습 목표

1. HTML의 기본 구조를 이해하고 설명할 수 있다.
2. 다양한 HTML 요소와 태그를 사용할 수 있다.
3. HTML 문서의 구조를 작성할 수 있다.
4. HTML 폼 요소를 사용할 수 있다.
5. HTML 시맨틱 태그를 이해하고 사용할 수 있다.

HTML 체크 리스트

• ☑️ HTML의 열린태그와 닫힌태그, 빈태그의 개념을 설명할 수 있나요?
• ☑️ 다양한 HTML 요소와 태그를 사용할 수 있나요?
• ☑️ 다양한 HTML 요소와 태그를 사용하여 문서의 구조를 작성할 수 있나요?
• ☑️ HTML 폼 요소를 사용할 수 있나요?
• ☑️ HTML 시맨틱 태그를 이해하고 사용할 수 있나요?

CSS

CSS

CSS 학습 목표

1. CSS의 기본 개념과 역할을 이해하고 설명할 수 있다.

2. 다양한 CSS 선택자를 사용할 수 있다.

3. CSS를 사용하여 HTML 요소의 스타일을 변경할 수 있다.

4. 텍스트 스타일링을 적용할 수 있다.

5. 상자 모델을 이해하고 스타일을 적용할 수 있다.

6. Flexbox를 사용하여 다양한 레이아웃을 구성할 수 있다.

7. Grid를 사용하여 복잡한 레이아웃을 구성할 수 있다.

8. Flexbox와 Grid를 적절히 사용하여 레이아웃을 설계할 수 있다.

9. CSS를 사용하여 HTML 요소의 스타일을 변경하고 다양한 선택자를 사용할 수 있다.

CSS 체크 리스트

• ☑️ CSS의 기본 개념과 역할을 설명할 수 있나요?
• ☑️ class 선택자와 id 선택자의 차이를 설명할 수 있나요?
• ☑️ CSS를 활용하여 HTML에 스타일링을 적용하는 방법 3가지를 설명할 수 있나요?
• ☑️ block과 inline의 차이를 설명할 수 있나요?
• ☑️ Flexbox를 사용하여 다양한 레이아웃을 구성할 수 있나요?

JavaScript

JavaScript

JavaScript 학습 목표

console.log()

• console.log()로 콘솔에 원하는 값을 출력하는 방법의 사용 예시를 들 수 있다.

변수

• 변수를 선언하고 값을 할당하는 방법을 기억할 수 있다.
• let과 const의 차이를 기억할 수 있다.
• 변수 선언 키워드 var의 문제점과 호이스팅에 대해서 설명할 수 있다.

타입기초

• JavaScript의 number, string, boolean 타입의 특징을 설명할 수 있다.
• typeof 연산자를 활용해서 값의 타입을 조회하는 방법을 기억한다.
• null과 undefined의 차이점을 설명할 수 있다.

number 타입

• number 타입 값을 사용하여 간단한 연산의 예시를 들 수 있다. (+, -, *, /, %)
• Math 객체의 다양한 메서드(Math.random(), Math.floor(), Math.ceil(), Math.pow() 등)를 활용하여 난수 생성, 올림/내림, 거듭제곱 계산과 같은 수학적 연산의 사용 예시를 들 수 있다.

boolean 타입

• 비교 연산자(<, <=, >, >=)를 사용하여 number 타입의 값을 비교할 수 있다.동치 연산자(===)를 사용하여 두 값이 동일한지 확인할 수 있다.
• OR연산자(||), AND연산자(&&), NOT연산자(!)의 사용 방법을 기억한다.
• falsy한 값을 나열할 수 있다.

string 타입

• number 타입의 값을 string 타입으로, string 타입의 값을 number 타입으로 변경하는 코드를 구현할 수 있다.
• 작은따옴표(’’), 큰따옴표(””), 백틱(``)의 사용법과 차이점을 설명할 수 있다.
• 템플릿 리터럴을 사용하여 변수를 문자열에 효율적으로 삽입하고, 동적인 문자열을 작성할 수 있다.
• length 프로퍼티를 사용하여 문자열의 길이를 조회하고, 사용 예시를 들 수 있다.

조건문

• if, else문을 사용하여 특정 조건에만 코드가 실행되도록 구현할 수 있다.
• else if문을 활용하여 여러 조건을 순차적으로 확인하고 실행할 수 있다.
• if문과 switch문의 차이를 이해하고, switch문을 사용하는 것이 적절한 상황의 예시를 들 수 있다.
• 삼항 연산자(? :)를 사용하여 조건에 따라 다른 값을 간결하게 반환하는 코드를 구현할 수 있다.

반복문 기초

• for문을 사용하여 원하는 횟수 만큼 코드가 실행되도록 하는 방법을 기억한다.
• 반복적인 코드 실행이 필요한 상황을 이해하고, 이를 해결하기 위해 for문을 사용하여 효율적으로 코드를 구현할 수 있다.
• while문의 동작 원리와 활용법을 이해하고, 조건 기반 반복이 필요한 상황에서 for문과 구분하여 적절하게 사용할 수 있다.
• 다중 반복문을 사용하여 반복적인 문제를 해결해야 하는 적절한 예시를 들 수 있으며, 실행 순서를 명확히 설명할 수 있다.

배열 기초

• Array.isArray를 사용하여 주어진 값이 배열인지 여부를 기억할 수 있다
• pop(), push(), unshift(), shift() 등의 메서드를 사용하여 배열 요소를 추가 또는 삭제할 수 있다
• slice() 메서드를 사용하여 배열 요소 중 일부를 복사하여 새로운 배열을 생성하고 활용할 수 있다.
• 배열을 효율적으로 다루기 위한 메서드의 종류와 기능을 나열할 수 있다.

배열과 반복문

• for문을 사용하여 배열의 모든 요소를 순회하고, 각 요소에 대해 원하는 작업을 수행하는 코드를 구현할 수 있다.
• for문 내부에 if문을 사용하여 배열의 모든 요소 중 조건에 맞는 요소에 대해서만 원하는 작업을 수행하는 코드를 구현할 수 있다.
• for...of 문을 사용하여 배열의 모든 요소를 순회하고, 가독성을 높인 코드를 구현할 수 있다. 다중 반복문을 사용하여 중첩된 배열(2차원 배열 등)의 모든 요소를 순회하고 작업을 수행할 수 있다.

함수 기초

• 함수 선언문을 사용하여 함수를 정의하고, 함수 정의에 필요한 요소(함수명, 매개변수, 함수 본문)를 모두 나열할 수 있다.
• 함수 선언문을 함수 표현식으로 변경하고, 두 방식의 차이를 설명할 수 있다.
• 함수를 호출하는 방법을 이해하고, 전달인자가 매개변수에 할당되는 방식을 명확히 설명할 수 있다.
• return문을 사용하여 함수의 결과값을 반환하는 방법을 이해하고, 반환된 값을 함수 외부에서 활용할 수 있다.
• 함수를 사용하는 이유(재사용성, 코드의 가독성 향상, 유지보수 용이성)를 나열할 수 있다.
• 함수 내부에서 선언된 변수를 함수 외부에서 사용할 수 없다는 것을 기억할 수 있다.
• (심화편 - 스코프) 함수 내부에서 선언된 변수를 함수 외부에서 사용할 수 없다는 것을 기억할 수 있다.

객체 기초

• 객체는 프로퍼티의 집합이며, 각 프로퍼티가 키-값 쌍으로 이루어져 있다는 개념을 기억할 수 있다.
• dot notation과 bracket notation을 사용하여 객체 프로퍼티의 값을 조회하는 방법을 기억할 수 있다.
• dot notation과 bracket notation의 차이와 주의할 점(예: bracket notation에서는 변수를 키로 사용할 수 있다는 점)을 이해하고, 각 방법에 대한 사용 예시를 들 수 있다.
• 객체 프로퍼티를 추가, 변경, 삭제하는 방법을 설명할 수 있다.
• for...in 문과 Object 메서드(Object.keys, Object.values, Object.entries)를 활용하여 객체의 프로퍼티를 반복적으로 조회하는 방법을 이해하고 사용할 수 있다.

배열 응용

• map 함수를 사용하여 배열의 각 요소를 변환하고, 새로운 배열을 생성하는 코드를 구현할 수 있다.
• filter 함수를 사용하여 조건에 맞는 배열 요소만 선택하여 새로운 배열을 생성하는 코드를 구현할 수 있다.
• reduce 함수를 사용하여 배열의 요소를 누적하여 단일 값으로 축약하는 코드를 구현할 수 있다.
• 다양한 고차 함수(forEach, some, every, find, sort 등)를 나열하고, 각 함수의 사용 예시를 들 수 있다.
• map과 forEach의 차이를 설명할 수 있으며, 각각의 사용 목적과 적합한 상황을 이해할 수 있다.
• 배열 복사를 위해 spread syntax와 slice를 사용하여 새로운 배열을 생성하는 코드를 구현할 수 있다.

객체 응용

• 객체를 복사하는 방법으로 spread syntax와 Object.assign()을 나열할 수 있다.
• 객체의 메서드는 객체의 프로퍼티로 함수가 할당된 형태임을 이해하고, 배열 메서드는 배열 객체의 프로토타입에 정의된 함수를 호출하는 것임을 설명할 수 있다

함수 응용

• 함수 표현식을 화살표 함수로 변경하여 동일한 동작을 하는 코드를 구현할 수 있다.
• 함수 스코프와 블록 스코프의 차이를 이해하고, 전역 변수의 문제점을 설명할 수 있다.

구조분해할당

• 구조분해할당을 사용하여 배열의 요소를 개별 변수로 분리하는 방법을 기억할 수 있다.
• 구조분해할당을 사용하여 객체의 프로퍼티를 개별 변수로 분리하는 방법을 기억할 수 있다
• 중첩 구조의 배열과 객체를 구조분해할당하여 값을 추출하는 예시를 들 수 있다.

DOM 기초

• DOM이 브라우저가 HTML 문서를 JavaScript의 객체 형태로 변환한 Document Object Model이라는 것을 기억할 수 있다.
• Node의 유형과 DOM API에 대해 알 수 있다.
• querySelector를 사용하여 HTML 요소를 선택하고 해당 요소를 변수에 할당할 수 있다.
• DOM 메서드를 사용하여 HTML 요소의 속성, 내용또는 스타일을 동적으로 변경하는 코드를 구현할 수 있다
• DOM API를 사용하여 새로운 HTML 요소를 생성하고, 기존 요소에 append하거나 prepend하여 동적으로 문서 구조를 변경하는 코드를 구현할 수 있다

이벤트 객체

• addEventListener 문법을 사용하여 HTML 요소에 이벤트를 설정하고, 사용자 동작에 따라 동적으로 반응하는 코드를 구현할 수 있다.
• 이벤트 객체의 역할과 기본 속성을 설명하고, 이벤트가 발생한 요소를 조회할 수 있다.
• 이벤트의 버블링에 대해 이해하고, event.stopPropagation()을 적절히 활용할 수 있다.

비동기

• 동기(Synchronous)와 비동기(Asynchronous)의 차이를 이해하고, JavaScript에서 비동기 작업을 처리하는 방법을 설명할 수 있다.
• Web API의 개념과 역할을 이해하고, Timer, Event, Fetch 등의 Web API를 활용하여 비동기 작업을 수행할 수 있다.
• Promise의 개념과 동작 흐름을 이해하고, 사용법을 설명할 수 있다.
• async/await의 개념과 사용법을 이해하고, Promise와의 차이를 설명할 수 있다.
• fetch()를 활용하여 데이터를 비동기적으로 요청하고, Promise 및 async/await과 함께 사용할 수 있다.

데이터 fetch

• HTTP 요청/응답 메시지의 역할과 구조에 대해 설명할 수 있다.
• HTTP 메서드를 나열하고(GET, POST, PUT, DELETE 등), 각각의 특징과 사용 예시를 들 수 있다.
• HTTP 응답 코드의 범주(1xx~5xx)를 이해하고, 각 범주별로 어떤 상황에서 발생하는지와 이에 대한 적절한 해결 방법을 설명할 수 있다.
• try-catch 구문을 사용하여 런타임 에러를 처리하는 코드를 구현할 수 있다.
• (심화) CORS 오류가 발생하는 이유를 알고, 해결방법을 설명할 수 있다.

Git & GitHub

Git & GitHub

Git & GitHub 학습 목표

1. Git의 기본 개념과 원리를 이해하고 설명할 수 있다.
2. Git 실습을 위한 환경(VSCode, SourceTree)을 설정할 수 있다.
3. Windows 및 Mac 환경에서 Git와 SourceTree를 설치할 수 있다.
4. Git 사용을 위한 기본 설정을 할 수 있다.
5. Git을 이용해 새로운 프로젝트를 시작할 수 있다(git init).
6. status 명령어와 .ignore 파일을 만들어 활용할 수 있다.
7. Git을 이용해 첫 commit을 남길 수 있다.
8. commit 이력을 확인할 수 있는 git log 명령어를 설정하고 사용할 수 있다.
9. reset 및 revert 명령어로 이전 commit으로 돌아갈 수 있다.
10. SourceTree를 이용해 이전 commit으로 돌아가는 방법을 익힐 수 있다.
11. branch의 개념을 이해하고 사용할 수 있다.
12. branch를 합치기(merge, rebase)할 수 있다.
13. merge의 다양한 방식과 옵션을 이해하고 사용할 수 있다.
14. 충돌(conflict)에 대해 이해하고 이를 해결할 수 있다.
15. 다른 branch에서 commit 이력을 가져오는 cherry-pick 명령어를 사용할 수 있다.
16. GitHub에 가입하고 토큰을 설정할 수 있다.
17. GitHub에 Repository를 생성하고 코드를 push할 수 있다.
18. GitHub에서 push와 pull을 사용할 수 있다.
19. GitHub를 이용한 협업 프로세스를 이해하고 사용할 수 있다.
20. GitHub에서 tag 기능과 원격 브랜치를 관리할 수 있다.

React

React

React를 학습하는 이유

React가 널리 사용되는 이유를 설명할 수 있습니다.

• React가 무엇인지 설명할 수 있다.
• React의 특징과 사용하는 이유가 무엇인지 설명할 수 있다.
• Vanilla JavaScript와 비교했을 때 React를 사용하는 이유가 무엇인지 설명할 수 있다.
• SPA가 무엇인지 설명할 수 있다.
• 가상DOM이 무엇인지 설명할 수 있다.

React의 장점과 특징

바닐라 자바스크립트와 비교했을 때 React의 단일 페이지 애플리케이션(SPA)과 가상 DOM을 활용하는 장점을 설명할 수 있습니다.

• 가상DOM 동작원리를 설명할 수 있다.
• SPA 가 무엇인지 설명할 수 있다.
• SPA 사용하는 이유에 대해 설명할 수 있다.
• 컴포넌트 기반 개발이 무엇인지 설명할 수 있다.
• 컴포넌트 기반 개발의 장점이 무엇인지 설명할 수 있다.

React의 장점과 특징

React 환경 설정 방법을 이해하고, Create React App을 사용하여 프로젝트를 시작할 수 있습니다.

• create-react-app을 설치하는 방법을 숙지하고 있다.
• React 기본 파일구조에 대해 이해한다.
• npm 명령어를 이용하여, 원하는 작업을 수행할 수 있다.
• public 폴더와 src 폴더의 쓰임에 대해 이해한다.

JSX 문법

JSX 문법의 기본을 이해하고, React에서 HTML과 JavaScript를 효과적으로 결합하는 방법을 구현할 수 있습니다.

• JSX를 사용하는 방법과 사용했을 때의 장점을 이해한다.
• HTML/JavaScript 문법과 JSX 문법의 차이를 이해한다.
• babel을 활용하여 JSX 코드를 JavaScript 코드로 변환할 수 있다.
• HTML 코드를 JSX 코드로 변환되는 과정을 이해한다.

컴포넌트 만들기

컴포넌트 기반 개발의 개념을 이해하고, React 컴포넌트를 만들 수 있습니다.

• 컴포넌트를 만드는 방법에 대해 이해한다.
• 컴포넌트를 내보내는 방법에 대해 이해한다.
• 부모 컴포넌트에 자식 컴포넌트를 중첩시키는 방법을 이해한다.
• 원하는 UI를 보여주기 위한 컴포넌트를 만들 수 있다.

상태관리, useState()

useState()를 사용한 상태 관리 기법을 이해하고, 컴포넌트 내에서 상태를 어떻게 관리하는지 구현할 수 있습니다.

• React 컴포넌트에서 state의 역할에 대해 이해한다.
• Hook의 개념에 대해 이해한다.
• useState를 사용하여 동적인 상태 값을 다루는 방법에 대해 이해한다.
• input 요소의 값을 받아오는 방법에 관해 설명할 수 있다.

useEffect()

useEffect()를 사용하여 컴포넌트의 생명주기를 관리하고 부수 효과를 처리하는 방법을 구현할 수 있습니다.

• React 컴포넌트에서 useEffect의 역할에 대해 이해한다.
• 부수효과와 생명주기의 개념에 대해 이해한다.
• useEffect를 사용하여 부수효과를 다루는 방법에 대해 이해한다.
• 의존성 배열을 원하는 상황에 맞게 작성할 수 있다.

props

컴포넌트 간의 데이터 전달 방법을 이해하고, props를 통해 부모와 자식 컴포넌트 간에 정보를 주고받을 수 있습니다.

• props를 자식 컴포넌트에서는 수정할 수 없다는 것을 이해한다.
• 부모 컴포넌트에서 props를 자식 컴포넌트로 전달하는 방법을 이해한다.
• 자식 컴포넌트에서 부모 컴포넌트로부터 받아온 props를 사용하는 방법을 이해한다.
• 구조 분해 할당의 개념에 대해 이해한다.

상태 끌어올리기

상태 끌어올리기를 통해 여러 컴포넌트에서 공유되는 상태를 관리하는 방법을 이해하고, 단방향 데이터 흐름의 중요성을 설명할 수 있습니다.

• 상태 끌어올리기를 사용하는 이유에 대해 이해한다.
• 단방향 데이터 흐름에 대해 이해한다.
• 실습 코드가 작동되는 원리에 대해 이해한다.
• 부모 컴포넌트에서 공통으로 상태를 관리하는 것에 대한 장점을 이해한다.

클래스형 컴포넌트 대신 함수형 컴포넌트를 사용하는 이유

클래스형 컴포넌트와 함수형 컴포넌트의 차이를 이해하고, 함수형 컴포넌트를 사용하는 이유를 설명할 수 있습니다.

• 클래스형 컴포넌트의 생명주기에 대해서 이해한다.
• 클래스형 컴포넌트의 구조를 이해한다.
• 클래스형 컴포넌트 대신 함수형 컴포넌트를 사용하는 이유에 대해 이해하고 있다.

map() 메서드를 사용해서 데이터로 컴포넌트 생성하기

map() 메서드를 사용하여 데이터 배열로부터 컴포넌트 리스트를 동적으로 생성하는 방법을 구현할 수 있습니다.

• map() 메서드를 사용해 데이터를 순회할 수 있다.
• map() 메서드를 사용해 배열의 각 요소를 JSX 로 반환할 수 있다.
• map() 메서드 사용해 JSX를 렌더링 할 때 key가 필요한 이유를 설명할 수 있다.

filter() 메서드를 사용해서 데이터 필터링하기

filter() 메서드를 활용하여 데이터를 필터링하고, 필요한 정보만을 추출하는 기법을 구현할 수 있습니다.

• filter() 메서드를 사용해 데이터를 필터링할 수 있다.
• filter() 메서드를 사용해 데이터를 필터링하고 map()메서드를 사용해 JSX요소로 반환할 수 있다.

react-router-dom으로 라우팅하기

react-router-dom을 사용하여 SPA 내에서 라우팅을 구현하는 방법을 이해하고 설명할 수 있습니다.

• React Router의 컴포넌트를 사용할 수 있다.
• a 태그와 Link 컴포넌트의 차이를 설명할 수 있다.
• useNavigate 훅을 사용할 수있다.

삼항 연산자로 조건부 렌더링하기

삼항 연산자와 조건부 렌더링 기법을 사용하여, 인디케이터와 함께 useSuspense(), React.lazy를 활용하는 방법을 구현할 수 있습니다.

• 삼항연산자를 이해하고 있다.
• 삼항연산자를 사용해 데이터를 조건부 렌더링할 수 있다.
• 삼항연산자를 사용해 컴포넌트를 조건부 렌더링할 수 있다.

참조형 자료형의 불변성 유지하기

참조 자료형의 특징을 이해하고, 상태 관리에서 얕은 복사와 깊은 복사, spread syntax의 사용법을 구현할 수 있습니다.

• React 상태 관리에 있어서 불변성을 유지하는 것이 왜 중요한 지 설명할 수 있다.
• 원시 자료형의 불변성에 대해 설명할 수 있다.
• 참조 자료형은 변경 가능한 값이라는 것을 이해한다.
• 참조 자료형을 다른 변수에 할당할 경우 같은 주소값을 참조한다는 것에 대해 설명할 수 있다.
• 전개 연산자를 사용하여 참조 자료형을 복사할 수 있다.
• 전개 연산자, .slice(), Object.assign() 등의 방법이 왜 얕은 복사인지 설명할 수 있다.

useCallback(), useMemo()를 사용해서 성능 최적화하기

useCallback()과 useMemo()를 사용하여 컴포넌트의 렌더링 성능을 최적화하는 방법을 설명할 수 있습니다.

• useCallback()이 어떤 기능을 하는 Hook인지 설명할 수 있다.
• 메모이제이션이 무엇인지 설명할 수 있다.
• useCallback()의 사용법을 알고 있다.
• useCallback()의 매개변수를 설명할 수 있다.
• useMemo()이 어떤 기능을 하는 Hook인지 설명할 수 있다.
• useMemo()의 사용법을 알고 있다.
• useMemo()의 매개변수를 설명할 수 있다.

useReducer(), useContext()로 상태관리하기

useReducer()와 useContext()를 조합하여 복잡한 상태 관리 로직을 구현하는 고급 방법을 이해하고 설명할 수 있습니다.

• useReducer()를 사용하는 이유를 이해하고 있다.
• useReducer()를 만들고 사용할 수 있다.
• useReducer에 의해 반환되는 dispatch 함수가 어떤 역할을 하는지 설명할 수 있다.
• useContext()를 사용하는 이유를 이해하고 있다.
• useContext()를 만들고 사용할수 있다.

custom hooks

custom hooks를 만들어 로직을 재사용하고, 컴포넌트 간의 상태 관리 코드를 간결하게 유지하는 방법을 구현할 수 있습니다.

• custom hook을 사용하는 이유를 이해하고 있다.
• custom hook을 만들고 사용할 수 있다.
• custom hook 사용 규칙에 대해 이해한다.
• 실습코드가 동작하는 원리에 대해 이해한다.

Node.js & Express

Node.js & Express

Node.js 학습 목표

1. Node.js가 무엇인지 이해할 수 있다.
2. Node.js의 역사에 대해 알 수 있다.
3. Node.js를 자신의 컴퓨터에 설치하고 버전을 확인할 수 있다.
4. Node.js REPL을 사용하여 코드를 실행할 수 있다.
5. Node.js와 브라우저의 API 차이점을 구별할 수 있다.
6. Node.js에서 글로벌 객체를 사용하는 방법을 배울 수 있다.
7. Node.js의 모듈 시스템을 이해하고 사용할 수 있다.
8. HTTP 서버를 Node.js로 구축할 수 있다.
9. Node.js에서 모듈을 사용하는 이유를 설명할 수 있다.
10. 자신만의 Node.js 모듈을 생성하고 관리할 수 있다.
11. 모듈에서 함수와 객체를 export하는 방법을 배울 수 있다.
12. CommonJS와 ECMAScript 모듈 간의 차이를 이해할 수 있다.
13. Node.js에서 ECMAScript 모듈을 사용하는 방법을 배울 수 있다.
14. 모듈 캐싱이 Node.js에서 어떻게 작동하는지 이해할 수 있다.
15. npm을 사용하여 패키지를 관리하고 설치할 수 있다.
16. npm의 의존성 관리 방법을 이해하고 **package-lock.json**의 역할을 알 수 있다.
17. **npm audit**를 사용하여 보안 취약점을 확인하고 수정할 수 있다.
18. npm 패키지를 전역적으로 설치하고 관리하는 방법을 배울 수 있다.
19. Yarn 패키지 매니저를 사용하는 방법을 배울 수 있다.
20. HTTP 요청과 응답의 구조를 이해할 수 있다.
21. 다양한 HTTP 상태 코드와 그 의미를 배울 수 있다.
22. Express.js를 사용하여 웹 서버를 구축할 수 있다.
23. Express.js에서 라우팅을 관리하는 방법을 배울 수 있다.
24. RESTful API를 설계하고 구현할 수 있다.
25. Express.js에서 파일 전송을 처리할 수 있다.
26. Express.js에서 정적 파일을 서비스하는 방법을 배울 수 있다.
27. JWT를 이용한 인증 시스템을 구현할 수 있다.
28. Passport를 사용하여 복잡한 인증 시스템을 구축할 수 있다.
29. Express에서 미들웨어를 구현하고 관리할 수 있다.
30. Semantic Versioning을 이해하고 적용할 수 있다.

Node.js 체크 리스트

서버 동작 원리

• ☑️ 서버에 요청을 보내면, 그 요청이 어떻게 처리되고 응답이 오는지 설명할 수 있나요?
• ☑️ React에서 만든 화면이 서버와 어떻게 데이터를 주고받는지, 그 과정을 이해하고 있나요?

Node.js 기본 개념

• ☑️ Node.js가 무엇인지, 그리고 이를 사용해 서버를 만들 수 있는 이유를 알고 있나요?
• ☑️ Node.js의 비동기 처리 방식과 이벤트 루프에 대해 이해하고 있나요?

Node.js를 활용한 서버 구축

• ☑️ Node.js를 사용해 기본적인 HTTP 요청과 응답을 처리하는 간단한 웹 서버를 만들 수 있나요?
• ☑️ Express를 사용해 더 복잡한 라우팅 및 미들웨어 처리를 포함한 서버를 구축할 수 있나요?

프론트엔드와 백엔드의 협업

• ☑️ 프론트엔드와 백엔드가 데이터를 주고받는 방식을 이해하고, 이를 기반으로 프로젝트에서 협업할 수 있나요?

웹 인증 및 보안 기초

• ☑️ Node.js와 Express를 사용해 쿠키나 세션을 활용한 인증 기능을 만들 수 있나요?
• ☑️ 사용자를 인증하고 권한을 관리하는 서버를 직접 구현할 수 있나요? (7점)
• ☑️ JWT(토큰 기반 인증)을 사용해 보안 기능을 갖춘 인증 시스템을 설계할 수 있나요?

OAuth 2.0을 활용한 소셜 로그인

• ☑️ Google, Facebook 등 소셜 계정을 이용한 로그인 기능을 구현한 경험이 있나요?
• ☑️ OAuth 2.0을 사용해 소셜 로그인 기능을 실제로 만들어본 적이 있나요?

보안성과 효율성을 갖춘 서버 설계

• ☑️ Node.js와 Express를 활용해 보안이 강화된 서버를 설계하고 구현할 수 있나요?
• ☑️ 보안이 중요한 웹 애플리케이션에서 데이터를 안전하게 처리할 수 있는 서버를 구축할 수 있나요?

Database

Database

데이터베이스 학습 목표

1. 관계형 데이터베이스의 기본 개념을 설명할 수 있다.
2. SELECT 문법과 다양한 조건절 (WHERE, ORDER BY, GROUP BY)을 활용할 수 있다.
3. 데이터 중복 제거 및 정렬 방법에 대해 이해한다.
4. 데이터 집계 함수를 사용하여 필요한 데이터를 집계할 수 있다.
5. CRUD (Create, Read, Update, Delete) 작업을 SQL을 통해 실행할 수 있다.
6. 다양한 JOIN 유형(INNER, LEFT, RIGHT등)을 사용할 수 있다.
7. 기본 SQL 문법을 이해하고 간단한 쿼리를 작성할 수 있다.
8. 데이터 타입과 제약 조건의 차이점에 대해 설명할 수 있다.
9. 데이터베이스 정규화 원칙을 이해하고 적용할 수 있다.
10. 논리적 데이터 모델링을 통해 데이터 구조를 체계적으로 설계할 수 있다.
11. 3-Tier 아키텍처와 다양한 시스템 아키텍처(1Tier, 2Tier)의 구성과 장단점을 이해한다.
12. 대표적인 BaaS인 Supabase를 사용하여 데이터베이스가 포함된 간단한 프로젝트를 진행할 수 있다.
13. ORM(Object-Relational Mapping)의 개념을 이해하고 Prisma를 활용한 데이터베이스 관리의 장점을 학습한다.

데이터베이스 체크리스트

데이터 베이스 기초

• ☑️ 데이터베이스의 개념과 필요성을 설명할 수 있나요?
• ☑️ 관계형 데이터베이스(RDB)와 관계형 데이터베이스 관리시스템(RDBMS)을 설명할 수 있나요?

데이터 모델링

• ☑️ 데이터 모델링 과정을 설명할 수 있나요?
• ☑️ 요구사항을 보고 스스로 데이터 모델링을 할 수 있나요?
• ☑️ 데이터 스키마를 보고 필요한 데이터만 조회할 수 있나요?

SQL

• ☑️ supabase SQL을 활용하여 데이터베이스를 생성/삭제할 수 있나요?
• ☑️ supabase SQL을 활용하여 데이터베이스 테이블을 생성/삭제할 수 있나요?
• ☑️ supabase SQL에서 사용되는 데이터 타입을 설명할 수 있나요?
• ☑️ supabase SQL을 활용하여 데이터를 추가/조회/수정/조회할 수 있나요?
• ☑️ supabase SQL을 활용하여 여러 테이블의 필요한 데이터를 한 번에 조회할 수 있나요?

서버와 데이터베이스

• ☑️ Prisma, supabase를 활용하여 초기 설정, 스키마 작성, 스키마 적용을 할 수 있나요?
• ☑️ 간단한 요구사항에 대해 Prisma로 supabase 데이터베이스에 CRUD 쿼리를 보낼 수 있나요?
• ☑️ 클라이언트-서버-데이터베이스(3-Tier)를 기반으로한 간단한 웹 애플리케이션을 구현할 수 있나요?

AWS

AWS

AWS 학습 목표

1. AWS 기초 개념 이해: S3, CloudFront, IAM 등의 핵심 AWS 서비스를 이해하고 용도와 목적을 파악한다.
2. S3 버킷 생성 및 사용: S3 버킷을 생성하고 파일 업로드/다운로드 및 퍼블릭 액세스 설정을 학습한다.
3. 프론트엔드 코드 배포: S3에 프론트엔드 애플리케이션을 배포를 학습한다.
4. HTTPS 설정: 인증서를 ACM(AWS Certificate Manager)으로 생성하고, HTTPS 설정 방법을 익힌다.
5. 배포 자동화: Github Actions를 사용하여 CI/CD 도구를 활용해 배포 프로세스를 자동화한다

AWS 체크리스트

AWS 기초 개념 이해

• ☑️ 배포의 개념을 이해하고, 로컬 서버와 배포 서버의 차이를 설명할 수 있나요?
• ☑️ AWS S3 서비스의 사용 목적을 설명할 수 있나요?
• ☑️ AWS CloudFront 서비스의 사용 목적을 설명할 수 있나요?
• ☑️ AWS CloudFront를 사용할 때 무효화를 사용하는 이유를 설명할 수 있나요?
• ☑️ AWS IAM 서비스의 사용 목적을 설명할 수 있나요?

S3 버킷 생성 및 사용

• ☑️ S3 버킷을 생성하고 퍼블릭 액세스을 설정할 수 있나요?
• ☑️ S3 버킷에 파일을 업로드/다운로드할 수 있나요?

HTTPS 설정

• ☑️ 도메인과 DNS의 개념을 이해하고 설명할 수 있나요?
• ☑️ URL과 URI의 차이를 설명할 수 있나요?
• ☑️ HTTP와 HTTPS의 차이를 설명할 수 있나요?
• ☑️ ACM(AWS Certificate Manager)을 사용해 HTTPS를 설정할 수 있나요?

배포 자동화

• ☑️ CI/CD의 개념을 이해하고 지속적 통합(Continuous Integration)과 지속적 배포(Continuous Deploy)의 차이를 설명할 수 있나요?
• ☑️ Github Actions를 사용하여 CI/CD를 구성할 수 있나요?

TypeScript

TypeScript 학습 목표

1. TypeScript란 무엇인지 설명할 수 있다.

• ☑️ TypeScript가 무엇인지 설명할 수 있다.
• ☑️ TypeScript 의 개요에 대해 이해하고 있다.
• ☑️ TypeScript 의 특징에 대해 이햐하고 있다.

2. JavaScript와 TypeScript의 차이점을 설명할 수 있다.

• ☑️ JS와 TS의 차이점이 무엇인지 이해하고 있다.
• ☑️ JS와 비교한 TS의 장점 및 특징이 무엇인지 설명할 수 있다.
• ☑️ TS의 타입 검사가 어떻게 이루어지는 지 알고 있다.
• ☑️ JS와 TS의 타입 검사를 비교하였을 때 TS의 장점이 무엇인 지 설명할 수 있다.

3. TypeScript를 설치하고 설정할 수 있다.

• ☑️ TypeScript 를 전역으로 설치할 수 있다.
• ☑️ tsc 명령어를 통해 간단한 컴파일 과정을 수행할 수 있다.

4. TypeScript의 기본 동작 원리를 이해할 수 있다.

• ☑️ 타입 시스템이 무엇인지 설명할 수 있다.
• ☑️ 타입 안정성이 무엇인지 설명할 수 있다.
• ☑️ 타입 추론이 무엇인지 설명할 수 있다.
• ☑️ 정적 타입과 동적 타입을 비교하여 설명할 수 있다.
• ☑️ 제네릭이 무엇인지 설명할 수 있다.

5. TypeScript 환경을 설정할 수 있다.

• ☑️ tsconfig.json 파일을 이해하고 있다.
• ☑️ tsconfig.json 파일 속 속성들을 이해하고 있다.

6. TypeScript로 간단한 프로그램을 작성할 수 있다.

• ☑️ TypeScript의 기본 타입 종류에 무엇이 있는지 알고 있다.
• ☑️ string 타입 개념 및 사용법에 대해 설명할 수 있다.
• ☑️ number 타입 개념 및 사용법에 대해 설명할 수 있다.
• ☑️ boolean 타입 개념 및 사용법에 대해 설명할 수 있다.
• ☑️ null 타입 개념 및 사용법에 대해 설명할 수 있다.
• ☑️ any 타입 개념 및 사용법에 대해 설명할 수 있다.

7. 배열 타입을 정의하고 사용할 수 있다.

• ☑️ 배열 타입을 정의할 수 있습니다.
• ☑️ 혼합 타입 배열에 대해 이해하고 있습니다.
• ☑️ 배열 메서드와 타입 추론에 대해 이해하고 있습니다.

8. 객체 타입을 정의하고 사용할 수 있다.

• ☑️ TypeScript 객체 타입이 무엇인지 설명할 수 있다.
• ☑️ 선택적 속성(Optional Properties)이 무엇인지 설명할 수 있다.
• ☑️ 읽기 전용 속성(Readonly Properties)이 무엇인지 설명할 수 있다.
• ☑️ 타입 별칭이 무엇인지 설명할 수 있다.

9. 함수 타입을 정의하고 사용할 수 있다.

• ☑️ 매개변수 타입 표기에 대해 이해하고 있습니다.
• ☑️ 반환 타입 표기에 대해 이해하고 있습니다.
• ☑️ 컨텍스트 타입에 대해 이해하고 있습니다.

10. 유니언 타입을 정의하고 사용할 수 있다.

• ☑️ 유니언 타입이 무엇인지 설명할 수 있다.
• ☑️ 유니언 타입의 기본 사용법을 이해하고 있다.
• ☑️ 유니언 타입을 배열에 적용하는 방법에 대해 알고 있다.
• ☑️ 리터럴 타입이 무엇인지 설명할 수 있다.
• ☑️ 타입 별칭(Type Aliases)에서 유니언 타입을 정의할 수 있다.

11. 인터페이스를 정의하고 사용할 수 있다.

• ☑️ 인터페이스를 정의하고 사용하여 객체를 생성할 수 있다.
• ☑️ 선택적 프로퍼티와 읽기 전용 프로퍼티를 사용할 수 있다.
• ☑️ 인터페이스 확장에 대해 이해하고 있다.
• ☑️ 타입 별칭과 인터페이스의 차이점을 이해하고 있다.

12. 튜플을 정의하고 사용할 수 있다.

• ☑️ TypeScript에서 Tuple이 무엇인지 설명할 수 있다.
• ☑️ Tuple을 통해 요소의 타입과 순서를 정의하는 방법에 대해 알고 있다.
• ☑️ Tuple을 초기화하는 방법에 대해 설명할 수 있다.
• ☑️ Tuple의 요소 접근 및 변경하는 방법에 대해 알고 있다.
• ☑️ Tuple을 구조 분해 할당(Destructuring)하여 개별 요소를 변수에 할당하는 방법에 대해 알고 있다.

13. 열거형을 정의하고 사용할 수 있다.

• ☑️ 문자형 Enum 에 대해 이해하고 있다.
• ☑️ 숫자형 Enum 에 대해 이해하고 있다.
• ☑️ Enum을 switch 문과 사용할 수 있다.

14. 타입 추론과 타입 단언을 이해하고 사용할 수 있다.

• ☑️ 타입 추론의 개념 및 특징에 대해 설명할 수 있다.
• ☑️ 타입 추론의 주요 개념 중 자동 타입 결정이 무엇인지 설명할 수 있다.
• ☑️ 타입 추론의 주요 개념 중 문맥 기반 추론이 무엇인지 설명할 수 있다.
• ☑️ 타입 추론의 주요 개념 중 타입 선언 생략이 무엇인지 설명할 수 있다.
• ☑️ 타입 단언에 대해 이해하고 있다.
• ☑️ 타입 단언을 언제 사용하는지 알고 있다.
• ☑️ 타입 단언 사용시 주의사항에 대해 이해하고 있다.

15. 클래스를 정의하고 사용할 수 있다.

• ☑️ Classes의 개념 및 특징을 설명할 수 있다.
• ☑️ Classse를 정의하는 방법을 알고 있다.
• ☑️ 접근 제어자 (Access Modifiers)의 개념을 설명할 수 있다.
• ☑️ 인터페이스로 클래스의 구조를 정의하는 방법을 알고 있다.

16. 제네릭을 정의하고 사용할 수 있다.

• ☑️ 제네릭에 대해 이해하고 있다.
• ☑️ 제네릭 함수에 대해 이해하고 있다.
• ☑️ 제네릭 인터페이스에 대해 이해하고 있다.

17. 제네릭 함수를 작성하고 활용할 수 있다.

• ☑️ 제네릭 클래스의 개념 및 특징에 대해 설명할 수 있다.
• ☑️ 제네릭 클래스의 기본 구조에 대해 알고 있다.
• ☑️ 제네릭 클래스의 기본 구조를 실제로 작성할 수 있다.
• ☑️ 제네릭 클래스의 타입 제한에 대해 설명할 수 있다.

18. TypeScript와 DOM을 함께 사용할 수 있다.
19. 타입 좁히기(Type Narrowing)를 이해하고 사용할 수 있다.
20. 고급 타입과 유틸리티 타입을 사용할 수 있다.