1) 프로그램과 main 함수 구조

• main 함수 구조 : 머리, 몸통 구조

  • 머리 : 함수 원형 (함수의 이름과 필요한 데이터 표시)
  • 몸통의 마지막에는 return 0;을 넣어 프로그램을 종료
  • 함수에서 실행할 일은 몸통의 중괄호 안에 작성

• 주석문

  • / * ~ * / : /*와 */ 사이의 모든 내용을 주석 처리
  • // : //부터 해당 줄의 끝까지 주석 처리

• 함수 몸통 부분에서 지켜야 하는 규칙

  • 세미콜론(;)을 이용해 문장의 끝을 표시
  • 한 줄에 한 문장씩 작성
  • 일정한 간격으로 들여쓰기

2) 문자열 출력 : 출력 함수(printf)의 사용법

#include <stdio.h> //1행. stdio.h를 불러온다

• stdio.h : standard input output
  • C언어에서 기본으로 사용하는 입출력 함수가 포함됨

3) 제어 문자 출력(출력 방식에 영향을 주는 것 : 백슬래시)

• \n(개행, new line) : 다음 줄로 이동
• \b(백스페이스, backspace) : 한 칸 왼쪽으로 이동
• \r(캐리지 리턴, carriage return) : 맨 앞으로 이동
• \a(알럿 경보, alert) : 벨소리

4) 정수와 실수 출력

• 정수는 %d, 실수를 %lf
• %lf는 기본 소수점 이하 여섯째 자리까지 출력함

printf("변환 문자", 숫자);
printf("%d\n", 10);
printf("%lf\n", 3.14);

/

2-2. 상수와 데이터 표현 방법

1) 정수 상수 표현법

• 10진법 : 0~9
• 8진법(앞에 0을 붙임) : 0~7
• 16진수(앞에 0x를 붙임) : 09, AF

2) 실수 상수 표현법

• 실수는 소수점 형태와 지수 형태로 표현 가능
• 소수점 형태로 표현할 때 실수는 0~9, +, - 기호와 소수점 사용
• 정규화 표현법

3) 문자와 문자열 상수 표현법

• 문자(%c)는 작은따옴표('')
• 문자열(%s)은 큰따옴표("")

4) 상수가 컴파일된 후의 비트 형태

• 정수 : 4바이트
• 실수 : 8바이트
• 문자 : 4바이트
• 아스키코드

5) 정수 상수가 컴파일된 후의 비트 형태

• 양수의 변환 -> LL
• 음수의 변환 : 2의 보수

6) 실수 상수가 컴파일 된 후의 비트 형태

• 부호 비트 : 양수는 0, 음수는 1
• 지수부 : 부호 비트 다음부터 11비트는 지수값 의미
• 소수부 : 나머지 52비트는 소수값을 의미

1. C언어의 탄생

• 유닉스 시스템에 사용하기 위해 만든 B언어를 발전시켜 만든 언어
• C언어는 기존 언어들과 달리 하드웨어에 상관없이 사용할 수 있음

2. C언어의 장점

• 시스템 프로그래밍 가능
• 이식성을 갖춘 프로그램 만들기 가능
• 함수를 사용해 개별 프로그래밍 가능

1-2. 컴파일과 컴파일러 사용법

• 프로그램 만드는 과정 요약 : 소스파일 작성 -> 컴파일 -> 실행파일 생성

• 소스 파일 : C언어로 작성한 문서

• 컴파일 : 소스 파일을 기계어로 바꾸는 과정 (컴퓨터는 0과 1로 된 기계어만을 이해하기 때문에 컴파일 과정이 있어야 함)

• 컴파일 과정 3단계 1) 전처리 : 전처리 지시자에 따라 소스파일 가공하는 과정 2) 컴파일 : 전처리가 끝난 파일을 컴파일하면 개체 파일이 됨 3) 링크 : 개체 파일에 startup code를 결합하는 과정

기본 숙제 비주얼 스튜디오 설치 및 인증

vim은 vi와 호환되는 문서 편집기로 1991년 네덜란드의 브람 몰레나르(Bram Moolenaar, 1961–2023)가 만들었다.

nc ssuctf.kr 15555

풀이 과정

1) 리눅스 통해 서버 접속

2) :e . | 디렉토리 목록 확인 후, 각 디렉토리 탐색 -> 직접적인 플래그 발견 x 3) :!grep -rnw / -e "flag" 2>/dev/null

• 시스템 전체 검색을 통해 flag.txt 파일 발견
• /root/.viminfo 파일 안 "cat flag.txt" 기록 발견
  • 전에 cat flag.txt 명령 실행한 흔적?
  • 현재 flag가 root 디렉토리 안에 있음을 확인

4) :e /root/flag.txt 실행 -> [New] 표시 -> 해당 파일이 존재하지 않는 상태로, 새로운 파일 생성 필요

5) 파일이 진짜 사라졌는지? -> :!ls -la/root/ -> /root/ 디렉토리에 .flag.txt.swp 파일 존재 확인

• 원래 flag.txt가 있었으나 삭제 됐거나 편집 중이라는 흔적 발견

6) cat 명령어로 내용 확인 | :!cat /.flag.txt.swp -> 깔끔하지 않은 결과. -> flag.txt.swp 파일이 일반적인 텍스트 파일 x -> Vim 스왑 파일으로 추측

7) :!vim -r /.flag.txt.swp으로 강제 복구 시도

8) cat /flag.txt 실행 -> flag 발견

• 원격 리눅스 서버에 연결하는 가장 일반적인 방식
• 원격 서버(컴퓨터)에 연결할 수 있도록 해주는 암호화된 네트워크 프로토콜
• 암호화를 통해 호스트와 클라이언트가 안전하게 통신할 수 있음
• 클라이언트가 원격 서버의 터미널에 접속하여 명령어 입력하면, 호스트가 명령 실행 결과를 클라이언트에게 전달

SSH 명령어

ssh user@HOST -p PORT -i [개인 키 파일 경로]

• ssh 접속 시에는 원격 서버에 존재하는 계정으로 접속. user에 접속할 계정(사용자 이름) 작성
• HOST에는 접속하려는 원격 서버의 ip 또는 도메인 작성
• 특정 포트로 접속하고 싶은 경우 -p 옵션 이용

[접속할 때 클라이언트가 믿을만한 사용자인지 인증하는 방법]

1) 패스워드 인증

• ssh user@HOST 명령 실행 시, 패스워드 입력 후 원격 서버 접속 가능
• 다만, 패스워드를 충분히 긴 길이로 설정하지 않으면 브루트 포스 공격을 통해 패스워드를 유추할 수 있다는 위험 있음

2) 원격 서버에 공개 키 지정, 클라이언트가 사용할 개인 키 지정

• 공개 키-개인 키 쌍은 ssh-keygen 명령으로 생성 가능
• 1번 방법보다 더 안전한 방법

SSH 사용 예시

1) 패스워드로 원격 서버 접속

Host : host3.dreamhack.games
Port : 11051/tcp -> 31337/tcp

ssh with
id: bguser
pw: bqpw

