항해99 2주차 WIL

김상선·2022년 5월 22일
WIL
0

항해99

목록 보기
2/6

벌써 항해99를 시작한지 14일차이다.
이번 주에는 알고리즘 문제 풀이 연습과 테스트, 개인과제 제출을 진행했다.
팀으로 활동하지만 팀과제는 없었고 팀스터디 방식으로 진행했다. 알고리즘 28문제를 각자 풀어보고 돌아가면서 문제 풀이를 설명하는 방식었다. 혼자했다면 더디게 진행되었을텐데 같이 진도를 나가니깐 서로 밀어주고 당겨주고 정말 케미가 좋았다.
나는 토익 단어 외우기 스터디 외에는 스터디를 해본 적이 없는데, 알고리즘 스터디는 꽤 효율적인 시간이었다. 기술매니저님이 누군가에게 문제 풀이를 설명하는 모습을 영상 녹화하면 도움된다고 했지만 아쉽게 못했다. 대신 다음주 항해톡을 신청해서 '동기와 비동기'라는 주제로 사람들 앞에서 발표를 하게 되었다. 잘할 수 있을까..동기와 비동기가 간단할 줄 알았는데 자바스크립트에서는 많은 부분을 설명해야할 것 같다. 할 수 있을까?ㅠ
이번 주부터는 1일 1로그 100일완성 IT지식 이라는 책을 읽고있다. 매일 30분씩 책을 읽고 블로그에 요약과 독서후기를 남기고 있다. 이 책..초반인데도 점점 내용이 어려워진다ㅎㅎㅎ...

한 주 동안 있었던 일, 배운 것

05/16 (월) : 알고리즘 문제풀이

  • 알고리즘 문제풀이 (Github link)
    문제를 풀어둔 JS파일에 주석을 달아 Github에 올려두었는데, 마크다운 파일로 문제풀이를 올린 분들도 있었다. 마크다운으로 정리하려면 시간이 더 오래걸릴텐데 대단하다. 나는 하루종일 공부하는데도 시간이 부족하다. 시간에 제한을 두고 효율적으로 블로그로 정리하고 공부하는 방법을 찾아야할 것 같다.

05/17 (화) : 알고리즘 모의고사

  • 알고리즘 모의고사 (문제풀이 영상) 문제풀이는 30분 안에 끝낸 거 같은데, 영상 녹화에 1시간 30분이 걸렸다. 처음이라 대본을 짜서 읽으니 코드 설명에 이질감이 들었다. 반복해서 녹화하다 보니 나중엔 대본을 거의 외우고 코드를 보면서 설명했다. 문제 난이도는 그냥 평범했는데 내 코드가 비효율적인 것 같아서 아쉽다.

05/18 (수) : 알고리즘 문제풀이

05/19 (목) : 개인 과제 제출 & 알고리즘 시험

  • 개인 과제 (블로그 link Javascript 언어의 특성)
    개인과제를 제출하면서 Javascript 언어의 특성에 대해 공부했다. 알고리즘 풀기 전에 개인과제를 먼저 했어야 했는데! 자바스크립트 언어의 특성에 대해 공부하면서 왜 내가 javascript 코드를 그렇게 작성해야하는지 조금씩 이해가 가기 시작했다. 특히 변수 선언에서 var 키워드를 왜 못쓰게 하는지. 타입스크립트란 무엇인지, 호이스팅과 비동기식 처리에 대해 여기저기 정보를 찾았다. 이제 구글링도 한계가 와서 알라딘 Ebook으로 모던 자바스크립트 Deep Dive라는 책을 구매했는데 사전처럼 참고할 수 있어서 정말 많이 도움됐다.

  • 알고리즘 시험 (문제풀이영상)
    시험문제는 프로그래머스 문제를 응용했기 때문에, 문제를 이해할 수 있다면 풀었던 답안 코드를 참고하여 풀 수 있었다. 영상을 찍으면서 코드를 어떻게 설명해야할지 몰라 말을 너무 더듬었다. 내가 아직 언어를 이해하지 못하고 있는 것 같다. 3문제 중 1문제만 풀면 됐었는데 시간이 된다면 나머지 두문제도 다 풀어보고 싶다.

05/20 (금) : Node.js 주특기 기초 시작

  • 드디어 주특기 공부가 시작되었다. 스파르타코딩클럽 node.js 기초 강의를 들으면서 따라가고 있는데 역시나 시간이 오래걸린다. 특히 promise는 아직 이해하지 못했다.

05/21 (토) : 기초 강의 학습

Javascript의 ES란?

ES = ECMAscript의 약어
Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다.

  • Netscape의 Javascript와 Microsoft의 JScript가 서로 호환하지 못하는 크로스 브라우징 이슈를 해결하기 위해 Javascript의 표준사양을 제정한 것이 1997년의 ECMAscript이다.
    5판인 ES5는 2009년, 6판인 ES6는 2015년에 출판되었다.
    현재는 ECMAScript 뒤에 년도를 붙여서 14판인 ECMAScript 2023 (ES2023)까지 출판하고 있다.

