이번 학기에 듣는 수업 중 서버 운영 실습이란 수업에서 우분투 리눅스를 배우며 학교 컴퓨터에는 우분투 리눅스를 설치해봤는데 개인 노트북에서는 아직 설치 안 해봐서 직접 해보던 참이었습니다.

VMware 설치하고 가상 머신 만들고 CD에 iso 파일 넣어주고... 수업에서 했던 그대로, 책에서 시키는 그대로 다 했으나

절 맞이한 건 오류였습니다.

해결하기 급급해서 에러 창 캡쳐도 안 해놨네요... 대신 아래에 에러 메세지 전문을 첨부합니다.

VMware Player unrecoverable error: (vcpu-1)

Exception 0xc0000005 (access violation) has occurred.

A log file is available in "C:\2024800014_UbuntuLinux\vmware.log".  

You can request support.  

To collect data to submit to VMware technical support, run "vm-support".

We will respond on the basis of your support entitlement.

살다살다이런거처음봄

뭐 대충 뭐가 제외가 되고 어쩌고 저쩌고...

아무튼 오류가 났으니 뭘 해야하겠는가.

구글링을 해야겠죠?

그래서 같은 오류가 난 사람을 찾았습니다.

댓글까지 살펴보니 비활성화해야 하는 Windows Defender 설정, 특히 코어 격리 설정(메모리 무결성을 비활성화해야 함)으로 인해 발생한 것 같습니다. 라는 말이 있었습니다.

그래서 메모리 무결성을 비활성화 했습니다. 참고로 저는 Window 11 사용합니당.

아래 검색창에 Windows 보안 검색해서 들어가줍니다.

들어가면 이런 화면이 나옵니다. 여기에서 장치 보안으로 가줍니다.

코어 격리 밑에 코어 격리 세부 정보가 보이시나요? 클릭해주세요.

들어와서 여기 이 메모리 무결성을 꺼주면 됩니다. 저는 이미 끈 상태입니다.

그렇게 저는 오류를 해결했고 지금 우분투를 설치중입니다. 참 별거 없죠?

하지만 전에 했을 때는 됐는데! 같은 생각과 구글링 했는데 죄다 영어만 나오면 사실 당장 많이들 쓰는 스택 오버플로우만 해도 영어 천진데 그래도 영어 싫어서 괜히 한국인 없나 벨로그나 티스토리 글 찾아보는 사람 마음... 괜히 복잡해보이고 심란해지는 게 사람 속인가 봅니다...

그러니 제가 여러분의 한국인이 되어 드릴게요^^ 장난.

어쨌든 이렇게 오류 기록을 마칩니다.

운영체제(Operating System; OS)

: 일반 컴퓨터, 노트북, 스마트폰의 전원을 켜면 가장 먼저 만나는 소프트웨어

PC: Window, Mac OS, Unix, Linux... 모바일: iOS, Android...

임베디드 운영체제

: CPU의 성능이 낮고, 메모리 크기도 작은 시스템에 내장하도록 만든 운영체제

운영체제란?

: 컴퓨터 전체를 관리/운영하는 소프트웨어 위에 존재하는 최고 소프트웨어

• 컴퓨터를 관리하기 위한 기본 규칙/절차를 규정하여 컴퓨터 내의 모든 하드웨어와 응용 프로그램을 관리한다.
• 컴퓨터 자원 보호를 위해 응용 프로그램과 사용자에게서 모든 컴퓨터 자원을 숨길 수 있다. → 직접 접근이 불가능해진다. (+ 대신 다양한 인터페이스(interface) 제공)
• 하드웨어의 도움 없이 작동하기가 어려워, 소프트웨어&하드웨어를 모두 갖춘 형태로 운영한다. (펌웨어(firmware))
  

운영체제의 정의

• 인터페이스를 이용해 커널에 명령을 내리면 인터페이스가 결과를 전달한다.
• 컴퓨터 인터페이스 중 일부는 사용자 인터페이스이다. (UI; User Interface) ex) 디렉토리 만들기, 파일 복사 등등... 운영체제가 제공하는 UI이다.
  

운영체제의 역할

자원 관리

: 컴퓨터 시스템 자원을 응용 프로그램에 나눠주어 사용자가 원활히 작업하게 한다.

자원 보호

: 비정상적 작업으로부터 컴퓨터 자원을 보호한다.

하드웨어 인터페이스 제공

: 사용자가 복잡한 과정 없이 다양한 장치를 사용할 수 있도록 하드웨어 인터페이스를 제공한다.

사용자 인터페이스 제공

: 사용자가 운영 체제를 편리하게 사용하도록 지원한다. ex) 윈도우의 GUI(Graphin User Interface)

운영체제의 목표

운영체제의 발전

에니악

: 최초의 컴퓨터

• 진공관 소자가 켜지면 1, 꺼지면 0으로 판단한다. → 이는 컴퓨터가 2진법을 사용하는 계기가 된다.

초기의 컴퓨터

• 키보드, 마우스, 모니터 같은 주변 장치가 없다.
• 전선을 이용해 논리회로를 구성하는 하드 와이어링(hard wiring) 방식이다.
• 운영체제가 존재하지 않는다.

일괄 작업 시스템

: 모든 작업을 한꺼번에 처리하는 시스템

• 필요한 프로그램과 데이터를 동시에 입력해야 가능하다.
• 일괄 작업/처리 시스템(batch job/processing system)

대화형 시스템

: 컴퓨터와 사용자의 대화를 통해 작업이 이루어지는 시스템

• 키보드와 모니터가 등장, 작업 중간에 입력이 가능해졌다.
• 중간 결과값을 확인할 수 있다.

시분할 시스템(Time Sharing System)

: 여러 작업을 조금씩 처리하여 작업이 동시에 이루어지는 것처럼 보이게 하는 것

• 잘게 나뉜 시간 한 조각을 타임 슬라이스(time slice) 혹은 타임 퀀텀(time quantum)이라고 한다.
• 오늘날 컴퓨터는 대부분 시분할 시스템이다.

시분할 시스템의 단점

• 여러 작업을 동시에 처리하기 위해 추가 작업이 필요하다.
• 많은 양의 작업이 공존할 경우, 중요한 작업이 일정 시간 안에 끝나는 것을 보장하지 못한다.

멀티 프로그래밍

: 하나의 CPU로 여러 작업을 동시에 실행하는 기술

실시간 시스템

: 특정 시스템에서 일정 시간 안에 작업이 처리되도록 보장하는 것

분산 시스템(Distributed System)

: 개인용 컴퓨터와 인터넷이 보급되어 값이 싸고, 크기가 작은 컴퓨터를 하나로 묶어 대형 컴퓨터의 능력에 버금가게 만든 것

• 네트워크 상에 분산되어 있는 여러 컴퓨터로 작업을 처리, 그 결과를 상호 교환하도록 구성되어 있다.

클라이언트/서버 시스템(Client/Server)

: 작업을 요청하는 클라이언트와 요청 받은 작업을 처리하는 서버의 이중 구조

• 웹 시스템이 보급된 이후에 알려졌다.
• 모든 요청이 서버로 집중 돼, 서버 과부화가 생긴다는 문제점이 존재한다. → 해결 방법으로는 많은 서버, 큰 용량의 네트워크가 있다.

P2P 시스템

: 클라이언트/서버 구조의 단점인 서버 과부화를 극복하기 위해 만든 시스템

• 서버를 거치지 않고 사용자들을 직접 연결한다.(사용자-사용자)
• 냅스터(mp3 공유 시스템)에서 시작되어, 현재는 메신저/토렌트 시스템에서 사용되고 있다. ex) 카카오톡 : 사용자가 서버에서 인증을 마치면 상대방과 P2P로 직접 연결한다.

서버가 없는 완전한 P2P 시스템, 블록체인

: P2P 서버 전체에 거래 장부를 분산해, 전체 시스템의 50% 이상이 동의시 거래 장부 변경이 가능하다.

클라우드 컴퓨팅

: 하드웨어와 소프트웨어를 클라우드라고 불리는 중앙 시스템에 숨기고 사용자는 필요한 서비스만 그때그때 이용하는 방식의 컴퓨팅 환경

• 기존 컴퓨터에서만 이루어지던 여러 서비스를 확장된 형태로 발전시킨 것이다.
• 클라우드 환경으로 옮겨오면서 더 이상 저장장치에 데이터를 저장해서 들고 다닐 필요가 없어졌다.

사물 인터넷(IoT; Internet of Things)

: 사물이 인터넷에 연결된 시스템

• 다양한 사물이 센서와 통신 기능을 내장, 스스로 통신하여 지능적 서비스를 제공하는 기술이다.
  

운영체제 주요 기능

: 컴퓨터가 인식할 수 있는 문자 모음을 말한다. 인코딩하여 0과 1로 표현이 가능하다.

인코딩: 사람의 언어를 컴퓨터가 이해할 수 있게끔 변환 디코딩: 컴퓨터의 언어를 사람이 이해할 수 있게끔 변환...

아스키 코드

: ASCII(American Standard Code For Information Interchange), 미국 정보 교환 표준 부호를 말한다.

EUC-KR

: 한글을 2바이트 크기로 인코딩 해 만들어진 한글 완성형 인코딩이다.

유니코드

: 여러 나라의 문자들을 표현할 수 있는 통일된 문자 집합

UTF-8, UTF-16, UTF-32...

문자 집합의 등장 흐름

1. 기계어로 문자 인식이 되지 않음
2. 이미 약속된 문자표를 정함
3. 대표적 문자표, 아스키 코드를 사용
4. 영어권이 아닌 컴퓨터 사용자가 등장하게 됨
5. 영어 아닌 문자는 인식이 되지 않는 문제 발생
6. 한글을 위해 EUC-KR 등장
7. 한글 뿐 아니라 여러 나라별 문자 호환성 문제 발생
8. 토일된 방식의 유니코드 등장
9. 영어는 1 바이트, 한글을 2 바이트로 지정
10. 문자 앞에 바이트 정보 표를 넣어 저장하게 됨, 이를 인코딩이라 함
    

기계어 단위