접속 정보, 사용자, 패스워드가 주어진 예시 터미널을 열고 ssh bguser@host3.dreamhack.games -p 11051 명령 수행 후, 패스워드로 bqpw를 입력해 문제 서버 접속

2) 개인 키로 원격 서버 접속

Host: host3.dreamhack.games
Port: 11051/tcp -> 31337/tcp

ssh with id:bguser

같은 예시에서 패스워드 대신 개인 키 파일이 첨부된 경우 터미널을 열고 ssh bguser@host3.dreamhack.games -p 11051 -i[다운 받은 개인 키 파일 경로] 명령 수행 시 문제 서버에 접속

SSH 실습을 위한 문제입니다. 문제 서버에 SSH로 접속하세요!

플래그의 형식은 DH{...} 입니다.

ssh with
id: chall
password: dhbgssh

풀이 과정

1) 리눅스 환경에서 ssh chall@host3.dreamhack.games -p21922 입력

2) 비밀번호 입력 문구 확인 후, 패스워드 입력

3) ls로 flag 존재 확인

4) cat으로 flag 정답 찾기

• System Hacking
  • 컴퓨터 프로그램의 행위를 조작해 공격자가 원하는 행동을 실행하도록 하는 공격 전반
  • 컴퓨터에서 구동되는 모든 프로그램에 대한 해킹에 적용 가능한 말
  • 시스템 해킹의 목표는 통산적으로 공격 대상 프로그램이 구동되는 서버의 임의 유저와 같은 권한을 획득하는 것.
    • 원격 환경에 있는 공격가 타겟 서버에서 os의 명령어를 실행할 수 있는 공격을 원격코드실행이라고 말함

Reverse Engineering

• 리버스 엔지니어링(리버싱)
  • 무언가를 설계하고 제작하는 엔지니어링 과정을 정반대로 수행하는 것
  • 리버싱은 해킹이면서 동시에 분석을 하는 분야
  • 추측, 유추, 복구까지 해볼 수 있음

Web Hacking

• 웹 상에서 본래의 의도와 다른 동작을 일으키거나 데이터를 도용, 변조, 시스템을 손상시키는 등의 악의적인 행위

Cryptography

• 암호학은 정보를 보호하거나 안전하게 통신하기 위한 방법론을 다루는 학문
• 키(key)를 이용해 평문을 암호문으로 변환하거나, 암호문을 평문으로 변환하는 전반적인 과정

리눅스 명령어를 실행하는 웹 서비스가 작동하고 있습니다. 해당 웹 서비스의 코드가 첨부파일로 주어집니다.

flag.txt 파일을 찾아 출력하여 플래그를 획득하세요!

플래그 형식은 DH{...} 입니다.

문제 풀이

1) ls 명령어 입력해 결과 확인

2) cat.hint.txt 입력

-> 플래그는 dream, hack, hello 파일 아래에 있음을 확인

3) cat./dream/hack/hello/flag.txt 입력 결과

4) 놓친 부분 확인 위해, app.py 파일 확인 -> cmd에 'flag' 존재하는 경우 No!가 출력되도록 필터링 되어 있음을 확인 -> 정규 표현식 이용해 우회 -> 정규 표현식에서 * : 앞의 문자들이 0 또는 그 이상 반복됨을 의미해 이를 사용해 우회

cat ./dream/hack/hello/fl*g.txt

5) 재시도, 플래그 찾기 성공

추가 개념

1. 정규 표현식 특정한 규칙을 가진 문자열의 집합을 표현하기 위해 쓰이는 형식 언어

"Welcome! 👋"을 출력하는 html 페이지입니다.

소스 코드를 확인하여 문제를 풀고 플래그를 획득하세요.

플래그 형식은 DH{...} 입니다.

문제 풀이

1) 제시된 url을 통해 접속 후, F12를 통해 코드 확인

2) 코드 중 base64로 인코딩 된 문자열 확인

 <input type="hidden" name="64se64_encoding" value="IyEvdXNyL2Jpbi9lbnYgcHl0aG9uMwphc2M9WzY4LCA3MiwgMTIzLCA5OCwgMTAxLCA0OCwgNTIsIDU0LCA5OCwgNTUsIDUzLCA1MCwgNTAsIDk3LCA5NywgNTAsIDEwMSwgNTAsIDU2LCAxMDIsIDUwLCA1NSwgNTQsIDEwMSwgNDgsIDk5LCA1NywgNDksIDQ4LCA1MywgNTAsIDQ5LCAxMDIsIDUwLCA1MSwgOTcsIDQ4LCA1MywgNTYsIDU1LCA0OCwgNDgsIDUzLCA5NywgNTYsIDUxLCA1NSwgNTUsIDUxLCA1NSwgNDgsIDk3LCA0OSwgNDksIDEwMSwgNTMsIDEwMSwgNTIsIDEwMCwgOTksIDQ5LCA1MywgMTAyLCA5OCwgNTAsIDk3LCA5OCwgMTI1XQphcnI9WzAgZm9yIGkgaW4gcmFuZ2UoNjgpXQpmb3IgaSBpbiByYW5nZSgwLDY4KToKICAgIGFycltpXT1jaHIoYXNjW2ldKQpmbGFnPScnLmpvaW4oYXJyKQpwcmludChmbGFnKQ==">
  </form>

3) 해당 인코딩 된 부분 디코딩

4) 디코딩 된 부분 실행 -> 플래그 발견

Wargame 실습을 위한 문제입니다. "Dreamhack"을 입력하여 플래그를 획득하세요!

플래그의 형식은 DH{...} 입니다.

코드 확인

• 사용자에게서 입력받은 값이 'Dreamhack'인 경우 플래그를 출력하는 부분 확인

Ubuntu에서 nc 명령어를 통해 서버 접속 후, 플래그 발견

1. 셸(Shell)

• 셸은 유저가 리눅스 시스템을 이용할 수 있는 인터페이스
• 셸은 유저에게 입력 받고, os가 입력을 프로그램으로 처리하면 그 결과를 유저에게 출력함

2. 셸 프롬프트(Shell Prompt)

user@user-VirturalBox:~$ // 이게 쉘 프롬프트

• id 명령어 실행
  • id는 현재 유저의 유저 id와 해당 유저가 속해 있는 그룹 id를 보여주는 명령어

    user@user-VirtualBox:~$ id
    uid=1000(user) gid=1000(user) groups=1000(user),4(adm),24(cdrom),27(sudo),30(dip),46(plugdev),122(lpadmin),134(lxd),135(sambashare)
    user@user-VirtualBox:~$

3. 기초 명령어

• sudo apt update

  • apt 명령어로 설치 가능한 소프트웨어 패키지 목록 업데이트
  • 각 패키지 별로 어떤 버전 설치 가능한지도 업데이트
  • 실행 결과

    user@user-VirtualBox:~$ sudo apt update
    [sudo] password for user:
    Get:1 http://security.ubuntu.com/ubuntu jammy-security InRelease [110 kB]
    Hit:2 http://kr.archive.ubuntu.com/ubuntu jammy InRelease
    Hit:3 http://kr.archive.ubuntu.com/ubuntu jammy-updates InRelease
    Hit:4 http://kr.archive.ubuntu.com/ubuntu jammy-backports InRelease
    Fetched 110 kB in 2s (60.0 kB/s)
    Reading package lists... Done
    Building dependency tree... Done
    Reading state information... Done
    3 packages can be upgraded. Run 'apt list --upgradable' to see them.
    user@user-VirtualBox:~$

