[WIL-002] 자바스크립트 기초 언어 주간

🦄 WIL : 자바스크립트 기초 언어 복습 + 알고리즘 

✨진행 날짜 : 4/2 ~ 4/8일

 

이번 주는 자바스크립트 기초 언어 주간이다. 온보딩 스터디에서 학습했던 내용들을 바탕으로 한 번 더 복습한다는 생각으로 진행했다. 마지막 이틀정도는 알고리즘 주간으로 넘어가 프로그래머스 알고리즘 문제를 풀었다. 이번 주 회고를 작성해보려고 한다.

---

 

이번주 목표, 달성 여부

1. Git을 통해 협업하는 기본적인 방법 - fork와 full requests, 협업 테스트 해보기 ✅(완료)

2. 자바스크립트 기초 강의 1~5주차 🟡(진행중) 

3. 알고리즘 풀이 총 26문제 풀이✅(완료)

 

 

무엇을 공부했나?

 

이번주에 공부한 것들은 다음과 같다.

1. Git을 통해 협업하는 기본적인 방법 - fork와 full requests, 협업 테스트 해보기 

팀원들과 Github 특강을 듣고 협업 테스트를 해봤다. 지난 토이 프로젝트 때 아무것도 모르는 상태로 깃헙으로 협업하다 보니 외부 레포저장소를 내 레포로 가져오는 방법을 몰라 굉장히 번거로웠었는데 fork의 개념을 알게됐다.

팀장님의 레포를 팀원들이 fork하여 내 레포 저장소로 가져온 뒤, 내 로컬에 clone하고 새 branch에 작업하였다. 작업한 내용들을 push하고 원본 저장소에 pull requests 요청을 보내면 팀장님이 수락하면 원본 저장소에 push가 완료되는 과정을 거쳤다.

❗ 여기서 가장 중요한 요점이라고 생각된 부분은 (1) collaborate로 여러 사람에게 원본 저장소의 수정 권한을 부여할 경우, 원본 저장소가 굉장히 난잡해질 수 있다. (2) fork하여 내 로컬에서 작업한 내용을 원본 저장소에 pull requests하는 과정으로 진행하여야 내 실수라던지, 외부에서 마음대로 원본 저장소를 변경하는 등의 원본 저장소에 큰 영향을 미치지 않고 push 권한자 하에 필요한 부분만 push하여 안정적으로 프로젝트를 관리 할 수 있다. (3) push 권한은 아무에게나 부여하지 않는다. 책임자만 가지고 있는 것이 좋다. 라는 점이었다. 

또 현업에서는 Issue를 등록해 프로젝트 기능사항을 구현할 때마다 Issue관련 내용으로 commit, branch생성, pull requests를 한다고 알고있어 기술 매니저님께 Issue등록에 대해서도 질문했다. Issue 등록은 원본 저장소에서 진행하며, Issue 권한 또한 push 권한과 같이 책임자가 권한을 부여할 수 있다고 한다. Issue권한과 push권한은 별개라고 한다.

공부한 내용들을 기반으로 다음 포스팅에 정리해 보았다.

[Git & GitHub] 깃허브로 협업하기 - fork / pull requests

 

2. 자바스크립트 기초 강의 1~4주차

3일정도 이번주 목표치인 자바스크립트 기초 강의를 들었다. 1~2주차 까지의 강의는 지난시간 공부했던 부분들을 한번 훑는 정도의 난이도라 무난하게 들었지만, 3주차 강의 부터 정말.... 헬...이었다.... 갑자기 난이도가 확 뛰더니 데이터 타입과 메모리, 실행컨텍스트와 this바인딩에 관한 내용들이 나왔다. 솔직히 자바스크립트를 공부하면서 가장 어려운 개념들이라고 생각했던 내용들이 3주차에 한 번에 몰려 나오니 절대 하루안에 소화하는 것은 불가능했다... 1~3주차 까지가 원래 이번 주 달성 목표여서 모두 완강하긴 했지만, 3주차는 2회독 3회독을 해도 솔직히 강의 내용만으로는 잘 이해가 가지 않는다. 덕분에 책의 필요성을 좀 느끼고 책도 구매했다.