• 기계어 : 말 그대로 컴퓨터가 쓰는 언어
• 저급언어 : 기계어와 비슷한 컴언어(ex. 어셈블리어...)
• 고급언어 : 사람의 언어와 비슷한 컴언어(ex. C언어, JAVA, PYTHON...)
• 사람의 언어 : 말 그대로 사람이 쓰는 언어
  

진법

: 0부터 n개의 숫자를 사용해 수를 표현하는 방법. 0~(n-1) 만큼 표현이 가능하다.

2진수, 8진수, 10진수, 16진수 등 다양하게 존재한다.

10진수

: 0부터 9까지 숫자를 사용해 수를 표현하는 방법. 사람이 사용한다. 왜? 손가락은 열 개니까...

2진수

: 0부터 1까지 숫자를 사용해 수를 표현하는 방법. 컴퓨터가 사용한다. 왜? 컴퓨터는 꺼짐과 켜짐만으로 대화하니까...

10진수 → 2진수

이미지로 대체합니다...

2의 보수

: 어떤 수를 커다란 2의 제곱수에서 빼서 얻은 이진수이다.

• 모든 0과 1을 뒤집고 1을 더하면 보수를 구할 수 있다.
  

명령어

: 특정 작업을 수행하기 위한 컴퓨터 프로그램의 명령 여기서 변환할 때 쓰는 문장 또한 명령어이다.

변환 방식

컴파일 언어의 예씨로는 C언어, 인터프리터 언어의 예시로는 파이썬이 있다. 컴파일 언어는 파일을 통째로 변환, 인터프리터 언어는 한 줄씩 변환한다는 차이가 있겠다.

어셈블리어를 알아야 할까?

: 하드웨어와 맞닿아 있는 프로그램 개발에 사용되기에 알아두면 좋긴 하다.

• 임베디드 개발
  • 게임 개발
  • 정보 보안 분야...
    

연산코드와 오퍼랜드

연산코드(opcode)

: 명령어가 수행할 연산을 의미한다. 아래와 같이 이루어져있다.

• 데이터 전송
• 산술/논리 연산
• 제어 흐름 변경
• 입출력 제어
  

오퍼랜드(주소필드)

: 연산에 사용할 데이터 또는 연산에 사용할 데이터가 저장된 위치를 의미한다. 아래와 같이 이루어져있다.

• 즉시 주소 지정방식
• 직접 주소 지정방식
• 간접 주소 지정방식
• 레지스터 주소 지정방식
• 레지스터 간접 주소 지정방식
• 묵시적 주소지정 방식, 스택 주소 지정방식
• 변위 주소 지정방식 - 상대 주소 지정방식
• 변위 주소 지정방식 - 베이스 레지스터 주소 지정방식
  

자료 구조

스택(STACK)

: 최근에 저장한 데이터를 먼저 사용하는 구조, LIFO(Last In First Out) 구조라고 부른다.

사용의 예시로는

• 웹 브라우저 뒤로 가기 : 가장 나중에 열린 페이지부터 뒤로 가기를 실행한다.
• 문서 작업에서 Ctrl+Z : 가장 나중에 수정한 내역부터 되돌린다.
• 역순 문자열 만들기 : 맨 끝의 문자열부터 차례대로 만들어진다.
• 후위 표기법 계산
• 재귀적 알고리즘

등등이 있다.

큐(QUEUE)

: 먼저 저장한 데이터를 먼저 사용하는 구조, FIFO(First In First Out) 구조라고 부른다.

• 선형 큐(Linear Queue), 환형 큐(Circular Queue)로 이루어져있다.

사용의 예시로는

• 은행창구 번호표 대기 : 빠른 번호표를 가진 사람이 먼저 업무를 본다.
• 프린터 출력 : 가장 먼저 대기열에 오른 프린트가 먼저 출력된다.
• 너비 우선 탐색(BFS) 알고리즘

등등이 있다.

참고한 글

컴퓨터의 4가지 핵심 부품

• 중앙처리장치(CPU)
• 기억장치
  • RAM(휘발성)
  • ROM(비휘발성)
• 보조기억장치
• 입출력장치(ex. 모니터, 마우스, 키보드...)

System Fan, Floppy, Heat Sink, Hard Drive, Opital Drive, Ram Modules, Mother Board(Main Board), Process(CPU), Power Supply...

메인 보드(Main Board)

마더 보드(Mother Board)라고도 불린다.

CPU(Central Processing Unit)

: 메모리에 저장된 값을 읽고 해석하는 장치

ALU

산술논리연산장치, 즉 계산하는 장치. 컴퓨터 내부에서 수행되는 대부분의 계산을 도맡아 수행한다.

레지스터

CPU 내부의 작은 임시 저장 장치. 프로그램을 실행하는 데 필요한 값들을 임시로 저장한다.

제어장치

제어 신호를 발생시키고 명령어를 해석하는 장치.

CPU의 실행 원리

나름대로 그림으로 정리해보았다...

1. 제어장치에서 메모리의 1번지에 저장된 명령어를 읽어 들이기 위하여 메모리에 '메모리 읽기' 제어 신호를 보낸다.

2. 메모리에서 1번지에 저장된 명령어를 CPU에 건네주면, 이 명령어가 레지스터에 저장된다. 읽어 들인 명령어를 제어장치에서 해석 후, 메모리의 3번지와 4번지의 데이터의 필요를 판단, 읽어들이기 위해 '메모리 읽기' 제어 신호를 보낸다.

3. 메모리에서 3번지와 4번지에 저장된 데이터를 CPU에 건네주면 이들을 서로 다른 레지스터에 저장된다. ALU는 이렇게 읽어 들인 데이터로 연산을 수행 후, 결괏값은 레지스터에 저장이 된다.

4. 메모리의 1번지 명령어를 실행했으니, 2번지에 저장된 다음 명령어를 읽어 들이기 위해 다시 '메모리 읽기' 제어 신호를 보낸다.

5. 메모리에서 2번지에 저장된 명령어를 CPU에 건네주면, 이 명령어가 레지스터에 저장된다. 제어장치는 명령어를 해석 후, 메모리에 계산 결과를 저장해야 한다 판단, '메모리 쓰기' 제어 신호와 함께 계산 결과를 보낸다. 메모리가 계산 결과를 저장하면 두 번째 명령어 실행 또한 끝이 난다.

메모리

: 현재 실행되는 프로그램의 명령어와 데이터를 저장하는 부품

• 프로그램 실행을 위해선 반드시 메몰에 저장되어야 한다.
• 메모리에 저장된 값의 위치는 주소로 알 수 있다.

보조기억장치

: 메모리보다 크기가 크고 전원이 꺼져도 저장된 내용을 잃지 않는 메모리 보조 저장 장치

하드 디스크, SSD, USB 메모리, DVD, CD-ROM...

• 메모리는 현재 실행되는 프로그램을, 보조기억장치는 보관할 프로그램을 저장한다는 차이점이 있다.

입출력장치

: 컴퓨터 외부에 연결되어 컴퓨터 내부의 정보를 교환하는 장치

모니터, 키보드, 마우스...

시스템 버스(System Bus)

: 컴퓨터의 핵심 4가지 부품을 연결하는 가장 중요한 버스

버스(bus)란? 정보를 주고 받는 통로

• 주소 버스(address bus) : 주소를 주고 받는 통로
• 데이터 버스(data bus) : 명령어와 데이터를 주고 받는 통로
• 제어 버스(control bus) : 제어 신호를 주고 받는 통로

마무리

컴퓨터가 이해하는 구조에 대해서 간단하게 말하고 정리하겠다. 언어의 구조는 주어 + 동사로 이루어졌으나, 컴퓨터는 데이터 + 명령어의 구조를 이해하기에 사람과 컴퓨터의 언어의 확연한 차이가 드러난다.

참고한 글

젠킨스 플러그인, 구성 설정 등을 매번 설치하는게 귀찮다면 도커에 설치해라, 아니면 그냥 매번 수동으로 해라.

였다. 근데 나는 실습해야 하니까 그냥 설치할 거다.

저번 글을 보면 알겠지만 나는 이미 도커를 깔았으니 젠킨스 설치로 바로 들어가겠다.

1. Jenkins Image 내려 받기

아래의 명령어를 터미널에 입력한다. 작성자는 window powershell을 쓰고 있다.

docker pull jenkins/jenkins:lts

시작부터 순탄치 않다. 에러가 난다.

  그냥 혹시나 해서 관리자 권한으로 실행시켜서 다시 입력했더니 된다. 뭐지? 이유는 모르겠다...

2. Jenkins Container 설치 및 실행

이미지 내려받았으니 컨테이너에 올릴 차례다.

docker run -d -p 8085:8080 -v /jenkins:/var/jenkins_home -u root jenkins/jenkins:lts

컨테이너에 올리기까지 성공했다.

위에 명령문을 간단히 정리해보자.

• -d: detached mode, 흔히 말하는 백그라운드 모드
• -p: 호스트와 컨테이너의 포트를 연결(포워딩)
• -v: 호스트와 컨테이너의 디렉토리를 연결(마운트)
• -u: 실행할 사용자 지정

마지막에 jenkins/jenkins:lts는 실행할 이미지의 레포지토리 이름이다.

3. Jenkins 브라우저로 접속

위에서 포트 번호를 8085로 줬으니까 localhost:8085로 들어간다.

위 화면에 input창을 보면 Administrator password라고 써있다. 비밀번호 입력창으로, 초기 비밀번호는 컨테이너에 저장되어 있다고 한다.

그런데 구글링 해서 나온 글 참고해서 하던 도중, 또 오류가 떠서 대체 뭐가 문젠가 했는데 정말 별 거 아니었다. 정말 별 거 아니었으나 혹시나 해서 기록한다.

docker exec -it wizardly_goldwasser /bin/bash

먼저 저 명령어를 입력해줘서 실행중인 젠킨스 컨테이너에 접근해야 한다. 명령어를 부분부분 뜯어서 보자.

docker exec [OPTIONS] CONTAINER COMMAND [ARG...]

괄호친 부분은 자신의 경우에 맞게 넣으면 된다.