• sudo apt upgrade

  • 소프트웨어 패키지 버전 업그레이드

• id

  • 현재 유저의 유저 ID와 해당 유저가 속해있는 그룹 ID 출력
  • 자신이 해당 권한을 가지고 있는지 확인용으로 사용

• pwd

  • Print Working Directory의 줄임물
  • 현재 작업 중인 디렉토리의 경로 출력

    user@user-VirtualBox:~$ pwd
    /home/user
    user@user-VirtualBox:~$

• ls

  • List의 줄임말, 디렉토리의 내용 출력하는 명령어
  • -l 플래그를 추가한 형태인 ls-l을 실행하면 더 자세한 정보 출력

• cd

  • Change Directory의 줄ㅇ미말로 작업중인 디렉토리 변경하는 명령어
    • 절대 경로 : 루트 디렉토리 / 를 시작으로 모든 경로 적어서 표현
    • 상대 경로 : 현재 디렉토리를 기준으로 상위 디렉토리 또는 하위 디렉토리로 뻗어 나가는 경로
    • 특정 고유 경로 : ~는 현재 유저의 홈 디렉토리, -는 이전에 위치했던 디렉토리 의미

• mkdir

  • Make Directory의 줄임말, 디렉토리 생성하는 명령어

• touch

  • 비어있는 새로운 파일 만드는데 사용

• mv

  • Move의 줄임말, 파일이나 디렉토리 위치 옮길 때 사용
  • 파일이나 디렉토리 이름 변경 시에도 사용 가능

• rm

  • Remove의 줄임말, 파일이나 디렉토리 삭제 시에 사용

• cat

  • 파일 내용 출력하는 명령어
  • cat 파일경로 형식으로 사용 가능

• file

  • 파일 유형 출력하는 명령어
  • file 파일경로 형식으로 사용 가능

• echo

  • 셀에 유저가 입력한 텍스트 출력

• cp

  • copy의 줄임말, 파일이나 디렉토리 복사하는 명령어

• grep

  • 전체에서 특정 문자열 찾을 때 사용
  • grep 문자열 파일 형식으로 사용 가능

• man

  • Manual의 줄임말, 특정 명령어의 매뉴얼 확인 가능
  • 매뉴얼에는 명령어 사용법, 옵션, 예제 등의 정보가 있음

• curl

  • client URL의 줄임말
  • 서버에 데이터 보내거나 서버로부터 데이터 받는 데이터 전송 명령어
  • curl [옵션] URL 형식으로 사용 가능
  • HTTP, HTTPS, FTP 등 다양한 프로토콜 지원

/

*4. 와일드 카드 *

• 정의 : 리눅스에서 임의의 다른 문자를 나타낼 수 있는 특수 문자
• 종류
  • ? : a-z, 0-9 범위 내 임의의 1개 문자로 대체
  • • : a-z, 0-9 범위 내 임의의 0개 이상 문자로 대체
  • [] : [문자1-문자2] 혹은 [문자1, 문자2..] 형태로 범위 지정

/

5. 리다이렉션

• 정의 : 모니터에 나타내는 표준 출력 혹은 키보드로 입력하는 표준 입력을 다른 곳으로 변경하는 작업
• 종류
  • 명령어>파일 : 명령어 표준 출력을 파일로 변경. 파일이 없으면 새로 만들고, 있으면 덮어씀
  • 명령어>>파일 : 명령어 표준 출력을 파일로 변경. 파일이 없으면 새로 만들고, 있으면 이어서 씀
  • 명령어<파일 : 명령어 표준 입력을 파일로 변경, 파일로부터 표준 입력을 받아 명령어 수행

/

6. 파이프

• 정의 : 리다이렉션의 한 형태, 명령어 결과 표준 출력을 다른 명령어의 표준 입력으로 보낼 때 사용

/ /

디렉토리 구조

• 루트 디렉토리 / : 리눅스의 최상위 디렉토리, 절대 경로는 /
• /bin : 일반 유저가 사용할 수 있는 기본 명령어, 프로그램 담고 있는 디렉토리
• /boot : 시스템 부팅에 필요한 파일 담음
• /dev : 컴퓨터에 부착된 물리적인 장치들을 디바이스 드라이버를 거쳐 파일 형태로 접근 가능. 그런 장치들을 나타내는 파일들을 담음
• /etc : os나 os 위에서 동작하는 서비스의 설정 파일들을 담고 있는 디렉토리
• /home : 각 일반 유저의 홈 디렉토리를 담고 있는 디렉토리
• /lib : 시스템에 필요한 라이브러리 파일들을 담고 있는 디렉토리
• /opt : 소프트웨어 패키지를 담는 디렉토리
• /proc : 리눅스 커널 자원에 접근할 수 있는 파일과 프로세스를 나타내는 파일 담음
• /root : root 유저의 홈 디렉토리
• /sbin : /bin과 마찬가지로 기본적인 유저 명령어나 프로그램을 가짐, /sbin은 root 유저가 사용할 수 있는 명령어나 프로그램 가짐
• /tmp : 유저나 프로그램이 임시로 파일 생성해야할 때 사용할 수 있는 디렉토리
• /usr : 사용자 바이너리, 문서, 라이브러리, 헤더 파일 등을 담고 있는 디렉토리
• /var : 프로그램이나 시스템이 실시간으로 가변적인 파이릉ㄹ 사용하고 저장해야 할 때 활용하는 디렉토리

1. 웹 해킹

• Web2 환경에서 발생할 수 있는 취약점과 대응 방법에 대해 알아감

2. 리버스 엔지니어링

• 완성된 소프트웨어를 역으로 분석해나가는 방법

3. 시스템 해킹

• 프로그램에 취약점이 존재할 때 이를 익스플로잇하는 방법론

4. 암호학

• 본래 정보를 보호하기 위한 언어학적 및 수학적 방법론

Wargame Introduction

1. Wargame

• 워게임은 의도적으로 취약점이 존재하도록 설계된 모의 해킹 환경
• 하나의 시험 문제라고도 볼 수 있음
• 제작자가 설계한 취약점을 찾아내고, 이해하고, 해결책을 찾아내는 과정을 거쳐 플래그를 찾아내는 문제
• 워게임의 카테고리는 일반적으로 포너블(pwnable/system hacking), 웹(web), 리버스 엔지니어링(reversing), 암호학(crypto), 포렌식(forensics), 그리고 특정 카테고리에 포함되지 않는 miscellaneous(misc)등이 있음
• 이 외에도 네트워크(network), 브라우저(browser), 블록체인(blockchain) 등과 같이 더 세부적인 분야도 존재

2. 플래그

