[WIL] 2주차 회고

Mark·2022년 8월 14일

WIL

2주차는 프로그래밍, 알고리즘 문제 풀이 주차였으며, 알고리즘 문제 풀이에 필요한 자바스크립트의 개념들과 리액트에 들어가기 전 꼭 알고 있어야 하는 자바스크립트 기본에 대해서 공부했던 시간이었다.

공부한 내용

1. ES(ECMASCRIPT)

ECMASCRIPT의 약어이며, 자바스크립트의 표준, 규격을 나타내는 용어이다.
뒤에 숫자는 버전을 뜻하며, ES5(2009)년 ES6(2015) 출시되었다.
버전별로 확인하면 ES6 이후에 매년 업데이트가 되고 있지만 ES5와 ES6 사이에는 시간 차가 있다.
ES6에 많은 기능들이 추가되었다.
취업 시, ES6+(ES6이후로, 모던 자바스크립트) 이상을 요구하고 있다.

ES5와 ES6의 차이

1) let, const키워드 추가

기존 var 키워드는 함수 레벨 스코프를 가지며 암묵적 재할당이 가능했다.
이에 대한 단점을 보완하기 위해 블록 레벨 스코프를 가지며 재할당이 가능한 let, const 키워드가 추가되었다.

2) Arrow function 추가

화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있다.
가독성 및 유지보수성이 올라갔다.
화살표 함수는 lexical this를 따른다.
화살표 함수는 매개변수가 하나일 때 () 괄호 생략 가능 및 {} 중괄호 및 return 생략도 가능하다.

// ES5
function sum(a,b){
	return a+b;
}

// ES6
const sum = (a,b) => a+b;

3) Default parameter 추가

기존에 함수의 매개변수 초기값을 작성하려면 내부 로직이 필요했으나, Default parameter가 추가되어 내부 로직 없이 기본 값을 줄 수 있다.

4) Template literal 추가

ES6 이전 문자열 관리의 불편함을 보완하기 위해 Template literal 이 도입되어 간편해졌다.
사용법은 ``(back tic) 이다.
${} 중괄호 앞에 달러 표시로 자바스크립트 표현식 삽입이 가능하다.

5) Multi-line string

문자열이 라인을 넘어가게 되면 관리가 불편했음, ``을 사용하면 여러 라인의 문자열도 쉽게 사용 가능

6) Class

객체 생성 방식 중 하나, 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍이다.
클래스 기반의 객체지향 프로그래밍에 익숙한 개발자들에 요청에 의해 생기지 않았나 추측
자바스크립트에서 클래스는 객체를 생성하는 함수라고 생각
단, 생성자 함수와 동일하게 동작하지 않으며, 클래스가 엄격하며 호이스팅이 발생하지 않는 것처럼 동작하는 let, const 키워드처럼 동작함

7) Module

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

8) Destructuring

디스트럭쳐링이란 비구조화, 파괴를 뜻하는 단어이다.
크게 객체나 배열에서 사용해서 개별 변수에 할당하는 것

// array 디스트럭처링
const arr = [1,2,3];
const [1,2,3] = arr;

// object 디스트럭처링
const obj = { name: 'pingu', age: 10 }
const { name, age } = obj;

우항에 존재하는 자료구조를 파괴하여 좌항에 있는 변수들에 각각 할당
배열은 순서가 중요하고 객체는 키 값이 중요하다.
디스트럭처링 할당을 통해 자료구조에서 일부 또는 전체를 편하게 사용할 수 있다.
rest와 spread 문법도 추가되어서 같이 활용하면 가독성 높고 성능 좋은 코드를 작성할 수 있다.

9) Promise

비동기통신에 있어 기존에는 콜백함수를 사용한 콜백 패턴을 사용
결과론적으로 콜백 헬을 발생
이를 해결하기 위해 프로미스가 도입되었고, 프로미스 후속처리 메서드를 통해 에러 처리를 효과적으로 할 수 있게되었다.

10) String Method(includes, startsWith, endWith)

포함되어 있는지 includes, 시작되는지 startsWith, 끝나는지 endWith문자열 메서드가 추가됨
해당 메서드는 true/false로 리턴, 검사 로직 수행 가능

2. 알고리즘 문제 풀이 시 필요한 개념

알고리즘 문제 풀이 시 필요했던 개념에 대해 공부하고 알아보았다.

자바스크립트 map 함수

자바스크립트 join 함수

자바스크립트 제곱근 함수(Math.sqrt())

자바스크립트 거듭제곱

자바스크립트 정수, 실수 판별

자바스크립트 while 문

자바스크립트 reverse() 함수

자바스크립트 문자열→배열로 구조 바꾸기

자바스크립트 형변환

자바스크립트 배열에서 특정 인덱스 찾기(indexOf)

자바스크립트 배열내 최대, 최소값 찾기

자바스크립트 특정 인덱스 값 삭제, 교체, 추가

자바스크립트 .push() 함수

3. 자바스크립트 기본기

