웹에서 사용되는 데이터나 자원(리소스)을 HTTP URI로 표현하고, HTTP프로토콜을 통해 요청과 응답을 정의하는 방식

= 클라이언트가 이해하기 쉽게 알아보기 쉽고 잘 작성된 메뉴판같은 역할! 사실 3단계까지 가는건 쉽지 않음. 2단계까지만 적용해도 좋은 API디자인이다 ⇒ HTTP API라고 부름

0단계

그냥 HTTP프로토콜 사용하는 것. ⇒ REST API라고 말할 순 없고 그냥 기반..정도로 볼 수 있음 (HTTP프로토콜을 사용하고 있다. 그게 다다.)

1단계

• 0단계에서 더 나아가 개별 리소스와의 통신 준수
• REST API는 웹에서 사용되는 모든 데이터나 자원을 HTTP URI로 표현 ⇒ 모든 자원은 개별 리소스에 맞는 엔드포인트를 사용해야함 + 받는 자원에 대한 정보를 응답으로 전달하라

• 요청 = ‘예약 가능한 시간 (요청시 엔드포인트 : /doctors/허준) 응답 = ‘의사 허준의 예약 가능한 시간대’
• 요청 = ‘특정 시간에 예약’ (요청시 엔드포인트 : /slots/123 응답 = 리소스 사용에 대한 성공/실패여부 (아래 예시 확인)

2단계

• CRUD에 맞게 적절한 HTTP 메서드(요청)를 사용하는 것이 중요
• 2단계 충족 조건 예약 가능한 시간을 확인한다? ⇒ 예약 가능한 시간 조회(READ) ⇒ GET메서드 사용하여 요청 특정 시간에 예약한다? ⇒ 특정 시간 예약 생성(CREATE) → POST로 요청 → 응답코드 : 201 Created +Location헤더에 작성된 URI를 통해 확인할 수 있게 함
  • CREATE?하려면 POST메서드에 대한 응답이 어떻게 반환되는지 중요
    • HTTP메서드 규칙
      • GET메서드 같은 경우 서버의 데이터를 변화시키지 않는 요청에만 사용 (조회만!)
      • POST메서드는 요청마다 새로운 리소스 생성 PUT메서드는 요청마다 같은 리소스 반환 (교체의 용도 / 멱등하다) ⇒ POST ≠ PUT(구분하기) PATCH는 수정의 용도 ⇒ PUT ≠ PUT (구분하기)

3단계

HATEOAS(Hypermedia As The Engine Of Application State)라는 하이퍼미디어 컨트롤 적용. 2단계 + 응답하는 리소스의 URI를 포함한 링크요소 삽입하여 작성

(응답 받은 다음 할 수 있는 다양한 액션들을 위해 많은 하이퍼미디어 컨트롤 포함) (예. 허준이라는 의사 예약 가능 시간 확인 후 예약 가능한 링크 삽입 특정 시간에 예약을 완료하고 그 예약을 다시 확인할 수 있는 링크 삽입)

*응답 내에 새로운 링크를 넣어 새로운 기능에 접근할 수 있도록 하는 것!

+ OPEN API

정부에서 제공하는 공공데이터 (쉽게 접근할 수 있도록 OPEN API형태로 공공데이터 제공중)

OPEN API

→ 누구에게나 열려있는 API (근데 무제한 아님, 이용수칙 존재, 제한 사항 존재)

API Key

API 사용하려면 API Key가 필요하다(서버의 문을 여는 열쇠) (가끔 필요없을 수도 있음)

- API Key가 필요한 경우

로그인한 이용자에게 리소스에 접근할 수 있는 권한 → API Key형태로 제공 데이터를 요청할 때 API Key를 같이 전달해야 원하는 응답 받음.

(대충 객체자향 프로그래밍 주요 개념 소개하겠다는 말)

하이 마이 네임 이즈 Encapsulation! 마이 네임 이즈 inheritance! Abstraction! Polymorphism!

빰빠바바밤 빰빠밤 빰빠바바바 빰빰!

Encapsulation(캡슐화)

1. 데이터와 기능을 하나 단위로 묶어준다. 데이터(속성)과 기능(메서드)를 따로 정의하지 않아도 돼!!!!!!!

2. 아무나 못 건드리게 은닉(hiding)도 한다. (구현숨김,동작노출) 객체 내 구현을 필요한 정도 수정해도 외부에서 동작할 때 코드흐름이 바뀌지 않는다. 더 엄격한 클래스는 속성의 직접적인 접근을 막고 설정하는 (setter), 불러오는 함수(getter)를 철저하게 나눈다.

3. 느슨한 결합(Loose Coupling)에도 유리해서 언제든 구현을 수정할 수 있다. 코드 실행 순서에 따라 절차적으로 코드를 작성하지 않고, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합!

*재사용이 가능하다!!!

Inheritance(상속)

부모 클래스의 특징을 자식 클래스가 물려받는 것. (불필요한 중복 제거) 자바스크립트는 프로토타입을 기반으로 상속을 구현한다.

예를 들어 아버지와 날 비교했을 때, 이름 성과 머리숱, 키, 좋아하는 음식 등은 같다. (유전자의 힘(프로토타입..?)이라고 생각하자) 위의 같은 값들은 유전자의 힘으로 아버지에게 상속받은 것이다. 그럼 난 아버지와 완전히 같은 사람인가? 아니다. 아버지에게 상속받은 것 말고도 학교, 친구, 직업 등 물려받지 못하고 내가 스스로 추가해야하는 속성/메서드도 있을 것이다.

요로케 상속에 대해 설명해봤다.

Abstraction(추상화)

내부 구현은 복잡, 실제 노출부분은 단순 부품 설계는 복잡, 제품 기능사용은 단순 (버튼?) 내 머릿 속은 복잡, 정작 하는 짓..은 단순(…..?)

..예를 들어 사람에게는 다양한 특징들이 있는데 내가 궁금한건 이름과 나이뿐인 것이다.. 그 이상의 것, 이름을 누가 지어줬는지, 왜 그 이름인지, 한자인지, 나이가 만으로 계산된건지, 출생신고를 늦게했는지 등은 딱히 관심없고 그냥 이름이랑 나이가 궁금한거다. 이 때, 이름과 나이는 노출이 가능하지만 그 외의 복잡한 정보(위에 서술한것보다도 더 많은)는 노출하지 않는다.

왜냐면 사실 딱히 궁금하지 않으니까. 궁금해 할 일이 없으니까..?

이게 캡슐화에서 말하는 ‘은닉’과 다른 점 아닐까..? 아니 사실 둘은 결이 같은데 그냥 그나마 약간의 차이를 나눠보자면 그렇다는 것이다.

추상화에서 말하는 은닉은 ‘궁금하지 않은 사실을 모르게 한다’, 캡슐화에서 말하는 은닉은 ‘궁금할 수 있는 사실이더라도 코드 진행에 오류가 발생하지 않도록 숨긴다’는 느낌에 가깝다고 생각한다.

Polymorphism(다형성)

똑같은 메서드라 하더라도, 다른 방식으로 구현될 수 있음. 특정 기능을 설계하는 부분과 동작하는 부분으로 분리하고 그 동작방법을 다양하게 만든 후 선택해서 사용할 수 있게 기능한다.

*자바스크립트의 객체지향 언어는 프로토타입을 기반 *자바스크립트의 클래스는 프로토타입을 기반.

이것 저것 명령어를 눌러보다 오오 과제제출을 향한 문이 열리나!!! 오오!!! 했다가 피슈슈슈슈슛...여러차례 뜨는 에러로 바람빠진 풍선마냥 책상에 널부러져 있기도 했다.

어찌저찌 아무튼간 제출은 된 것 같긴한데..(심지어 확실하지도 않음) 앞으로는 (~긴 한데 ~쓰읍 잘 모르곘네)와 같은 소리는 하지 않기 위해 깃을 공부해보겠다.

<로컬 저장소와 메인 저장소와 내가 포크해온 저장소가 서로 싸우는 모습이다. 마치 그 가운데 혼란스러워 하는 내가 보이는 듯하다.>

목표

깃허브에 나의 공부 레포지토리를 만들고 vscode에서 작업하여 터미널로 커밋하기! (실습겸, 기록겸, 익숙해질겸.. !)

1. 깃허브에 나의 저장소 만들기

나의 레포지토리 > NEW > 짜잔 만들 수 있다 만든 후 저어어기 보이는 나의 저장소 http주소를 복사하자. <<11월 공부자료를 모으기 위한 저장소를 만들었다.>>

2. 터미널 실행

맥을 기준으로 말하고 있다는 사실을 까먹었다. 지금 말했으니. 괜찮을 것이다. 아무튼 이렇게 터미널을 실행한 후 내가 진행하는 프로젝트 (내 경우엔 공부한 파일을 모아 둔 폴더가 되겠다)폴더에 진입한다.

그리고 시작된 명령어 모음 설명 타임.....!

탐색기능

관리 기능

기타등등

여기까지 터미널 관련 명령어 였고 깃 명령어 들어간다...!

…인 줄 알았는데..

?!?!?!??!?!?!??!?!???!??!?!?!??!?!?!?!?!??!?!?!?!?!??!??!??!?!??!!??!?!?!?!?!?!?

짤로서.. 예고편을 대신하며…

11월, 천지가 개벽할 일이 일어나다.. 가장 숨막히고 긴박했던 일주일.. 그 이야기가 곧 찾아옵니다.. 커밍순….

절차적 언어

옛날 옛적엔 프로그래밍언어를 보통 ‘절차적 언어’라고 불렀다. (C, 포트란 등이 있다고 한다) 절차적 언어란 무엇이냐, ‘절차대로 합시다!‘ 에서 풍기는 뉘앙스처럼 순서대로,

순차적으로 명령들을 처리하는 언어를 말한다.

근데 이게 생각보다 불편한거다. 왜? 순서가 지나가면 그대로 끝인거니까..! 예전에 학교에서 급식먹다보면 맛있는 반찬은 더 먹고 싶을 때가 있지 않은가? 하지만 그렇다고 해서 중간에 끼어서 반찬을 더 달라고 했다간 뒤에서 차례를 기다리며 쏘아보는 학우들의 눈빛레이저에 타버리고 말 것이다.

객체 지향 언어

그래서 등장한 것이 바로 이 객체 지향 언어이다. 물론 순차적으로 작동은 한다. 하나의 커다란 대 전제인 것이다. 하지만 그 안에서 데이터의 접근, 처리과정에 대한 것들이 각각 그룹을 만들어 보다 효율적으로 데이터를 처리할 수 있게 된 것이다.

이렇게 생각하면 어떨까? 우리가 레고를 만든다고 생각해보자. 당신은 집을 만들 것이고 나는 자동차를 만들거다. 함께 레고들을 모두 가운데에 쏟아놓고 이제 레고를 만드는데…. <-이러면 진행속도도 더디고 아무거나 갖다쓰다가 뒤늦게 다시 부품을 찾고.. 이런 일이 반복될 것이다. 하지만, 각자의 레고를 서로에게서 분리하고, 그 안에서 색깔대로, 모양대로 모아 레고를 만든다면? 비록 분류과정에서 시간이 조금 걸릴지 몰라도 실제로 조립을 시작하면 금방 완성될 것이다!

이러한 개념의 객체 지향 언어는 ‘클래스’라고 부르는 데이터 모델의 청사진을 사용해 코드를 작성하는 특징이 있고, 현대의 언어들은 대부분 객체 지향의 특징을 가지고 있다. (Java, C++, C#..등등..)

클래스와 인스턴스

Original Form인 Class는 객체(이후 자동차로 비유)를 생성하기 위한 자동차 설계도로 생각해보자. 많은 자동차들을 만들 수 있을 것이다. 빨간 자동차, 아우디, 기아, 폭스바겐 등등 제각각 다른 차로 보이지만 공통점이 있다. 핸들, 좌석, 차체, 엔진, 기어 등 자동차가 돌아가게 하기위한 필수 부품들이 있어야 자동차가 된다는 것이다. 이 때의 부품들을 Instance라고 부른다.

*일반 함수와 구분하기 위해 클래스는 보통 대문자 + 일반명사로 작명 (일반함수는 적절한 동사 + 소문자)

이 때, 이 기계를 이용해 새로운 자동차를 뽑아내게 되는데 바로 ’new‘를 붙이는 것이다! 바로 이렇게

new Car(‘green’)

ES5와 ES6의 차이

ES5

함수로 정의할 수 있다. / return값은 안 만듦.

function Card(god, rank) {
    this.god = god;
    this.rank = rank;
}

var card = new Card(‘heart’, ‘a’)

console.log(card); // => Card{suit: ‘heart’, rank: ‘a’}

ES6 (채신기술~~많이 씀 ~ (최신인거 앎.))

class라는 키워드 이용해 정의할 수 있다.

class Car{
    constructor(brand, name, color){
        //constructor =  생성자로 객체를 생성할 때 초기화 처리를 담당하는 메서드
        //인스턴스가 만들어질 때 실행되는 코드
  }
}

let avante = new Car(‘hyundai’, ‘avante’, ‘black’);
let big = new Car(‘audi’, ‘big’, ‘gray’);
let cheetah = new Car(‘iGe’, ‘meouya’, ‘white’);

*속성, 메서드?

속성 = 분류 or 카테고리 느낌 (차 이름, 색상, 최고 속력, 브랜드 등) 메서드 = 객체에 딸린 함수 (연료주입, 속력 설정, 운전 등)

데이터를 저장하는 방식에 따른 분류

number, string, boolean, null, undefined와 같은 고정된 저장공간을 차지하는 데이터 = 원시자료형 ⇒ 값(데이터)을 저장한다

대량의 데이터를 다루기에 적합한 배열, 객체 = 참조자료형 ⇒ 데이터가 담긴 저장소의 주소를 저장한다.

원시 자료형

• 변수에는 하나의 데이터(값)만 담는다.

• 값 자체에 대한 변경이 immutable, 변수에 다른 데이터를 할당 가능.

  (값 자체에서 뺐다 넣었다 불가, 변수에 다른 데이터 할당을 통해 가능)

  (원시 값 자체를 변경할 수 없다는 것, 변수 값을 변경할 수 없다는 것이 아님. 변수는 언제든지 재 할당을 통해 변수 값을 변경(사실은 교체)할 수 있다.

  상수는 재 할당 금지됨 (예를들어 const , but const에 할당한 객체는 값 변경 가능 (주소만 가져왔기 때문))

"hello world!"
"hello codestates!"
// "hello world!" 와 "hello codestates!"는 모두 변경할 수 없는 고정된 값입니다.

let word = "hello world!"
word = "hello codestates!"
// 하지만, word라는 변수에 재할당을 하여 변수에 담긴 내용을 변경하는 것은 가능합니다.

const num1 = 123;
num1 = 123456789; // 에러 발생
// const 키워드로 선언하면, 재할당은 불가합니다.

• 원시 값은 number, string, boolean, null, undefined가 있는데 값을 저장하려면 먼저 확보해야 하는 메모리 공간의 크기를 결정해야함 ⇒ 우와 근데 타입별로 크기가 정해져 있네!(아, 숫자, 문자열만.., 나머지는 브라우저마다 다름)
• 숫자는 1도, 1000000도 8바이트가 필요한데 문자열은 1개당 (약)2바이트가 필요함.
• 엄밀히 말하면 변수에는 값이 전달되는게 아니라 ‘메모리 주소’가 전달된다.(그러나 메모리 주소 = 값)일 정도로 밀접하므로 값이라고 이해하는게 편할 뿐이다.
  • 어? 그럼 참조 자료형이랑 다른게 뭐예요? = 변수에 원시 값을 갖는 변수를 할당하면 변수 할당 시점이든 두 변수 중 어느 하나의 변수에 재 할당하는 시점이든 결국 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한 쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다.

참조 자료형

• 여러 데이터가 heap이라는 데이터 보관함에 담기게 된다. ⇒ 이 heap의 주소가 변수에 담긴다.

• heap은 사이즈를 다이나믹하게 동적으로 늘렸다가 줄였다가 한다. 객체는 크키가 매우 클 수 도 있고, 원시값처럼 크기가 일정하지 않고, 프로퍼티 값이 객체일 수 있어 복사하고 생성하는 비용이 크다. = 메모리의 효율적 소비가 어렵고 성능이 나빠진다. ⇒ 그래서 객체 값을 변경 가능하게 설계한 것.(아 ㅋㅋ 그 안에서 지지고 볶고 하라고ㅋㅋ)

• 근데 단점이 있음. 원시값과 달리 여러 개의 식별자가 하나의 객체를 공유

  원본과 사본 중 한 쪽에서 객체를 변경하면 서로 영향을 주고받는다.

**var person = {
    name: 'Lee'
}
var copy = person;
console.log(copy === person); //true

copy.name = 'Kim'
person.address = 'Seoul'

console.log(person) //{name: 'Kim', address: 'Seoul'}
console.log(copy) //{name: 'Kim', address: 'Seoul'}
------------------------------------------------------------------
var person1 = {
    name: 'Lee'
}
var person2 = {
    name: 'Lee'
}

console.log(person1 === person2) 
//변수에 저장되어 있는 값(참조 주소)을 타입 변환하지 않고 비교, false
console.log(person1.name === person2.name) //true**

얕은 복사와 깊은 복사

얕복, 깊복으로 만들어진 객체는 원본과는 다른 객체다.(참조값이 달라!)

• 얕은복사 = 원본 데이터를 얇게 저며서 쓴다고 생각하자..(?) 객체를 프로퍼티 값으로 갖는 객체의 경우, 한 단계까지만 복사
• 깊은 복사 - 그냥 전체 다 복사.

const o = {x:{y: 1}};

//얕은복사
const c1 = {...o};
console.log(c1) // {x:{y: 1}}
console.log(c1 === o) //주소 비교, false
console.log(c1.x === o.x) //값 비교, true

//깊은복사
const_ = require('lodash')

const c2 = _.cloneDeep(o) //깊은복사 해준 것.
console.log(c2 === o) //주소 비교
console.log(c2.x === o.x) //값 비교

왜 heap은 동적으로 변하는가

• 배열과 객체는 대량의 데이터를 쉽게 다루기 위해서 사용된다 ⇒ 크기가 고정되어있지 않고 우리가 데이터를 추가하고 삭제하는 것에 따라서 크기가 달라진다.

후... 위 이미지처럼 화살표함수는.. 줄임말의 끝판왕같은느낌이다.... 하지만.. 그.. 이 늙은이(?)는 요즘 애들말은 잘 모르겠단마랴!! (어쩔티비) (공교롭게도 이 화살표함수 또한 비교적 최근에 ES6에 추가된 .. 애송이다..(보다 내가 더 애송이지만..큼큼))

아무튼 최근 프로그래머스에서 문제를 풀고 다른 분들은 어떻게 풀었는지 보다보면... 이 화살표함수 때문에 도저히 어떻게 푸신건지 알 수가 없는 것이다..

그러나 코드를 작성하는 일은.. 최대한 줄이고 간결하게 하는 것이 나도 좋고 남도 좋고 동료도 좋고 소비자도 좋고 모두에게 돌고돌아 좋은 일이므로...

그래서 알아보기로한다.. 화살표함수...

• 화살표 함수

  함수 리터럴의 단축 표현 => 화살표함수 (그러나 함수리터럴과 완전히 같은건아님)

    let cup - function(x){return x*x}; //기존 함수 리터럴
    let cup = (x) => {return x*x}; //화살표 함수 표현식 (싱글블록)
  
    //매개변수 지정 방법
    let cup = () => { ... } // 매개변수가 없으면 괄호 생략 X
    let cup = x => { ... } // 매개변수가 하나면 괄호 생략 O
    let cup = (x, y) => { ... } // 매개변수가 다수면 인수끼리 쉼표로 구분
  
    //함수 몸체 지정 방법
    let cup = x => x*x; //함수 몸통 안 문장이 return뿐이면 중괄호, return 생략 O
  
    let cuup = (x, y) => ({a: x, b: y}); 
    //함수 몸통 안 문장이 return 뿐이라도 반환값이 객체리터럴이면 그룹 연산자인 ()로 묶기
  
    let cuup = () => {return {a: x, b:y};} //아래 표현과 동일.
    let cuup = () => ({a: x, b:y}); //객체반환시 소괄호 사용.
    let cuup = () => {
                                const x = 10;
                                const y = 20;
                                return x * y;
                        }; //멀티블록
  
    let cup = (x => x*x)(3); //9
    //즉시 실행함수로 사용 가능

  ---

  • 화살표함수는 익명함수(must), 콜백함수로(possible) 사용 가능 ⇒ 함수 표현식 이용해서 호출

      //익명함수를 함수표현식으로 호출
      let pow = x => x*x;
      console.log(pow(10)); //100
      ----------------------------
      //화살표함수는 콜백함수로 사용 가능하다.
      let numbers = [1, 2, 3, 4, 5, 6, 7];
    
      let oddNumbers = numbers.filter(isOddNumber);
      function isOddNumber(num) {
                return num % 2; 
      }
      console.log(oddNumbers);    // [1, 3, 5, 7]
    
      ===
    
      let oddNumbers = numbers.filter(number => number % 2);
      console.log(oddNumbers);    // [1, 3, 5, 7]

공부를 시작한 지, 2주 정도 되어가나보다. 처음의 패기와 열기는 어디로가고 뭔가 모르게 시무룩해진다.

나는 왜 이해가 안되지..?! 왜 나만 못하는 거 같지?! 부끄러워!!!

라는 생각이 가득한데 그럴 상황도 아니고 그럴 시간도 없기 때문에 일단은 담아둔다.

처음의 설렘과 열정이 그립기도 하지만(..?) 시작했는데 해야지 뭐 어쩌겠음. 어차피 오래 뛰어야하는 마라톤이고 열정다해 뛰다가 금방 지쳐 나가떨어지는 것보다 조금 미지근해도 오래 붙어있을 것이다.

지금 유머 좀 잃으면 어때! 나중에 초등학교 앞에서 유머집이나 사서 읽어야지.. 지금은 일단 생각을 비우자..

내일은 객체를 배워야한다고!

배열은 쉽게 생각하면 쉬운데 어느 순간 복잡하게 꼬인 배열문제들을 보면 겁먹게된다. 그럴 때마다 와서 보고 '아 이거 이거였지! 맞아 ㅋㅋ'하며 읽기위해 정리해본다. 배열 (내가 필요한만큼)정리.. 도전...!

1. 배열 만들기

1-1. Array 생성자 함수

const arr = newArray(2);
console.log(arr); // [empty*2] (매개변수가 1개이고 숫자인 경우, 전달된 2를 length값으로 가지는 빈 배열 생성)

*
new Array(); // []
(전달된 인수가 없는 경우, 빈 배열 생성)

const arr = newArray(1, 2, 3);
console.log(arr); //[1, 2, 3] (그 외의 경우, 매개변수로 전달된 값들을 요소로 가지는 배열 생성)

1-2. Array.of

전달된 인수가 숫자고 한 개이더라도 요소로 갖는 배열 생성

Array.of(3); //[3]
Array.of(3, 6, 9); // [3, 6, 9]
Array.of('Java'); // ['Java']

1-3. Array.from

//["a", "b", "c"]
Array.from({length: 3, 0:'a', 1:'b', 2:'c'});  //length가 3이고 0, 1, 2인덱스에 각각 "a", "b", "c"가 들어가는 배열

//이터러블을 변환하여 배열을 생성한다. 문자열은 이터러블이다.
Array.from('Java'); //["J", "a", "v", "a"]

2. 배열 조작법

1. 배열 요소 추가하기

const arr = [0]

arr[1] = 1; //배열 요소의 추가

console.log(arr); // [0, 1]
console.log(arr.length); // 2

2. 배열 요소 갱신하기
arr[1] = 10;
console.log(arr); // [0, 10, empty*98, 100]

출처 : https://poiemaweb.com/

사용자가 편리하게 사용할 수 있도록 입출력 등의 기능을 알기 쉬운 아이콘 따위의 그래픽으로 나타낸 것.

CLI (Command-Line Interface)

터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식. 서버컴퓨터는 한 번에 굉장히 많이 같은 장소에 설치되는데 컴퓨터마다 키보드 모니터를 둘 수 없다. 대신 리눅스는 전부 깔려있다. 그래서 CLI를 이용해 서버 컴퓨터에 접근하는 것. => 개발자라면 다룰 줄 알아야 한다!

• 리눅스 터미널은 GUI가 개발되기 이전부터 시용했음 -> GUI가 할 수 있는건 리눅스도 한다.

프롬프트 (Prompt)

컴퓨터와 문자열로 소통하기 때문에 컴퓨터가 하는 말이 뭔지 읽을 수 있어야 함. 뜻을 몰라도 일단 기억하고 읽자. 키보드의 입력을 확인하고 편집할 수 있는 한 줄의 공간을 프롬프트라고 함.

Linux 명령어

Homebrew (홈브루) 명령어

MacOS 용 패키지 관리자 관련 명령어

nvm (Node Version Manager) 명령어

노드 버전 매니저 관련 명령어

GUI, CLI 출처 : 위키피디아

후.. flexbox를 이용해서 계산기 목업을 만들었다. 목업은 실제 물건과 비슷한 모형을 뜻한다. 그러니까 나는 겉모습만 본뜬, 기능은 없는 계산기를 만들었다는 것이다.

처음 만들었던 것.

디스플레이쪽과 버튼쪽의 가로길이가 맞지 않는 점이 아쉽고 디자인관점에서도 아쉬워 다시 만들어보기로 했다.

두번째로 만든 것.

디스플레이와 버튼의 너비가.. 맞는 듯 안 맞는듯.. 미묘하게 안맞다. 그러나 이전의 사각형 버튼에서 원형 버튼으로 만드는 것도 신경쓸 게 많았고 그러므로 이전보다는 발전했다고 생각함. 아주 조금조금씩 더 알아보고 많은 기능을 쓰려고 노력함. box-shadow라던지.. transition이라던지.. 그러나 아직 저 너비가 맘에 안 들기 때문에 개념을 이해하지 못했다고 생각하고 다시 만들고자 했음.

튜닝의 끝은 순정이라 했다.

아주 간단하게 버튼 사이의 간격 없이 초콜렛마냥 도각도각 부러질 것 같은 옛날 소녀시대가 선전하던 초콜렛폰느낌으로 만들고자 했다. 그리고 무려 디스플레이 박스의 테두리를 없애는 과감한 선택까지 했다. (.. 너비는 버튼들과 딱 맞다.) 위의 초기화 버튼옆의 두 버튼은 아이콘으로 넣었다.

아직 해결못한 문제

1. 버튼 안의 텍스트 가운데 정렬. (text-align등을 사용해보았지만 뭔가.. 부모요소들부터 꼬인 느낌이다.)

반성할 부분

1. 뭔가 만들다가 꼬인 느낌이 들면 처음부터 다시 만들고 싶어지는데 그것보단 만들고 있는 것에서 뭐가 잘못되었는지 코드를 하나하나 뜯어보는 습관을 들여야 할 것 같다. 양만 많다고 많이 배운 것이 아니다. 뭐가 부족했는지 리뷰하는 것에서 더 많이 배울 수도 있다.

이 밈이 말하는 것.. "HTML은 프로그래밍 언어가 아니라고!!!!!"

그동안 반복문, 조건문에게

"넌 아직 멀었다 애송이, 더 수련해와라"

라는 메세지를 얻고 괴로워하던 내게 다가온 HTML.. 이걸 배우다 보면 체크박스도 구현하고, 라디오도 구현하고, 이런 거 저런거 구현해서 실제로 눈으로 구현한 걸 확인하면 이런 생각이 든다.

어쩌면.. 이거.. 내 적성에 맞을지도..!! 앞으로 계속 이렇게만 간다면 나 자신있어!!!

과연 그럴까..? 아무튼 복습 시작.

HTML?

TAG들의 집합, 트리구조로 쓰여지는 HTML! HTML은 Hyper Text Mark Up Languege로서 '뼈대가 되는 문서'라고 볼 수 있다. 웹사이트는 세 가지 언어로 이루어져 있는데 html, css, js가 그 것이라고 할 수 있겠다. 이를 그림으로 비유하자면

HTML = 스케치 / CSS = 색칠 / JS = 동적구현 (애니메이션화 함) 로 말할 수 있지 않을까..?

TAG?

앞서 말했듯 html은 수 많은 태그들의 집합으로 이루어져 있는데 div, span, header, section, img, a ul & ol & li, input, textarea, button, p 등 다양한 태그들과

이 태그 안에 들어가는 href, src, target, placeholder, name 등의 속성을 사용한다.

sementic?

특히 html을 작성할 때 중요한 것은 '의미'를 두어야 한다는 것. 이유1. 검색엔진이 웹사이트를 선택하는 기준이 된다. 이유2. 팀 프로젝트시 서로 따로 이야기하지 않아도 코드블럭을 찾고, 코드를 예측하기에 도움이 되는 무언의 약속같이 기능한다.

<header>
<h1>여기엔 대 주제가 들어간다<h1>
</header> //여기까지 제목부분이라는 의미이다.

개인적으로는 시각장애가 있는 지인이 있는데 웹사이트에서 텍스트리더를 사용하면 원하는 부분을 읽기가 힘든 경우가 종종 있다고 했는데 이게 웹사이트 작성자가 시멘틱요소를 지키지 않았기 때문이라고 생각한다.

etc

https://www.w3schools.com/html/ 에서 html에 대해 더 공부하고 알아보자.

21문제에 달하는 연습문제를 거치며 깨지고 깨지고 깨지면서 '? 왜 이런 문제를 내는거죠오오오옥!!!' 하는 생각이 들었지만.. 뭐 쓸 일이 있겠거니.. 하며 얌전히 조짐 당했다...

근데 또 이게.. 그러다가도 고민에 고민에 고민을 거듭해서 문제를 풀어낸 후 느껴지는 성취감이..정말 좋다.. 짜릿해..

아무튼 복습 들어간다.

반복문의 효능과 효과

1. 반복 작업의 효율을 높여준다.
2. 반복문, 조건문을 활용하여 특정 조건에만 코드가 실행되도록 할 수 있다.
3. 2중 for문을 사용할 수 있다.

for 문 예시 *반복할 조건을 초기화, 조건식, 증감문 순으로 넣어주기

let a = 3;
for(let n = 0; n<=2; n=n+1){
a = a + n;
}
console.log(a); //6

while문 예시 초기화, 증감문은 따로 작어주고 조건식만 괄호 안에 넣어주기

let a = 3;
let n = 0;
while(n<=2){
  a = a + n;
  n = n + 1;
}
console.log(a); //6

오늘은 조건문, 문자열에 관련된 문제들 각각 17문제씩 총 34문제를 풀었는데 정말.. 쉽지않았다. 물론 초반엔 쉬웠지. 페어분과 쉬운 문제를 풀며 "하하 나중에 얼마나 어려우려고 이렇게 쉬울까요" 하며 웃었지만 그 '나중'은 한 서너문제 뒤부터 찾아오기 시작했다. 그 때 한 생각이다. '네..? 갑자기요? 이런 문제를요? 제가요? 지금요? 풀어요?' ㅋㅋㅋㅋ

그래도 보자마자 숨이 턱 막혀오는 문제를 열심히 풀어냈고 심지어 모두 맞췄다! 아.. 이게 바로 성취감인가.. 하며 마른세수를 하기도 잠시, reference를 보고싶어졌다. 문제를 풀면서 답은 맞췄으나'이렇게 비효율적으로 적어야하나?'싶은 문제들도 꽤나 있었기 때문. 문제를 풀면서 1순위는 맞추는 것이지만 2순위는 효율적으로 움직이는 답인지 고려해야겠다고 마음먹었는데 뭐.. 지금 내 수준은 1순위를 겨우 해내는 수준이니.. 하지만 분명 더 짧게, 더 간단히 눈에 들어오게 쓸 수 있는 방법이 있을 것이라 생각했고 역시나였다.

길게길게 늘어쓴 답안과 reference를 비교해보니 엄청 복잡한 답일 거라 생각했던 문제가 사실은 정말 간단한 것이었고, 또 어떤 답은 생각지도 못한 방향으로 풀려있기도 했다.

한 편으로는 다행이라고 생각했다. reference 답안을 이해할 수 있어서 말이다....ㅋㅋㅋㅋ

... 자바스크립트.. 네 놈보다 강한녀석이 되겠다.

암튼간에.. 앞으로도 이렇게 비교하며 공부하면 머리도 말랑말랑해져서 다양한 관점으로 생각할 수 있지 않을까 그런 기대를 가지고 있다.

그럼 이제 자야지 뿅.

음.. 만약에 네가 4시에 올 때.. 니까 이건 조건문인 if문이겠구나.. 그럼 '3시부터 행복해질 것이다'를 return 해야겠구나.. 라고 생각하며 복습을 시작한다.(?)

if(조건)문의 기본적인 문법

조건문은 반드시 비교 연산자가 필요하다. (결과는 늘 Boolean. True or False)

if(조건1){
    //조건1이 통과할 경우 return value
}else if (조건2){
    //조건1이 통과되지 못할 경우 && 조건2가 통과할 경우 return value
}else{
    //모든 조건이 통과하지 못할 경우 return value
}

2가지 조건을 한 번에 판별하는 경우 -> 논리 연산자 사용

두 가지 조건
-> 모두 True => && (AND연산자)
-> 하나는 True => || (OR연산자)
-> 180도 반대 => ! (NOT연산자)

false값들은 이런게 있어용

false / null / undefined / 0 / '' / NAN (NAN은 !가 붙는다고 True가 되진 않아용)

*프로퍼티와 메소드의 차이 -> 프로퍼티는 '속성', 메서드는 '행동' -> 함수로 된 프로퍼티 = 메서드! (오 근데 함수는 호출이 가능하네! => 뒤에 ()가 붙으면 메서드!)

문자열은 '+'연산자를 사용할 수 있다 (-는 불가능) ex) '1' + '234' = '1234'(String)

Str.indexOf(search value)

= 처음으로 일치하는 인덱스를 return. 찾고자 하는 문자열이 없으면 -1 return
  (lastIndexOf는 맨 뒤 문자열부터 찾음)

Str.split(seperator)

= 분리된 문자열이 포함된 배열 return

Str.substring(start, end)

= 시작과 끝(끝 문자열은 포함안함) Index 사이의 문자열 return

Str.toLowerCase() / Str.toUpperCase()

= 문자가 소/대문자로 변환된 문자열 return

• 문자열은 모두 Immutable (원본은 바뀌지 않는다)
• \n => 줄바꿈
• ${anything} 리터럴템플릿. 문자열 사이에 변수를 넣을 수 있다.

소감

1. 처음으로 해본 페어 프로그래밍. 아직 네비게이터와 드라이버의 역할에 대해 제대로 인지하지 못한 채 진행했던 것 같다. 하지만 친절한 분을 만나서 서로 최대한 역할에 맞게 해보려고 노력했다.. 많이 떨렸는데 걱정했던 것보다는 매끄럽게 진행됐다고 생각한다. 처음이라 문제도 어렵지 않았다. 하지만 보통 이러면 나중에 갑자기 어려워지던데.. 라는 대화를 나누며 스멀스멀 올라오는 불안감을 문제풀이로 해소했다.(?)

2. 콘텐츠들을 보며 홀로 공부할 땐 '어? 정말 이 정도만 알아도 된다고?'라는 생각 + '어? 생각보다 어렵지 않은데?'라는 생각을 가지고 있었으나 문제풀이로 들어가자마자 '그럼 그렇지' 라는 생각이 들더라. 공부하는 방법을 바꿔야겠다는 생각이 들었다. 많은 검색. 검색만이 살 길이다.

3. 라이브세션에서 아이에게 코딩교육을 시키는 아빠가 빵에 잼을 바르는 영상을 보았다. 컴퓨터가 가지고 있는 정보가 무엇인지 제대로 파악하면 어떤걸 가르치고 어떤 지시를 내려야하는지 알 수 있다는 교훈을 주었다. 그렇게되면 자연스레 인간과 컴퓨터의 차이에 대해 생각해보게되는데

   인간 -> 빵에 잼을 바르라고 하면 빵의 면에 잼 뚜껑을 열고 바르는 것이 자연스럽게 이루어짐

    (하지만 자연스럽게.. 일까? 사람의 무의식이 컴퓨터에 코딩하는 것과 같은 과정이 이루어진 결과가 아닐까)
    -> 전혀 새로운 일을 시켜도 금세 어떻게 해결해야할지 스스로 생각하고 해낼 수 있음
    (컴퓨터도 인공지능의 영역으로 간다면.. 가능ㅎ..ㅈ..않을..ㅈ..)

   이렇게 컴퓨터랑 인간이 무엇이 다른가! 생명은 창조되어질 수 있는가..! 하며 프랑켄슈타인박사에 빙의하고 있을때 즈음 하나의 차이점이 생각났다.

   *'자유의지' *

   예를 들면 앞선 예시에서 '빵에 잼을 바르고 싶어하게 된 시발점.' 그 의지..? 말이다.

   더 나아가자면 사람은 명령받기는 커녕 명령받고싶지 않아하며 스스로의 자유의지로 행동한다. 이렇게 오늘의 망상은 여기서 마무리.

기억나는 것

변수&타입

1. 데이터창고에 변수라는 상자가 있다.

2. 이 상자는 보통 계속 변하는 데이터를 담아야 하기 때문에 생겼다.

3. 이 상자는 let, const, var(이건 많이 낡아서 안 쓴다.)로 만든다. (let으로 만든 상자는 계속 데이터를 바꿔줄 수 있지만 const로 만든 상자는 한 번 값을 넣어주면 고정이다.)

4. 이 상자에 이름을 붙여주는걸 '선언'이라고 생각하자. (ex. 이 상자는 이제부터 'A'다. => let A;)

5. 이 상자에 데이터를 넣는걸 '할당'이라고 생각하자. (ex. 이 A라는 상자에 'string'을 넣는다. => let A = "string";

6. 이 상자 안에는 문자열, 숫자, Boolean, 함수, undifined, null 등 다양한 종류의 데이터를 담을 수 있다.

함수

1. 함수는 스위치다. 스위치들이 모여 하나의 콘센트를 만들듯 콘센트같은 함수도 만들 수 있겠지?

2. 함수 내에 변수를 받는 곳을 매개변수(parameter), 매개변수에 전달하는 데이터를 인자(argument)라고 이해하는중!

3. 함수선언문, 함수표현식, 화살표함수라는 단어는 기억나는데 나머지 공부가 필요하다.

머리에 넣을 것.

1. null, undefined의 차이를 이해하기.

2. 함수선언문, 함수표현식, 화살표함수

작심삼다짐

앞으로 사소하게 다짐할 것들을 일일다짐 느낌으로 적어보고자 한다. 작심삼일도 열 번이면 한달이고 백이십번이면 1년이다.

1. 물을 많이 마시자
2. 일찍 잠에 들자.
3. 모르는건 일단 그냥 넘어가지 말자. (체크라도 해둬라)

내가 왕이 될 상인가?

1이 number가 될 type인가? '1'이 string이 될 type인가? (1>3)이 boolean이 될 type인가? ... .. .

위의 적절한 예시처럼(?) 데이터 왕국에는 모든 백성들이 각자의 신분(타입)을 가지고 있다. 그 신분은 숫자이기도, 문자, boolean, 함수, 자료(배열, 객체)이기도 하며 아직 데이터값을 받지 못한(undefined) 것이기도 하다.

각 백성(데이터)들의 신분(타입)을 알아보려면 typeof 라는 연산자를 사용한다.

괜히 수양대군같은 데이터한테 undefined같은걸 쥐어줬다간 목숨의 소중함을 되새길 기회가 될 수 있으니 조심하자. (써놓고 보니 영양가없는 농이다)

0. 내가 가장 많이 하는 생각은 "그래도 뭐 어쩌겠어. 해야지", "뭔 생각을 해. 그냥 하는거지."이다.
1. 프론트엔드 부트캠프를 시작한다.

목표

1. 2년 뒤까지 1000만원을 모아 부모님께 여행을 보내드릴것이다.(?)
2. 최종 목표는 1년에 반 정도는 해외에서 살다시피하는 개발자가 되는 것!
3. 단기 목표
   1. 3600만원 받는 (건강한)개발자로 취업하기
   2. 최소 4명의 좋은 개발자들과 친해지기!

소감

1. 많은 사람들과 이야기를 나누고 자기소개도 했다. 아직 나의 커뮤니케이션 스킬이 그렇게 훌륭하진 않구나 라는 반성을 했고 자기 소개를 잘 하는 사람들의 말을 들으며 배우기도 했다.
2. 내일부터는 페어프로그래밍이라는 프로그램을 시작하는데 조금 긴장되고 떨린다. 그래도 뭐 어쩌겠어. 해야지.
3. 기초가 튼튼한 사람이 되고싶다. 포기하지 말고 일단 끝까지 하자. 얻는건 분명히 있다.

스케줄

08:00 기상 및 식사 09:00 공부 12:00 식사 13:00 공부 18:00 식사 19:00 복습 21:00 산책 23:00 취침준비 23:30 블로그작성 24:30 취침