[week1] 나는 말하는 감자

최민석·2021년 8월 8일
11

Programmers

목록 보기
2/5

💻 week 1 총 정리

Javascript와 CS 기초

현재 프론트엔드의 기본이자 다양하게 사용하고 있는 Javascript에 대한 내용을 기초 학습했다.

  • Javascript의 활용도
  • 변수/상수/자료형/메모리심화 등..
  • 스코프와 클로저
  • 함수형 프로그래밍
  • 자료구조
  • 암호화

이 외에도 등등, 기초적인 CS지식과 JS 기초를 배웠다.

그 중, 처음 접하고 자바스크립트에 대해서 처음 파악한 부분을 명시해봤다.

스코프와 클로저

스코프(Scope)란?

  • 유효 범위라고 부르고, 변수가 어디까지 참조되는지를 의미한다.
  • 종류로는 Global Scope, Local Scope가 있다.
  • 이곳에서 var를 사용하지 않는 이유를 알 수 있었다.

왜 var를 사용하지 않을까?

var는 함수 수준, let은 블록 수준 스코프이다.

  • 이러한 이유로var는 호이스팅 되는 경우가 생긴다. 때문에 오류 찾기가...

클로저(Closer)란?

  • 함수가 선언된 환경의 Scope를 기억해서 함수가 Scope 밖에서 실행 될 때, 기억한 스코프에 접근 가능한 문법
  • 은닉화 (내부 변수와 함수를 숨길 수 있다는 점!)

특히 클로저 같은 경우는 왜? 알아야하는지 생각해봤다.

ES6에 대해 잘 이해한다면 사실 크게 알고 활용한 일은 없지만,
여러 스코프 등 오류에 대해 파악 할 때 원인을 파악 할 수 있다.

추가적으로 closer인지 파악하기 좋았던 예시이다.

// outer()는 클로저가 아니다..
// 왜냐하면 outer의 필드나 메소드를 사용하지 않았기 때문에..!
function outer() {
	let name = 'minseok';
	if (true) {
		let city = '평택';
		return function inner(){
			console.log(city);
		};
	};
};
// 해당되는 메소드나 필드를 사용해야 closer가 된다.

밑의 추가 내용은 추가 과제에 대한 내용이다.


🤣추가 학습 내용

강의 내용 중, 키워드로 궁금했던 내용이다.

흥미롭고 모르는 내용이 많아 찾아보았다.

😆 호이스팅(Hosting)이란?

var를 사용하지 않는 이유? 호이스팅에 대해서 살펴보면 알 수 있었다.

Javascript 엔진은 Script를 가져와 코드에서 데이터를 위한 메모리를 설정하고,
코드가 실행됨을 준비하는 단계임을 말한다.보통 맨 위로 끌어올린다고 착각한다..

중요한 포인트는 함수변수의 메모리 저장 방식은 다르다는 걸 인지했다는 점이다.

  1. 함수는? 전체 함수에 대한 참조와 함께 저장한다.
  2. 변수는? ES6 문법인 let, const는 초기화 되지 않은 채로 저장 (reference Error)
  3. var는? undefined 형태로 저장된 점이다.

이렇게 해서 var를 사용하지 않아야 하는 이유를 배웠다.
또한 let, const는 항상 초기화를 해줘야 한다는 점!

🤓 정규표현식을 활용한 개미수열

정규표현식을 활용한 개미수열 구현 내용이였다.

개미수열이란? 해당 링크를 참고하면 좋다.

  • 베르나르 베르베르 소설의 '개미' 에서 나왔던 문제 중 하나이다.

개미 수열은 초등학교때 담임선생님이 알려주셨던 기억이 있어서 수열 방식은 금방 이해했다.

1 → 11 → 21 → 1211 → 111221 → ... 방식은 간단했다.
😉 1의 자리부터 개수를 세는 것!

먼저 어떻게 문제를 해결 할 지 시나리오를 구성해봤다.

  • 1의 자리 숫자부터 탐색하면서 그룹을 지어주며 값을 구분 해야한다는 점..
  • 1121 이라면? 1이 2개, 2가 1개, 1이 1개...

위와 같은 방식은 Run-length Encoding 방식이라고 하는데, 숫자 압축에 효과적인 알고리즘이라고 한다 😃.

이 부분을 염두해서 정규표현식을 사용해봤다.