ES5와 ES6의 문법 차이

  • ES5와 ES6의 대표적인 차이점으로 아래 항목들을 들 수 있다.
    - 템플릿 리터럴
    - 화살표 함수
    - this
    - 변수 선언
    - 구조 분해 문법
    - 클래스
    - 모듈

템플릿 리터럴 (Template literal)

  • ES6의 템플릿 리터럴이란 따옴표(" ") 대신에 백틱(`)을 넣어 문자열을 감싸 표현하는 기능을 말한다.
    플레이스 홀더 ${} 를 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다.
// ES5
var name = "김상선";
var age = 33;

var msg = "안녕하세요 저는 " + name + "이고 나이는 " + age + "살입니다.";
console.log(msg);

// ES6
let name = "김상선";
let age = 33;

let msg = `안녕하세요 저는 ${name}이고 나이는 ${age}살입니다.`;

화살표 함수

  • ES6에서 추가된 화살표 함수를 사용하면 함수를 간결하게 나타낼 수 있다.
  • 화살표 함수에서는 매개 변수가 하나일 때, 괄호(), 소괄호 {}, return 키워드도 생략이 가능하다.
// ES5 함수 표현식
const add = function(num) { 
   return num + num; 
}

// ES6 화살표 함수
const add = (num) => { 
   return num + num; 
}

// 함수가 한 줄이면 return 키워드, 중괄호 및 괄호(매개변수가 하나만 있는 경우)를 삭제할 수 있다.
const add = num => num + num;

this

  • ES6에서 this는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요없이 사용 가능하다.
let thisTest = {
     name : "김상선",   
     age : 33,
     info() {
          console.log(this)
          console.log(this.name , this.age)
 
          innerInfo = () =>{
              console.log(this)
              return this.name + ":" + this.age
          }
          return innerInfo()
     }
}
// 실행 결과
// { name: '김상선', age: 33, info: [Function: info] }

변수 선언

  • ES5의 var 키워드는 변수의 재할당 & 재선언이 자유롭고, 참조에 대한 오류(호이스팅 = 함수 레벨 스코프)가 있었다.
  • ES6에서 let, const 키워드를 추가하였다.
    let과 const 키워드는 같은 변수를 재선언(중복선언)하는 것이 불가능하며, 블록 레벨 스코프의 특성을 갖고 있다. 모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.
    let은 재선언이 불가능하지만, 변수에 대한 값의 재할당이 가능하며, const는 재선언과 재할당이 모두 불가하다. 
function helloworld() {
   for (let x = 0; x < 2; x++) { 
      // let키워드로 선언하면 x는 함수 내부(블록 레벨)에서만 범위가 제한된 지역 객체로 사용할 수 있다. 
   }
   console.log(x); // x 는 함수 밖에서는 참조되지 않는다. 호이스팅이 일어나지 않는다.  
}

// const를 이용하면 변수의 값이 재할당되지 않는 변수로 선언할 수 있다.
const x = 1; 
x = 2; // 값의 재선언 불가. 에러 발생

구조 분해 문법 ( Destructuring )

  • 비구조화라고 불리며, 객체에서 속성을 추출하거나 배열에서 항목을 추출할 수 있는 표현식이다.
var address = { 
   street: 'Franklin',
   city: 'Buffalo',
   state: 'NY'
};
// ES5
var street = address.street;
var city = address.city; 
var state = address.state;
// ES6
const { street, city, state } = address;
  • 배열도 구조 분해 문법으로 정의할 수 있다.
//ES5
var values = ['Hello', 'World'];
var first = values[0];
var last = values[1];
//ES6
const values = ['Hello', 'World'];
const [first, last] = values;
  • 간단한 예시
// array Destructuring
const arr = [1, 2, 3];
const [one, two, three] = arr;
// object Destructuring
const obj = { firstName: 'Kim', lastName: 'Sangseon' };
const { lastName, firstName } = obj;

참고자료 :
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

클래스

  • 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.
class Add {
  constructor(arg1, arg2) {
    this.arg1 = arg1;
    this.arg2 = arg2;
  }
  calc() {
    return this.arg1 + "+" + this.arg2 + "=" + (this.arg1 + this.arg2);
  }
}

var num = new Add(5, 8);
console.log(num.calc()); // 5 + 8 = 13

모듈

  • 모듈이란 재사용하기 위한 코드 조각을 뜻한다. 세부사항은 캡슐화시키고, API부분만 외부에 노출시킨 코드들이다. 모듈은 모듈 스코프를 가지며, export, import 키워드로 사용한다.
  • ES5 이전에는 각 기능별로 JS 파일을 나누고 개발 및 관리하는 것이 불가능했다.
profile
김상선
일요일을 좋아합니다.
이전 포스트

항해99 1주차 WIL

다음 포스트

항해99 3주차 WIL

0개의 댓글