1. What I did

1. Chapter 2. 알고리즘 기초 (걷기반)

• 기간: 2022년 1월 14일 (금) @ 09:00 ~ 2022년 1월 20일 (목) @ 19:00
• 프로그래머스 코딩 테스트 연습 (JavaScript 시리즈)
  13. 서울에서 김서방 찾기
  • .indexOf(searchValue[, fromIndex])
  14. 내적
  • 중복
  15. 나누어 떨어지는 숫자 배열
  • .sort([compareFunction])
  • .filter(callback(element[, index[, array]])[, thisArg])
  16. 문자열 내 p와 y의 개수
  • .match(regexp)
  • .split([separator[, limit]])
  • .toUppercase()
  17. 문자열 다루기 기본
  • isNaN()
  • .forEach(callback(currentvalue[, index[, array]])[, thisArg])
  • RegExp
    • ^: 입력의 시작 부분에 대응, ('뒤에 있는 것 제외하고 찾아라' 라는 뜻도 있음)
    • $: 입력의 끝 부분과 대응
    • |
    • regexp.test()
  18. 2016년
  • new Date()
  • getDay()
  19. 정수 내림차순으로 배치하기
  • .join()
  • .reverse()
  20. 이상한 문자 만들기
  • regexp
    • \w
  21. 콜라츠 추측
  • 중복
  22. 최소 직사각형
  • Math.max()
  23. 로또의 최고 순위와 최저 순위
  • switch
  24. 문자열 내림차순으로 배치하기
  • 중복
• 알고리즘 모의고사 테스트 (220118)
• 알고리즘 테스트 합격!! (220120)

2. Chapter 3. 주특기 입문 주차

• 기간: 2022년 1월 21일 (금) @ 09:00 ~
• SpartaCoding Club 리액트 기초반 1-1 ~ 3-6강 완료
• React 환경설정 완료 (nvm, node, yarn 설치 완료)
• 강사님과 react router dom 버전이 달라, 다운그레이드 하지 않고 구글링하여 해결.
  (React Router Dom V6 자료)
  • https://velog.io/@ksmfou98/React-Router-v6-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EC%A0%95%EB%A6%AC
  • https://velog.io/@soryeongk/ReactRouterDomV6
  • https://gallery-k.tistory.com/256
• JavaScript의 ES (EcmaScript) 란?
  • JavaScript를 표준화하기 위해 Ecma International이 ECMA-262 기술 규격에 따라 만든 스크립트 프로그래밍 언어
    • Ecma International: 1961년 유럽에서 컴퓨터 시스템을 표준화하기 위해 세워졌고,현재는 정보와 통신 시스템을 위한 국제적 표준화 기구
  • 액션스크립트와 J스크립트 등 다른 구현체도 포함
  • 웹의 클라이언트 사이드 스크립트로 많이 사용 + Node.js를 사용한 서버 응용 프로그램 및 서비스에도 쓰이는 추세
• ES5 vs ES6

1. Template Literal
   • 백틱으로 문자열을 감싸 표현하는 기능
   • ${}를 사용

<ES5>
var name = "현진";
var age = 25;
console.log("저의 이름은 " + name + "이고, 나이는 " + age + "살 입니다.");

<ES6>
var name = "현진";
var age = 25;
console.log(`저의 이름은 ${name}이고, 나이는 ${age}살 입니다.`);

2. 변수 선언
   • var -> let, const
   • let: 재선언 불가 + 재할당 가능
   • const: 재선언 & 재할당 불가
   • let & const: Block / Function Scope 내부에 선언되면, 외부에서 참조 불가능; 외부 선언은 내부에서 참조 가능
3. Arrow Function (화살표 함수)
   • 함수 표현을 더욱 간결하게 표현 가능
   • 인자가 하나일 때는 괄호 생략 가능

<ES5>
function plus (a,b) { return a+b; }
var plus = function(a,b) { return a+b; }

<ES6>
let plus = (a,b) => {return a+b}

4. this
   • ES5
     • 객체 내 this는 메소드를 실행 시, 메소드가 선언된 해당 객체를 가리킨다.
     • 객체 내 선언된 함수의 this는 해당 객체가 아닌 window를 바라보기 때문에, innerInfo.call(this)로 바인딩이나 해당 변수에 담아서 접근 필수
   • ES6
     • 자신을 둘러싸고 있는 this를 바라보기 때문에, 바인딩/해당 변수 담을 필요 X

<ES5>
var thisTest = {
     name : "김현진",   
     age : 25,
     info : function() {
          console.log(this)
          console.log(this.name , this.age)

          function innerInfo() {
              console.log(this)
              return this.name + ":" + this.age
          }
          return innerInfo()
     }
}
// 실행결과 
// {name: "김현진", age: 25, info: ƒ}
// 김현진 25
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
// ":undefined"