나는 참고해서 한답시고 명령어 그대로 긁어가는 바람에 컨테이너 부분에 남의 컨테이너 이름을 넣었다. 그러니까 안 되지 잘 돌아가던 내 컨테이너 왜 안 돌아간다고 뜨는지만 고민했지만 중요한 건 그 부분이 아니었다.

여튼 저렇게 치면 명령어를 입력하는 부분이 아래와 같이 변한다.

이제 여기서

cat /var/jenkins_home/secrets/initialAdminPassword

입력해주면 초기 비밀번호를 확인할 수 있다.

4. Jenkins 플러그인 설치

초기 비밀번호를 입력해주고 다음으로 넘어가면 위와 같은 화면이 뜬다. 이제 플러그인을 설치해야 하는데 나는 기본 권장 플러그인을 설치할 것이다.

설치가 잘 되고 있는 모습.

5. Jenkins 초기 계정 생성

그냥 알아서 적당히 입력해주고 넘기면 이렇게 설치가 완료되며 젠킨스 메인 페이지로 넘어가게 된다.

번외. Jenkins 삭제하는 법

사실 처음에 Jenkins 설정 잘못해서 지웠다 다시 했다. 혹시나 해서 이것도 적어둔다.

1. 현재 실행중인 컨테이너 확인하기

   docker ps

2. Jenkins 컨테이너 종료하기

   docker stop [CONTAINER ID]

3. Jenkins 컨테이너 삭제

   docker rm [CONTAINER ID]

이 방법으로 깔끔하게 지우고 다시 만들어서 실행했다.

  참고한 글 https://narup.tistory.com/202 http://jmlim.github.io/docker/2019/02/25/docker-jenkins-setup/

먼저 Docker 사이트에 들어가, 저는 윈도우를 쓰고 있으니 Download for Windows로 받아줬습니다. 여기를 클릭하시면 Docker 사이트로 이동하실 수 있습니다.   이제 위에 방식대로 다운로드를 받고 exe 파일을 열어 next만 누르며 순조롭게 설치를 진행하고 있었는데

이런 메세지 창이 등장했습니다. 적당히 읽어보면 wsl 버전이 낮아 Docker를 설치하는데 문제가 생긴 것 같습니다.

그래서 Window Powershell을 관리자 권한으로 실행시키고 다음과 같은 명령어를 입력해주었습니다.

$ wsl --update

$ wsl --set-default-version 2

잘 실행되는 것을 볼 수 있습니다.

  참고로 저는 wsl을 이미 깔아둔 상태였습니다. wsl이 설치돼 있지 않은 상태라면 Window Powershell을 관리자 권한 실행으로 여신 다음

$ wsl --install

입력해주시길 바랍니다.

  참고한 글 https://www.lainyzine.com/ko/article/a-complete-guide-to-how-to-install-docker-desktop-on-windows-10/

Go 언어로 작성된 리눅스 컨테이너를 기반으로 하는 오픈소스 가상화 플랫폼이다.

• 컨테이너에 기술을 넣으면, 모든 기술들의 실행 방법이 다 같아진다.
• OS와 CPU에 상관없이 컨테이너를 사용 가능하다.
• Spring, Node.js, Django, Next.js 등등 관련 없이 컨테이너에만 넣으면 모두 동일하게 실행이 가능하다.
• 컨테이너를 삭제하면 내부의 데이터가 모두 삭제되기 때문에 중요한 데이터는 외부 스토리지에 저장이 필요하다.

가상화를 사용하는 이유

• 활용도가 낮은 서버들이 존재한다면 CPU 측면에선 리소스 낭비일 수밖에 없다.
• 그렇다고 해서 모든 서비를 한 서버 안에 올리면 안전성에 문제가 생길 수도 있다.
• 그래서 안전성을 높이면서 리소스도 최대한 활용할 수 있는 방법으로 서버 가상화가 나타나게 됐다.

컨테이너(Container)

논리적인 공간(컨테이너)을 만들어 다양한 어플리케이션을 설치해 하나의 서버처럼 사용할 수 있는 패키지

한 마디로 하나의 공간(컨테이너)에 다양한 물건들을 담아서 옮기면, 옮긴 곳에서 그 물건들을 사용할 수 있게 되는 것과 같다.

각 서버에서 컨테이너를 구동해 그 안에 존재하는 어플리케이션을 별도의 설정 없이 쉽게 사용할 수 있다.

컨테이너를 왜 사용하는가?

개발을 하기 위해 하나의 환경을 구축하기란 간단하지 않다.

• 서버가 있어야 되고
• OS를 구축해야 하며
• 개발을 위한 네트워크 통신 포트 구성과
• 개발 툴들의 설치
• 서로의 연동 환경 구성 등등...

이런 환경을 매번 일일이 설치하기란 반복적인 일들을 여러 번 해야 하는 것은 물론, 환경 구성이 잘못되거나 에러가 발생하면 처음부터 다시 해야한다는 불편함이 존재한다.

이런 반복적이고 불편한 세팅을 한 번 해놓고, 쉽게 그 설정을 배포하기 위해 우리는 컨테이너를 사용한다.

컨테이너 오케스트레이션(Container Orchestration)

여러 대의 서버와 여러 개의 서비스를 관리하여 자동화 하는 기술

대표적인 예시로는 kubernetes가 있다.

• 스케줄링 : 컨테이너를 스케줄링해서 가상 머신에 배치하는 역할을 한다. 배치시 컨테이너 스택에 매칭되는 가상 머신을 자동으로 선택하고, 문제 발생시 자동으로 다시 배치를 한다고 할 수 있다.
• 서비스 디스커버리 : 수많은 컨테이너들이 생성과 종료를 반복한다. 이 때 매번 IP, Port 정보를 알 수가 없기 때문에 이를 자동으로 매칭한다.

Docker Swarm

Docker에서 개발한 컨테이너 오케스트레이션 툴이다.

• 기능이 단순하여 쉽게 사용 가능하나
• 대용량 분산 환경과 같은 복잡한 시스템에서는 적합하지 않아 Kubernetes를 많이 사용한다.

Kubernetes

Google에서 개발한 컨테이너 오케스트레이션 툴이다.

• 대규모 분산 환경에 최적화된 기능을 제공한다.
• 넓은 생태계가 구축이 되어 있다.

Docker의 기초 개념

Docker는 Immutable Infrastructure(불변 인프라) 패러다임을 실현하는 기술로, 서버 구축 후에는 변경이 불가능하다. 따라서, 변경이 필요하다면 삭제 후 다시 구축을 해야 한다.

• Image : image는 프로그램이라고 생각하면 된다. image layer들의 집합으로 image를 만들기도 가능하다. 읽기만 가능(read-only)하고 변할 수 없다.(immutable)
• Container : container는 프로세스라고 생각하면 된다. 쓰기가 가능하며, 휘발성으로 메모리에 상주한다.
• Dockerfile : instruction set으로 도커 이미지를 만드는 설명서라고 생각하면 좋다.
• Registry : Github와 같은 이미지 저장소이고, 대표적인 public registry로 DockerHub가 있다.

Docker Compose

여러 개의 컨테이너로부터 이루어진 서비스를 구축, 실행하는 순서를 자동으로 하여, 관리를 간단히 하는 기능

Docker Compose에서는 compose 파일을 준비하여 커맨드를 1회 실행하는 것으로, 그 파일로부터 설정을 읽어들여 모든 컨테이너 서비스를 실행시키는 것이 가능하다.

Docker Compose를 사용하기까지의 주요한 단계

1. 각각의 컨테이너의 Dockerfile을 작성한다.(기존 이미지를 사용하는 경우는 필요하지 않음)
2. docker-compose.yml를 작성하고, 각각 독립된 컨테이너의 실행 정의를 실시(경우에 따라는 구축 정의도 포함)
3. "docker-compose up" 커맨드를 실행하여, docker-compose.yml으로 정의한 컨테이너를 개시

Docker Compose는 start, stop, status, 실행 중의 컨테이너의 로그 출력, 약간의 커맨드 실행이과 같은 기능도 가지고 있다.

docker-compose.yml

yaml으로 Docker 컨테이너에 관한 실행 옵션(build 옵션도 포함되어 있는 경우도 있음)을 기재한 파일이다.

yaml

yaml 문법으로 작성한다는데 모르는 문법이라 또 찾아봤다.

yaml 문법은 들여쓰기와 함께 key, value를 중심으로 작성된다. 해당 문법은 기본적으로 숫자형, 문자형, Boolean 자료형을 지원한다.

기본 문법

•  # : 해당 라인을 주석처리
• --- : 문서의 시작을 알림(옵션)
• ... : 문서의 끝을 알림(옵션)
• key : 딕셔너리 자료형의 key 값과 동일 개념
• value : 딕셔너리 자료형의 value 값과 동일 개념

  참고한 글 https://han-py.tistory.com/494 사실 공부하면서 정리한 거라 이 글 저 글 많이 참고하고 갖고 왔지만... 많은 도움이 됐다 생각하는 글의 링크를 첨부합니다.

CI(Continuous Integration) : 빌드/테스트 자동화 과정. 개발자를 위한 자동화 프로세스인 지속적인 통합을 의미한다.

한 마디로 여러 개발자들의 코드를 계속해서 통합하는 것이다.

CI를 왜 사용하는가?

• CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합된다.
• 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있다.
• 소스/버전 관리 시스템에 대한 변경 사항을 정기적으로 커밋하여 모든 사람에게 동일 작업 기반을 제공하는 것으로 시작한다.
• 커밋할 때마다 빌드와 일련의 자동 테스트가 이루어져 동작을 확인하고, 변경으로 인해 문제가 생기는 부분이 없도록 보장한다.

CD

CD(Continuous Delivery) : 배포 자동화 과정. 지속적인 서비스 제공 or 지속적인 배포를 의미한다.

한 마디로 지속적으로 배포 가능한 상태를 유지하는 것이다.

CD를 왜 사용하는가?