// 정규표현식을 활용한 개미수열 풀기
// Run-Length Encoding을 활용한 '개미 수열'
// testCase 5를 받았을 때, 실행 예시

const AntExp = /(.)\1*/g; // 정규표현식
let startValue = '1'; // 시작 수열 값
console.log(`1번째 : ${startValue}`); // 시작 수열 출력

for (let i = 1; i < 5; i++) {
    let sequence = ''; // 수열을 만들기 위한 중첩 변수 
    const result = startValue.match(AntExp); // 문자열 별 run-length encoding
    for (item of result) { // 압축 된 문자열 ['1', '2', '11'] 요소로 반복문
        sequence += String(item.length) + item[0]; // += (요소 별 문자열 길이 + 문자)
    }
    console.log(`${i + 1}번째 : ${sequence}`); // 결과 수열 값
    startValue = sequence; // '완성 된 결과 수열'을 다시 기준으로 잡아서 입력받은 만큼 수열 진행 
}
 
// 1번째: 1
// 2번째: 11
// 3번째: 21
// 4번째: 1211
// 5번째: 111221

이런 방식으로 정규표현식을 활용해서 숫자 그룹을 지어주고, 문자열의 길이를 가지고 해결했다.

정규표현식의 신박한 사용 방식이랄까?

같은 문제풀이를 if-else를 활용한 것보다 간편했고 코드도 간결했다.

재미있던 실습 문제였다. 물론 아직 정규표현식에 대해서 잘 파악하지 못했지만..


🤔 week1 진행 후 느낀 점?

강의 진행

강의 내용들은 자세하고 능동적인 학습 자세를 키워줄 수 있게 '키워드'를 굉장히 많이 제공해주셨다.

제시해주신 추가 과제 또한 흥미를 불러와서 재밌게 해결했던 경험이였다.
그리고 1대1로 케어받는 느낌을 받았던 강의들이라서 쏙쏙 들어왔던 내용이였다.

과제 코드 리뷰

이 파트가 내가 '말하는 감자' 라고 타이틀을 정한 이유이다.

주어진 과제를 완료하고 올려서 코드리뷰를 기다렸다.

특이한 점으로는 코드리뷰 '매운 맛','순한 맛' 으로 나뉘어져 있던 점이다.

그렇게 올려서 리뷰가 올라왔고 결과는..

아니.. 100줄도 안되는 코드에 이렇게 많은 문제점이..?

어느정도 예상은 했지만 문제가 많았다.

내 코드는 왜 이러한 로직을 썼는지 근거가 부족했다.

그리고 그동안 진행했던 프로젝트 경험은 정말 흉내뿐이였다는 걸 느꼈고,
스스로 무지하다고 느꼈다. 좋은 자극이였다.

다음부터는 같은 지적을 했던 부분은 '꼭' 명심하고 개선해야 겠다는 생각을 가졌다.

그리고 나는 지금 '말하는 감자'임을 명심하고 배우려는 자세를 가져야 함을 확실히 느꼈던 경험이였다.

그리고 멘토님의 리뷰가 매운 맛이 아니라, 이렇게 많은 문제점을 힘들게 적으시느라 멘토님이 매우신거였다.


🙄 다음주는 어떻게?

스스로 못한다는 자책은 마음 속에 간직하면서 뛰어넘기 위해 노력해야겠다.

그리고 변화 된 모습을 보여줘서 발전하는 사람이 되도록 노력하려고 한다.

물론 상상만 하지않고 노력해야 하는 감자

다음주부터 실전 자바스크립트를 배울 수 있는 비동기 통신과 ES6에 대해서 자세하게 배운다.

그래서 이 부분은 미리 예습좀 해놔야 다음주 따라 갈 듯하다... 빠듯하다..

다음주에는 질문할 수 있는 감자가 되도록 노력해보면서 이번 1주차 회고를 적어보았다.

profile
되돌아보며 성장합니다🔨

6개의 댓글

comment-user-thumbnail
2021년 8월 8일

말하는 감자 파이팅입니다 !

1개의 답글
comment-user-thumbnail
2021년 8월 8일

좋습니다 ^^

1개의 답글
comment-user-thumbnail
2021년 8월 9일

말하는 감자 파이팅입니다라닠ㅋㅋㅋㅋㅋㅋ 댓글마저 사랑스러운 글 잘 보고 갑니다! 파이팅 😆

1개의 답글