[항해 99 5기] 2주차 WIL_Jan 23rd 2022

HJ·2022년 1월 23일

WIL & TIL

목록 보기

9/21

항해99 2주차 회고록 WIL(Weekly I learned)

2주차 내용

1/17-1/20: 알고리즘 - 프로그래머스 자바스크립트 문제풀이
1/21-1/22: 주특기 입문 - 리액트(React)

알고리즘 회고

알고리즘 문제풀이 달리기반을 신청한 나는 6일동안 총 40문제를 풀어야 했다.
난이도는 하-중하-중 순으로 구성되어 있었고, 사실 처음엔 하 수준의 문제도 어떻게 풀어야 할지 막막했다.
도대체 어떻게 코드를 짜고, 구글링을 할 때 어떤 검색어를 입력할지도 잘 몰라 한 문제에 3시간씩 매달리기도 했지만 점점 하다보니 '아, 이 문제는 날짜를 구하는 거니 '자바스크립트 날짜 구하기' 이렇게 구글링 해볼까?' 라는 감각이 잡혔고, 검색해서 얻은 여러가지 메서드를 활용하여 정답을 맞출 수 있었다.
솔직히 40문제 중 정답을 맞춘 문제는 절반도 채 되지 않지만, 모르면 30분 이상 고민하지 않고 답을 우선 본 다음 코드를 이해하려고 한글자씩, 한문장씩 이해하려고 애썼다.
그러다 보니 이번 주 화요일 쯤인가? 그 때 '아, 알고리즘 공부 진짜 어렵긴 한데 그래도 자바스크립트라는 programming language에 대해 이해가 조금씩 생기는 기분이네. 공부 하길 정말 잘했다!' 라는 생각이 들면서 힘들지만은 않게 되어 기분이 좋았다.

알고리즘 모의고사 그리고 본 시험

둘 다 2문제 중 1문제를 선택하여 주어진 시간 내(모의고사: 2시간, 본 시험: 3시간)에 푸는 방식이었다.
문제를 푸는 것만이 아닌, 해설 영상을 녹화하여 제출까지 했어야 하므로 주어진 시간을 효율적으로 쓰는 능력도 필요했다.
열심히 공부한 덕분에 다행히도 시험을 통과하였다! :)
문제를 푸는 데에는 어려워 했던 '정규표현식'을 사용했다. 다른 방법을 사용할 수도 있었지만 한 번 도전해 보고 싶었다. It worked!

주특기 입문 - React(리액트)

프론트엔드 개발자라면 당연히 사용할 줄 알아야 하는 리액트를 본격적으로 배우게 되었다.
State, Props, Lifecyle, DOM, Event 등 새로운 개념들과 다른 문법들.. 다시 백지 상태에서 시작하는 기분이랄까?
차주 목요일(1/27)까지 개인 과제와 팀 과제를 제출해야 하기에 리액트 기초반 강의를 수강중인데, 아 정말 어렵다... VS Code에 코드를 똑같이 쳐보고 어떤 식으로 리액트를 다루어야 할 지 그 느낌만 일단 잡고 있다.
오늘까지 들어야 하는 강의 마무리 하고, 내일부터 본격적으로 개인 프로젝트 제작을 시작해야겠다.

배운것들

자바스크립트 관련

