V-logue

[항해99] WIL(Week I Learn) - 2주차 본문

항해 99

[항해99] WIL(Week I Learn) - 2주차

보그 2022. 5. 22. 23:01

다사 다난 했던, 2주차가 끝났다.

 

저번주 금 ~ 이번주 목까지 이어진 알고리즘 마라톤은 기본적인

 

자바스크립트의 문법들을 이해하는데 좋은 도움이 됐다.

 

reduce, map, filter, 삼항연산자 등등

 

다양한 메서드들을 사용해보고 이를 토대로 문제들을 해결함으로

 

자바스크립트의 문법들에 대해서 더 깊은 이해를 할 수 있던 시간이었다.

 

28개의 문제를 모두 풀었다는 것에 적당히 고무적인 생각이 든건 덤이다.

 

한가지 아쉬웠던 건 마지막 알고리즘 시험에서

 

문제를 제대로 읽지 않아 쉽게 풀 수 있던걸 틀렸다는 것이다.

function solution(n){

    let sum = []; 
    let x = n.toString().split('').map(Number).sort().reverse(); // sort를 빼면 정답일 것이다.
  
    
    let y = x.reduce((acc, cur) => acc + cur,0);
   
    for(var i = 0; i < x.length; i++) {
        
        sum +="+" + x[i] 
        
    }
    var rsum = sum.slice(1) 
    
    return '"' + rsum + "=" + y + '"'  
  }
  console.log(solution(718253))

너무나도 자연스럽게 sort를 넣어서 오름차순으로 정렬해버린 것이 

 

탈락의 원인이 아닐까 싶다.

 

다음부터는 조금 더 꼼꼼하게 문장을 읽고 접목시켜야 겠다는 교훈을 얻었다.

 

백엔드 개발자의 사소한 실수가 큰 버그로 이어질 수 있다는 점을 고려한다면,

 

저런 실수는 사실 사소한 것이 아닌 큰 문제라는 생각을 했다.

 


알고리즘 마라톤 주간이 끝나고, 시작된 주특기 기본과정은 강의를 듣는 것으로 시작된다.

 

3주차의 개인과제는 로그인 기능없는 블로그 구현인데,

 

아마 미니프로젝트를 주도적으로 이끌었던 사람들이라면, 쉽사리 만들 수 있을 것이다.

 

하지만, 나는 주도적으로 이끌지 않았기 때문에 강의부터 열심히 들었다.

 

현재 3주차강의 까지 듣고 홈페이지 뼈대를 만들고 있는데,

 

그냥 남이 만든걸 가져다 쓰는게 가장 현명하다는 생각을 했다.

 

일단 기능구현을 할 수 있다면 그것으로 충분하지 않을까? 라는 생각이 나를 지배하고 있다.

 

주위에 나보다 먼저 개발자의 인생을 시작한 친구들이자 선배인 녀석들에게 물어보니

 

로그인없는 블로그 구현은 아주아주 껌이라고 한다.

 

눌러붙어서 떨어지지 않는다면, 이것도한 껌이라 부를 수 있다.

 


ES란? // WIL의 키워드,
JavaScript, ECMA international
ES란 ECMA Script의 약자다. 
ECMA는 표준을 위해 자바스크립트를 ECMA(European Computer Manufactures Association)라는 정보와 통신시스템의 비영리 표준 기구에 제출하였고
표준에 대한 작업을 ECMA-262란 이름으로 1996년 11월에 시작해 1997년 6월에 채택하게 됐다.
이러한 표준은 크로스 브라우징 이슈 때문에 시작하게 됐는데,
크로스 브라우징 이슈란 `기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈`를 말한다.
이러한 이슈를 해결하기 위해 등장한 것이 바로 ECMA Script인 것이다.
ECAM Script를 줄여서 ES라고 부른다.


스크립트 언어로서, 특수한 목적이 아닌 이상 대부분의 웹 브라우저에 인터프리터가 내장되있다.

첫 탄생은 Netscape의 브랜든 아이크가 개발한 것으로 시작됐다.
처음에는 Mocha라는 이름이었지만 4달 만에 LiveScript라는 이름으로 개명하고 다시 3달 후에는 JavaScript라는 이름이 되어 오늘날까지 이어지고 있는데, Java의 명성에 업혀가려는 심보라는 합리적 의심이 존재한다.

JavaCript의 특성에 대한 설명은
내 블로그,
https://vlogue.tistory.com/47
에가서 확인해주길 바란다.
나름 정성들여 찾아서 작성했기 때문에,
내용적으로 들어갈 내용은 다 들어간 느낌이다.

ECMA Script의 주요 라이브러리는
jQuery: DOM Manipulating 라이브러리. 사실상 JavaScript 개발에 필수였던 라이브러리였으나 리액트, 앵귤러 등의 프레임워크의 생산성이 워낙 높다 보니 2010년대 후반부터는 사실상 레거시가 되었으며 아주 간단한 웹사이트에서만 쓰이고 안쓰는 추세다. 
React: Facebook에서 만든 프론트엔드용 오픈소스 라이브러리다. 단방향 데이터 흐름과, Virtual DOM 개념을 도입한 UI 컴포넌트 라이브러리. 생산성이 높고, DOM 업데이트에 있어서 성능이 매우 빨라 동적인 웹 애플리케이션 구성에 유리하다. 그리고 이러한 동적 웹이 모던 웹 애플리케이션의 필수 요소가 되어버린만큼 출시 이후 꾸준히 점유율을 늘려가며 업계 표준 라이브러리 중 하나로 자리잡았다. 최근에는 React Hooks이라 불리는 메소드가 지원되면서 생산성이 더 좋아졌다. html로 뷰를 작성해야하는 Angular와는 다르게 JSX라는 문법을 지원하면서 JavaScript만으로 애플리케이션을 작성하는게 가능하다.
Vue.js: 중국계 미국인 에반 유가 만든 사용자 인터페이스를 만들기 위한 프론트엔드용 프레임워크이다. 굉장히 자유롭고 유연하게 추가 기능들을 불러올 수 있다는 특징이 있으나 추가 기능들을 무분별하게 사용하는 경우 안정성을 떨어뜨릴 수 있다.
Node.js: 브라우저 안에서만 작동하던 JavaScript를 브라우저 외의 환경에서 작동할 수 있게 만들어 준 런타임 환경이다.
Express.js: Node.js 환경을 기반으로 만들어진 웹 애플리케이션 프레임워크. 주로 JavaScript로 백엔드를 개발할 때 사용된다.
https://namu.wiki/w/JavaScript?from=ECMAScript#s-7

