객체 지향 프로그래밍! 코딩 공부를 하면서 여러번 본 단어다. 이게 무슨 의미인 걸까? 일단은 사전적 정의를 찾아보았다.

• MDN : 데이터가 객체 내에 캡슐화되고 구성 요소 부분 이 아닌 객체 자체가 운용되는 프로그래밍 방식. JavaScript는 매우 객체 지향적인 언어로, 클래스 기반의 언어들과는 대조적으로 프로토타입 기반의 모델을 따른다.

• Wikipedia : 컴퓨터 프로그래밍의 패러다임 중 하나로, 컴퓨터 프로그램을 명령어의 목록 으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 객체들의 모임으로 파악하고자 하는 것이며, 각각의 객체는 메시지를 주고받고 데이터를 처리할 수 있다.

  ......

  그 외에도 여러 정의가 있었지만, 그래. 이름 그대로 객체가 중요하다는 거군. 그래서 정확히 뭐라는거야? 라는 생각이 들던 중, 확 와닫는 정의가 있었다.

• 객체지향 프로그래밍이란 실세계의 사물을 추상화(Abstraction), 캡슐화(Encapsulation), 상속(Inheritance), 다형성(Polymorphism) 하여, 코드 재사용을 증가 시키고 유지보수를 감소시키는 장점을 얻기 위해서 객체들을 연결 시켜 프로그래밍 하는 것 입니다. (출처 : https://vandbt.tistory.com/10)

아하! *객체들을 연결 시킴으로써 효율성을 극대화 *시킨 프로그래밍 방법이구나! 그렇다면 저기서 말하는 추상화, 캡슐화, 상속, 다형성은 뭘까?

1. 추상화 (Abstraction)

• 불필요한 정보는 숨기고, 중요한 정보만 표현하여 프로그램을 간단하게 만드는 것. 안에 있는 복잡한 코드들은 신경 쓸 필요 없이 꼭 필요한 정보만 표시하여 사용하기 용이하게 한다.
• 전화기를 사용하는 사람이 전화기 안에 어떤 부품들이 있는지, 전화기가 어떤 원리로 작동되는지 1도 모른다고 해도, 번호를 누르고 통화하는 방법만 알면 되는 것과 같다.

2. 캡슐화 (Capsulation)

• 변수와 함수를 하나의 단위로 묶는 것. 대개의 언어에서 '클래스'를 통해서 구현되며, 클래스의 인스턴스 생성을 통해 클래스 안의 변수와 메소드에 접근할 수 있다.
• 내부의 데이터를 감추고 외부와는 메소드로 상호 작용 할 수 있다. 자료구조 스프린트에서 Hash Table을 구현할 때 Limited Array의 storage 배열을 직접적으로 볼 순 없지만, .set, .get, .each 메소드를 통해 접근할 수 있었던 것이 그 예시.

3. 상속 (Inheritance)

• 새로운 클래스(하위, 자식 클래스)가 기존 클래스(상위, 부모 클래스)의 자료와 연산을 이용할 수 있게 하는 것. 특정 부분만 수정하여 업그레이드 하는 식의 활용도 가능. 2개 이상의 클래스로부터 상속받는 다중 상속도 가능하다.
• HTML & CSS에서 자식 엘리먼트들이 부모 엘리먼트에 적용된 속성을 그대로 물려받는 것과도 상속으로 볼 수 있다.

4. 다형성 (Polymorphism)

• Poly는 여럿(多), morph-는 형태라는 뜻. 즉 여러 형태를 가진다는 뜻인데, 정확히 말하면 하나의 변수, 또는 함수가 상황에 따라서 다른 형태를 가질 수 있다. 다른 의미로 해석될 수 있다는 뜻이다.
• 포켓몬스터의 메타몽은 변신을 뜻하는 'metamorphosis'에서 이름을 따왔는데, 이름에서 알 수 있듯 변신하는 기술을 가진 포켓몬이다. 이러한 메타몽의 특성은 어떻게 보면 OOP의 Polymorphism와 유사하다고 볼 수 있다. 메타몽에게는 '변신'이라는 하나의 기술 밖에 없지만, 이 기술을 어느 대상에 사용하느냐에 따라서 기술을 사용한 결과가 달라진다. '잠만보로 변신', '꼬부기로 변신', '피카츄로 변신' 과 같이 일일이 개별 기술(함수)를 만들 필요 없이 '변신'이라는 하나의 기술(함수) 만으로도 상황에 따라 다른 형태를 가질 수 있는 것이다!

객체지향 프로그래밍의 장단점

객체 지향 프로그래밍의 이러한 특성 덕분에,

• 복잡도가 줄어들고,
• 코드의 재사용성을 증가시키고,
• 같은 코드를 반복해서 적을 필요가 없어지기 때문에,
• 깔끔하고 예쁜 코드를 작성할 수 있다!!

반면,

• 절차 지향 프로그램과 비교하면 처리 속도가 다소 느리고,
• 설계하는데 시간이 많이 든다는 등의 단점도 있다.

JavaScript에서 객체를 생성하는 방법

객체 지향 프로그래밍을 하려면 객체를 만들어야 할 것이다. 그렇다면, 객체를 생성하는 방법에는 어떤 것들이 있을까?

1. 객체 리터럴

let obj = { name : 'Kay', id : 'code-kay' };

• 객체 이니셜라이저(initializer)라고도 한다.

2. Object() 생성자 함수

let obj = new Object();
obj.name = 'Kay';
obj.id = 'code-kay';

• 기본 객체인 Object에 new를 이용해 인스턴스를 생성한다.

3. Object.create()

let Obj = { name : 'Kay', id : 'code-kay' };
let obj1 = Object.create(Obj);
let obj2 = Object.create(Obj);

• 사용할 프로토타입 객체를 직접 선택한다.
• 객체를 프로토타입으로 설정하여 여러 객체를 생성한다.
• 그냥 카피하는거라고 생각하면 편하다.

4. 생성자 함수

function Person(name, id){
  this.name = name;
  this.id = id;
}
let obj = new Person('Kay', 'code-kay');

• 생성자 함수란 객체를 만들기 위한 타입을 정의해 놓는 함수이다.
• 생성자 함수 이름의 첫 문자는 대문자로 쓴다.
• 'new' 키워드로 객체 인스턴스를 생성한다.
• 프로퍼티의 종류는 같지만 값은 다르게 객체를 만들 수 있다.
• 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 prototype 객체로 설정한다.

Instantiation. 인스턴스 생성하기

1. Functional

var Burger = function(patty) {
  var someInstance = {};
  someInstance.patty = 1;
  someInstance.extraPatty = function() {
    this.patty += 1;
  }
  return someInstance;
};

var burger1 = Burger(1);
var burger2 = Burger(2);
burger1.extraPatty();
console.log(burger1.patty) // 2
console.log(burger2.patty) // 2

2. Functional Shared

var extend = funciton(to, from) {
  for (var key in from) {
    to[key] = from[key];
  }
};

var someMethods = {};
someMethods.extraPatty = function() {
  this.patty += 1;
};

var Burger = function(patty) {
  var someInstance = { patty: patty };
  extend(someInstance, someMethod);
  return someInstance;
};

var burger1 = Burger(1)

• 메소드와 생성자 함수를 따로 적어주고 extend 함수를 이용해 연결시켜주었다.
• 이렇게 하면 생성된 객체마다 메소드를 가지고 있을 필요 없이 someMethods 에서 참조만 해오면 되기 때문에 메모리 사용량이 줄어든다는 이점이 있다.

3. Prototypal

var someMethods = {};
someMethods.extraPatty = function() {
  this.patty += 1;
};

var Burger = function(patty) {
  var someInstance = Object.creat(someMethods);
  //someMethods를 prototype으로 하는 객체를 생성
  someInstance.patty = patty;
  return someInstance;
};

var burger1 = Burger(1)

4. Pseudoclassical

var Burger = function(patty) {
  this.patty = patty;
};

Burger.prototype.extraPatty = function() {
  this.patty += 1;
};

var burger1 = new Burger(1);
var burger2 = new Burger(2);

• 가장 간편하고 많이 쓰는 방법! 새로 생성할 때 new Operator를 붙여줘야 한다.

프로토타입(Prototype)

포스팅을 하다보니 '프로토타입'이라는 용어가 계속해서 등장한다. Javascript는 프로토타입 기반의 언어라던가, 객체의 프로토타입을 설정한다던가... 이게 무슨 뜻일까?

JS는 프로토타입 기반의 객체지향 언어이다.

Java, Python 등등 객체지향언어에서 클래스(Class)는 빠질 수 없는 개념이라고 한다. 그런데 JavaScript는 객체지향언어 인데 클래스라는 개념이 없다...! 대신 프로토타입이라는 것이 있는데, 이를 활용해서 클래스를 흉내낼 수 있다고 한다.

그래서 프로토타입이 뭔데?

• 일단 기억할 것은, 자바스크립트에서는 함수도 '객체'의 형태로, 모든 함수는 prototype이라는 속성을 갖고, 모든 객체는 proto 라는 속성을 갖는다.
• prototype은 모델의 청사진을 만들 때 쓰는 원형 객체,
• constructor은 인스턴스가 초기화될 때 실행하는 생성자 함수이다.
• 생성자 함수, 프로토타입 객체, 생성된 객체는 다음 그림과 같은 관계로 연결되어 있다.
• 생성된 객체의 .proto 는 prototype 객체를 가리키며, 이를 통해 생성자 함수의 속성을 상속받을 수 있게 된다.
• 만약 prototype 객체 안에 찾는 값이 없으면 prototype '객체'의 .proto 를 타고 올라가는 식으로 상속 받은 값을 찾는다.
• 쭉 타고 올라가다 만나는 가장 상위 객체는 Object 이며, 모든 객체는 Object를 상속 받는다.
• 이런 식으로 'Prototype Chain' 을 형성한다.

프로토타입으로 상속 구현하기

CheeseBurger라는 생성자 함수로 만든 객체에 Burger이라는 생성자 함수의 속성도 상속시켜주고 싶을 때,

CheeseBurger.prototype = Object.create(Burger.prototype);

• Burger의 프로토타입을 복제해서 CheeseBurger의 포로토타입에 넣어주고,

  CheeseBurger.prototype.constructor = CheeseBurger;

• 위 과정에서 constuctor가 Burger으로 바뀌었으므로 원상복귀

var CheeseBurger = function(name) {
  Burger.call(this, name); // Burger.apply(this, arguments)
}

• new CheeseBurger를 했을 때 instance가 Burger까지 올라가지 않으므로 CheeseBurger의 Constructor 안에서 this를 올려주는 작업을 해야함!

클래스 문법 사용법

지금까진 프로토타입으로 클래스와 상속을 흉내내느라 눈물의 응꼬쑈 를 했는데, 최신 문법인 ES6에서는 클래스를 사용할 수 있게 되었다. 정확히 말하면, 작동되는 원리는 똑같지만 클래스 문법을 통해 쉽게 사용할 수 있게 된 것이다.

class Burger {
  constructor(patty) {
    this.patty = patty;
  }
  extraPatty(){}
}

class CheeseBurger extends Burger { //extends로 연결
  constructor(patty) {  //constructor가 똑같아서 생략 가능
    super(patty);  //this 전달은 super로 대체
  }
  extraCheese(){}
}

• extends 로 프로토타입끼리 연결
• super로 this를 올려주는 작업 대체
• constructor가 Burger과 같으므로 생략 가능

그 동안 배운 것들

단순히 캘린더를 쭉 읊기만 해도...

1주차에는 변수, 타입, 함수, 조건문, 문자열, 반복문, HTML, CSS, 계산기, 2주차에는 배열, 객체, 원시형, 참조형, Git, Koans, Twittler 목업, 3주차에는 고차함수, 알고리즘, 유효성 검사, Twittler 완성, 4주차에는 Underbar, 재귀함수, JSON, API까지.

(아니 그 동안 이걸 다 했다니...!)

4주라는 짧다면 짧은 시간 동안 이걸 다 배웠으니 정신 없을만 했다. 거기다 배우는건 최소한으로 배우고 배운 것을 활용해야 하는 과제와 실습 위주로 진행됐기 때문에 수 많은 벽에 부딪히고 그걸 넘어가는 과정을 계속해서 겪어야만 했다. 그렇기에 많은 노력을 기울여야했고, 그만큼 힘들고 지쳐서 복습도 못하고 기절해버린 날도 종종 있었다.

하지만 힘든만큼 최대 효율로 개발자로 성장중이란 것을 실감할 수 있다. 코딩 공부를 시작하기 전, 웹 서핑을 하다가 실수로 콘솔창에 들어갔을 땐, 이게 뭐람! 하면서 창을 끄기 바빴는데, 이제는 그 외계어 같던 코드들을 찬찬히 살펴보면 어떤 뜻인지 알아낼 수 있다는게 너무 신기하다. 영어를 처음 배우기 시작한 후, 눈 아픈 꼬부랑 글자들에서 의미가 읽히자 재미가 붙어서 마구마구 공부하기 시작했던 때가 생각났다. 그렇게 영어를 시작하고 어쩌다보니 영어영문학 전공까지 하게 된 것처럼, 가까운 미래에는 개발을 업으로 삼고서 꾸준히 발전해 나가고 싶다!

그 동안 얻은 것들

자바스크립트를 이용한 코딩 지식과 활용 능력 말고도 얻은 것들이 많은데, 가장 대표적인게 커뮤니케이션 능력이다! 과제를 할 때 기본적으로 페어를 짜서 진행하기 때문에 페어와 계속해서 소통해야하는데, 페어가 며칠마다 바뀌기 때문에 또 새로운 페어와 함께 과제를 풀어나가야 한다.

참고로 나는 어릴 때부터 워낙 소심해서 사람들과 어울리는 일을 어려워했다. 얼마나 소심했냐면 어디 전화를 거는 것도 못하고 전화를 받는 것도 못하고 식당에서 주문하는 것도 못했다. 그래서 학교 다닐 땐 학년이 올라가는걸 정말 싫어했다. 새로운 반에서 새로운 선생님과 새로운 친구들에게 또 적응을 해야 했기 때문이다. 그래서 소심한 성격이 컴플렉스였고, 성인이 된 후에는 일부러 서비스직 아르바이트만 골라 하면서 성격을 고치려고 노력했다. 덕분에 내가 생각해도 많이 좋아지긴 했지만 여전히 사람을 대할 일이 있으면 긴장하게 되고, 혼자 노는걸 좋아해서 혼영, 혼밥을 즐기는 natural born 아싸다.

그래서 시간표를 보고 굉장히 많이 걱정했다. 페어 프로그래밍이 시간표의 상당 부분을 차지하고 있었고, 심한 날은 일정에 하루 종일 페어 프로그래밍 밖에 없는 날도 있었다. 아르바이트 경험 덕에 사람들과 직접 만나서 상호작용하는 건 그럭저럭 괜찮은데, 평소에 화상 통화를 하지 않아서 그런지 오히려 ZOOM으로 진행해야 한다는게 더 낯설고 떨렸다.

하지만 페어 프로그래밍을 하루, 이틀, 수 일 진행 하면서, 전혀 긴장할 필요가 없다는 걸 알게 되었고, 오히려 페어분들과 소통하면서 지루할 수도 있는 과제 풀이를 즐겁게 진행할 수 있었다. 특히 마지막 페어분과는 너무 잘 맞았다. 프리코스에서 총 7분의 페어분들을 만났는데, 서로 실력이 조금씩이라도 차이가 나면 애자일을 제대로 진행하기 어렵고 정보가 일방통행으로만 흐르는 상황이 발생하기 쉬운데, 마지막 페어분은 진짜 진짜 둘이 실력이 비슷해서 애자일의 참맛을 맛볼 수 있었다. 특히 날씨 API 과제를 진행할 땐, 둘이서 신나서 아이디어를 내고 그걸 하나하나 직접 만들어내는 과정이 너무 즐거웠다!! 너무 웃어서 끝날때쯤 되선 기진맥진할 정도였다@@ㅋㅋ 개발의 참맛까지 아주 제대로 맛본 것 같다!(과제에 쓰려고 직접 그린 하찮은 아이콘들 ㅋㅋ) 하여간 이렇게 페어 프로그래밍을 진행하면서 사람들과 소통하는 것에 대한 두려움이 많이 줄어들었고, 소통을 통해 아웃풋을 내놓는 즐거움까지 느낄 수 있었다. 확실히 커뮤니케이션 능력이 성장한 것 같다. 다음에는 또 어떤 페어를 만나 어떤 과제를 진행하게 될까? 기대가 되는 부분이다.

프리코스를 통해 얻은 또다른 것은 끈기 이다! 지금까지는 크게 동기가 부여되는 일도 없었고 딱히 하고 싶은 일도 없어서 무엇을 하든 진득하게 끝까지 해내는 것이 어려웠던 것 같다. 그래서 중간에 흐지부지 되거나 끝까지 해내더라도 어영부영이었는데... 과정을 수강하면서 정말이지 수ㅡ많은 과제들을 붙잡고 해내었다. 단순히 해내기만 한 것이 아니라 과제를 해결하기 위해서 준비하고, 해결해낸 뒤에도 복습하면서 더 나은 방법은 없을지 고민하는 과정까지 꾸준히 하고 있다. 학교 다닐 때에서 예습 복습을 이렇게 열심히 한 적이 없었는데... 아마도 개발을 공부하면서 개발이 적성에 맞다는 확신이 어느 정도 있는 상태에서, 페어분들과 같이 해야하기 때문에 민폐를 끼치고 싶지 않다는 마음과, 페어분은 물론 동기들, 코드스테이츠 엔지니어분들에게도 도움을 받을 수 있다는 든든함, 그리고 내가 열심히 하면 다른 사람을 또 도와줄 수 있다는 생각에 동기부여가 아주 제대로 되고 있기 때문인 듯하다.

이렇게 끈기있게 과정을 해내다보니 자신감도 점점 붙는 것 같다. 배우는 내용이 점점 어려워져서 따로 보충하고 싶은 내용들도 점점 늘어나고 있지만, 어쨌든 내게 주어진 과제들을 열심히 해내고 있고, 어려워도 포기하지 않고 찬찬히 풀어나가보니 결국 해결해내는 경험이 점점 쌓이면서 스스로 성장하고 있음이 느껴지다보니, 앞으로도 포기 안하면 다 해낼 수 있겠군! 이라는 자신감도 같이 자라나는 것 같고, 더 어려운 과제에 도전해보고 싶다는 근자감(?)도 머리를 내밀려고 하고 있다. 그리고 그 어려운 과제들이 실제로 다가오고 있다... HA와 이머시브 코스가 바로 그것. 어떻게 어떻게 코스를 무사히 수료하고 취직해서 개발자로 일하게 될 모든 과정에서 분명 너무 어려워서 다 내팽겨치고 싶은 순간이 몇 번이고 오겠지만, 이 근자감(??)녀석의 멱살을 붙잡고 끌고 가보려고 한다.

그 외에도 스스로 배울 것을 찾아 구글링을 통해 학습하는 능력, 평소에도 코딩적인 생각(?)을 하는 사고방식, 규칙적인 생활 습관(ㅋㅋㅋ) 등 나에게 도움이 되는 여러가지 것들을 얻어가고 있다. 앞으로도 많이 배우고 얻어가고 싶다. 열심히 가르쳐주길 바란다. 코드스테이츠!

매일을 충실하게

프리코스를 시작하면서 작성했던 Notion을 보면 나는 3년뒤에 '매일을 충실하게 살아가는 사람'이 되고싶다고 적어놓았다. 그런데 그렇게 적은지 3년은 커녕 4주 밖에 되지 않은 지금... 이미 지난 4주를 너무너무 충실하게 보냈고, 그럴 수 밖에 없었다. 코드스테이츠의 커리큘럼을 잘 따라가려면 어쩔 수 없이 예습, 학습, 복습, 과제는 물론 필요에 따른 추가 공부 까지 해내야하기 때문이다. 지금도 친구랑 놀러 나와서는 카페에서 블로그 작성 중이니 말 다했다.

그리고 나는 이렇게 코드스테이츠를 만난 후 변한 일상이 너무 좋다. 진로에 대해 확신이 없는 상태에서 그냥 흐르듯 지나온 시간이 수 년인데, 그 수 년보다 프리코스를 수강한 4주가 수 백 배는 더 가치 있다고 단언할 수 있다. 이렇게나 무언가에 몰입하고 집중해서 무언가를 해 본지가 까마득한데, 거기다 그 순간을 진심으로 즐겼던 적, 그리고 그 과정을 통해서 부쩍부쩍 성장하는걸 몸소 느꼈던 적은 없었던 것 같다. 어떻게 말하면, 살아 있음을, 그리고 삶의 즐거움을 실감하고 있는 것 같다.

정말이지 코드스테이츠와 함께한 짧은 시간 동안 많은 것이 변했다. 그렇기에 이머시브 코스가 너무 기대 되고, 완주 했을 때의 내가 얼마나 성장했을지도 너무 궁금하다. 어제가 뿌듯하고, 오늘이 즐겁고, 내일이 기대 되는 매일. 이런 마음을 쭉 유지하면서 코스를 완주하고 싶다. 그리고 완주 후에도 이렇게 매일을 충실하게 살아나간다면 나 자신이 인정할 수 있는 멋진 사람이 되어 있을 것을 믿어 의심치 않는다.

사람 살려 !!! 살려주세요..!!

캘린더를 보니 그 사이 정말 많을 걸 배웠다. HTML, CSS기본,배열, 객체, 원시형, 참조형, CLI, Git, Koans,셀렉터랑 레이아웃 짜는법... 배운것만 이 정도고 계산기 과제, Twittler 목업 구현은 물론 수 많은 Socrative Checkup과 Zoom 세션들까지... 정말 정신 없이 지나갔다. 일기 쓰기를 미룰만 했다 싶다 :p

2주차, 느낀 점은?

결론부터 말하면, 너ㅡ무 만족하고 있다!

• 역시나, 효율성 MAX! 이렇게 배울 것, 할 일들이 넘치는지라 일정안에 해내기 위해서는 완전히 몰입해야 했고, 배운 걸 배우자마자 쓰고, 또 쓰고, 활용하고, 더더 활용하는 과정을 반복하면서 짧은 시간안에 내 것으로 만들 수 있었다. 그리고 꼭 필요한 것만 알려주기 때문에 더 알고 싶은 것을 직접 찾아보는 시간도 제법 되기 때문에 원하든 원하지 않든 자기주도적 학습을 하게 되어있다. 덕분에 혼자서는 이루기 힘든 성취도를 올릴 수 있었고, 코드스테이츠 이후에도 꾸준히 자기개발을 할 수 있는 역량도 점점 갖춰지고 있는 것 같다.

• 같이 고생하고 함께 성장하는 페어들 그 사이 3명의 페어를 더 만나 세션을 진행했다. 세 명 다 너무 좋은 분들이었다. 역시 혼자서 끙끙대는 것 보다는 둘이서 부족한 부분을 서로 채워주면서 과제를 진행하니까 좀 더 수월했고 뿌듯함도 느껴졌다. 과제도 과제지만, 말이 너무 잘 통해서 정말 깔깔 웃기도 하면서 어려운 문제에 머리를 뜯으면서도 너무 즐거운 시간을 보낼 수 있었다ㅋㅋㅋㅋ 특히 오늘은 랜덤으로 조를 짜서 자화자찬 시간을 가졌는데, 풀어야 될 과제 없이 마음 편하게 이런저런 이야기도 하고 웃기도 하면서 제법 친해진 기분이다! 다 같이 수료까지 쭉 갔으면 하는 마음이다. Slack의 General 채널에서도 제법 활발하게 정보를 공유하고 있다. 처음에는 질문 글이 대부분이었던거 같은데, 시간이 지나면서 서로 도움이 될 것 같은 자료가 있으면 공유하기도 하고, 화이팅도 하고, 수업이 끝난 후에 줌 채널에 모여서 모각코도 하면서 다 같이 으쌰으쌰 하고 있다. 아... 모각코... 정말 해보고 싶은데 애매해서 한 번도 못들어 갔다ㅠㅠ 다음 주에는 한 번이라도 꼭 들어가 봐야지.

• 많은걸 얻어갈 수 있었던 후기 공유회 어제 밤, Full Immersive 21기 분들의 수료 후기 공유회가 있었다. 큰 기대 없이 들어간 공유회였는데, 정말이지 기대도 안했던 많은 것들을 얻어갈 수 있었다. 첫 발표자분은 페어들과 커뮤니케이션 하는 것의 중요성에 대해서, 두 번째 발표자분은 꾸준한 동기 부여의 중요성에 대해서, 마지막 발표자분은 개발자 취업 과정에 대해서 이야기를 해주셨다. 지금 까지 3번의 페어 세션, 페어 리뷰를 했는데, 가능하면 좋은 말만 쓰고 높은 점수를 주려고 했었다. 근데 첫 번째 발표자분은 10점은 거의 주지 않았고, 필요하다면 쓴소리도 했다고 하셨다. 그게 정말로 페어분을 위한 일이라고. 이미 알고 있었고 실천하려고 했던 일이지만, 실제로 코스를 수강한 분에게 들으니 더 와닿았다. 이제 진짜, 솔직한 페어 리뷰를 작성해야겠다고 생각했다. 두 번째 발표자님의 강의를 들으면서 동기들과의 관계가 가장 큰 동기가 될 수 있다는 것을 알게 되었다. 물론 내가 모르는 것을 알고자 하는 호기심도 큰 동기가 되지만, 페어 세션을 진행할 때 더 적극적으로 임할 수 있었던 것을 생각하면 맞는 말인 것 같다. Full Pre 8기! 한 명의 낙오도 없이 과정의 끝까지 같이 갈 수 있으면 좋겠다. 마지막 발표자분의 취업에 대한 조언도 내가 과정을 수료한 후에 어떤 과정을 밟게 될지 간접 체험할 수 있어서 굉장히 도움이 많이 됐고, 코드스테이츠의 과정을 잘 따라가기만 해도 취업 준비도 같이 되겠구나 하는 생각에 부트캠프 과정에대한 신뢰가 깊어졌다. 정말, 생각보다 많은 것을 얻은 설명회였다. 다음 기수 후기 공유회에도 꼭 참여하려고 한다!

위기도 있었다...

빡센 과정인 만큼, 위기도 있었다. 크게는 3가지 위기가 닥쳤던 것 같다.

• 계산기 과제 계산기 과제의 최저 기준을 맞추는건 크게 어렵지 않았다. 오히려 보통 알고있는 계산기를 생각하며 기능을 만들다 보니 추가 기준까지 얼떨결에 만든 상태였다. 그래서 혼자서 더 공부해보려고 아예 무에서 처음부터 계산기를 만들어 보려고 했는데, 이건 실패 했다. HTML을 짜고 CSS로 계산기 모양을 만드는 것까진 할 수 있었는데, 이걸 JS파일로 작동하게 만드는게 잘 이해가 가지 않았다. 몇 시간 끙끙대다가 그냥 나중에 가르쳐 주면 그때 제대로 배우자 싶어 일단 그만뒀다. 그러고나서 시작한게 키보드로 작동시키기. 이것도 쉽지 않았다. Event의 개념은 알겠는데 이걸 어떻게 활용할 지 막막했다. 그래서 토, 일요일 이틀동안 컴공친구한테 스타벅스 조공하고 조언을 얻었다. 끝내 키보드 기능을 만드는데 성공했지만, 이걸 Github에 올리는데 무슨 짓을 해도 통과가 되지 않았다... 직접 계산기를 돌려봐도 모카테스트 항목을 직접 체크해봐도 문제가 전혀 없는데 모카테스트가 뚫리지 않았고, 그렇게 두 시간을 끙끙대다가 헬프데스크에 글까지 올렸다. 근데 컴퓨터를 재부팅하니 그냥 통과가 됐다. 허무했다ㅡㅡ;;;

• 터미널... 그게 뭐죠...? 이번주 과제는 터미널을 사용해서 Github에서 과제를 클론하고, 과제를 푼 다음, add, commit, push까지 터미널을 이용해서 하는 것이 있었다. 그리고... 컴퓨터에 Git을 까는 것부터 오류가 떠서 멘붕이 왔다.ㅋㅋㅋㅋㅋ homebrew도 깔아보고 하다가... 결국 홍식님이 general채널에 해결법을 올려주셔서 받을 수 있었다ㅠㅠㅋ 클론과 과제 해결은 수월했다. 근데... 제출하는 과정에서 또 멘붕이 왔다. 어떻게 push까지 쳤는데, 뭔가 결과 메시지가 썩 좋아보이지 않더니, 내 Github 계정에 푸쉬한 파일들이 올라오지 않은 것이었다. 뭐지? 분명 푸쉬까지 했는데, 뭐가 문제지? 한참 찾다가, 입력된 내 Github username과 e-mail이 이상한 것을 발견했다. 악! 급하게 수정하고 add부터 다시 하는데 허둥대다가 코멘트를 잘못 쳐서 커밋 초기화를 하고 처음부터 다시 올렸다. 뭐, 결국 성공해냈지만, 미적으로 좋게 평가해줄 수가 없는, 공격적으로까지 느껴지는 터미널의 흑백 화면, 약어이긴 하지만 아직도 헷갈리는 외계어같은 명령어들. 터미널은 아직은 심적으로 미지의 영역인듯 하다... 천천히 친해져 보자.

• CSS... 넌 나에게 모욕감을 줬어 지난주에 이미 HTML과 CSS는 자신이 없다는 내용으로 글을 마쳤었다. 그리고 실제로 좀 어려웠다ㅠㅠ HTML은 그래도 괜찮았다. 보기에 좀 그렇고 하다보면 복잡해져서 그렇지 구조를 그리면서 찬찬히 작성하면 막히는 부분은 없었다. 하지만... 내 발목을 잡은 것은 CSS, 구체적으로는 Flex였다. AMA시간에 알게된 FlexFrog를 다 풀고서는 이제 Flex는 잘 할 수 있을 것 같아! 했는데, 이 녀석이 내 발목을 꽉 붙잡아 버렸다. Urclass의 예시 레이아웃을 따라 만드는데, 분명 게임에서는 개구리들이 내 마음대로 잘 움직였었는데 아무리 CSS를 만지작거려도 div들이 꿈쩍도 하질 않는 것이었다! 답답해서 미치는줄 알았다. 그렇게 계속 끙끙대다가 레이아웃은 1도 못한 채 페어 세션을 시작하게 되었고... 페어분도 못했다고 하셔서 눈앞이 캄캄했다.ㅠㅠ 일단 할 건 해야 하니, flex를 사용하지 않고 트위틀러 목업부터 했다. 그런데 구조가 단순한 편이라서 금방 끝이 났고, 페어분과 flex 연습을 하게 되었다. 어? 근데 페어분이랑 아예 바닥부터 한다는 생각으로 찬찬히 공부하고 실험해보니 flex가 잘 작동하기 시작했다. 그렇게 기를 써도 안됐던 이유는 flex를 부모 태그에 쓰면 자식 태그에 적용된다는 사실을 몰랐기 때문이었다. 정말 바보같은 이유였지만.. 페어분이랑 같이 하지 않고 혼자서 계속 고군분투 했으면 아직도 해결 못하지 않았을까 라는 생각도 든다.

이렇게, 위기와 해결을 계속 반복해 나가면서 나 역시 성장해 나가는 것을 느끼고 있다. 벌써 2주만에 이렇게나 많은 것을 배웠는데, 20주가 지나면 난 어떤 모습이 되어있을까, 두근두근 하기도 한다ㅎㅎ 이렇게 무언가를 열심히 해본 경험이 많지 않아서 이 과정을 밟아 나가는 것 자체가 너무 뿌듯하고 즐겁다! 남은 18주, 열심히 달릴거다!

주석 없는 버전!

function listPrimes(num) {
  let result = "2"
  for (let prime = 3; prime <= num; prime++){
    for (let i = 2; i<=prime; i++){
      if (prime%i===0 && i!==prime){
        prime = prime + 1
        i = 2}
      else if (prime%i===0 && i===prime){
        result = result + "-" + prime

      }
    }
  }
  return result
}

JS는 재밌다!

생활코딩으로 예습을 하기는 했지만, HTML과 CSS부터 강의가 시작되기 때문에 사실상 JS는 반도 듣지 못하고 과정에 들어가게 되었다. 그래서 사실상 쌩초보 수준에서 시작한 셈인데, 파이썬을 공부했던 경험이 도움이 많이 됐던 것 같다.

강의 내용은 많지 않았고, 꼭 필요한데 모르는 코드는 검색을 통해서 추가적으로 찾아봐야 했다. 그래도 강의에서 알려주는 기본기만으로도 대다수의 Coplit을 풀어나갈 수 있었고, 퍼즐 맞추듯 코드를 짜내는 과정이 정말 재미있었다. 너무 안풀려서 끙끙대다 결국 문제를 풀어냈을 때는 완전 신나서 페어분이랑 꺅꺅거리기도 했다!

코드스테이츠의 과정은 효과적이다!

과정에서 강의 시간이 차지하는 비중이 적고(정말 기본만 알려준다), 대부분이 페어와 함께 문제를 푸는 시간인데, 코딩을 익히는데 굉장히 효율적인 방식이라고 느꼈다. 프로그래밍 언어도 '언어'이기 때문이다.

대한민국에서 나고자란 국민이라면 십 수년을 영어 수업을 들을텐데, 이 것 만으로 영어를 정말 유창하게 말할 수 있는 사람은 많지 않을 것이다. 수업을 듣는 것은 지식을 쌓는데는 도움이 되지만, 활용력을 키우는데는 썩 좋지 않다. 언어는 발화량이 많을 수록 더 유창해지는 법이다.

그렇기 때문에 코드스테이츠의 과정은 _효율성에 있어서는 Max_라고 할 수 있다. 이제 3일차인데 JS로 일정 범위 안의 소수의 리스트를 만든다던가, 문자를 배치하는 경우의 수를 모두 뽑아낸다던가 하는 코드를 짤 수 있게 되었다. 영어로 치면 뭐 알파벳 배우다 3일만에 _"I am learning JS these days."_를 말하게 된 수준이다.

HTML, CSS는... 어떨까?

JS는 수학 문제를 풀 듯이 머리를 굴려서 활용법을 찾아내야 했다면, 내가 생활코딩에서 배운 HTML과 CSS는 정해진 틀에 잘 맞추는게 중요했다. JS보다는 딱딱한 과정이 될 수 있는 것이다. 그래서 솔직히 JS만큼 흥미를 느끼고 잘 할 자신은 없다. 하지만 JS기초과정이 너무 재밌고 기대이상이었던 만큼 HTML과 CSS에 관해서도 내 흥미를 마구마구 유발하고 도전정신을 자극하는 Coplit들이 기다리고 있었으면 좋겠다!