문자열을 숫자로 변환하는 방법
- parseInt() 함수 사용
- parseFloat() 함수 사용
- +, * 연산자 사용
- Number() 사용
계산 관련
- 올림: Math.ceil()
- 내림: Math.floor()
- 반올림: Math.round()
- 소수점 반올림: toFixed(), toPrecision()
- 절대값 구하기: Math.abs()
문자열 자르기
- substr(): substr("시작 위치", "길이") 또는 substr("시작 위치")
- substring(): substring("시작 위치", "종료 위치") 또는 substring("시작 위치")
- slice(): slice("시작 위치", "종료 위치") 또는 slice("시작 위치") / 음수 사용이 가능하여 뒤에서 부터 자르는데 유용하다.
삼항연산자
- 조건이 있는 if문을 더욱 간단하게 사용 가능한 방법이다.
- 예: var beverage = (age >= 21) ? "Beer" : "Juice"; (age가 21보다 크거나 같으면 True인 경우 beer', false인 경우 juice)
배열의 누적값 계산(합계, 평균 등)
- reduce(): 배열(arr)의 각 element들에 대해서 파라미터로 입력받은 콜백함수를 실행하여, 하나의 리턴값을 반환하는 함수이다. 배열을 순차적으로 순회하면서 배열의 값을 누적한다.
Map()
- 반복문을 돌며 배열 안의 요소들을 1대1로 짝지어 주는 것
날짜 구하기
- Date.prototype.getDay(): 주어진 날짜의 현지 시간 기준 요일을 반환. 0은 일요일
- Date.prototype.getDate(): 요일 반환
배열 뒤집기
- for 반복문: for(let i=arr.length-1; i >= 0; i--) 이런 식으로 사용
- reverse()
- [...arr].reverse(): 리턴되는 값은 변경하되 원본 배열을 유지 필요할 때 사용
전화번호에 하이픈(-) 붙이기(정규 표현식)
- "01012345678".replace(/(\d{3})(\d{4})(\d)/, "$1-$2-$3");
- 여기서 3,4는 반복되는 문자열 갯수
- $1-$2-$3: 지정한 세개의 그룹에 차례로 부여된 번호

JavaScript의 ES란?, ES5/ES6 문법 차이

ES

ECMA스크립트(ECMAScript)를 줄여서 부르는 말로, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다. (출처: 위키백과)
자바스크립트는 언어라면, ECMA스크립트는 규격, 표준으로 생각하면 편하다.

ES5/ES6 문법 차이

크게 하단의 차이점(ES5와 비교하여 변경되거나 개선된 것들)이 있다.
- 템플릿 리터럴
- 화살표 함수
- this
- 변수 선언
- 모듈
- 클래스

템플릿 리터럴

템플릿 리터럴이란, 백틱(`)으로 문자열을 감싸 표현하는 기능이다.
플레이스 홀더(${variable})를 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다.

ES5와의 비교

ES5

var name = "알리스";
var age = 19;
console.log("저의 이름은 " + name + "이고, 나이는 " + age + "살 입니다.");
	```

ES6

var name = "알리스";
var age = 19;
console.log(`저의 이름은 ${name}이고, 나이는 ${age}살 입니다.`);

화살표 함수

함수 선언법을 조금 더 간결하게 만들어준다.

ES5와의 비교

ES5

function str(arg1, arg2) { console.log("알리스"); }

ES6

var str = (arg1, arg2) => {
console.log("알리스");
};

this

ES5
- 객체 내에 있는 메소드를 실행 시 this는 메소드가 선언된 해당 객체를 가리킨다.
  하지만 객체 안에서 선언된 함수의 this는 해당 객체가 아닌 window를 바라보고 있기 때문에 함수 안에서 this.name, this.age 를 하여도 아무 값이 나오지 않는다.
- 이러한 경우 해결방안으로 innerInfo.call(this) 를 통해 this 를 바인딩 시켜주거나 this를 해당 변수에 담아서 var self = this 와 같은 방식으로 접근하면 사용하면 된다.
```
var thisTest = {
   name : "알리스",   
   age : 19,
   info : function() {
        console.log(this)
        console.log(this.name , this.age)

        function innerInfo() {
            console.log(this)
            return this.name + ":" + this.age
        }
        return innerInfo()
   }
}
```

ES6

ES6에서의 this 는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다.

let thisTest = {
   name : "알리스",   
   age : 19,
   info() {
        console.log(this)
        console.log(this.name , this.age)

        innerInfo = () => {
            console.log(this)
            return this.name + ":" + this.age
        }
        return innerInfo()
   }
}

변수 선언

ES5
- ES5에선 var 밖에 존재하지 않았다. var 는 변수를 선언할 때 사용되는 키워드로, 재할당과 재선언에 굉장히 자유롭다.
ES6
- ES6부터 let, const가 추가되었다.
- let은 한번 선언된 변수에 동일한 이름으로 선언할 수 없다. 하지만, 값은 재할당 할 수 있다.
- const는 한번 초기화된 변수에 재할당/재선언할 수 없다.
- let, const는 블록 스코프 또는 Function 스코프 내부에 선언되면 해당 스코프 밖에서 안에 있는 변수를 참조할 수 없다. 쉽게 설명하자면, 중괄호로 묶인 부분 내부에 선언된 let, const를 중괄호 외부에서 참조할 수 없다는 것이다.
- 밖에서 안에 있는 const, let은 참조할 수는 있다.
- var는 Function 스코프는 내부에 선언된 var를 외부에서 참조할 수 없지만 블록 스코프에선 내부에 선언되어 있어도 외부에서 참조 가능하다.

모듈

ES6 부터는 import/export 로 모듈을 관리할 수 있다.

import 사용법 예

import 'import to loadname' from '파일 경로'

export 사용법 예

export default 'module'
import Carousel from "./carousel";
cosnt carousel = new Carousel();
export default class Carousel {
  constructor() {
      this.calc();
  }
  calc() {
      console.log(10);
  }
}

클래스

ES5
- class라는 키워드는 없었지만 프로토타입을 통해 실현 가능했다.

ES6

class 키워드를 사용해서 선언할 수 있다.

클래스의 상속과 오버라이딩은 super를 사용해서 수행할 수 있다.
예)

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://bit.ly/35kpFPv)

개선이 필요한 부분

오류나 실수한 부분을 기록해두자
- 개발자에겐 오류 해결도 중요하지만 이를 '어떻게' 해결했냐는 것을 기록하고 설명할 줄 아는 것도 필수적으로 요구되는 능력이다. 스크린샷을 해두고, 당장 시간이 없으면 하루 끝에 다시 되돌아보고 블로그에 정리해두자.

앞으로의 방향

하루에 시간 내서 알고리즘 문제 최소 5개는 풀기 (습관화 하자, 좋은 회사 가려면 코테를 잘봐야한다.)
리액트와 친해지기
1/27 21시까지 개인과제, 팀과제 제출