• 해킹 방어 대회의 일반적인 형식은 CTF(Capture The Flag)
• 이는 공격 대상인 시스템에 존재하는 파일을 flag라고 칭하며, 이 파일의 내용이 공격자가 제출해야 하는 답안
• 어떤 시스템을 성공적으로 해킹했다는 증거 제시 = 일반적으로 해커들은 계산기 실행
  • 계산기가 거의 모든 os에 기본적으로 설치된 프로그램 중 하나이기 때문
  • 해커가 계산기 실행에 성공했다는 것 = 해커가 기본적으로 어떤 프로그램이든 실행시킬 수 있음
• 혹은 셸(shell)을 실행시키는 것도 하나의 증명 방법
  • 셸 실행시키고 커맨드 입력할 수 있다면 그 시스템에서의 사용자와 같은 권한을 가지고 있는 것
• CTF에서는 가장 간단한 형태의 제출물이 될 수 있는 ‘어떤 텍스트’를 답으로 쓰기로 결정
  • 굉장히 간단한 형태로 정답을 제공할 수 있음
  • 워게임, CTF 문제에서는 암묵적으로 플래그를 찾는 것이 최종 목적이 됨

3. 라이트업

• 워게임 혹은 CTF 문제에서 플래그를 찾는 과정(문제 풀이 과정)을 정리한 것
• 문제를 풀지 못했는데 풀이를 봐도 괜찮은가?
  • 문제 풀 때 순차적으로 풀이자가 하는 체크리스트
    • 주어진 문제가 어떤 프로그램/서비스인지 이해했다.
    • 취약점(또는 이상한 부분)이 무엇인지 파악했다.
    • 찾은 취약점을 어떻게 공략/공격하면 될지 구상이 되었다.
    • 풀이에 필요한 코드나 페이로드를 작성했다.
  • 이 중 1번은 풀이 없이 수행하는 것을 권장

회고

드디어 혼공단 자바스크립트로 참여한 6주차가 끝났습니다...

안드로이드를 공부하다 이건 도저히 아니다 싶어 웹으로 전향하고, 처음 공부하는 자바스크립트여서 살짝 겁을 좀 먹었는데 다행히(?) 큰 재미를 붙여 매주 재밌게 참여했습니다.

작년에는 자바로 참여해 완주까지 달렸는데 이번 방학에도 조금 늦었지만 완주까지 할 수 있어 나름 알차다면 알찬 방학을 보낸 것 같습니다.

이번 학기에는 소프트웨어프로젝트라는 전공 과목을 수강하는데 팀플로 진행하는 프로젝트인지라 제 웹 개발 실력이 아직은 맨땅에 헤딩 수준이나 경험을 해보면서 조금 더 나아지지 않을까 하는 기대를 해봅니다.

여름에는 어떤 책으로 참여할지 고민을 좀 하며 이만 회고를 마칩니다!

• 구문 오류 : 코드가 실행조차 되지 않는 오류
• 예외 : 코드 실행 중간에 발생하는 오류
• 예외 처리 : 오류들을 처리하는 것

1. 오류의 종류

• 프로그램 실행 전에 발생하는 오류 = 구문 오류
• 프로그램 실행 중에 발생하는 오류 = 예외, 런타임 오류

2. 기본 예외 처리

• 조건문을 사용해 예외가 발생하지 않도록 만드는 것

3. 고급 예외 처리

• 예외를 조금 더 쉽게 잡을 수 있는 기능
• try catch finally 구문

  try {
    // 예외가 발생할 가능성이 있는 코드
  } catch (exception)
    // 예외가 발생했을 때 실행할 코드
  } finally {
    // 무조건 실행할 코드

8-2. 예외 처리 고급

• 예외 객체 : 예외가 발생하면 예외와 발생된 정보를 확인할 수 있게 해주는 것
• 예외를 강제로 발생시킬 때 throw 키워드 사용

1. 예외 객체

• try catch 구문 사용 시, catch 괄호 안에 입력하는 식별자가 예외 객체
• 주로 e나 exception 식별자 사용

2. 예외 강제 발생

• throw 키워드 사용

  throw 문자열 // 단순하게 예외 발생
  

throw new Error(문자열) // 조금 더 자세하게 예외 발생 ```

• 요소 : html, head, body, title, hl, div, span 등
• 문서 객체 : 자바스크립트에서는 요소를 문서 객체라고 함
• 문서 객체 모델 : 문서 객체를 조합해 만든 전체적인 형태

1. DOMContentLoaded 이벤트

해당 이벤트는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트

2. 문서 객체 가져오기

• document.body 코드 사용 시 문서의 body 요소를 읽을 수 있음

  document.head
  document.body
  document.title

document.querySelector(선택자)
document.querySelectorAll(선택자)

• querySelector() 메소드 : 요소 하나만 추출
• querySelectorAll() 메소드 : 문서 객체 여러 개 추출

3. 글자 조작하기

• 문서 객체.textContent : 입력된 문자열을 그대로 넣음
• 문서 객체.innerHTML : 입력된 문자열을 html 형식으로 넣음

4. 속성 조작하기

• 문서 객체.setAttribute(속성 이름, 값) : 특성 속성에 값 지정
• 문서 객체.getAttritubte(속성 이름) : 특정 속성 추출

5. 스타일 조작하기

• 문서 객체의 스타일 조작할 때 style 속성 사용
• style 속성은 객체
• 두 단어 이상의 속성은 캐멀 케이스로 표현

  h1.style.backgroundColor // 해당 방법을 많이 사용
  h1.style['backgroundColor']
  h1.style['background-color']

6. 문서 객체 생성하기

• document.createElement() 메소드로 문서 객체 생성

  document.createElement(문서 객체 이름)

• 문서 객체에는 appendChild()메소드가 있어, 이를 활용하면 어떤 부모 객체 아래 자식 객체 추가 가능

  부모 객체.appendChild(자식 객체)

7. 문서 객체 이동하기

• appendChild() 메소드 사용해 문서 객체 이동

  <!DOCTYPE html>
  <html lang="ko">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>외부 스타일 시트</title>
  </head>
  <body>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const divA = document.querySelector('#first')
      const divB = document.querySelector('#second')
      const h1 = document.createElement('h1')
      h1.textContent = '이동하는 h1 태그'
  
      const toFirst = () => {
        divA.appendChild(h1)
        setTimeout(toSecond, 1000)
      }
  
      const toSecond = () => {
        divB.appendChild(h1)
        setTimeout(toFirst, 10000)
      }
  
      toFirst()
    })
  </script>
  <body>
    <div id="first">
      <h1>첫 번째 div 태그 내부</h1>
    </div>
    <hr>
    <div id = "second">
      <h1>두 번째 h1 태그 내부</h1>
    </div>
  </body>
  </body>
  </html>

8. 문서 객체 제거하기

• removeChild() 메소드 사용

  부모 객체.removeChild(자식 객체)

문서 객체.parentNode.removeChild(문서 객체)

9. 이벤트 설정하기

• 모든 문서 객체는 생성, 클릭, 마우스 위에 올릴 때 이벤트 발생

• 이벤트 발생할 때 실행할 함수는 addEventListener() 메소드 사용

  문서 객체.addEventListener(이벤트 이름, 콜백 함수)

