멋쟁이 사자처럼 FrontEnd BootCamp 15기 자바스크립트 프로그래밍 저장소

• 예제 테스트(GitHub Page): https://febc-15.github.io/js/workspace-ins

목차

1. 자바스크립트 기초 문법

2. 자바스크립트 함수

3. 프로토타입, 상속과 클래스

4. 클로저

5. 웹 브라우저 프로그래밍

수업 진도

1주차 - 5일, 2025.09.22(월) ~ 2025.09.26(금)

1일차(2025.09.22 월)

오전(3시간)

• JS 레포지토리 README: https://github.com/FEBC-15/js
  • 💻 개발환경 구축
• 1장 기초 문법 - 1. 자바스크립트란?
• 1장 기초 문법 - 2. 자바스크립트 역사

오후(5시간)

• 1장 기초 문법 - 3. 자바스크립트로 할 수 있는 일
• 1장 기초 문법 - 4. 개발 환경 구성
• 1장 기초 문법 - 5. 자바스크립트 코드의 위치

2일차(2025.09.23 화)

오전(3시간)

• 1장 기초 문법 - 6. 명령문과 주석
• 1장 기초 문법 - 7. 변수(variable)

오후(3시간)

• 1장 기초 문법 - 8. 리터럴(literal)
• 1장 기초 문법 - 9. 데이터 타입
• 1장 기초 문법 - 10. 원시 타입(Primitive type)
• 1장 기초 문법 - 11. 연산자

3일차(2025.09.24 수)

오전(3시간)

• 1장 기초 문법 - 11. 연산자

오후(3시간)

• 1장 기초 문법 - 12. 조건문
  • ✍️ 과제: 01-17-02 if-else문을 사용하여 학점 출력
  • ✍️ 과제: 01-17-03 if-else문을 사용하여 사용자와 로그인 상태 출력

4일차(2025.09.25 목)

오전(3시간)

• 1장 기초 문법 - 12. 조건문

오후(3시간)

• 1장 기초 문법 - 12. 조건문

5일차(2025.09.26 금)

오전(3시간)

• 1장 기초 문법 - 13. 반복문

오후(3시간)

• 1장 기초 문법 - 13. 반복문
  • ✍️ 과제: 01-21-02 for문을 사용하여 별찍기
  • ✍️ 과제: 01-21-03 for문을 이용해서 구구단 작성
• 1장 기초 문법 - 14. 참조 타입(Object, 객체)

2주차 - 4일, 2025.09.29(월) ~ 2025.10.02(목)

6일차(2025.09.29 월)

오전(3시간)

• 1장 기초 문법 - 13. 반복문
  • ✍️ 과제 풀이: 01-21-02 for문을 사용하여 별찍기
  • ✍️ 과제 풀이: 01-21-03 for문을 이용해서 구구단 작성
• 1장 기초 문법 - 14. 참조 타입(Object, 객체)

오후(3시간)

• 1장 기초 문법 - 14. 참조 타입(Object, 객체)

7일차(2025.09.30 화)

오전(3시간)

• 1장 기초 문법 - 15. 참조 타입(Array, 배열)

오후(3시간)

• 1장 기초 문법 - 15. 참조 타입(Array, 배열)

8일차(2025.10.01 수)

오전(3시간)

• 1장 기초 문법 - 15. 참조 타입(Array, 배열)
• 1장 기초 문법 - 16. 참조 타입(Function, 함수)

오후(3시간)

• 1장 기초 문법 - 16. 참조 타입(Function, 함수)
• 1장 기초 문법 - 17. 참조 타입의 특징

9일차(2025.10.02 목)

오전(3시간)

• 1장 기초 문법 - 17. 참조 타입의 특징
• 1장 기초 문법 - 18. 변수의 유효범위(scope)
• 1장 기초 문법 - 19 ES6 - 변수 선언문

오후(3시간)