현재 웹브라우저에서 사용할 수 있는 유일한 언어라고 한다.
웹 환경에서는 JavaScirpt가 거의 강제되고 있고, 최종적으로 Script로 번역되어
실행되기 때문에 웹 개발자라면 결국 자바스크립트로 귀결된다.

웹 환경의 대표적 마크업 언어인 Html과 CSS를 완전히 대체할 수 있다.

사람들이 흔히 ES5와 ES6를 
2015년에 나온것이 ES5고, 2016년에 나온것이 ES6라고 생각하는 경향이 있는데,
ES5는 2009년에 발표됐고, ES6는 2015년에 발표됐다. 
ES5와 ES6의 대표적인 차이점으로 아래 항목들을 들 수 있다.

 

  • 템플릿 리터럴

템플릿 리터럴이란 작은 따옴표나 큰 따옴표 대신 백틱(`)으로 문자열을 감싸 표현하는 기능을 말한다.
템플릿 리터럴을 사용하면 플레이스 홀더(${variable})를 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다.

// ES5
var main = "vlogue";
var blog = "tistory";

console.log( main + "." + blog + "." + "com");

// ES6

var main = "vlogue";
var blog = "tistory";
console.log(`${main}.${blog}.com`);
  • 화살표 함수

전통적인 함수표현(function)의 간편한 대안이다.                                                                                                     하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없다.

  • this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없다.
  • new.target키워드가 없다.
  • 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없다.
  • 생성자(Constructor)로 사용할 수 없다.
  • yield를 화살표 함수 내부에서 사용할 수 없다.
// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.

// ES5
var cal = function(x) { return x % 3 };
console.log(cal(100)); // 1

// ES6
var cal = x => x % 3;
console.log(cal(100)); // 1
  • this

this에 대해서는 내가 찾아보고 이곳에다 정리할 수도 있지만, 아주 좋은 게시글이 있기 때문에 이 글을 참고하는 것을추천한다.https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb

 

https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb

 

www.zerocho.com

결국 내가 아는 것을 정리하는 글이겠지만, 한편 글이기 때문에 누군가가 볼수도 있다는 점에서 더 쉬운 이해를

동반한 지식을 태그하는 것이 좋다고 생각했다.

  • 변수선언

ES6전 기존 버전에서 변수를 선언하는데 사용됐던 var는 중복 선언과 재할당이 가능했다.

var name = "tistory.blog"
var name = "naver.blog"

console.log(name); // naver.blog 중복선언의 예시이다.

이런 var는 호이스팅의 문제와 함수레벨 스코프 등의 문제를 극복하기 위해서 ES6에서는 let과 const키워드를 추가했다.

 

let은 블록 레벨 스코프를 금지하며, 중복 선언 금지, 호이스팅을 막기 위해 실행 컨텍스트가 생성됐다고 하더라도 메모리가 할당되지 않아 참조에러가 발생한다.

let은 이와는 별개로 var의 기능 중 하나인 재할당의 기능을 가지고 있다.

한편, const는 이런 let의 기능 중 재할당의 기능마저도 금지하고 있다. 

const는 상수, 즉 변하지 않는 수로 고정값을 의미한다. const 로 선언된 변수의 값은 변하지 않는다.

let name = "tistory.blog"
let name = "naver.blog"

console.log(name); // SyntaxError: Identifier 'name' has already been declared
			// 이미 선언됐다고 나온다.
            
let name = "tistory.blog"
name = "naver.blog"

console.log(name); // naver.blog , name의 값이 재할당 됐다.

const name = "tistory.blog"
name = "naver.blog"

console.log(name); // TypeError: Assignment to constant variable.
			// 상수에 값을 적용하려고 했기에 에러가 발생했다.
  • 모듈

모듈이란 재사용하기 위한 코드 조각을 의미한다.                                                                                                      세부적인 부분은 캡슐화를 시키고 API부분만 외부에 노출된 코드 조각들을 말한다.                                                       모듈은 모듈 스코프를 가지며 export, import를 키워드로 사용한다.

  • 클래스 

자바스크립트에서 클래스의 ES6에서 소개되었다.

그전에는 클래스를 정의하지 않고 객체를 정의해서 사용하는 방법이 있었고

객체를 만들때 함수를 이용해서 템플릿(클래스 같은 역할)을 만드는 방법이 있었다.

자바스크립트에서 클래스는 문법적 설탕이라는 생각으로, 객체를 생성하는 함수라고 생각한다.

단, 생성자 함수와 동일하게 움직이지는 않으며 엄격하게 호이스팅이 동작하지 않는

let이나 const와 같은 변수처럼 동작한다.

 


개인과제도 달려보자

Comments