• 이벤트 발생할 때 실행할 함수를 이벤트 리스너, 이벤트 핸들러라 명칭

  <!DOCTYPE html>
  <html lang="ko">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>외부 스타일 시트</title>
  </head>
  <body>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      let counter = 0
      const h1 = document.querySelector('h1')
  
      h1.addEventListener('click', (event) => {
        counter ++
        h1.textContent = `클릭 횟수: ${counter}`
      })
    })
  </script>
  <style>
    h1 {
      user-select : none;
    }
  </style>
  <body>
    <h1> 클릭 횟수 : 0 </h1>
  </body>
  </body>
  </html>

• 이벤트 제거 시에는 removeEventListener() 메소드 사용

  문서 객체.removeEventListener(이벤트 이름, 이벤트 리스너)

7-2. 이벤트 활용

1. 이벤트 모델

• 이벤트 모델 : 이벤트를 연결하는 방법
• 표준 이벤트 모델 = addEventListenr() 메소드 사용하는 것
• 고전 이벤트 모델 : onOO으로 시작하는 속성에 함수 할당
• 인라인 이벤트 모델 : onOO으로 시작하는 속성을 html 요소에 직접 넣어 이벤트 연결하는 것

2. 키보드 이벤트

• keydown : 키 눌릴 때 실행
• keypress : 키 입력되었을 때 실행
• keyup : 키보드에서 키 떨어질 때 실행

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>외부 스타일 시트</title>
</head>
<body>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const textarea = document.querySelector('textarea')
      const h1 = document.querySelector('h1')

      textarea.addEventListener('keyup', (event) => {
        const length = textarea.value.length
        h1.textContent = `글자 수 : ${length}`
      })
    })
  </script>
  <body>
    <h1></h1>
    <textarea></textarea>
  </body>
</body>
</html>

• 키보드 키 코드 사용하기
  • code : 입력한 키
  • keyCode : 입력한 키를 나타내는 숫자
  • altKey : Alt 키를 눌렀는지
  • ctrlKey : Ctrl 키를 눌렀는지
  • shiftKey : Shift 키를 눌렀는지

3. 글자 입력 양식 이벤트

• 입력 양식 : 사용자로부터 어떠한 입력을 받을 때 사용하는 요소

  • input, textarea, button, select 태그 등

    <!DOCTYPE html>
    <html lang="ko">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>외부 스타일 시트</title>
    </head>
    <body>
    <script>
    document.addEventListener('DOMContentLoaded', () => {
      const input = document.querySelector('input')
      const button = document.querySelector('button')
      const p = document.querySelector('p')
    
      button.addEventListener('click', () => {
        const inch = Number(input.value)
    
        if (isNaN(inch)) {
          p.textContent = '숫자를 입력해주세요'
          return // 조기 리턴
        }
    
        const cm = inch * 2.54
        p.textContent = `${cm} cm`
      })
    })
    </script>
    <body>
    <input type = "text"> inch<br>
    <button>계산</button>
    <p></p>
    </body>
    </body>
    </html>

• 드롭다운 목록 활용하기 : select 태그로 구현

  <!DOCTYPE html>
  <html lang="ko">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>외부 스타일 시트</title>
  </head>
  <body>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const select = document.querySelector('select')
      const p = document.querySelector('p')
  
      select.addEventListener('chancge', (event) => {
        const options = event.currentTarget.options
        const index = event.currentTarget.options.selectedIndex
  
        p.textContent = `선택 : ${options[index].textContent}`
      })
    })
  </script>
  <body>
    <select>
      <option>떡볶이</option>
      <option>순대</option>
      <option>오뎅</option>
      <option>튀김</option>
    </select>
    <p>선택 : 떡볶이</p>
  </body>
  </body>
  </html>

• 체크 박스 활용하기 : checked 속성 사용

• 라디오 버튼 활용하기 : checked 속성 사용

4. 기본 이벤트 막기

• 컨텍스트 메뉴 : 이미지에서 우클릭 했을 때 나타나는 메뉴
• 기본 이벤트 : 어떤 이벤트 발생 시 웹 브라우저가 기본적으로 처리해주는 것
• 기본 이벤트 제거는 event 객체의 preventDefault() 메소드 사용
  • 불펌 막을 때 주로 사용

기본 과제 p.315 출력되는 고양이 이미지 캡쳐

[코드]

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>기본 과제</title>
</head>
<body>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const rects = document.querySelectorAll('.rect'); // querySelectorAll로 수정

      rects.forEach((rect, index) => {
        const width = (index + 1) * 100;
        const src = `https://placekitten.com/${width}/250`; // URL 수정 (http → https)
        rect.setAttribute('src', src);
      });
    });
  </script>

  <img class="rect">
  <img class="rect">
  <img class="rect">
  <img class="rect">
  <img class="rect">

</body>
</html>

[결과]

추가 과제 p.352의 할 일 목록 만들기

[코드]

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>할 일 목록</title>
</head>
<body>
  <h1>할 일 목록</h1>
  <input id="todo">
  <button id="add-button">추가하기</button>
  <div id="todo-list"></div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const input = document.querySelector('#todo');
      const todoList = document.querySelector('#todo-list'); // 수정됨
      const addButton = document.querySelector('#add-button');

      let keyCount = 0;

      const addTodo = () => {
        if (input.value.trim() === '') {
          alert('할 일을 입력해주세요.');
          return;
        }

        const item = document.createElement('div');
        const checkbox = document.createElement('input');
        const text = document.createElement('span');
        const button = document.createElement('button');

        const key = keyCount;
        keyCount += 1;

        item.setAttribute('data-key', key);
        item.appendChild(checkbox);
        item.appendChild(text);
        item.appendChild(button);
        todoList.appendChild(item);

        checkbox.type = 'checkbox';
        checkbox.addEventListener('change', (event) => {
          item.style.textDecoration = event.target.checked ? 'line-through' : '';
        });

        text.textContent = input.value;

        button.textContent = '제거하기';
        button.addEventListener('click', () => { // 수정됨
          removeTodo(key);
        });

        input.value = '';
      };

      const removeTodo = (key) => { // 수정됨
        const item = document.querySelector(`[data-key="${key}"]`); // 수정됨
        if (item) {
          todoList.removeChild(item); // 수정됨
        }
      };

      addButton.addEventListener('click', addTodo);
      input.addEventListener('keyup', (event) => {
        if (event.key === 'Enter') { // 최신 문법으로 수정됨
          addTodo();
        }
      });
    });
  </script>
</body>
</html>

[결과]

1. 객체

typeof([])
>> "object" // object가 객체

• 배열은 요소 접근 시 인덱스 사용
• 객체는 요소 접근 시 키 사용
  • 객체는 중괄호로 생성, 자료를 쉼표로 연결해 입력
  • 객체 뒤에 대괄호 사용하고 키 입력하면 객체 요소에 접근 가능
  • 대괄호 방법 외에 온점도 사용 가능

    <script>
    const product = {
      제품명 : '7D 건조 망고', // 키:값 형태
      유형 : '당절임',
      성분 : '망고, 설탕, 메타중아황산나트륨, 치자황색소',
      원산지 : '필리핀'
    }
    </script>

    product['제품명']
    product['유형']
    product['성분']
    product['원산지']