• 1장 기초 문법 - 20 ES6 - Template literals
• 1장 기초 문법 - 21 ES6 - 구조 분해 할당(Destructuring assignment)
• 1장 기초 문법 - 22 ES6 - 기본값 매개변수(Default parameters)
• 1장 기초 문법 - 23 ES6 - 나머지 매개변수(Rest parameters)
• 1장 기초 문법 - 24 ES6 - 전개 구문(Spread syntax)

추석 연휴에 할 일

• 웹 프로그래밍 튜토리얼 학습(복습) - 자바스크립트

  • 1 기본 개념과 동작 원리 이해의 중요성
  • 2 자바스크립트란?
  • 3 자바스크립트 개발 환경과 실행 방법
  • 4 브라우저 동작 원리
  • 5 자바스크립트의 기본 문법
  • 6 데이터 타입과 변수
  • 7 연산자
  • 8 제어문
  • 9 타입 변환과 단축 평가
  • 10 객체
  • 11 객체와 변경불가성(Immutability)
  • 12 함수
  • 15 스코프
  • 27 배열
  • 28 자바스크립트 배열은 배열이 아니다

• 웹 프로그래밍 튜토리얼 학습(복습) - ECMAScript6

  • 1 let, const와 블록 레벨 스코프
  • 2 템플릿 리터럴
  • 4 매개변수 기본값, Rest 파라미터, Spread 문법, Rest/Spread 프로퍼티
  • 6 디스트럭처링

• 웹 프로그래밍 튜토리얼 학습(예습) - 자바스크립트

  • 17 함수 호출 방식에 의해 결정되는 this

3주차 - 5일, 2025.10.13(월) ~ 2025.10.17(금)

10일차(2025.10.13 월)

오전(3시간)

• 2장 함수 - 1. 참조 타입(Function, 함수)
• 2장 함수 - 2. 일급 객체(First-class object)

오후(3시간)

• 2장 함수 - 3. 함수 생성
• 2장 함수 - 4. 호이스팅 (hoisting)

11일차(2025.10.14 화)

오전(3시간)

• 2장 함수 - 5. 매개변수와 인자의 수
• 2장 함수 - 6. 암묵적 매개변수

오후(3시간)

• 2장 함수 - 7. 함수 호출 방법
  • 7.1 함수 호출 방법 1 - 일반 함수로 호출
  • 7.2 함수 호출 방법 2 - 메서드로 호출
  • 7.3 함수 호출 방법 3 - apply(), call()로 호출

12일차(2025.10.15 수)

오전(3시간)

• 2장 함수 - 7. 함수 호출 방법
  • 7.4 함수 호출 방법 4 - 생성자 함수로 호출

오후(3시간)

• 2장 함수 - 8. 익명 함수 (Anonymous function)
• 2장 함수 - 9. 콜백 함수 (Callback function)
• 2장 함수 - 10. 순수 함수 (Pure Function)
• 2장 함수 - 11. 고차 함수 (Higher-Order Function)

13일차(2025.10.16 목)

오전(3시간)

• 2장 함수 - 12. 고차 함수 사용 예 - 메모이제이션
• 3장 프로토타입과 클래스 - 1. 프로토타입이란?
• 3장 프로토타입과 클래스 - 2. 프로토타입과 생성자
• 3장 프로토타입과 클래스 - 3. 인스턴스 생성과 프로토타입
• 3장 프로토타입과 클래스 - 4. 객체의 프로퍼티 참조
• 3장 프로토타입과 클래스 - 5. Object

오후(3시간)

• 3장 프로토타입과 클래스 - 6. typeof 연산자
• 3장 프로토타입과 클래스 - 7. instanceof 연산자
• 3장 프로토타입과 클래스 - 8. 상속
• 3장 프로토타입과 클래스 - 9. 클래스 정의
• 3장 프로토타입과 클래스 - 10. 인스턴스의 속성 정의
• 3장 프로토타입과 클래스 - 11. 인스턴스의 메서드 정의

14일차(2025.10.17 금)

오전(3시간)

• 3장 프로토타입과 클래스 - 12. 클래스 상속
• 3장 프로토타입과 클래스 - 13. private 속성
• 2장 함수 - 13. 즉시 실행 함수

