프론트엔드 개발을 위한 자바스크립트 스터디

1. Intro

온라인 강의 마스터인 내가 프로그래머스에서 강의를 수강하게 될 줄은 몰랐다. 그것도 자바스크립트 강의를...
물론, 엄연히 말해서 강의가 아니라 스터디이긴 하지만 아무래도 초심자의 입장에서는 스터디도 강의처럼 보이는건 착각일까?

아무튼 정말 가고 싶던 회사에서 면접을 보고 자바스크립트 기본기가 부족하다는 피드백을 받고서 현타가 많이 왔다.
이 시점에 기가 막히게(?) 프로그래머스에서 자바스크립트 스터디가 진행하는 것을 확인하고 스터디를 진행하고자 마음먹었다.
운이 좋다고 해야하나 스터디를 시작하는 오늘을 기준으로 나는 3주차의 신입 프론트엔드 개발자가 되었다.
취업을 하게 되니 나의 역량의 밑천이 금방 동이 나바렸고, 3주째 야근(솔직히 말하면 그냥 회사에서 개인 공부한 시간이 더 많긴 하다.)을 진행했다.
그러다보니, 스터디에 잘 참여할 수 있을까라는 걱정이 되었지만, 오늘은 큰 마음을 먹고 칼퇴라는걸 해보았다.
오늘은 OT의 느낌으로 스터디를 하는 기간동안에 진행하게 될 미션에 대한 설명 위주로 진행되었다.
스터디의 목적성(?)이 코드 리뷰에 있기 때문에 진정한 스터디는 줌에서의 강의 형태가 아닌 말로 후두려 맞는(?) 깃허브에서 이루어지기 때문에 매우 큰 기대가 된다.

2. 첫만남

언제나 첫만남은 오만가지 감정이 교차한다. 설레기도 하고 무섭기도 하고 아무튼 그렇다.

2-1. 스터디 리더

• 태양왕 로토
  • 스터디의 수장이시며, 스터디 리더분들 사이에서 태양왕이라고 불리신다. 정확한 이유가 궁금하긴했지만 차마 질문할 수 없었다.
    (왜인지 알거 같기도했고...)
  • 밴드를 하신다고 하셨다. 취미 생활과 스터디 리드까지 하시면서 개발하시는게 리스펙할 수 밖에 없었다.
• 루카스
  • 장난기 가득하신 리뷰어 리더분이시다. OT 내내 정말 재밌으셨다. 개발씬에서도 이런 언어유희를 구사하시는 분이 있다는게 놀라웠다.
• 에디
  • 에디님 역시 리뷰어 분이시다. 로토님을 태양왕으로 만드신 장본인이신듯 하다. 로토 주니어가 틀림없다.
• 카일
  • 프로그래머스 교육 담당 매니저님이시다. 처음에 왜 연예인이 여기 있지 생각할 정도로 얼굴이 좋으시다. 재택근무를 하신다고 하셔서 부러웠다.
  • 하지만, 곧 그 환상을 깨주셨다.

2-2. 동기

다양한 직군에서 계시다가 전향하시는 분들, 학교를 막 졸업하신 분들, 현업에 종사하시는 분들 다양한 환경에 계시는 분들이 참여해주셨다.
어떤 이유에서던지 다른 재밌는 것들을 포기하시고 스터디에 참여하셔서 성장하려고 노력하시는 모습들이 리스펙하게 되는 분들이 많아서 4주간 배울게 많아 보인다 ☺️

3. 사전 과제 리뷰

스터디 미션에 대해서 설명하기 전에 사전 과제를 진행한 것에 대한 리뷰를 진행했다.

3-1. 생성자 함수

• 생성자 함수를 선언할 때, new 키워드를 붙이고 호출하는 것과 붙이지 않고 호출하는 것에 대한 차이를 아는지 확인하는 문제였다.
• 일반함수로서의 호출인지, 생성자함수로서의 호출인지 여부 (p1과 p2를 콘솔로 출력해보자!)

function Person (name, age) {
	this.name = name;
  	this.age = age;
}

const p1 = Person(name, age);
const p2 = new Person(name, age);

3-2. 템플릿 리터럴