2. 속성과 메소드

• 요소 : 배열 내부에 있는 값
• 속성 : 객체 내부에 있는 값
• 메소드 : 객체 속성 중 함수 자료형인 속성

• 메소드 내에서 자기 자신이 가진 속성임을 표현할 때 this 키워드 사용

  <script>
  const pet = {
  name:'구름',
  eat: function(food){
  alert(this.name+ '은/는' + food + '을/를 먹습니다.')
  }
  }
  
  pet.eat('밥')
  </script>

3. 동적으로 객체 속성 추가/제거

• 객체 처음 생성 후, 속성을 제거하거나 추가하는 것 = 동적으로 속성을 추가한다, 동적으로 속성을 제거한다

• 동적으로 객체 속성 추가하기

  <script>
  const student = {}
  student.이름 = '윤인성'
  student.취미 = 악기'
  student.장래희망 = '생명공학자'
  
  console.log(JSON.stringify(student,null,2))
  </script>

• 동적으로 객체 속성 제거하기 : delete 키워드 사용

  delete 객체.속성

<script>
  const student = {}
  student.이름 = '윤인성'
  student.취미 = 악기'
  student.장래희망 = '생명공학자'

  delete student.장래희망

  console.log(JSON.stringify(student, null, 2))
</script>

4. 메소드 간단 선언 구문

<script>
  const pet = {
  name: '구름',
  eat (food) {
  alert(this.name + '은/는' + food +'을/를 먹습니다.')
  }
  }

  pet.eat('밥')
</script>

6-2.객체의 속성과 메소드 사용하기

• 자료형 : 기본 자료형(숫자, 문자열, 불), 객체 자료형(함수, 배열 등)

1. 객체 자료형

• 속성과 메소드를 가질 수 있는 모든 것은 객체

2. 기본 자료형

• 실체가 있는 것 중 객체가 아닌 것

3. 기본 자료형을 객체로 선언하기

const 객체 = new 객체 자료형 이름()

4. 객체 자료형의 일시적 승급

• 자바스크립트는 사용의 편리성을 위해 기본 자료형의 속성과 메소드 호출할 때 일시적으로 기본 자료형을 객체로 승급시킴
• 단, 승급은 일시적으로 발생

5. 프로토타입으로 메소드 추가하기

• prototype 객체에 속성과 메소드 추가하면 모든 객체에서 해당 속성과 메소드 사용 가능

객체 자료형 이름.prototype.메소드 이름 = function() {

}

<script>
  Number.prototype.power=function(n=2) {
  return this.valueOf() **n
  }
  const a = 12
  console.log('a.power():', a.power())
  console.log('a.power(3):', a.power(3))
  console.log('a.power(4):', a.power(4))
</script>

6. Number 객체

• 숫자 n번째 자릿수까지 출력하기 :toFixed()
• NaN과 Infinity 확인 : isNaN(), isFinite()

7. String 객체

• 문자열 양쪽 끝의 공백 없애기 : trim()
• 문자열을 특정 기호로 자르기 : split()

8.JSON 객체

• 자바스크립트의 객체처럼 자료를 표현하는 방식
• 값 표현 시 문자열, 숫자, 불 자료형만 사용 가능(함수 등 사용 불가)
• 문자열은 반드시 큰따옴표로 만들어야 함
• 키에도 반드시 따옴표 붙여야 함
• 자바스크립트 객체를 JSON 문자열로 변환할 때 JSON.stringify() 메소드 사용

9. Math 객체

• 수학과 같은 기본 연산 할 때 사용
• 랜덤 숫자 생성 시 Math.random() 메소드 사용(0 이상 1 미만의 범위)

6-3. 객체와 배열 고급

1. 속성 존재 여부 확인

• 객체에 없는 속성 접근 시, undefined 자료형 나옴

  <script>
  const object= {
  name: '혼자 공부하는 파이썬',
  price: 18000,
  publisher : '한빛미디어'
  }
  
  object.name = object.name !== undefined ? object.name : '제목 미정'
  object.author = object.author !== undefined ? object.author : '저자 미상'
  
  console.log(JSON.stringify(object,null,2))
  </script>

2. 배열 기반의 다중 할당

• 한 번에 여러 개의 변수에 값을 할당하는 다중 할당 기능 추가됨

[식별자, 식별자, 식별자, ...] = 배열

3. 객체 기반의 다중 할당

• 객체 내부에 있는 속성 꺼내 변수로 할당

  {속성 이름, 속성 이름} = 객체
  {식별자 = 속성 이름, 식별자 = 속성 이름} = 객체

4. 배열 전개 연산자

• 얕은 복사(참조 복사) : 배열 복사했을 때 다른 이름 붙을 뿐인 것
• 깊은 복사 : 복사한 두 배열이 완전히 독립적으로 작동

5. 객체 전개 연산자

{...객체}

{...객체, 자료, 자료, 자료} // 전개 연산자 사용한 객체 요소 추가

기본 과제

[문제] 객체, 속성, 메소드가 무엇인지 설명하기

[답]

• 객체 : 실제로 존재하는 것

  typeof([])
  >> "object" // object가 객체

• 속성 : 객체 내부에 있는 값, 이름과 값으로 구성
• 메소드 : 속성 중에 함수 자료형인 것

9.4.1 if, else, else if문

1. if문

   if(조건식){
   // 조건식이 참이면 블록문 실행
   }

2. else문

   if(조건식) {
   //조건식이 참이면 블록문 실행
   }else{
   //조건이 거짓이면 블록문 실행
   }

3. else if문

   if(조건식1) {
   //조건식1이 참이면 블록문 실행
   } else if(조건식2){
   //조건식2가 참이면 블록문 실행
   }else{
   //조건식이 모두 거짓이면 블록문 실행
   }

4. 중첩하기

• 분기 처리 : 어떤 조건식 만족할 때 어떤 블록문 실행할지 결정하는 것

9.4.2 switch문

switch(key){
 case value1:
  // key가 value1일 때 실행할 블록문
  break;
 case value2:
  // key가 value2일 때 실행할 블록문
  break;
 default:
  // 아무것도 일치하지 않을 때 실행할 블록문
  break;
}

9.5 반복문 다루기

9.5.1 while문

while(조건식){
  // 조건식이 참이면 실행
}

9.5.2 무한 반복문

• 반복문의 조건이 계속 참으로 평가되어 반복문이 끝나지 않고 무한히 실행됨

9.5.3 do while문

do{
  // 블록문
}while(조건식);

9.5.4 for문

for(초깃값; 조건식; 증감식){
  //블록문
}

9.5.5 for문과 배열

• for문은 횟수를 지정하는 반복문이라는 특징으로 배열과 같은 자료형을 반복 횟수 용도로 사용할 수 있음

9.5.6 for...in

for(가변수 in 배열/객체 리터럴){
  //블록문
}

9.5.7 break문

• 어떤 반복문이라도 break문 만나면 반복문 종료됨

9.5.8 continue문