오후(3시간)

• 4장 클로저 - 1. 클로저란?
• 4장 클로저 - 2. 클로저 용법
  • 2.1 캡슐화
  • 2.2 콜백과 타이머
  • 2.3 커링
  • 2.4 Partial application(부분 적용 함수)

4주차 - 4일, 2025.10.20(월) ~ 2025.10.23(목)

15일차(2025.10.20 월)

오전(3시간)

• 4장 클로저 - 2. 클로저 용법
  • 2.5 메모이제이션
• 5장 웹 브라우저 프로그래밍 - 1. 웹 브라우저 프로그래밍
  • 1.1 웹 브라우저에서 실행되는 자바스크립트 환경
• 5장 웹 브라우저 프로그래밍 - 2. DOM
  • 2.1 Document 객체
  • 2.2 주요 노드

오후(3시간)

• 5장 웹 브라우저 프로그래밍 - 3. 노드 찾기
  • 3.1 태그의 id로 노드 찾기
  • 3.2 태그명으로 노드 찾기
  • 3.3 트리구조로 노드 찾기
  • 3.4 class 속성으로 노드 찾기
  • 3.5 CSS 셀렉터 이용
• 5장 웹 브라우저 프로그래밍 - 4. 요소노드의 내부 컨텐츠 제어
  • 4.1 innerHTML과 outerHTML
  • 4.2 textContent와 innerText

16일차(2025.10.21 화)

오전(3시간)

오후(3시간)

17일차(2025.10.22 수)

오전(3시간)

오후(3시간)

18일차(2025.10.23 목)

오전(3시간)

오후(3시간)

5주차 - 5일, 2025.10.27(월) ~ 2025.10.31(금)

19일차(2025.10.27 월)

오전(3시간)

오후(3시간)

20일차(2025.10.28 화)

오전(3시간)

오후(3시간)

21일차(2025.10.29 수)

오전(3시간)

오후(3시간)

22일차(2025.10.30 목)

오전(3시간)

오후(3시간)

23일차(2025.10.31 금)

오전(3시간)

오후(3시간)

6주차 - 4일, 2025.11.03(월) ~ 2025.11.06(목)

24일차(2025.11.03 월)

오전(3시간)

오후(3시간)

25일차(2025.11.04 화)

오전(3시간)

오후(3시간)

26일차(2025.11.05 수)

오전(3시간)

오후(3시간)

27일차(2025.11.06 목)

오전(3시간)

오후(3시간)

개발 환경 구축

프로그램 설치

• 본인의 OS에 맞는 버전 다운로드 후 설치
  • Nodejs 설치 https://nodejs.org/en/download/
  • Visual Studio Code 설치 https://code.visualstudio.com/download
  • Git 설치 https://git-scm.com/downloads
  • API 클라이언트 설치
    • Postman https://www.postman.com/downloads
    • Bruno https://www.usebruno.com/downloads

실습 준비

Github 저장소 복사

1. 자바스크립트 실습 Github 저장소

   • https://github.com/FEBC-15/js.git

2. 터미널 프로그램 실행 후 개발 수업에 사용할 폴더 생성 후 이동

   • 예시

   mkdir febc15
   cd febc15

3. 실습 저장소를 로컬에 clone

   git clone https://github.com/FEBC-15/js.git

4. js 폴더로 이동

   cd js

실습 저장소의 변경사항을 동기화하기

• github 저장소의 변경사항을 가져올 때

  git pull origin main

• 충돌 발생시 임시로 필요한 코드만 복사
  • 현재 폴더 하위에 sample/02 폴더만 복사하는 예시

  npx degit https://github.com/FEBC-15/js/sample/02 sample/02 

Visual Studio Code 설정

1. VSCode 실행

2. 프로젝트 선택

   • File > Open Folder... > febc15/01_js/JS 선택