• 문자열에서 변수를 쉽게 사용할 수 있도록 도와주는 템플릿 리터럴을 아는지 확인하는 문제였다.
• 템플릿 리터럴은 백틱이라는 특수 문자를 사용하고, 문자열에 변수를 추가하고 싶으면 백틱(``)
• 사이에 ${변수명}을 추가한다.
• 템플릿 리터럴 외에도 즉시실행함수, 매개변수의 사용에 대해서도 이해해야할 필요가 있다고 생각했다.

(function (name) {
  console.log(`Hello, ${name}`);
}('Yeongsan'));

3-3. this

• 지옥의 this이다. this가 무엇을 참조하는지 잘 찾을 수 있는지 확인하는 문제였다.(윌리를 찾아라? 아니 this를 찾아라.)
• this는 함수를 어떻게 호출했는지에 따라서 결정된다.
  • 일반함수로 호출은 전역객체
  • 객체의 메서드로 호출은 메서드를 호출한 객체
  • 생성자함수로 호출은 인스턴스 객체
  • call, apply, bind를 통한 함수 호출

const zeromountain = {
	name: 'SonYeongsan',
    job: 'FrontEnd Developer',
    accounts: {
      amount: 0,
      checkAmount: function () {
        if(this.amount === 0) {
          console.log(`${this.name}님의 현재 계좌의 잔액은 ${this.amount} 입니다. 공부하세요.`);
        }
      }
    }
}

zeromountain.accounts.checkAmount()

3-4. 클로저

• this가 지옥이라면 클로저는 지옥 종합 선물 세트다. 많은 자바스크립트의 책에서도 클로저의 예제로 자주 사용되지만, 자세히 오래 보지 않으면 클로저 문제라기 보다는 var 키워드의 문제라는 생각에 갖히게 되는 문제라고 생각한다.
• 클로저를 이해하기 위해서, 자바스크립트가 어떻게 동작하는지 다 이해할 필요는 없지만 깊이 있게 이해하려면 스코프, 실행컨텍스트의 영역을 이해해야 명확히 이해할 수 있는 지옥 종합 선물 세트이다.

for(var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(`number index ${i}`);
  }, 3000)
}

→ setTimeout은 비동기적으로 동작하는 함수이다.
→ for 루프가 5번 수행되면서 setTimeout이 5번 호출되지만, 비동기이기 때문에 나중에 콜스택이 깨끗이 청소(?)된 이후에 실행된다.
→ 콜스택이 모두 비어버리면 setTimeout 함수의 콜백 함수 다섯 개가 실행된다. 이 때, i의 상태는 5이기 때문에, i가 5로 다섯번 찍힌다.
→ 이를 해결하기 위해서 나와 같은 초심자들이 생각하는 방법은 let 키워드를 사용해 전역 변수를 억제하는 것이었지만, 중급 레벨 이상으로 가기 위해서는 즉시 실행 함수를 사용해 클로저를 만들어 해결하는 것이 가장 높이 평가받는 답안이었다.

3문제가 더 있지만 길어질거 같아서 이만...

4. 미션

미션은 투두리스트를 바닐라 자바스크립트로 구현하는 것이었다.
1주차 미션은 추가 구현 사항을 포함해 다섯 가지의 구현사항을 주셨다. (세부 구현 사항은 생략하겠다. 일급 기밀이기 때문에)

4-1. 필수 구현 사항

• 바닐라 자바스크립트로 생성자 함수나 클래스를 사용해 컴포넌트를 만들 수 있는지

4-2. 추가 구현 사항

• 생성자 함수, 클래스를 호출할 때 에러처리
• 배열을 활용한 다중 컴포넌트 관리(?)
• 완료한 Todo 항목 처리
• 상태를 업데이트하는 setState 함수 구현하기

과제의 내용이 쉬운 내용이 아니기 때문에, 일을 하면서 과제를 잘 수행할 수 있을지 걱정이 앞서긴 하지만 과제를 수행하지 못한 핑계 거리가 일이 되지 않도록 노력해야겠다는 생각이 들었다.

4주 뒤에 성장해 있을 나의 모습을 기대하며 1주차 라이브 세션 후기는 마무리 하겠다.