• 지속적인 서비스 제공, 지속적인 배포. 이 두 용어는 사옿 교환적으로 사용된다.
• 두 용어 모두 파이프라인의 추가 단계에 대한 자동화를 뜻하지만 때로는 얼마나 많은 자동화가 이루 어지고 있는지를 설명하기 위해 별도로 사용되기도 한다.
• 지속적 배포는 빌드, 테스트 및 배포 단계를 자동화하는 DevOps 방식을 논리적 극한까지 끌어올립니다.
• 코드 변경이 파이프라인의 이전 단계를 모두 성공적으로 통과하면 수동 개입 없이 해당 변경 사항이 프로덕션에 자동으로 배포된다. 품질 저하 없이 최대한 빨리 사용자에게 새로운 기능을 제공할 수 있게 된다.
• 입증된 지속적 통합 및 지속적인 전달 단계를 기반으로 한다.
• 간단한 코드 변경이 정기적으로 마스터에 커밋되고, 자동화된 빌드 및 테스트 프로세스를 거치며 다양한 사전 프로덕션 환경으로 승격되며, 문제가 발견되지 않으면 최종적으로 배포된다.

CI/CD 파이프 라인?

CI/CD를 정리하다 보니 계속 나오는데 무슨 말인지 몰라서 찾아봤다.

파이프 라인(Pipe Line)은 코드를 빌드, 테스트, 배포하는 과정을 거쳐 소프트웨어 개발을 추진하는 프로세스이다.

• 프로세스를 자동화함으로써 인적 오류를 최소화하고 소프트웨어 출시 방식에 일관된 프로세스를 유지하는 것을 목표로 한다.
• 파이프 라인에 포함된 툴에는 코드 컴파일, 유닛 테스트, 코드 분석, 보안, 바이너리 생성 등이 있다.

둘이 그냥 비슷한 의미였다.(아니면 알려주세요 저도 잘 모릅니다...)

CI/CD의 종류

• Jenkins
• CircleCI
• TravisCI
• Github Actions

이 외에도 다양한 CI/CD가 있다.

Jenkins

Java Runtime 위에서 동작하는 자동화 서버이다.

• 다양한 플러그인들을 활용해서 각종 자동화 작업을 처리할 수 있다.
• AWS 배포, 테스트, Docker 빌드 등 각각의 컴포넌트들이 하나의 플러그인으로 모듈화 되어 있어, 이를 사용하면 된다.
• 가장 핵심적인 파이프 라인, 시크릿 키마저도 플러그인으로 동작시킬 수 있다.
• 즉 일련의 자동화 작업의 순서들의 집합인 파이프 라인을 통해 CI/CD 파이프 라인을 구축한다.
• 플러그인들을 잘 조합해서 돌아가게 하는 게 파이프 라인이라고 할 수 있다.

Jenkins의 대표 플러그인

• Credentials Plugin

  • Jenkins는 그냥 단지 서버이기 때문에 배포에 필요한 각종 리소스에 접근하기 위해서는 여러 가지 중요 정보들을 저장하고 있어야 한다.
  • AWS token, Git access token, secret key, ssh(username, password) 등의 정보들을 저장할 때 사용한다.
  • 위와 같은 중요한 정보들을 저장해주는 플러그인이다.

• Git Plugin : Jenkins에서 git에 대한 소스 코드를 긁어와서 빌드할 수 있도록 도와주는 플러그인이다.

• Pipeline : 핵심 기능인 파이프 라인마저 플러그인이다.

• Docker plugin and Docker Pipelin : Docker agent를 사용하고 Jenkins에서 Docker를 사용하기 위한 플러그인

Jenkins의 Pipeline

Pipeline

• pipeline이란 CI/CD 파이프라인을 젠킨스에 구현하기 위한 일련의 플러그인들의 집합이자 구성
• 즉 여러 플러그인들을 이 파이프라인에서 용도에 맞게 사용하고 정의함으로써 파이프라인을 통한 서브시가 배포된다.
• pipeline DSL(Domain Specific Language)로 작성된다.
• Jenkins가 동작되기 위해서는 여러 플러그인들이 파이프라인을 통해 흘러가는 과정이라고 할 수 있다.

Pipeline의 Section

Agent Section

• Jenkins는 많은 일을 해야 하기 때문에 혼자 하기 버겁기에, 여러 slave node를 두고 일을 시킬 수 있다.
• 이처럼 어떤 Jenkins가 일을 하게 할 것인지를 지정한다.
• Jenkins node만 넣을 수 있는 것이 아니라 Jenkins 안에 있는 docker container에 들어가서 일을 시킬 수도 있다.

Post Section

• 스테이지가 끝난 이후의 결과에 따라서 후속 조치를 취할 수 있다.
• 작업 결과에 따른 행동을 취할 수 있다.

Stage Section

• 어떤 일들을 처리할 것인지 일련의 stage를 정의하는 것으로, 일종의 카테고리라고 보면 된다.

Steps Section

• 한 스테이지 안에서의 단계로 일련의 스텝을 보여준다.
• Steps 내부는 여러 가지 step들로 구성되며 여러 작업들을 실행 가능하다.
• 플러그인을 깔면 사용할 수 있는 step들이 생겨난다.
• 빌드를 할 때, 디렉토리를 옮겨서 빌드를 한다거나, 다른 플러그인을 깔아서 해당 플러그인의 메서드를 활용해서 일을 처리한다던지 하는 작업들을 할 수 있다.

2005년에 리누스 토르발스에 의해 개발된 분산 버전 관리 시스템(Distributed Version Control Systems - DCVS)

• 컴퓨터 파일의 변경 사항을 추적하고 여러명의 사용자들 간에 파일에 대한 작업을 조율하는데 사용 된다.
• 주로 여러명의 개발자가 하나의 소프트웨어 개발 프로젝트에 참여할 때, 소스 코드를 관리하는데 주로 사용한다.

Git의 장점

• 인터넷 연결이 되지 않은 곳에서도 개발을 진행할 수 있으며, 분산 버전 관리이기 때문에 중앙 저장소가 삭제되어도 원상 복구가 가능
• 각각의 개발자가 Branch에서 개발한 뒤, 본 프로그램에 합치는 merge 방식을 통한 병렬 개발 가능

Git의 기본 용어

Git의 기본 명령어

Git과 코드 저장소

Github

2008년에 시작한 최초의 git 저장소 호스팅 플랫폼

• Git, SVN, Mercurial(HG), TFS를 지원한다.
• CI/CD(Github Actions)
• Vue.js, Dokcer, Tensorflow, React 등 많은 라이브러리가 Github에서 배포하고, 유지 보수를 하고 있다.

GitLab

Gitlab사에서 개발한 2014년에 시작한 git 저장소 및 CI/CD, 이슈 추적, 보안성 테스트 등의 기능을 갖춘 웹 기반의 데브옵스 플랫폼

• Git을 지원한다.
• 개발 외 DevOps 환경 구축에 용이하다.(이슈 추적, 테스트, CI/CD 파이프 라인)
• 3rd party 플러그인/툴 없이 자체 CI/CD를 사용한다.
• Kubernetes 기반 배포 및 모니터링

Bitbucket

Atlassian이 개발/제공한 git 버전 관리 시스템을 사용하는 소스 코드 및 개발 프로젝트를 대상으로 하는 웹 기반 버전 관리 저장소 호스팅 서비스

• Jira와의 연동성이 좋다.
• Jenkins, CircleCI 같은 CI/CD 도구를 제공한다.
• 코드 리뷰, 테스트, 분석 도구를 활용한 Pull Request 단계에서의 Code insights가 가능하다.
• 계정의 비공계 컨텐츠 clone, push 작업시 2단계 인증 절차를 거친다.

Github, GitLab, Bitbucket?

Github

• 가장 많은 Integration을 지원한다.
• 가장 많은 오픈 소스 저장소 보유하고 있다.
• 가장 안정적인 서버 상태를 제공, Github Status에서 실시간 확인 가능하다.
• 한 프로젝트에는 1GB, 파일은 100개라는 용량 제한이 있다.

GitLab

• 가격면에서 합리적이다.
• Private Repo 무료, 인원 제한이 없다.
• Disk space per Repo가 10GB다.(LFS 용량 포함)
• 설치형이 무료며, 대부분의 필요한 기능을 제공한다.

Bitbucket

• Jira, Hipchat과의 연동이 편하다.
• Private Repo를 무료 제공한다.
• 한 레포지토리당 1GB라는 용량 제한이 있다.

각각의 장단점에 맞춰 본인의 상황에 맞는 것을 사용하면 된다.

Google에서 개발하고 관리하는 오픈 소스 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크

• Dart라는 언어를 사용해 개발한다.
• 기본적으로 C언어나 Java 문법과 거의 같다.
• 기존 프로그래밍 언어들의 특징들이 많이 보인다.
• 기존 ui를 버리고 자체적으로 ui를 렌더링 해, 안드로이드 앱에서 iOS 디자인을, 반대로도 가능하다.
• 플러터의 ui는 모두 위젯으로 이루어져 있다.

Dart

Google이 JavaScript를 대체하기 위해 2011년에 개발한 웹 프로그래밍 언어이다.

• Native 코드로 안드로이드나 iOS용 앱을 동시에 개발할 수 있다.
• Java랑 유사한 문법으로, 몇 가지 특징만 숙지하면 쉽게 개발할 수 있다.

크로스 플랫폼 프레임워크(Cross Platform Framework)

하나의 코드 베이스로 두 플랫폼에서 제공되는 서비스를 개발할 수 있다.

하나의 코드베이스로 Native 코드를 호출할 수 있고, 각각의 플랫폼에 대해서 많이 공부하지 않아도 자바스크립트, C#, Dart에 대해서 안다면 개발을 시작할 수 있다.

Flutter의 장점

• Material 디자인과 Cupertino : Flutter는 Android와 iOS의 대표 디자인 가이드를 기본적으로 제공한다. Android와 iOS에서 같은 material 디자인을 사용하더라도 플랫폼에 따라 다르게 출력되는 부분을 각각 디자인 가이드에 맞게 화면을 그립니다.
• Dart를 사용하나 Native 코드도 사용할 수 있다. : 크로스 플랫폼이기에 해당 OS에 최적화된 앱을 만들기 위해 Native와 Dart를 섞어서 사용한다.
• Hot reload를 제공한다. : 코드 변경/수정 후 저장하면 변경사항을 즉각적으로 확인할 수 있는 기능으로, 실시간으로 앱을 테스트 및 디버깅, 빠른 개발을 할 수 있게 도와준다.
• 다양한 플랫폼 개발이 가능하다.