3. File > Preferences > Settings > User: 이곳에서 설정한 항목은 모든 프로젝트에 공통 적용

   • "Editor: Font Size": 각자 맞춰서 조절
   • "Files: Auto Save": onFocusChange
   • "Editor: Tab Size": 2
   • "Editor: Detect Indentation": 체크 해제
   • Search settings 에서 default profile 검색
     • Terminal > Intergrated > Default Profile: Windows(MAC 사용자는 Osx) 값을 Git Bash로 수정
     • Terminal 우측 상단의 휴지통 아이콘 눌러서 닫은 후 View > Terminal 선택해서 bash로 열리는지 확인

4. File > Preferences > Settings > Workspace: 이곳에서 설정한 항목은 현재 프로젝트에만 적용(User 설정을 덮어씌움)

   • Search settings 에서 Files: Readonly Include 검색
     • Add Pattern > workspace-ins/** 입력한 후 OK 선택
     • Add Pattern > sample/** 입력한 후 OK 선택

sample 폴더 복사

• 작업 디렉토리 생성

  mkdir workspace

• sample/01/workspace 폴더 내용을 작업 디렉토리에 복사

  cp -r sample/01/workspace/* ./workspace/

• 완성된 강사의 코드는 workspace-ins 폴더에서 확인

실습 테스트

터미널 테스트

• workspace/ch01/ex01-02.js 파일 작성

  console.log('Hello 자바스크립트');

• 실행

  cd workspace/ch01
  node ex01-02.js

웹 브라우저 테스트

웹 서버 구동

• VSCode의 터미널로 이동
  • VSCode 하단의 TERMINAL이 보이지 않으면 View > Terminal
• 프로젝트 루트에서 Live Server 구동

  npx live-server workspace

  • Need to install the following packages: live-server@x.x.x Ok to proceed? (y) 메세지가 나올 경우 엔터 눌러서 설치

테스트

• 웹 브라우저로 접속
  • http://127.0.0.1:8080 또는 http://localhost:8080
• 각 예제 클릭해서 테스트
  • .js: Javascript 문법 관련 실습. 웹브라우저의 개발자 도구 > 콘솔 탭에서 출력 결과 확인
  • .html: DOM, Ajax 관련 실습. 웹브라우저에서 새로운 화면으로 이동 후 테스트

팁

• VSCode에서 소스코드 비교
  • 비교할 두개의 파일을 VSCode에서 오픈(예시, student.js, ins.js)
  • student.js 파일이 활성화 되어있는 상태에서
  • View > Command Palette (단축키 F1) > File: Compare Active File With... 선택
  • 비교할 대상 파일 선택(ins.js)
  • student.js <-> ins.js 파일의 차이점 쉽게 확인 가능

참고 사이트

자바스크립트 학습

• 모던 자바스크립트 튜토리얼: https://ko.javascript.info
• MDN 자바스크립트: https://developer.mozilla.org/ko/docs/Web/JavaScript
• 코딩 에브리바디 자바스크립트: https://codingeverybody.kr/category/javascript
• 웹 개발자 튜토리얼: https://poiemaweb.com

코딩 테스트

• 백준
  • https://www.acmicpc.net
  • 단계별로 풀어보기: https://www.acmicpc.net/step
• 프로그래머스 코딩 테스트
  • https://school.programmers.co.kr/learn/challenges
  • 기초 트레이닝: https://school.programmers.co.kr/learn/challenges/training?order=acceptance_desc&languages=javascript
  • 입문: https://school.programmers.co.kr/learn/challenges/beginner?order=acceptance_desc
  • 레벨 1: https://school.programmers.co.kr/learn/challenges?order=acceptance_desc&languages=javascript&page=1&levels=1

온라인 웹 개발 에디터(HTML, CSS, JS)

• CodePen: https://codepen.io
• Codesandbox: https://codesandbox.io
• Stackblitz: https://stackblitz.com

정규표현식 테스트

• https://regexr.com

API Client

Postman

• 홈페이지: https://www.postman.com
• 다운로드: https://www.postman.com/downloads
• 문서: https://learning.postman.com/docs

Bruno

• 홈페이지: https://www.usebruno.com
• 다운로드: https://www.usebruno.com/downloads
• 문서: https://docs.usebruno.com/introduction