오늘의 나는 무엇을 잘했을까?
-
웹 컴포넌트 생성 주기에 대해 학습하고 리팩토링 하며 활용했다.
특히 template, observer와 attributeChangedCallback 사용의 버그를 드디어 찾아내서 기쁘다!(정말 별거 아닌 버그 ㅋㅋ)- observer에서 attribute를 관찰할 때는 html에서 관찰하기 때문에 camelCase도 다 소문자로 변경된다😂😂
-
멘토링에서 가고싶은 기업 공고 분석으로 라인프렌즈를 선택해 2022년 상반기 웹 프론트엔드 직무 신입 공고를 선택했다.
- 컴퓨터 과학의 기초 지식(자료구조/알고리즘/데이터베이스/네트워크/운영 체제 등)을 이해하고 활용할 수 있는 분
- JavaScript, HTML, CSS를 다루며 관련 내부 동작 원리에 대한 관심이 있는 분
- git을 이용한 코드 현상 관리와 코드 리뷰 경험이 있는 분
느낀점 : 전공 공부 열심히하고 컴퓨터적 사고력을 지닌 사람을 원한다. (자료구조, 운영체제 등..🤣)
오늘의 나는 무엇을 배웠을까?
[1] 관심 기업 공고문 분석 멘토링
비록 나는 신입 공채 공고라 자격 요건이 굉장히 포괄적이었지만, 다른 분들은 1~3년차의 프론트엔드 개발자 모집 공고를 가지고 오셨다. 그러다 보니 처음보는 기술, 분야가 많았는데 루크가 하나하나 설명해주셨다.
- 프론트엔드 개발 경력 1년 이상 혹은 그에 준하는 실력을 갖추신 분 : 신입이 그에 걸맞는 프로젝트 경험이 있다면 지원하기!!
-웹사이트 성능 측정 및 최적화 경험이 있으신 분- 개발자 도구 performance 탭
- PageSpeed Insights 등
- 유닛 테스트 : jest 등의 툴,
- CI/CD : github action, circleci, jenkins 등의 툴
느낀 점은, 신입은 신입다운 사람을 뽑는 다는 것! 하지만 요새 신입 공고가 가뭄에 콩나듯 있다는 것..😭😭😭
내가 지금 할 수 있는 최고의 선택은 JS를 깊게 공부하고, 동작 원리를 이해하며, 운영체제 등의 컴퓨터 싸이언스를 틈틈히 정리하되 알고리즘 매일 풀기. ㅋㅋㅋㅋ
앞으로 프로젝트를 하면서 동작원리를 깊게 파보자! 리팩토링 -> 성능 최적화 및 테스트를 하는 것을 목표로 세우자
[2] 콜백함수란?
- Call : 호출하다, Back : 되돌아와서
즉, 되돌아와서 호출하는 함수라는 뜻이다.
- 다른 함수의 파라미터로써 이용되는 함수
- 어떤 이벤트에 의해 호출되어지는 함수
두가지의 중 하나라도 충족을 하면 콜백함수이다.
따라서 비동기함수에서 사용된다고 해서 콜백함수인 것이 아니라, 파라미터로써 이용되기 때문에 콜백함수인 것이다.
동기적으로 실행되는 콜백함수의 예
function one(value){
console.log(value);
};
function two(callback){
const value = 'callback test';
callback(value);
};
two(one);two 함수에 one 함수를 인자로 전달해 내부에서 값을 전달해 호출한다. 따라서 one은 콜백이다.
비동기적으로 실행되는 콜백함수의 예
document.queryselector("#callback-btn")
.addEventListener("click", function() {
console.log("User has clicked on the button!");});이 코드에서 click event가 발생하면, console.log() 메시지가 출력된다. 따라서 콜백함수는 console.log이다.
따라서 map 메소드(배열 메소드)에도 콜백함수가 사용된다.
let arr = [3, 4, 5, 6];
let modifiedArr = arr.map((element)=>
return element *3;
});
console.log(modifiedArr); // [9, 12, 15, 18]이 코드에서 map 메소드의 파라미터로 익명함수가 들어있다. 따라서 이 익명함수는 콜백이다. 이 첫번째 아규먼트로 전달하는 콜백함수가 매번 return값을 모아 새로운 배열을 만들어 return 한다.
[3] 중첩 구조 분해 할당의 유의점
- 객체나 배열이 다른 객체나 배열을 포함하는 경우에 구조 분해 할당 하는 것.
let options = {
size: {
width: 100,
height: 200
},
items: ["Cake", "Donut"],
extra: true
}
let {
size: { // size는 여기,
width,
height
},
items: [item1, item2], // items는 여기에 할당함
title = "Menu" // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함
} = options이때, size나 items의 경우 전용 변수가 없다. 전용 변수 대신에 size와 items 안의 정보를 변수에 할당한 것!!
따라서 console.log(size) 나 console.log(items)를 하면 reference error가 발생한다.
[4] 자바스크립트의 Static 메소드
클래스에 딸려있는 메소드라 클래스가 인스턴스화가 되면 호출할 수 없다.
- 여러가지 접근법 중 새로 알게된 접근법
- this.constructuor.static_method() 처럼 생성자의 한 속성으로 부르기 가능!!!
class StaticMethodCall {
constructor() {
console.log(StaticMethodCall.staticMethod());
console.log(this.constructor.staticMethod());
}
static staticMethod() {
return '나 불라짐~';
}
}
const eva = new StaticMethodCall()
console.log(eva.constructor.staticMethod()) // 가능[5] 알고리즘 패러다임 수강
분할정복 (Divide and Conquer)
- Divide, Conquer, combine의 세 단계로 구성된다.
퀵 정렬
- Divide와 conquer 단계가 까다롭다. partition함수가 복잡하기 때문이다. 하지만 분할 해서 정복한 각 조각들을 병합하는 단계인 combine단계는 상대적으로 쉽다. 분할 후 정복만 하면 자동으로 전체가 combine 되어있기 때문이다.
병합정렬
- divide와 conquer단계가 상대적으로 간단하다. 분할한 배열의 길이가 1일 때까지 반복해서 나눠주면 그만이다. 하지만 마지막 단계인 combine단계가 까다롭다. merge하는 함수가 복잡하기 때문이다.
오늘의 나는 어떤 어려움이 있었을까?
-
trapping rain 문제에서 상당한 시간이 걸렸다. 브루트포스로 풀었는데, DP 풀이가 있지만 아직 이해를 못했다..😭
-
observer Camel → 소문자로 변경
처음에는 observer로 isStarred attirbute를 관찰하고 있어도 attributeChangedCallback이 실행되지 않았다. 이에 대해 팀원들과 코드를 분석해보았는데, 관찰 대상을 camelCase로 작성했는데, html의 속성으로 파싱이 되는 순간 attribute 명은 다 소문자로 바뀐다는 것을 알게 되었다.
isStarred → isstarred로 바꿨더니 해결 ㅋㅋ ... 그 오랜 삽질을 이런 변수명 하나로..해결해서 기쁘다^^
내일의 나는 무엇을 해야할까?
- 케니랑 api 페어프로그래밍
- 알고리즘 패러다임 완강
- 알골 1문제