Flutter의 단점

• 코드를 고치려면 새 버전을 배포해야 한다.
• 웨어러블 디바이스 앱에 약하다.
• C/C++ 라이브러리 호출이 안 된다.
• 지원되는 플러그인이 부족하다.

Flutter를 사용하는 이유

1. 시간 내에 좋은 성능의 앱을 개발할 수 있다. 하나의 언어에 대해서만 학습하면 되기 때문에, 빠른 시간에 iOS, Android 앱을 개발할 수 있다.

2. 디버깅과 크로스 플랫폼 Flutter는 컴파일 할 때부터 에러 여부를 판단해서 알려주기 때문에 문법적인 오류로 인한 디버깅을 줄일 수 있다.

Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임

• Node.js는 JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램이다.
• Node.js는 V8이라는 JavaScript 엔진 위에서 동작하는 자바스크립트 런타임(환경)이다.
• Node.js는 서버사이드 스크립트 언어가 아니다. 프로그램(환경)이다.
• Node.js는 웹 서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어졌다.

Node.js의 장점

• Javascript 언어로 프론트엔드 뿐만 아니라 백엔드 개발 환경을 구성할 수 있기에 생산성이 좋다.
• C/C++로 개발된 V8 엔진을 사용하여 확장성이 좋다.
• 다양한 패키지 매니저(npm: node Package Manager)를 기반으로 다양한 모듈(패키지)을 제공하며 필요 라이브러리에 대해 설치하고 사용할 수 있기에 효율성이 좋다.
• 이벤트 기반 Non-Blocking 및 비동기 처리가 가능하다. : event loop는 비동기 I/O를 사용하므로 스레드가 block 되지 않고 싱글 스레드로 다수의 요청 처리 가능(I/O 예시: 저장장치(SSD, HDD), 데이터베이스, 네트워크 접근), 멀티스레드보다 자원을 효율적으로 사용
• 간단한 확장 모듈 관리가 가능하다.(NPM)
• http 서버 모듈을 내장하고 있어서 아파치와 같은 별도의 웹 서버를 설치할 필요가 없다.

Node.js의 단점

• 싱글 스레드 모델이기 때문에, 하나의 작업이 지연되면 전체 시스템의 성능도 같이 떨어진다.
• 스크립트 언어의 특성상 해당 언어가 수행되어야 에러가 나는지 확인할 수 있어서 에러가 날 경우 프로세스가 종료된다.
• 이벤트 기반 비동기 방식이라 서버의 로직이 복잡한 경우에 ‘콜백 함수 늪(callback hell)'에 빠질 수 있다.

: 엔터프라이즈용 Java 애플리케이션 개발을 편하게 할 수 있게 해주는 오픈소스 경량급 애플리케이션 프레임워크

• Java 프로그래밍을 더 빠르고, 쉽고, 안전하게(속도, 단순성 및 생산성 중점)
• Java 엔터프라이즈 애플리케이션을 쉽게 만들 수 있음
• 자바 객체와 라이브러리들을 관리, 톰캣과 같은 WAS가 내장되어 있어 자바 웹 어플리케이션을 구동

1. 경량 컨테이너로서 Java 객체를 직접 관리한다. : 각각의 객체 생성, 소멸과 같은 Life Cycle을 관리하며 Spring으로부터 필요한 객체를 얻어올 수 있다.

2. 제어 역행(IoC) : 컨트롤의 제어권이 사용자가 아니라 프레임워크에게 있어, 필요에 따라 Spring에서 사용자의 코드를 호출한다.

3. 의존성 주입(DI) : 각각의 계층이나 서비스들간에 의존성이 존재할 경우 프레임워크가 서로 연결시켜준다.

4. 관점 지향 프로그래밍(AOP) : 트랜잭션이나 로깅, 보안과 같이 여러 모듈에서 공통적으로 사용하는 기능의 경우 해당 기능을 분리하여 관리할 수 있다.

5. 트랜잭션 관리 프레임워크 : 추상화 된 트랜잭션 관리를 지원하며, 설정 파일(xml, java, property 등)을 이용한 선언적인 방식 및 프로그래밍을 통한 방식을 모두 지원한다.

6. MVC(Model View Controller) : 웹 프로그래밍 개발시 거의 표쥰적인 방식인 Model-View-Controller 패턴을 사용한다.

IoC(Inversion of Control)

• 보통의 자바 프로그램은 각 객체들이 프로그램의 흐름을 결정하고 각 객체를 직접 생성, 조작하는 작업(객체를 직접 생성, 메소드 호출)을 했으나, IoC는 객체의 생성을 특별한 관리 위임 주체에게 맡긴다. 이를 곧, 제어의 역전이라고 한다.

일반 자바 프로그램

클래스 내부의 객체 생성 -> 의존성 객체의 메소드 호출

Spring(IoC)

Spring에게 제어를 위임, Spring이 만든 객체를 주입 -> 의존성 객체의 메소드 호출

DI(Dependency Injection)

• 객체를 외부(Spring)에서 생성해서 사용하려는 주제 객체에 주입시켜주는 방식

IoC와 DI의 차이

IoC는 프로그램 제어권을 역전시키는 개념, DI는 해당 개념을 구현하기 위해 사용하는 디자인 패턴 중 하나로, 이름 그대로 객체의 의존관계를 외부에서 주입시키는 패턴을 말한다.

AOP(Aspect-Oriented Programming)

관점 지향 프로그래밍(프로젝트 구조를 바라보는 관점을 바꿔보자), 핵심 로직과 부가 기능을 분리하여 애플리케이션 전체에 걸쳐 사용되는 부가 기능을 모듈화하여 재사용할 수 있도록 지원하는 것

MVC(Model View Controller)

애플리케이션을 개발할 때 사용하는 디자인 패턴으로, 애플리케잇견의 개발 영역을 MVC로 구분하여 각 역할에 맞게 코드를 작성하는 개발 방식

Model

MVC 기반의 웹 애플리케이션이 클라이언트의 요청을 전달받으면 요청 사항을 처리하기 위한 작업을 하는데, 이 때 클라이언트에게 응답으로 돌려주는 작업의 처리 결과 데이터를 Model이라고 한다.

View

Model을 이용하여 웹 브라우저와 같은 애플리케이션의 화면에 보이는 리소스(Resource)를 제공하는 역할

Controller

컨트롤러는 클라이언트 측의 요청을 직접적으로 전달 받는 엔드 포인트(End Point)로써 Model과 View 중간에서 상호작용을 해주는 역할을 한다.

Spring boot

Spring으로 애플리케이션을 만들 때에 필요한 설정을 간편하게 처리해주는 별도의 프레임워크

Spring, Spring boot?

• Spring Boot는 내부에 Tomcat이 포함되어 있어 따로 설치하거나 매번 버전을 관리해야 하는 수고로움을 덜어준다.
• Spring Boot는 starter를 통해 dependency를 자동화 해준다.
• Spring Boot는 XML 설정을 하지 않아도 된다.
• jar 파일을 통해 자바 옵션만으로 손쉽게 배포가 가능하다.

깃허브를 쓰는 사람들이라면 알겠지만 깃허브에 100MB 이상 파일은 올라가지 않는다. 그렇지만 알고 있다고 해서 저런 에러 메세지를 피할 수 있다고는 하지 않았다.

나의 경우에는 최근 node.js 강의를 듣고 조금씩 공부하며 그 파일들을 저장해두기 위해 깃허브에 올리고 있었다. 저 에러 메세지가 떴던 당시에도 강의를 따라하며 대략 1GB 정도의 파일을 만드는 코드를 작성했다.

근데 앞서 말했지만 깃허브는
100MB 이상 파일은 올라가지 않는다.

그 결과 나는 앞서 올렸던 사진들의 에러와 마주치게 된다...

이런 경우에는 해결책이 두 가지가 있다.

1. git lfs를 사용하기
2. 그냥 대용량 파일을 지워 버리기

git lfs

위 에러 메세지를 보면
remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.
이 메세지가 있는데, 여기서 권하는 방법이 바로 git lfs를 사용하는 것이다.

여기서 말하는 git lfs란?

100MB 이상의 파일이 있을 때 지정한 파일을 작게 조각내어 커밋을 할 수 있도록 도와준다.

하지만 나는 문제가 된 대용량 파일이 꼭 올려야 하는 중요한 파일이 아니었기에 지우는 방법을 택했다.

그냥 대용량 파일 삭제 하기

여기서부터 내 시행착오가 시작된다.

나는 그냥 문제가 되는 파일을 지우면 되겠거니 했고, 실제로도 그 파일들만 지우고 커밋 후 다시 푸시했지만 똑같은 에러 메세지를 마주했다. 그렇게 내 고생길이 시작됐다.

bfg

보통 검색해보면 bfg를 사용하는 방법을 얘기할 것이다.

https://rtyley.github.io/bfg-repo-cleaner/

하지만 나는 다운로드를 해야한다는 말에 다운로드 안 하고 해결하는 방법은 없나? 싶어서 다른 방법을 찾아보았다.

git filter-branch

나의 문제점은 파일만 지워졌지 커밋 히스토리에는 대용량 파일의 기록이 그대로 남아있다는 것이었다.

근데 커밋 히스토리 지울 줄을 몰라서... 정말 고생했다.

git filter-branch --force --index-filter 'git rm --cached --ignore-unmatch 경로/경로/파일명.확장자' --prune-empty --tag-name-filter cat -- --all

길다...

문제가 생긴 폴더에서 git bash를 통해 위 명령어를 작성하고

git push origin --force --all

를 통해 푸시를 해주었다. 정말 감쪽같이, 아무 일도 없었던 것처럼 푸시가 잘 되었다.