일단 지금까지 4주차 강의까지 완강했으니, 앞으로는 못 마친 5주차 강의를 한번 더 들어보고 부족한 개념들을 차근차근 지속적으로 계속 공부하면서 채워나가야 할 것 같다(하루안에 공부할 수 있는 내용이 절대 아닌 것 같다.. 계속 꾸준히 공부하자). 우선 다음주는 알고리즘 주간이기 때문에 알고리즘 목표치 풀이를 다 하고 5주차 완강 및 콜백함수의 개념부터 좀 이해하고 비동기 통신과 Promise, async-await에 대해 공부해 보려고 한다. 힘들어도 계속 꾸준히 화이팅하자❕

다음은 강의 내용들을 정리한 포스팅이다.

[JavaScript] 실행컨텍스트(스코프, 변수, 객체 호이스팅)

 

[JavaScript] 실행 컨텍스트와 this바인딩(this binding)

 

 

3. 알고리즘 풀이 총 26문제 풀이

금요일에 알고리즘 주간 발제가 시작됐다. 다음주 목요일까지 진행하며 총 28문제 풀이 목표이고 그 이상을 풀 수 있는 사람들은 챌린지와 챌린져 문제들이 추가적으로 더 주어진다. 우선 .... 어제 발제되었는데 어제 하루만에 26문제까지 풀어버렸다. 난이도가 어느 정도 어렵지 않은 난이도여서 힘들지만 다음 주에 부족한 자바스크립트 개념 공부를 좀 병행하기 위해 어려운 문제 제외하고는 모두 풀어놓았다.

❗야구게임 숫자 맞추기 문제가 있었는데, 랜덤숫자를 중복없이 리턴하는 함수를 만드는 것이 꽤 힘들었다.. Set 객체의 특성을 이용해 시도해보고자 하였으나, 개념과 방법을 잘 모르겠어서 계속 .push와 .length 등 배열로 변환하거나 해서 접근했는데 이 부분이 좀 복잡하고 잘 안풀렸었다. 때마침 강의에서 Set과 Map 객체가 나와 강의를 한번 수강한 뒤, Set객체로 한번 더 랜덤 숫자 리턴 함수를 작성해 보았다. .push나 .length가 아닌 .add와 .size로 접근해야 한다는 것을 알았고, Set객체 특성 상 중복을 알아서 제거한다는 것을 이용해 중복 없는 랜덤 숫자 리턴 함수를 작성했다.

코드는 다음 포스팅에 정리해 보았다.

자바스크립트 랜덤숫자 뽑기(중복 제거)

 

4. 자바스크립트 ES란? ES5와 ES6의 문법 차이

자바스크립트 ES란?

크로스 브라우징 이슈를 해결하여 모든 브라우저에서 정상적으로 동작하는 웹 페이지를 위해 표준화된 자바스크립트다. 상표권 문제로 ECMAScript로 명명되었다.

ES5와 ES6의 문법 차이

2009년 출시된 ES5는 HTML5와 함께 출현한 표준 사양이다. ES6는 범용 프로그래밍 언어로서 갖춰야 할 기능들을 대거 도입하는 등 문법적으로 큰 변화가 있었다.

ES6에 추가된 문법으로는, let/const 키워드, 화살표 함수, 클래스, 모듈, 템플릿 리터럴, 디스트럭처링 할당, 스프레드 문법, rest 파라미터, 심벌, 프로미스, Map/Set 객체, 이터러블, for of문, 제너레이터, Proxy, includes 등의 문법들이 추가되었다.

 

 

무엇을 배웠나?

1. fork와 pull requests를 이용해 Github으로 협업하는 방법 ✅

2. 데이터타입과 메모리의 불변성 여부, 실행 컨텍스트와 this 바인딩의 대략적인 개념...(앞으로 계속 공부하기), 콜백과 비동기 통신의 필요성 등 🟡

3. Set() 객체를 활용하는 방법, 중복 제거 ✅

4. 알고리즘과 코드리뷰의 중요성 ✅

 

 

다음주 목표는?

1. 알고리즘 나머지 다음주 목표 문제(28개) 모두 풀기

2. 가능하면 알고리즘 Challenge문제까지는 모두 풀어보기

2. 5주차 완강 및 콜백함수의 개념 및 비동기 통신의 이해, Promise와 async-await, axios에 대해 공부