자바스크립트 기본기에 대해서는 정리를 하였으나, 조만간 벨로드에 다시 정리해서 업로드 시킬 예정이다! 아무래도 아직 완벽히 이해되지 않았다고 생각되는 부분은 실행 컨텍스트와 변수 은닉화, 클로저에 대해서 개념적으로는 이해가 되는데 적용시키고 활용하기엔 아직 완벽히 이해되지 않았다고 생각이 된다. 그래서 복습하고 깊이 있게 이해해서 다시 정리하고 싶다!

[JavaScript] 느슨한 타입의 동적 언어
[JavaScript] 자료형
[JavaScript] 비교 연산자
[JavaScript] 형변환
[JavaScript] undefined와 null 차이점
[JavaScript] 기본형, 참조형
[JavaScript] 변수 선언과 데이터 할당
[JavaScript] 불변 객체를 만드는 방법
[JavaScript] 얕은 복사와 깊은 복사
[JavaScript] 스코프, 호이스팅, TDZ
[JavaScript] 함수 선언문과 함수 표현식에서 호이스팅 차이
[JavaScript] 실행 컨텍스트와 콜 스택
[JavaScript] 스코프 체인, 변수 은닉화

4. 부족했던 점, 어려웠던 문제(알고리즘)

1) 음양 더하기 문제

특정 배열에서 인덱스를 가져와 다른 배열에서 같은 인덱스 값을 뽑아내는 부분에서 고민을 많이 했다.
for문 돌려서 인덱스를 찾아내고 그 인덱스를 다른 배열에 적용시키면 되는 부분이었다.

2) 내림차순 배치하기

reverse()를 사용해서 내림차순으로 배치했는데, 큰 숫자 → 작은 숫자 개념이 아닌, 배열을 뒤집은 형태로 출력됐다.
이 부분을 해결하기 위해서 특정 배열을 sort()시키고 다시 reverse() 시키니까 배열 반전이 아닌, 큰 숫자 → 작은 숫자 형태로 변환 시킬 수 있었다.

2주차 프로그래밍 과정을 마치며

2주차에 팀장을 맡게 되었다. 처음 팀장이 되었을 때는 알고리즘에 대해 자신감도 없고, 누구보다 배워야 하는 입장과 실력이라서 어떠한 기준으로 팀장이 되었을 지, 잘 이끌어갈 수 있을지 걱정이 앞섰다.

하지만 기왕 팀장이 된 거 자기 검열과 의심보다는 책임감으로 임해보자 라고 생각을 고쳐먹었다. 피할 수 없으면 즐겨야지 어쩌겠는가!

결론적으로 이번 주차에서 팀장을 하고 보니, 하길 잘했다 라는 생각이 든다. 알고리즘에 대해서 자신감이 많이 부족했기 때문에 그동안 해야지 싶으면서도 기피했던게 알고리즘이었다.

하지만 팀장으로서의 역할이 주어지니 책임감이 더 생기고, 이번 주차에 풀어야 하는 문제들을 내 것으로 만들어서 팀원분들에게 양질의 설명을 하고 싶다는 욕심이 생겼다.

그래서 내가 담당한 문제뿐만 아니라 다른 팀원분들이 담당한 문제들도 풀어보고, 그 풀이에 필요한 개념들 문제 해결을 위한 접근 방식들을 스스로 고민하고 공부하며 나 또한 자연스럽게 알고리즘에 대한 두려움이 허물어질 수 있었던 시간이었다.

무엇보다도 문제 풀이를 하는 시간을 통해서 정확히 내가 알고 있는 부분과 모르고 있는 부분이 파악이 되었고, 팀원 분들의 풀이를 보면서 팀원분들은 어떻게 문제 해결에 접근했고 푸셨는지, 나와 다른 풀이 방식들 그리고 개념적으로 설명을 더 해주셨으면 하는 부분에 대해 적극성을 가지고 질문하려고 노력했다.

예전에는 “모르면 부끄러운 것"이라고 생각했었는데, 모르는 것을 부끄러워하지 않고 질문한다면 서로에게 더 공부가 될 수 있음을 깨닫게 된 시간이었다.

아쉬웠던 점

팀장으로서 더 많은 개념들을 공부하고 질문을 더 유도했으면 어땠을 까라는 아쉬움이 든다. 자기주도학습 시간으로 구성했고, 서로가 담당한 풀이만 진행했던 점은 좀 아쉽다. 팀원 분들 모두가 성장할 수 있었던 시간이었으면 좋겠다!

결론!

이번 주차에 알고리즘 팀장을 하면서 나에게는 성장할 수 있는 시간이었다.

알고리즘에 대한 두려움이 “하면 된다” 라고 생각을 하니까 약간의 자신감을 얻게 되었고, 아직은 실력적으로 많이 부족하고 공부가 필요하지만 알고리즘에 대한 두려움을 버린 것만으로도 성장했다고 생각한다.

팀원분들에게 내가 좋은 팀장이었는지는 잘 모르겠지만 팀원분들도 이번 시간이 성장할 수 있었던 시간으로 생각된다면 좋겠다! 서로 부족한 점을 채워주고 공유할 수 있어서 나 또한 팀원분들에게 많이 배웠던 시간이었다.

참고 자료

Mark

개인 공부 정리

이전 포스트

[JavaScript] 변수 선언과 데이터 할당

다음 포스트