머리 쥐어 뜯었던 시간은 길었지만 실제 문제 해결은 정말 얼마 걸리지도 않았다. 억울하지만 어떡하겠나요 제가 잘 몰랐기에 생긴 문제들을...

이렇게 시행착오 기록 겸 반성용 포스팅을 마친다...

참고한 글

6주차 미션

p. 315의 <직접 해보는 손코딩>을 실행한 후 출력되는 고양이 이미지 캡쳐하기

오늘 해야 할 일은 p. 315에 <직접 해보는 손코딩> 실행하기입니다. 하지만 하기 전에 교재의 코드에서 무엇을 배우는지 짚고 넘어가면 좋겠죠?

이번 페이지는 Chapter 7의 문서 객체 모델 안에 있는 속성 조작하기 관련 내용입니다. 문서 객체의 속성을 조작할 때는 다음과 같은 메소드를 사용합니다.

그리고 이번 코드에서는 img 태그의 src 속성으 조작해서 이미지를 출력합니다. 다음과 같은 URL을 입력하면 적절한 크기의 이미지를 얻을 수 있습니다.

http://placekitten.com/너비/높이

그럼 정리도 끝났겠다 이제 타이핑을 신나게 해볼까요?

<script>
    document.addEventListener('DOMContentLoaded', () => {
    const rects = document.querySelectorAll('.rect')

    rects.forEach((rect, index) => {
        const width = (index + 1) * 100
        const src = `http://placekitten.com/${width}/250`
        rect.setAttribute('src', src)
    })
})
</script>
<body>
    <img class="rect">
    <img class="rect">
    <img class="rect">
    <img class="rect">
</body>

별로 안 길어 보이는데 왜 타이핑 하는데 오래 걸렸는지 모르겠습니다...^^;

귀여운 고양이 출력에 성공했습니다. 하지만 여기서 만족하자니 어떻게 고양이 사진이 나오게 됐는지 궁금해지지 않나요?

코드를 뜯어와서 간단하게만 보자면...

const src = `http://placekitten.com/${width}/250`

여기서 src 값을 설정해줍니다. 가로 세로 길이 또한 여기서 설정합니다.

rect.setAttribute('src', src)

setAttribute 속성을 사용해 rect라는 이름을 가진 클래스에게 7번째 줄에서 설정한 src 값을 삽입해줍니다.

분명 본문 코드에선 img 태그에 클래스만 줬었는데 개발자 도구에서는 src 속성이 잘 들어간 것을 볼 수 있습니다. setAttribute 속성을 통해 특정 속성에 값을 지정했습니다.

p. 352에 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡쳐하기

<body>
    <h1>할 일 목록</h1>
    <input id="todo">
    <button id="add-button">추가하기</button>
    <div id="todo-list">

    </div>
</body>
<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 객체를 조작하고 추가합니다.
            item.setAttribute('data-key', key)
            item.appendChild(checkbox)
            item.appendChild(text)
            item.appendChild(button)
            todoList.appendChild(item)

            //checkbox 객체를 조작합니다.
            checkbox.type = 'checkbox'
            checkbox.addEventListener('change', (event) => {
                item.style.textDecoration
                    = event.target.checked ? 'line-through' : ''
            })

            //text 객체를 조작합니다.
            text.textContent = input.value

            //button 객체를 조작합니다.
            button.textContent = "제거하기"
            button.addEventListener('click', () => {
                removeTodo(key)
            })

            //입력 양식의 내용을 비웁니다.
            input.value = ''
        }

        const removeTodo = (key) => {
        //식별 키로 문서 객체를 제거합니다.
            const item = document.querySelector(`[data-key="${key}"]`)
            todoList.removeChild(item)
        }

    //이벤트 연결
    addButton.addEventListener('click', addTodo)
    input.addEventListener('keyup', (event) => {
        //입력 양식에서 Enter 키를 누르면 바로 addTodo() 함수를 호출합니다.
        const ENTER = 13
        if(event.keyCode === ENTER){
            addTodo()
        }
    })
})
</script>

코드가... 왜 이렇게 긴가요? 보자마자 눈이 튀어나올 뻔 했습니다. 너무 길어서 비주얼 스튜디오 창도 캡쳐 못했습니다... 사소한 오타에 에러까지 나서 정말 절망적이었습니다... 하지만 이겨냈습니다.

위 코드를 대충 몇 가지의 과정으로 정리하자면

1. querySelector 이용해서 html에 있는 태그를 JS로 가져오기
2. 할 일 목록을 추가하는 함수 만들기 → 문서 객체 생성하기(가져오기?) → checkbox를 눌렀을 때, 글자에 선이 그어지게 하기 → '제거하기' button을 눌렀을 때, 항목 지우기 → '추가하기' button을 눌렀을 때, 항목 추가하기(+enter 눌렀을 때도 마찬가지로 항목 추가)

가 되겠습니다. 사실 저도 뭐라 말하고 있는지 잘 모르겠어요... 틀린 부분이 있다면 알려주시길 바랍니다.

하지만 코드는 정확합니다. 교재를 따라쳤으니까요. 오타를 이겨내고...

이렇게 선택 미션까지 6주차의 모든 미션을 완료했습니다.

혼공단 후기

작고 아담한 내 자바스크립트 실력을 위해... 시작했던 혼공단이었는데 솔직하게 말하자면 6주 동안이나 매주 미션하는 게 귀찮기도 했지만 동시에 재밌기도 했습니다. 포스팅을 하면 읽어주고 거기에 대해 말해주는 사람이 있다는 게 제일 재밌었습니다. 혼공족장님 댓글을 이제 못 볼 생각을 하니 눈물이 핑~ 덕분에 좋은 추억(+조금 더 업그레이드 됐을 자바스크립트 실력?!)을 업고 갑니다.^^
마지막으로 한 마디 하자면... 정말로 화요일에 포스팅 시작했습니다. 그런데 정신 차리고 보니 자정이 넘었을 뿐입니다.

5주차 미션

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

객체

객체란(Object)? 자바스크립트에서의 데이터 타입 중 하나로, 여러 자료를 다룰 때 사용하는 것입니다.

객체는 '객체 생성자' 문법과 '객체 리터럴' 문법이 있습니다.

let key = new Object()

객체 생성자 문법입니다. Object() 생성자를 사용하여 객체를 만드는 방법입니다.

let key = {key: value}

객체 리터럴 문법입니다. 중괄호 안에 key: value로 구성된 한 쌍의 속성을 넣어 객체를 만드는 방법입니다.

교재도 한 번 따라해볼까요?

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

여기서 생성한 객체를 표로 나타낼 수 있습니다.

위에 코드에서는 중괄호 안에 키: 값으로 구성된 한 쌍의 속성을 쉼표로 연결해, 여러 개 썼음을 알 수 있습니다. 객체 리터럴 문법이죠.

또한 이러한 방법 이외에도 온점(.)을 사용할 수 있습니다.

<script>
    product.제품명('7D 건조 망고');
    product.유형('당절임')
    product.성분('망고, 설탕, 메타중아황산나트륨, 치자황색소')
    product.원산지('필리핀')
</script>

속성

객체 내부에 있는 값을 속성(property)라고 합니다. 모든 형태의 자료형을 가질 수 있습니다.

교재에 나와있는 코드를 따라 쳐보며 이해해보겠습니다.

<script>
    const object = {
        number: 273,
        string: '구름',
        boolean: true,
        array: [52, 273, 103, 32]
    }
</script>

임의로 console.log(object) 한 줄만 더 입력해서 결과를 보면 모든 형태의 자료형을 가질 수 있다는 것을 두 눈으로 똑똑히 볼 수 있습니다.

메소드

객체의 속성 중에서도 함수 자료형인 속성을 특별히 메소드(method)라고 부릅니다.

이번에도 교재에 나온 코드를 보며 이해해 봅시다.

<script>
    const pet = {
        name: '구름',
        eat: function (food) { }
    }

    //메소드를 호출합니다.
    pet.eat()
</script>

pet 객체는 name과 eat라는 속성을 가지고 있습니다. 여기서 eat 속성은 입력값을 받아 무언가를 한 다음 결과를 도출해내는 함수 자료형입니다. 따라서 eat 속성을 특별히 eat() 메소드라고 부르게 되는 것입니다.

객체는 사람, 속성은 사람의 이름, 나이, 성별, 생일 등의 정보, 메소드는 사람이 밥을 먹는다던지 잠을 잔다 등의 행동으로 이해하면 쉽다.

p. 288 확인 문제 3번 풀고, 풀이 과정 설명하기

3. 모질라 문서에서 Math 객체와 관련된 내용을 읽고 사인 90도의 값을 구해보세요. 참고로 사인 90도는 1입니다. 아주 단순하게 생각해서 구현하면 0.89399666360005579라는 결과가 나옵니다. 0.89399666360005579가 나왔다면 왜 그런지, 그리고 이를 어떻게 해야 제대로 사용할 수 있는지 구글 검색 등을 활용해서 알아보고 코드를 수정하세요.

   <script>
    //변수를 선언합니다.
    const degree = 90
   
    //출력합니다.
   
   
   

