-
[WIL]항해99 2주차 알고리즘 코딩테스트 회고록항해99[WIL] 2021. 11. 14. 22:18
항해 99 부트캠프
2주차 알고리즘 코딩테스트 (11 . 8 월 ~ 11 . 13 토 총 5일간)
목차
- 알고리즘 코딩테스트 후기
- Javascript ES란? (ECMA script)
- Javascript ES5와 ES6의 차이
- 2주차 소감
1. 알고리즘 코딩테스트
1주차 미니 프로젝트를 마치고 2주차 알고리즘 코딩테스트를 시작했다. 9시부터 줌으로 2주차 알고리즘 테스트에 대한 방식의 설명을 듣고 게더로 돌아가서 새롭게 짜여진 팀에 가서 인사를 나누고 연습을 할 28문제를 받아서 첫번째 문제부터 풀어보려고 들어갔는데, 문제 설명과 제한 조건을 읽어봐도 이해가 잘 되지 않았다. 그래서 구글링을 통해서 함수며 객체며 메소드며 여러가지를 찾아보면서 코딩을 해봤지만 돌아오는 답은 오답이었다.
조언을 듣고 한 시간이 지나는 문제들은 과감히 버려서 풀이를 보고 그 코드를 왜 이렇게 썼는지 해석해보면서 이해를 했으면, 참고를 해봐서 다시 코딩을 이어나갔다.솔직히 28문제 중에서 10문제하고 조금 넘게는 풀이를 본 것 같다. 그렇게해서 28문제를 다 풀어보고 초기화를 시킨 다음에반복적으로 풀었다.
마지막 토요일 16시부터 개인별 코딩테스트가 있어서 지정된 자리에 앉아서, 문제를 1분 동안 풀고제출 형식에 맞게 문제 풀이 영상도 찍어서 올리려는 찰나에 리턴값에 내가 아는 더한 값이 아니라 계산식도 출력해야하는 것이었다.
그래서 앉아서 푸는데 사람들은 계속해서 빠져나가고, 나는 홀로 남아서 문제를 계속 풀었는데 시험 종료 시간이 가까워져서 마음이 초조해져서 제출은 해야하니까 그냥 템플릿 리터럴을 사용해서 문자열로 나열해서 제출했다.
더한값은 구해서 괜찮다고 생각했지만, 마지막 그 문자열이 너무 맘에 걸렸고 당연히 과락되는 것을 예상하고 있는 중이다. 과락이 누적이 되면 실전 프로젝트에 참여하지 못한다는데 너무 걱정이다.
2. Javascript ES란? (ECMA script)
JavaScript가 넷스케이프 커뮤니케이션즈로부터 개발되고 나서, MS에서 JScript를 개발하였다.
두 언어는 서로 호환되지 못하는 경우가 있어 크로스 브라우징 이슈가 발생하였다.크로스 브라우징 이슈 : 기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈
이 크로스 브라우징 이슈를 해결하기 위해 JavaScript를 표준화를 했다.
그게 바로 ECMAScript 이다.
(ECMAScript라고 불리는 이유는 비영리 표준화기구인 인터내셔널이 Javascript 표준화 요청을 했기 때문이다.)우리가 흔히 사용하는 ES5, ES6은 버전 숫자를 붙여 ECMAScript를 줄여쓰는 말이다.
참고로 2015년에 나온 것이 ES5이고 2016년에 나온 것이 ES6라고 착각할 수 있는데,
ES5는 2009년에 발표되었고 ES6는 2015년에 발표되었다.3. Javascript ES5와 ES6의 차이
ES5와 ES6의 큰 차이점은
1. 템플릿 리터럴
ES6부터 새롭게 등장한 템플릿 리터럴. 덕분에 문자열 표현이 훨씬 간단해졌다.
템플릿 리터럴이란 작은 따옴표나 큰 따옴표 대신 백틱(`)으로 문자열을 감싸 표현하는 기능을 말한다.
템플릿 리터럴을 사용하면 플레이스 홀더(${variable})를 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다.2. 화살표 함수
ES6부터 새롭게 등장한 화살표 함수로 함수 선언법이 좀 더 간단해졌다.
ES5
함수 선언식
copy javascriptfunction str(arg1, arg2) { console.log("aa"); }
생성자 함수(많이 사용하지 않음)
copy phpvar str = new Function("arg1", "arg2", "console.log('aa')");
함수 리터럴(익명 함수를 만들 때 사용)
copy javascriptvar str = function(arg1, arg2) { console.log("aa"); };
❗️ 참고
여기서 익명 함수란 말 그대로 이름이 없는 함수를 뜻한다.
ex) var bar = function (a, b) {...};
반대로 기명 함수는 이름이 있는 함수이다.
ex) var bar = function funcName(a, b) {...}ES6
copy coffeescriptvar str = (arg1, arg2) => { console.log("aa"); };
copy javascriptvar str = arg1 => console.log(arg1);
화살표 함수에 인자(argument)가 하나밖에 없다면 괄호를 생략할 수 있다.
또한 한줄로 표현이 가능하다면 위와 같이 중괄호({})를 생략할 수 있다.copy swiftvar str = func => ({ id: "123" });
화살표 함수가 객체를 반환한다면 위와같이 표현해줄 수 있다.
3. this
ES5
ES5같은 경우 객체 내에 있는 메소드를 실행 시 this는 메소드가 선언된 해당 객체를 가리킨다.
하지만 객체 안에서 선언된 함수의 this는 해당 객체가 아닌 window를 바라보고 있기 때문에 함수 안에서 this.name, this.age 를 하여도 아무 값이 나오지 않는다.
이러한 경우 해결방안으로 innerInfo.call(this) 를 통해 this 를 바인딩 시켜주거나 this를 해당 변수에 담아서 var self = this 와 같은 방식으로 접근하면 사용하면 된다.ES6
ES6에서의 this 는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다.
생성자 함수의 인스턴스의 경우, this는 인스턴스를 가리킨다.
화살표 함수를 쓰면 함수가 선언된 스코프에 자동 바인딩이 된다.
4. 변수선언
ES5
ES5에선 var 밖에 존재하지 않았다. var 는 변수를 선언할 때 사용되는 키워드로,
재할당과 재선언에 굉장히 자유롭다.ES6
ES6부터 let, const가 추가되었다.
let은 한번 선언된 변수에 동일한 이름으로 선언할 수 없다.
하지만, 값은 재할당 할 수 있다.const는 한번 초기화된 변수에 재할당/재선언할 수 없다.
그리고, let, const는 블록 스코프 또는 Function 스코프 내부에 선언되면 해당 스코프 밖에서 안에 있는 변수를 참조할 수 없다.
쉽게 설명하자면, 중괄호로 묶인 부분 내부에 선언된 let, const를 중괄호 외부에서 참조할 수 없다는 것이다.
밖에서 안에 있는 const, let은 참조할 수는 있다.
var는 Function 스코프는 내부에 선언된 var를 외부에서 참조할 수 없지만
블록 스코프에선 내부에 선언되어 있어도 외부에서 참조 가능하다.
정리하자면 다음과 같다.
재 선언 재 할당 Block scope Function scope var O O 외부에서 내부 참조 가능 외부에서 내부 참조 불가 let X O 외부에서 내부 참조 불가 외부에서 내부 참조 불가 const X X 외부에서 내부 참조 불가 외부에서 내부 참조 불가 5. 모듈
ES5 이전에는 각 기능별로 JS 파일을 나누고 개발 및 관리하는 것이 불가능했다.
ES5
ES5 에선 require 를 통해 모듈화를 할 수 있었다.
예를 들어 아래와 같은 구조인 경우,
copy nginxjs / - - -script.js | --- slider.js
copy xml<script> src = "slider.js"; </script> <script> src = "script.js"; </script>
copy javascriptvar slider = require(./slider.js) // 혹은 require(./slider)
위와 같이 함으로써, slider.js를 임포트할 수 있었다. 이러한 방법으로 파일 자체를 사용할 수 있다.
ES6
ES6 부터는 import/export 로 모듈을 관리할 수 있다.
모듈은 실현가능한 특정 프로그램의 그룹니다.
그리고 이것은 다른 파일의 변수, 함수를 참조한다.
클래스와 같은 모듈이 로딩될 때, import와 export를 이용해 사용될 수 있다.하나의 모듈만 공유할 때
로드 모듈
copy coffeescriptimport 'import to loadname' from '파일 경로'
아웃풋 모듈
copy coffeescriptexport default 'module'
copy coffeescriptimport Carousel from "./carousel"; cosnt carousel = new Carousel();
copy javascriptexport default class Carousel { constructor() { this.calc(); } calc() { console.log(10); } }
여러 모듈을 사용할 때
아웃풋 관점에서, export는 사용하고 싶은 곳에 붙이고, import는 다음과 같이 사용하면 된다.
copy coffeescriptimport {a1, a2, ...} from '파일 경로'}
copy javascriptimport { multi, SuperMulti } from "./Multiplay"; console.log(multi(5)); // 50 console.log(SuperMulti(6)); // 600
copy javascriptexport const i = 10; export function multi(x) { return i * x; } export function superMulti(x) { return i * x * 10; }
만약 모등 모듈을 전달받기 위해서는 import를 아래와 같이 작성하면 된다.
copy kotlinimport * as ‘object name’ form ‘파일 경로’
copy javascriptimport * as lib from "./multiply"; console.log(lib.multi(5)); // 50
6. 클래스
ES5
ES5에선 class라는 키워드는 없었지만 프로토타입을 통해 실현 가능했다.
ES6
ES6에서는 class 키워드를 사용해서 선언할 수 있다.
클래스 상속
클래스의 상속과 오버라이딩은 super를 사용해서 수행할 수 있다.
4. 2주차 알고리즘 테스트 소감
굉장히 어려웠다. 나는 내가 1주차 미니 프로젝트도 원하는 기능을 구현을해서 잘할 줄 알았다. 근데 2주차를 접어들면서 너무어려워서 진짜 잠도 줄여가면서 코딩테스트 문제를 반복을 해보고, 이해가 안되면 직접 입력값을 넣어가면서 이해를 했다.
근데 마지막 개인 코딩 테스트 하는 날에 당황한 나머지 머리가 백지가 되니까 생각이 안난건지 여태 배운 것을 응용을 못했다. 첫날 부터 개인 코딩 테스트 하는 날까지 약200시간을 쏟았는데, 원하는 결과를 얻지 못한 생각이 들어서 내 자신한테 너무 실망했다. 끝나고 나서 사람들과 얘기를 했는데 나랑 정말 비슷하게 풀은 분도 계시고, for문을 한번 더 쓴다던지, if문을 쓴다던지 여러 방법으로 구현해낸 분들이 계셨다. 테스트가 오픈북인데도 불구하고 내 구글링 실력이 떨어지는 것도 그렇고 응용력도 그렇고 너무 바보 같았다.
하지만 이미 지난일을 돌이킬 수 없으니 다음주 3주차부터 5주차까지 주특기 기본/심화를 들어가기 위해서 전날 잘 준비해서과락이 누적돼서 실전 프로젝트에 참여 못하고 수료 못하는 일이 없도록 정말 정신을 차리고 재개를 꿈꿔야겠다.
'항해99[WIL]' 카테고리의 다른 글
[WIL]항해99 5주차 주특기 심화 회고록 (0) 2021.12.05 [WIL]항해99 4주차 주특기 숙련 회고록 (0) 2021.11.29 [WIL]항해99 3주차 주특기 기본 회고록 (0) 2021.11.21 [항해99 4기] 알고리즘 기초 주차 S.A. (0) 2021.11.11 [WIL]항해99 1주차 미니 프로젝트 회고록 (0) 2021.11.08