<ES6>
let thisTest = {
     name : "김현진",   
     age : 25,
     info() {
          console.log(this)
          console.log(this.name , this.age)

          innerInfo = () => {
              console.log(this)
              return this.name + ":" + this.age
          }
          return innerInfo()
     }
}
// 실행결과
// {name: "김현진", age: 25, info: ƒ}
// 김현진 25
// {name: "김현진", age: 25, info: ƒ}
// "김현진:25"

5. 모듈
   • ES5
     • require (./____.js)를 통해 모듈화
   • ES6
     • import/export를 통해 모듈 관리 가능

<ES5>
//index.html
<script>
  src = "slider.js";
</script>
<script>
  src = "script.js";
</script>

//script.js
var slider = require(./slider.js)
// 혹은 require(./slider)

<ES6>
import 'import to loadname' from '파일 경로'

export default 'module'

6. 클래스
   • ES5
     • class 키워드 X -> 프로토타입을 통해 실현 가능
   • ES6
     • class 키워드로 선언 가능
     • super로 클래스의 상속과 오버라이딩 수행 가능

<ES5>
var AddSquare = function(arg1, arg2) {
  Add.call(this, arg1, arg2);
};

Object.assign(AddSquare.prototype, Add.prototype);

AddSquare.prototype = {
  calc: function() {
    // 메소드는 생략될 수 없습니다.
    Add.prototype.calc.call(this);
  },
  calcSquare: function() {
    this.pow = Math.pow(this.arg1 + this.arg2, 2);
    return "(" + this.arg1 + "+" + this.arg2 + ")^2=" + this.pow;
  }
};

var numSquare = new AddSquare(5, 8);
console.log(numSquare.calc()); // 5 + 8 = 13
console.log(numSquare.calcSquare()); // (5 + 8) ^ 2 =169

<ES6>
class AddSquare extends Add {
  constructor(arg1, arg2) {
    super(arg1, arg2);
  }
  calc() {
    super.calc();
  }
  calcSquare() {
    this.pow = Math.pow(this.arg1 + this.arg2, 2);
    return "(" + this.arg1 + "+" + this.arg2 + ") ^ 2 =" + this.pow;
  }
}

var numSquare = new AddSquare(5, 8);
console.log(numSquare.calc()); // 5 + 8 = 13
console.log(numSquare.calcSquare()); // (5 + 8) ^ 2 = 169

(출처: https://doozi0316.tistory.com/entry/JavaScript-ECMAScript%EB%9E%80-ES5%EC%99%80-ES6%EC%9D%98-%EC%B0%A8%EC%9D%B4var-const-let-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-class)

2. How I felt

1. Chapter 2. 알고리즘 기초 (걷기반)

• 난생 처음 공부해보는 자바스크립트의 문법과 알고리즘이었다. 팀원분들은 어느 정도 공부를 하셨던 분들이라 나보다 푸는 속도도 빠르셨고 자바스크립트에 대한 이해도도 깊으셨다. 처음에는 내가 맡은 두 문제를 푸는 것에도 급급했다. 하지만 날이 갈 수록 희한하게 알고리즘 문제 푸는 것이 재밌어졌고, 내 문제 + 팀원분들 문제를 다 풀고 정리하고 다른 해설들을 공부하며 조금씩 실력을 쌓아나간 것 같다. 새벽에는 다음 날 나의 두 문제를 풀어보기도 했고, 결국 풀리지 않으면 정말 찝찝한 마음에 잠에 들기도 했다. 예전에 수학을 좋아했었던 내가 많이 떠올랐다. 분명 답은 있는데, 내가 못해서 풀지 못하는 것을 받아들이지 못해서 풀 때까지 노력했던 나의 모습이. 한 주 동안 했던 알고리즘 및 자바스크립트 공부는 당연히 충분하지 못했다. 앞으로 꾸준히 계속 공부하며 발전해나가야겠다.

2. Chapter 3. 주특기 입문 주차

• 드디어 진짜가 시작되었다. 내가 선택한 주특기 언어인, React를 처음으로 배워보는 시간이 시작되었다. 제대로 써보고 싶었던 VSC도 쓰게 되었고, 자바스크립트 문법을 제대로 활용해보며 React가 얼마나 어려운지 실감하고 있다..ㅋㅋ 뭔가 머리로는 '어 쉬운데?' 이러지만, 강의를 보지 않고 키보드를 치는 손가락은 없다. 다음 주까지 React로 개인 과제 한 개를 완성해야 한다. (+팀 과제) 개인 과제를 위한 강의는 다 봤으니 이제 부족한 것은 구글링해가며 과제를 제대로 시작하려고 한다. 그래도 나름 재밌는 언어라고 느껴지고 있으니, 나만 잘한다면 나중에 정말 재밌게 일할 수 있을 거라고 생각된다.