• continue문은 반복문을 건너뛰고 실행하라는 명령
• 반복문의 블록문에서 continue 문을 만나면 해당 반복 실행만 건너뛰게 됨

• 함수 호출 : 함수를 사용하는 것
• 배개 변수 : 괄호 내부에 자료를 넣는 것
• 리턴값 : 함수 호출해서 최종적으로 나오는 결과

1. 익명 함수

• 함수 : 코드의 집합을 나타내는 자료형

  function() {}

• 익명 함수 : 이름이 붙어있지 않은 함수

2. 선언적 함수

function 함수() {}

let 함수 = function() {}; // 이 코드와 같은 기능 수행

3. 매개변수와 리턴값

• 매개변수 : 함수 호출할 때 괄호 안에 적는 것
  • prmopt() 함수 사용 시 매개변수로 message 넣으면 최종 결과 문자열로 나옴
• 리턴값 : 함수의 최종 결과

function 함수(매개변수, 매개변수, 매개변수) {
  문장
  문장
  return 리턴값
}

• 숫자를 계산해 출력할 때 기본 형태

  function 함수(매개변수) {
  let output = 초깃값
  처리한다
  return output
  }

• 가변 매개변수 함수 : 호출 시 매개변수 개수가 고정적이지 않은 함수

• 나머지 매개변수

  function 함수 이름(...나머지 매개변수) {}

• 4. 기본 매개변수*

• 기본 매개변수 : 매개변수에 기본값 지정하는 형태

  함수 이름(매개변수, 매개변수=기본값, 매개변수=기본값)

/ /

5-2. 함수 고급

1. 콜백 함수

• 콜백 함수 : 매개변수로 전달하는 함수
  • 콜백 함수를 활용하는 함수 : forEach()

    function (value, index, array) {}

• 콜백 함수를 활용하는 함수 : map() 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열 만듦
• 콜백 함수를 활용하는 함수 : filter() 콜백 함수에서 리턴하는 값이 true인 것만 모아 새로운 배열 만듦

2. 화살표 함수

• 단순한 형태의 콜백 함수 쉽게 입력하고자 하는 목적
• function 키워드 대신, =>(화살표) 사용

  (매개변수) => {}
  

(매개변수) => 리턴값

- 메소드 체이닝 : 어떤 메소드가 리턴하는 값을 기반으로 함수를 연달아 사용하는 것

**3. 타이머 함수**
- setTimeout(함수, 시간) : 특정 시간 후에 함수 한 번 호출
- setInterval(함수, 시간) : 특정 시간마다 함수 호출
- clearTimeout(타이머_ID) : setTimeout()의 타이머 제거
- clearInterval(타이머_ID) : setInterval()의 타이머 제거
  - 타이머_ID = set 함수 호출 시 리턴값으로 나오는 숫자
  /


>기본 과제

[문제]
p. 202 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증하기

[코드]
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function isLeapYear(year) {
      return (year%4==0) && (year%100!=0) || (year%400===0)
    }
    console.log(`2022년은 윤년일까? === ${isLeapYear(2022)}`)
  </script>
</body>
</html>

[결과]

9.1.1 변수

• 키워드 : 역할이나 기능이 정해진 특별한 단어
  • var, let, typeof 등
• 식별자 : 변수, 함수 등에 부여되는 이름
• 연산자 : 연산 작업에 사용
• 표현식 : 값을 반환하는 식 또는 코드
• 값 : 더 이상 평가할 수 없는 데이터
• 세미콜론 : 하나의 문이 끝났음을 의미
• 선언 : 변수의 식별자를 지정하는 행위
• 할당 : = 기호로 우변에 있는 값을 변수 공간에 대입하는 것
• 초기화 : 선언과 할당을 한 번에

9.1.2 새로운 변수 선언 키워드 let

• 변수명 중복 불가
• 호이스팅 불가
• 스코프의 범위 다름

9.1.3 상수

• const 키워드 사용
• 재할당이 안 되어 선언 먼저하고 할당 나중에 하는 것도 안 됨

9.2 자료형

9.2.1 문자열

• 큰따옴표나 작음따옴표로 둘러싸인 값의 형태
• 템플릿 문자열 : 백틱으로 문자열 정의하는 방법
  • 엔터 눌렀을 때 줄 바꿈 적용됨
  • ${} 문법 사용해 문자열에 변수, 식 넣을 수 있음

9.2.2 숫자형

• 자바스크립트는 정수와 실수 구분하지 않고 하나의 숫자 자료형 취급
  • 10과 0.1은 같은 숫자형

9.2.3 논리형

• true, false 의미

9.2.4 undefined

• 변수와 상수 공간에 임시로 데이터 할당할 때 할당되는 값

9.2.5 null

• 변수나 상수 선언하고 의도적으로 선언한 공간 비워둘 때 할당

9.2.6 객체

• 자바스크립트의 핵심적인 자료형

• 객체 자료형에서 파생되는 자료형 > 배열, 객체 리터럴, 함수

• 배열

  • 복수의 데이터 정의할 수 있는 자료형
  • 요소 : 배열로 정의한 데이터
  • 인덱스 : 0부터 시작하는, 위치를 가리키는 숫자

• 객체 리터럴

  • 객체 정의하는 방법
  • 객체 정의 시 중괄호 사용, 키와 값의 한 쌍 구성인 속성 들어감

9.3 연산자

9.3.1 산술 연산자

• 이항 산술 연산자
• 단항 산술 연산자
  • 전치 연산
  • 후치 연산
• 단항 부정 연산자 : 부호 반대로

9.3.2 대입 연산자와 복합 대입 연산자

• 대입 연산자 : =
• 복합 대입 연산자 : +=, -= /=, =, %/, */

9.3.3 비교 연산자

• == : 값 동일
• === : 값과 자료형 동일
• !=, !==, <, <=, >, >=

9.3.4 논리 연산자

• x&&y : x 참이면 y 반환, 거짓이면 x 반환
• x||y : x 참이면 x 반환, 거짓이면 y 반환
• !x : x 참이면 false 반환, 거짓이면 true 반환

9.3.5 삼항 연산자 x?y:z : x 참이면 y 반환, 거짓이면 z 반환

9.3.6 연사자 우선순위

• 1 : 그룹 연산자, 대괄호 연산자, 마침표 연산자
• 2 : 증감 연산자, 단항 부정, not delete new typeof 연산자
• 3 : 나눗셈, 곱셈, 나머지 연산자
• 4 : 덧셈, 뺄셈

9.3.7 형 변환

• 데이터의 자료형이 다른 자료형으로 바뀌는 것
• 암시적 형 변환
• 명시적 형 변환 >> String() 메서드 > 문자열을 숫자로

1. 배열 만들기

• 배열 : 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형
  • 대괄호 사용해 생성, 내부 값은 쉼표로 구분해 입력
  • 요소 : 배열 내부에 들어 있는 값 [요소, 요소, 요소, ... ,요소]

2. 배열 요소에 접근하기

• 각 요소에 접근하려면 배열 바로 뒤에 대괄호 [...] 입력하고 그 안에 숫자 입력
• 인덱스 : 요소의 순서(자바스크립트는 가장 앞에 있는 요소가 0번째)

