항해99 2주차 회고록 WIL(Weekly I learned)
알고리즘 문제풀이 달리기반을 신청한 나는 6일동안 총 40문제를 풀어야 했다.
난이도는 하-중하-중 순으로 구성되어 있었고, 사실 처음엔 하 수준의 문제도 어떻게 풀어야 할지 막막했다.
도대체 어떻게 코드를 짜고, 구글링을 할 때 어떤 검색어를 입력할지도 잘 몰라 한 문제에 3시간씩 매달리기도 했지만 점점 하다보니 '아, 이 문제는 날짜를 구하는 거니 '자바스크립트 날짜 구하기' 이렇게 구글링 해볼까?' 라는 감각이 잡혔고, 검색해서 얻은 여러가지 메서드를 활용하여 정답을 맞출 수 있었다.
솔직히 40문제 중 정답을 맞춘 문제는 절반도 채 되지 않지만, 모르면 30분 이상 고민하지 않고 답을 우선 본 다음 코드를 이해하려고 한글자씩, 한문장씩 이해하려고 애썼다.
그러다 보니 이번 주 화요일 쯤인가? 그 때 '아, 알고리즘 공부 진짜 어렵긴 한데 그래도 자바스크립트라는 programming language에 대해 이해가 조금씩 생기는 기분이네. 공부 하길 정말 잘했다!' 라는 생각이 들면서 힘들지만은 않게 되어 기분이 좋았다.
프론트엔드 개발자라면 당연히 사용할 줄 알아야 하는 리액트를 본격적으로 배우게 되었다.
State, Props, Lifecyle, DOM, Event 등 새로운 개념들과 다른 문법들.. 다시 백지 상태에서 시작하는 기분이랄까?
차주 목요일(1/27)까지 개인 과제와 팀 과제를 제출해야 하기에 리액트 기초반 강의를 수강중인데, 아 정말 어렵다... VS Code에 코드를 똑같이 쳐보고 어떤 식으로 리액트를 다루어야 할 지 그 느낌만 일단 잡고 있다.
오늘까지 들어야 하는 강의 마무리 하고, 내일부터 본격적으로 개인 프로젝트 제작을 시작해야겠다.
var name = "알리스";
var age = 19;
console.log("저의 이름은 " + name + "이고, 나이는 " + age + "살 입니다.");
```
var name = "알리스";
var age = 19;
console.log(`저의 이름은 ${name}이고, 나이는 ${age}살 입니다.`);
function str(arg1, arg2) { console.log("알리스"); }
var str = (arg1, arg2) => {
console.log("알리스");
};
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()
}
}
import 'import to loadname' from '파일 경로'
export default 'module'
import Carousel from "./carousel";
cosnt carousel = new Carousel();
export default class Carousel {
constructor() {
this.calc();
}
calc() {
console.log(10);
}
}
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)