Week2 회고

서론

또 다시 짧다면 짧고 길다면 길다고 할 수 있는 한 주가 지났으므로 회고록을 남기고자 한다. 2주차에는 알고리즘을 위주로 진행된 주차라서 약간의 알고리즘 이야기와 ES 문법에 대하여 진행을 해보고자한다.

• 알고리즘이란?
• ES문법이란?

본론

알고리즘이란?

• 정의: 수학, 컴퓨터 과학, 언어학 또는 관련 분야에서 어떠한 문제를 해결하기 위해 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것.
• 간단히 말하면 어떠한 문제 혹은 일을 해결하기위한 방법 및 절차 정도라고 할 수 있겠다!

• 어떤식으로 공부할까??
  • 프로그래머스, 백준, 등등 다양한 알고리즘 문제를 코딩으로 풀어볼 수 있는 사이트들이 있는데, 해당 사이트에서 본인이 원하는 프로그래밍 언어로 문제를 해결하면 되는것이다.
  • 보통은 파이썬을 많이들 사용한다고 알려져있다. 하지만 필자는 JS문법을 익히고 싶어서 JS로 알고리즘 문제 28문제를 풀었다.
  • 대부분의 문제들이 무난 했지만 종종 문법상의 한계가 아닌 알고리즘적인 사고력의 부족으로 2문제는 어쩔 수 없이 4시간 이상을 고민해도 풀 수없어 답지를 보았다.
  • 1문제(2차원 행렬문제)는 4시간이상 고민해서 풀어냈다. 해당 문제는 아래 링크로 남겨두도록 하겠다.
    • https://programmers.co.kr/learn/courses/30/lessons/42576
    • https://programmers.co.kr/learn/courses/30/lessons/12950
    • https://programmers.co.kr/learn/courses/30/lessons/12930

ES문법이란?

• ECMAScript 는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어라고한다...자바스크립트를 표준화하기 위해서 만들어졌으며 꼭 자바스크립트가 아니더라도 어도비 플래시를 사용하는 소프트웨어에서 사용하는 액션스크립트, 인터넷 익스플로러에 쓰이는 J스크립트 등 다른 구현체들 역시 포함하고 있다고 한다... (어렵다..)
• ES란 ECMAScript의 약자이며, 흔히 ES6, ES5 에서 숫자는 여섯번째, 다섯번째라고 생각하면 된다. 또한 ES는 프로그래밍 언어가 아닌 스크립트 언어들에 대한 표준, 규격입니다.

• 왜 ES6라는 단어를 많이 보게 된걸까?? (ES6가 가장 최신버전이라서가 아니다! )
  출처: https://ssungkang.tistory.com/entry/ES6-ES%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-%EC%99%9C-ES6%EC%9D%B8%EA%B0%80
  • 위에 표를 보면 중요한 문법적 개선 및 추가가 대부분 ES6에서 이루어 졌다고한다. 따라서 다양한 JS 프레임워크들 또한 ES6를 기반으로 개발된것으로 알고 있다.

ES6 문법

1. 백틱(`)

[before]
문자열과 문자열 또는 변수와 연결하려면 병합 연산자(+)를 사용
var str1 = "hello";
var str2 = "react";
var combined = str1 + ' ' + str2;
>>> hello react

[after]
백틱(\`)으로 문자열을 표현할 수 있으며 특수 기호 $를 사용해서 변수 또는 식 포함
const str1 = "hello";
const str2 = "react";
const combined = `${str1} ${str2};`
>>> hello react

2. 전개 연산자(Spread Operator)

[before]
배열의 일부 요소만 잘라내거나 연결하려면 배열 인덱스와 함께 배열 내장 함수들을 사용
var arr1 = ['SUN', 'MON'];
var arr2 = ['TUE', 'WED', 'THD'];
var combined = arr1.concat(arr2);
>>> ['SUN', 'MON', 'TUE', 'WED', 'THD']

[after]
전개 연산자(...)를 사용해 나열형 자료를 추출하거나 연결
const arr1 = ['SUN', 'MON'];
const arr2 = ['TUE', 'WED', 'THD'];
const combined = [...arr1, ...arr2];
>>> ['SUN', 'MON', 'TUE', 'WED', 'THD']

3. 변수 선언

[before]
var로 변수 선언시 변수스코프가 호이스팅되어 무조건 Global variables가 된다고한다.
(함수 레벨 스코프)
var str = 'hi';

[after]
let, const로 변수 선언시 함수스코프 안에서만 유효한 local variables가 되거나
함수 밖에서 선언시 Global variables가 될 수 있다!
(블록 레벨 스코프)
let - 읽거나 수정 가능(가변 변수)
const - 읽기만 가능(불변 변수)

• 변수선언시 var을 남발하게되면 선언되기도 전에 호출이 되는등 로직상의 문제를 유발할 수 있으며, 항상 global variables로서 메모리 낭비를 초래 할 수 있으므로 되도록 let, const를 쓰도록 한다.

4. 화살표 함수(Arrow Function)

[before]
function 함수명() { content }; // 함수 선언식
var 함수명 = function() { content }; // 함수 표현식

function add(a, b) {
    return a + b;
}
var add = function(a, b) { // 익명 함수
    return a + b;
}

[after]
화살표 함수르 사용해 익명 함수를 선언하여 변수에 대입
let add = (a, b) => {
    return a + b;
};
let add = (a, b) => a + b;

5. 개체 확장/구조 분해

객체 확장
[before]
객체와 객체의 값을 선언하기 위해 키 이름과 값을 각각 할당
var x = 0;
var y = 0;
var coord = { x: x, y: y };

[after]
변수 선언 형식이 간편 (key와 value가 같은 문자면 하나만 기입하면됨)
const x = 0;
const y = 0;
let coord = { x, y };

구조 분해
[before]
일일이 변수를 생성하고 값을 할당
var list = [0, 1];
var item1 = list[0];
var item2 = list[1];


[after]
선언과 동시에 할당
const list = [0, 1];
const [item1, item2] = list;

이정도가 필자가 종종 써먹던 ES6문법들인데 인터넷에 찾아보면 더 많은 문법들이 있지만 일단은 사용한적도 없고 이해도 잘 안가니 내가 감당할 수 있는 문법들로 정리를 해보았다.

결론

이제 다시 한주가 시작되는데, 이제 남은건 주특기 기초1주, 심화1주, 숙련1주 그리고 미니프로젝트1주, 클론코딩1주, 실전프로젝트6주, 지원하기1주가 남았다. 하나씩 차근히 해나가면 충분히 할 수 있을거같다!