3. 배열 요소 개수 확인하기

• length 속성 사용 >> 배열.length

4. 배열 뒷부분에 요소 추가하기

• push() 메소드를 사용해 배열 뒷부분에 요소 추가하기
  • 배열.push(요소)
• 인덱스 사용해 배열 뒷부분에 요소 추가하기
  • 3개 요소를 가진 배열에 10번째 인덱스에 요소 강제 추가하기
  • 4~9번째 인덱스는 empty 상태

5. 배열 요소 제거하기

• 인덱스 기반으로 제거하는 경우
  • splice() 메소드 사용 >> 접합
  • 배열.splice(인덱스, 제거할 요소의 개수)
• 값을 기반으로 제거하는 경우
  • indexOf() 메소드 사용 >> 특정 값 위치, splice()로 제거
  • const 인덱스 = 배열.indexOf(요소) 배열.splice(인덱스, 1)
  • indexOf()는 배열 내부에 요소가 있을 경우 인덱스 리턴 배열 내부에 요소 없을 때는 -1 리턴

6. 배열의 특정 위치에 요소 추가하기

• splice() 메소드 사용
• 배열.splice(인덱스, 0, 요소)

/

4-2. 반복문

1. for in 반복문

• 배열 요소를 하나하나 꺼내 특정 문장 실행할 때 사용

  for (const 반복 변수 in 배열 또는 객체) {
        문장
  }

2. for of 반복문

• 반복 변수에 인덱스 들어감
• 요소의 값 반복 시에 안정적 사용 가능

  for (const 반복 변수 of 배열 또는 객체) {
    문장
  }

3. for 반복문

• 특정 횟수만큼 반복하고 싶을 때 사용

  for (let i =0; i<반복횟수; i++) {
     문장
  }

4. while 반복문

• 불 표현식이 true면 문장 계속 실행

  while(불 표현식) {
  문장
  }

5. break 키워드

• 조건문이나 반복문 벗어날 때 사용하는 키워드

  while(true) {
  

} break

6. continue 키워드
- 반복문 안의 반복 작업 멈추고 반복문 처음으로 돌아가 다음 반복 작업 진행

7. 중첩 반복문
- 1차원 배열 : 배열이 한 겹으로 감싸진 배열 [1,2,3]
- 2차원 배열 : 두 겹으로 감싸진 배열 [[1,2,3]]




/
### 3주차 과제
> 기본 과제

Q. 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기
A. 비파괴적 처리는 처리 후, 원본 내용이 변경되지 않고 파괴적 처리는 처리 후 원본 내용이 변경된다. 다만, 파괴적 처리는 메모리를 절약할 수 있으나 원본이 사라질 위험성이 크다. 비파괴적 처리는 메모리를 크게 차지하나 자료 보호를 목적으로 사용한다.

• 조건 분기 : 코드가 실행되는 흐름을 변경하는 것
• if 조건문 : 조건에 따라 코드를 실행하거나 실행하지 않을 때 사용
  • 조건 = 불 자료형 (비교 연산자, 논리 연산자 활용)

1. if 조건문

• 불 표현식 값이 true면 중괄호 안의 문장 실행, false면 무시

  if(불 값이 나오는 표현식) {
    불 값이 참일 때 실행할 문장
  }

  /

2. if-else 조건문

• else 구문
  • 서로 반대대는 상황을 표현하는 구문
  • if 조건문 바로 뒤에 붙여서 사용

if(불 값이 나오는 표현식) {
    불 값이 참일 때 실행할 문장
} else {
    불 값이 거짓일 때 실행할 문장
}

/

3. 중첩 조건문

• 조건문 안에 조건문을 중첩해 사용하는 것

if (불 값이 나오는 표현식 1) {
    if (불 값이 나오는 표현식 2) {
        표현식 2가 참일 때 실행할 문장
    } else {
        표현식 2가 거짓일 때 실행할 문장
    }
} else {
    if (불 값이 나오는 표현식 3) {
        표현식 3이 참일 때 실행할 문장
    } else {
        표현식 3이 거짓일 때 실행할 문장
    }
}

/ 4. if else if 조건문

• 중첩 조건문에서 중괄호를 생략한 형태

  if(불 표현식) {
    문장
  } else if (불 표현식) {
    문장
  } else if (불 표현식) {
    문장
  } else {
    문장
  }

/ / /

3-2. switch 조건문과 짧은 조건문

1. switch 조건문

   switch(자료) {
    case 조건 A:
        break
    case 조건 B:
        break
    default:
        break
   }

• break : switch 조건문이나 반복문을 빠져나가기 위해 사용하는 키워드

2. 조건부 연산자

   불 표현식 ? 참일 때의 결과 : 거짓일 때의 결과

3. 짧은 조건문

• 논리 연산자의 특성을 조건문으로 사용

3-1. 논리합 연산자를 사용한 짧은 조건문

true|| 000

불 표현식 || 불 표현식이 거짓일 때 실행할 문장

• 자바스크립트는 참이 확실할 때 추가 연산 진행하지 않음
• 논리합 연산자의 좌변이 참이면 우변 실행하지 않음

3-2. 논리곱 연산자를 사용한 짧은 조건문

• 논리곱 연산자는 양변이 모두 참일 때만 참이라 표현식은 항상 거짓
• 좌변이 거짓이면 우변 실행하지 않음

  false && 000

  결과가 거짓인 불 표현식 && 불 표현식이 참일 때 실행할 문장

4. 예제문제 풀이

• '문자열A'.split('문자열B') 메소드는 문자열 A를 문자열B로 잘라 배열을 만들어내는 메소드

2주차 과제

기본 과제

p.139 Q3.문제

if (x>10) {
  if(x<20) {
           console.log('조건에 맞습니다.')
  }
}

if(x>10 && x<20) {
                 console.log('조건에 맞습니다.')
}

정답

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const x = 15;
    if(x>10 && x<20) {
                 console.log('조건에 맞습니다.')
    } else {
      console.log('조건에 맞지 않습니다.')
    }
  </script>
</body>
</html>

결과

추가 숙제

p.152의 <태어난 연도를 입력받아 띠 출력하기> 예제 실행

코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>외부 스타일 시트</title>
</head>
<body>
  <script>
    const rawInput = prompt('태어난 해를 입력해주세요', '');
    const year = Number(rawInput); // 'Mumber' -> 'Number'로 수정
    const e = year % 12;

    let result;
    if (e === 0) { result = '원숭이'; }
    else if (e === 1) { result = '닭'; }
    else if (e === 2) { result = '개'; }
    else if (e === 3) { result = '돼지'; }
    else if (e === 4) { result = '쥐'; }
    else if (e === 5) { result = '소'; }
    else if (e === 6) { result = '호랑이'; }
    else if (e === 7) { result = '토끼'; }
    else if (e === 8) { result = '용'; }
    else if (e === 9) { result = '뱀'; }
    else if (e === 10) { result = '말'; }
    else if (e === 11) { result = '양'; }

    alert(`${year}년에 태어났다면 ${result} 띠입니다.`);
  </script>
</body>
</html>

결과