Math 객체를 사용해 사인 90도의 값을 구하라기에 단순하게 생각했습니다. 그래서 아래와 같이 풀었습니다.
![](https://velog.velcdn.com/images/_leehyeryeong/post/a87df585-73f8-455d-b5e3-1e94dbec04db/image.png)

그리고 실행 결과를 보는데...

![](https://velog.velcdn.com/images/_leehyeryeong/post/c8077da5-e8b9-4d8a-983d-472fdd5fb208/image.png)
숫자가... 너무 길어요. 나오라는 1은 안 나오고, 차라리 안 나오느니만 못한 숫자가 ~~뻥임 이런 숫자라도 나와줬음 좋겠음~~... 문제에서 말한 숫자가... 그대로 나왔습니다.

하지만 문제에서는 이미 예상했는지... 이 숫자가 나왔다면 왜 그런지와, 어떻게 해야 제대로 된 숫자가 나올지를 잘 찾아보고 코드를 수정하라네요.

그래서 불꽃 구글링으로 나름의 답안을 찾아냈습니다. [참고한 블로그](https://m.blog.naver.com/scyan2011/221604956473)들 [링크들을](https://ui-tricks.tistory.com/16) 걸어놓았습니다. (두 개 다 다른 링크임!!!)

여튼 제가 알아낸 것은... Math.sin() 함수의 인자로 주어지는 값은 우리가 흔히 알고 있는 각도가 아닌 라디안 값이라는 사실이었습니다. 따라서 일반각으로 sin을 구하고 싶다면 **구하고 싶은 각 * (Math.PI/180)**으로 써야 라디안 값이 아닌, 각도로 구해지는 것입니다.

![](https://velog.velcdn.com/images/_leehyeryeong/post/e8d937fa-f2f3-46f7-b2c0-f03133ab7846/image.png)

``` 그래서 배운대로 응용해보았습니다. 이제 실행을 하면...

와!!! 1이다!!! 영점어쩌고저쩌고가 아니라 1이다!!! 선택 미션 끝이다!!!

미루고 미루다 금요일까지 미루다니... 믿기지 않습니다. 그래도 나름 시험 기간만 빼면 일찍일찍 써서 올리는 편이었는데... 방학이 사람을 나태하게 만듭니다. 나태해진 정신 머리에 포스팅까지 하려니 너무 힘들었지만 이겨냈습니다. 제가 이김^^ 이제 마지막까지 아자아자!!!!!!

4주차 미션

202쪽의 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년 윤년인지 확인하는 결과 인증샷

문제를 풀기 전에 윤년이 뭔지 먼저 집고 넘어갑시다. 윤년이란?

• 몇 년에 한 번 있는, 2월이 29일까지 있는 해이다.
• 4로 나누어 떨어진다.
• 하지만 100으로 나누어 떨어지면 윤년이 아니다.
• 그런데? 400으로 나누어 떨어지면 윤년이다.

이랬다 저랬다 정말 알 수 없는 너 윤년... 참 까다롭습니다. 괜히 몇 년에 한 번씩 돌아오고 그런 게 아닌가봐요. 하지만 벌써 혼공단 4주차. 이 정도에 지지 않는다. 아자아자!!!

<script>
    function isLeapYear(year) {
        return (year % 4 === 0) && (year % 100 != 0) || (year % 400 === 0)
    }

    console.log(`2020년은 윤년일까? === ${isLeapYear(2020)}`)
    console.log(`2010년 윤년일까? === ${isLeapYear(2010)}`)
    console.log(`2000년은 윤년일까? === ${isLeapYear(2000)}`)
    console.log(`1900년은 윤년일까? === ${isLeapYear(1900)}`)
</script>

예제에 있는 코드입니다. 사실 저는 예제를 보기 전까지 대충 떠올려보며 if문 여러 번 쓸 생각을 하고 있었습니다. 아직도 저는 한참 멀었다는 것을 이렇게 다시 한 번 실감합니다. 2주차에 그렇게 열심히 정리했던 논리 연산자를 쓰면 한 방인 것을...

윤년은 4로 나누어 떨어져야 하지만 100으로는 나누어 떨어져서는 안 된다. 그러나 400으로 나누어 떨어지는 해는 윤년이 될 수 있다.

여기서 우리는 제일 먼저 4로 나누어 떨어지지만, 100으로는 나누어 떨어지지는 말아야 하는 조건을 충족해야함을 알 수 있습니다. 둘 다 참을 반환해야 한다는 소리겠죠? 400으로 나누어 떨어지는 해가 윤년인 것은 그 다음에 해도 괜찮으니 둘 중 하나만 참으로 반환해도 괜찮겠고요.

(year % 4 === 0) && (year % 100 != 0) || (year % 400 === 0)

위에서 쓴 코드 중 일부를 뜯어왔습니다. 다시 한 번 보겠습니다. 4로 나누어 떨어지지만, 100으로 나누어 떨어지지 않는다는 조건에 && 연산자를 써서 둘 다 참이 아닐 경우 거짓을 반환하게 했으며, 그 뒤 400으로 나누어 떨어지는 수가 없을 경우에는 || 연산자를 씀으로써 둘 중 하나만 참이어도 참을 반환하게 하였습니다.

결과입니다. 책에 나온 실행 결과 그대로 예쁘게 잘 나왔습니다. 4주차 기본 미션 끝~!!!

p. 240 확인 문제 1번 풀고, 풀이 과정 설명하기

1. filter 함수의 콜백 함수 부분을 채워서 ① 홀수만 추출, ② 100 이하의 수만 추출, ③ 5로 나눈 나머지가 0인 수만 추출해주세요.

   <script>
    //변수를 선언합니다.
    let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]
   
    //처리합니다.
   
   

//출력합니다.
console.log(numbers)

가운데 //처리합니다. 부분을 구현하면 되는 문제입니다. filter 함수를 사용해

 * 홀수만 추출하기
 * 100 이하의 수만 추출하기
 * 5로 나눈 나머지가 0인 수만 추출하기

를 처리하면 되겠습니다.

일단 우리가 사용해야할 filter 함수에 대해 먼저 알고 가겠습니다. 사실 저도 배웠을 텐데도 불구하고 지금 처음 듣는 것 같아서 공부가 좀 필요합니다...

### filter 함수

배열이 갖고 있는 함수입니다. 이름에서 볼 수 있듯이 거르다, 즉 조건에 일치하는 요소를 모아 새로운 배열을 반환하는 함수입니다. 조건에 일치하지 못한 함수들은 걸러지는 셈이죠.

arr.filter(function(value, index, array)) { }

기본 형태입니다.

![](https://velog.velcdn.com/images/_leehyeryeong/post/dc12cd78-f059-498a-aef6-410d2905141a/image.png)

filter 함수를 이용해 풀어본 예제입니다. 위에서 설명한 기본 형태와 모습이 다른데요?! 라고 말씀하신다면... 맞습니다. 더 간단하게 할 수 있을 것 같아서 수정해보았습니다. 

저는 function 키워드 대신 **화살표 함수**를 사용했습니다. 다음과 같은 형태로 사용할 수 있습니다.

(매개변수) => {

}

하지만 여기서 더 줄일 수 있습니다.

(매개변수) => 리턴값

저는 두 번째 형태의 화살표 함수를 사용하였습니다. 타이핑도 쉽고, 코드 길이도 짧아지고. 이것이 바로 일석이조.

위에 제가 짠 코드를 보면 화살표 뒤에 조건을 줘, 바로 리턴 되게 한 것을 볼 수 있습니다.

1번은 2로 나눈 나머지 수가 1일 경우 리턴, 즉 홀수일 경우 리턴.
2번은 비교 연산자를 사용해 100 이하일 경우 리턴.
3번은 5로 나눈 나머지가 수가 0일 경우 리턴, 즉 5로 나누어 떨어질 때 리턴.

출력할 때, numbers를 출력하니 그 리턴 값은 numbers가 받을 수 있도록 numbers에 대입까지 해주면서 4주차 선택 미션까지 끝냈습니다.
***
좀 있어 보이는 척 하고 있었는데... 막바지에 다다르니 제 한계도 벌써 다다른 듯 싶습니다. 선택 미션 6주차까지 성실하게 하겠다 해놓고 어려워서 하지 말까... 하기까지 했습니다...^^ 근데 어찌저찌 또 하긴 했네요. 오늘도 열심히 포스팅한 나에게 박수~^^

3주차 미션

비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기

자바스크립트는 자료 처리를 위해 다양한 연산자, 함수, 메소드를 제공합니다. 이들을 크게 비파괴적 처리와 파괴적 처리로 구분할 수 있습니다.

뭘 그렇게 과격하게 처리하길래 이름이 비파괴적 처리와 파괴적 처리인가요?

비파괴적 처리: 처리 후에 원본 내용이 변경되지 않습니다. 파괴적 처리: 처리 후에 원본 내용이 변경됩니다.

그렇습니다. 하지만 이것만 봐선 뭔 소린지 잘 모르겠지 않나요? 일단 저는 그랬습니다. 저와 같은 사람이 저 하나 뿐일 거라 생각하지 않고 설명을 더 이어나가겠습니다.

비파괴적 처리

본문에 나온 코드를 실행해보며 알아봅시다.

<script>
    const a = '안녕'
    const b = '하세요'

    const c = a + b

    console.log(c)

    console.log(a)
    console.log(b)
</script>

결과입니다. + 연산자를 사용해 a와 b를 연결하여 c를 만들고 콘솔 창에 출력해 보았습니다. 원본 내용인 a와 b 또한 콘솔 창에 출력해줍니다. 결과는 순서대로 '안녕하세요', '안녕', '하세요'가 나옵니다. c에서 문자열 연결 처리를 하고도 원본 내용인 a와 b가 변경되지 않은 것을 볼 수 있습니다.

파괴적 처리

마찬가지로 본문에 나온 코드를 실행해보며 알아봅시다.

<script>
    const array = ["사과", "배", "바나나"]

    array.push("귤")

    console.log(array)
</script>

결과입니다. 분명 array는 사과, 배, 바나나가 들어있는 길이가 3인 배열이었는데 push() 메소드를 사용했더니 사과, 배, 바나나에 귤까지 추가되면서 배열의 길이가 4로 변했습니다. push() 메소드 처리 후, 원본과 달라진 것을 알 수 있습니다.

각각의 장단점

컴퓨터 메모리가 많이 부족했던 과거에는 배열처럼 크기가 어느 정도인지 모르는 대상의 원본과 결과를 모두 메모리에 저장하는 것은 위험할 수 있었기에, 메모리를 절약할 수 있게 대부분 파괴적 처리를 했습니다.

하지만 파괴적 처리는 원본이 사라지기 때문에 위험할 수 있습니다.

그렇기에 메모리가 여유로윤 현대의 프로그래밍 언어와 라이브러리는 자료 보호를 위해 대부분 비파괴적 처리를 합니다.

p. 173 확인 문제 3번 풀고, 풀이 과정 설명하기

1번은 비파괴적 처리입니다. 출력했을 때 원본 내용과 다름이 없는 모습을 볼 수 있습니다. 따라서 비파괴적 처리입니다.

2번은 파괴적 처리입니다. push() 메소드를 사용했을 때, 배열이 사과, 배, 바나나, 귤에서 끝나지 않고 감이 추가되었습니다. 원본과 내용도, 길이도 다른 것을 볼 수 있습니다. 따라서 파괴적 처리입니다.

3번은 비파괴적 처리입니다. 출력했을 때 원본 내용과 다름이 없는 모습을 볼 수 있으므로 비파괴적 처리임을 알 수 있습니다.

4번은 비파괴적 처리입니다. 출력했을 때 원본 내용과 다름이 없는 모습을 볼 수 있으므로 비파괴적 처리입니다.

3주차도 기본 미션부터 선택 미션까지 완료했습니다~ 가면 갈수록 어려워지지만... 지지 않고 끝까지 꼭. 기필코. 완주하겠습니다. 파이팅~

2주차 미션

p. 139 확인 문제 3번 문제 풀고 완전한 코드 만들어 비주얼 스튜디오 코드에서 실행 결과 인증샷

3. 중첩 조건문은 2장에서 배운 논리 연산자를 적용해 하나의 if 조건문으로 만들 수 있습니다. 빈칸에 어떤 논리 연산자가 들어가야 할까요?

오늘 풀어야 할 문제도 써뒀으니 이제 진짜진짜로 시작~!!!

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

먼저 문제에 나와있는 코드입니다. x가 10보다 크거나 20보다 작을 경우 '조건에 맞습니다.' 라는 문장을 console에 띄워주는 코드인데, 중첩 조건문을 사용한 것을 볼 수 있습니다. 잘못 짠 코드는 아니나... if를 한 번만 쓰고도 저 두 개의 조건을 충족시킬 줄 안다면 정말 간지나지 않을까요?!?!?!

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

빈 칸에 어떠한 논리 연산자만 사용한다면 이제 굳이 if를 두 번씩 쓰지 않아도 됩니다. 그렇다면 저 빈 칸에 사용할 논리 연산자는?

논리 연산자

논리 연산자에는 &&과 ||이 있습니다. 두 개씩이나 있는 이유는 둘의 쓰임새가 다르기 때문이겠죠. 그럼 이제부터 어떻게 다른지 설명해보겠습니다.

논리곱 연산자 &&

&&은 논리곱 연산자입니다. 두 개의 값을 비교했을 때, 둘 다 참이라면 참을 반환하지만 둘 중 하나라도 거짓이라면 거짓을 반환합니다. AND라고 생각하면 됩니다.

논리합 연산자 ||

||은 논리합 연산자입니다. 논리곱 연산자 &&과의 가장 큰 차이점은 두 개의 값 중, 하나만 참이더라도 참을 반환한다는 것입니다. 둘 다 참이라면 참을 반환, 둘 중 하나만 참이라면 참을 반환, 둘 다 거짓이라면 거짓을 반환합니다. OR라고 생각하면 됩니다.
둘 중 우리가 써야할 논리 연산자는 무엇인지 감이 오나요? 우리는 위에서 말한 것처럼 x가 10보다 크거나 20보다 작을 경우 해당 코드가 작동하도록 만들어야 합니다. 그러면 x > 10 조건과 x < 20 조건을 둘 다 만족시켜야겠죠. 즉, 두 개의 값 모두 참을 반환해야 합니다. 따라서 사용해야 할 연산자는 &&이 되겠습니다.

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

수정 완료!!! 실행!!!

될 줄 알았으나 나를 반겨주는 오류. 6번째 줄에 오류가 있다는데요. x is not defined... x is... not defined...? x를... 찾을 수 없어...? 그렇습니다. 우리는 아직 x를 선언하지 않았습니다. 그러니 x를 찾을 수 있겠습니까.

<script>
    let x = 11;

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

x를 선언하고, 임의로 11을 넣어주었습니다. 이제 진짜 실행!!!

와!!! 실행 성공!!!

10과 20 사이 수인 11을 넣어 조건에 만족하여 조건에 맞다는 문장까지 출력이 됐습니다. 이렇게 2주차 기본 미션 끝~

p. 152의 <태어난 연도를 입력 받아 띠 출력하기> 예제 실행하여 본인의 띠 출력한 화면 캡쳐하기

오늘도 선택 미션까지 하는 성실한 나의 모습. 기왕 성실해본 거 6주차까지 성실해보려고요~^^

<script>
    const rawInput = prompt('태어난 해를 입력해주세요.', '')
    const year = Number(rawInput)
    const e = year % 12

    let result
    if(e == 0) {result = '원숭이'}
    if(e == 1) {result = '닭'}
    if(e == 2) {result = '개'}
    if(e == 3) {result = '돼지'}
    if(e == 4) {result = '쥐'}
    if(e == 5) {result = '소'}
    if(e == 6) {result = '호랑이'}
    if(e == 7) {result = '토끼'}
    if(e == 8) {result = '용'}
    if(e == 9) {result = '뱀'}
    if(e == 10) {result = '말'}
    if(e == 11) {result = '양'}
    alert(`${year}년에 태어났다면 ${result} 띠입니다.`)
</script>

예제 코드를 열심히 타이핑 해 주었습니다. 이제 실행!!!

태어난 연도를 입력해주고 확인을 누르면

짜잔~ 이렇게 제가 닭띠라는 사실을 알려줍니다. 2주차 선택 미션도 끝~ 2주차 끝~!!!

1주차 미션

p. 54의 <파일 만들고 저장해 실행하기>에서 'Hello World' 출력하기

'Hello World'가 출력되기까지 필요한 과정을 정리해보자.     1. 파일 만들기(HTML 페이지 생성)     2. 파일 작성(HTML 페이지 작성)     3. 파일 실행하기(HTML 페이지 실행)

1. 파일 만들기(HTML 페이지 생성)

상단의 메뉴에서 [파일] → [새 파일]을 선택해서 파일을 만들 수 있습니다. 탐색기에 마우스 오버시 뜨는 첫 번째 아이콘을 클릭 또한 새 파일을 만들어줍니다. Ctrl+N 단축키로도 파일 생성이 가능합니다.

2. 파일 작성(HTML 페이지 작성)

HTML의 기본적인 형태 코드를 입력해보았습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

하지만 제가 할 일은? HTML이 아닌 자바 스크립트입니다. 그런고로 코드를 간략하게 만들고, 자바 스크립트 사용시 필수인 script 태그를 head 태그 안에 삽입해줬습니다.

<!DOCTYPE html>
<head>
    <title></title>
    <script>

    </script>
</head>
<body>

</body>
</html>

파일 기본 형태 작성 끝~ 예제를 작성하기 위한 모든 준비가 끝났습니다. 이제 'Hello World'를 한 번 출력해보겠습니다.

script 태그 안에 alert라는 메소드를 사용해 Hello World를 출력합니다.

<!DOCTYPE html>
<head>
    <title></title>
    <script>
        alert('Hello World')
    </script>
</head>
<body>

</body>
</html>

3. 파일 실행하기(HTML 페이지 실행)

출력에 성공했습니다. 이렇게 1주차 기본 미션이 마무리 되었습니다.

Chapter 01(01-1) 확인 문제 1번 상세하게 적고 인증샷

여기서 끝날 줄 알았나요? 전혀 아닙니다. 선택 미션까지 하는 성실한 나의 모습.

1. 인터넷을 돌아다니면서 보았던 쉽게 사용할 수 있고, 기능이 많다고 느꼈던 웹 사이트를 5개 정도 적어 보세요.

사이트	기능
벨로그 (velog.io)	지금도 이 글을 작성하기 위해 쓰고 있다. 게시물을 마크다운으로 작성해, 여러 효과를 줄 수 있어서 좋다.
유튜브 (youtube.com)	세계 각국에서 올라오는 여러 카테고리의 영상을 볼 수 있는 사이트. 어느 영상이든 검색만 하면 대부분이 존재한다는 점이 유용하다.
인스타그램(instagram.com)	모두에게 일상을 공유할 수 있는 소설 네트워크 서비스. 멀리 떨어져 있더라도 인스타그램 하나면 근황을 확인할 수 있다는 장점이 있다.
yes24 (yes24.com)	언제 어디서든 사용할 수 있는 인터넷 서점. 공연 예매 서비스도 제공한다. 오프라인 매장에 가지 않아도 책을 구매할 수 있어 유용하다.
unsplash (unsplash.com)	저작권 무료 이미지 사이트. 프레젠테이션을 제작할 때 등의 경우에 유용하다.
### 2. Statcounter에서 책을 보고 있는 현재 시점의 웹 브라우저 점유율(Browser Market Share Worldwide)을 확인해보세요.
Chrome의 점유율이 압도적인 것을 확인할 수 있습니다. 그 다음으로 많은 브라우저는 순서대로 Edge와 Whale Browser이며, 나머지의 점유율은 대부분 비슷한 것을 볼 수 있습니다.
이로써 선택 미션까지 1주차 미션을 마무리하였습니다. 갈 길이 멉니다... 6주차까지 아자아자~!!!

: Window, Apach, MySQL, PHP의 약자 → WAMP를 통해 PHP를 사용하면 따로 하나하나 깔지 않아도 위에 네 가지 항목을 모두 사용할 수 있다.

PHP는 서버 사이드 언어기 때문에 돌아가려면 웹 서버가 필요하다. 그렇기에 Apach가 필요하다.

웹 서버의 루트

→ C:\Bitnami\wampstack-8.1.4-0\apache2\htdocs

PHP

• 대소문자를 구분한다.
• 변수 앞에 $를 붙여야 한다.
• 출력문은 echo를 사용한다.
• if, while, for, array는 자바와 동일한 문법이다.
• 확장자는 php이다.
• 코드의 기본 구조는 아래와 같다.

<?php ... ?>

• 클라이언트에서 실행시: 탐색기에서 실행(주소창: C:\test\1.php)
• 서버에서 실행시: 서버에서 실행(주소창: http://localhost/1.php)
• 설정을 바꾸고 싶다면 php.ini에서 바꿀 수 있다.