오꾸오꾸(오늘도 꾸준히 오랫동안 꾸준히)

라이프 사이클에 대해서 설명해주세요 컴포넌트는 크게 세 가지 주기를 가집니다. 컴포넌트를 브라우저에 그리는 마운트(Mount), 컴포넌트를 브라우저에 그린 후 변경 사항을 그리는 업데이트(Update), 컴포넌트를 브라우저에서 제거하는 언마운트(Unmount)과정을 가지고있습니다. 마운트 DOM이 생성되고 웹 브라우저상에서 나타나는 것을 마운트라고 한다. 마운트 할 때 호출하는 메서드 컴포넌트 만들기 - constructor - getDerivedStateFromProps - render - componentDidMount constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props에 있는 값을 state 넣을 때 사용하는..

자바스크립트 코드가 동작하기 위해서는 브라우저 자체에 내장되어져 있는 자바스크립트 엔진이 필요 합니다. 자바스크립트가 실행되는 시간 즉 런타임 시간에 동작하는 과정에서 코드를 한 줄 한 줄 읽어줍니다.(이를 인터프리터라고 합니다.) 보통 다른 언어에서는 컴파일러가 필요한데 컴파일러가 동작하는 방식을 자바 프로그래밍으로 예를 들면 코드를 컴퓨터에서 실행하기 위해서는 자바코드를 컴파일러를 통해 모든 코드를 컴파일링해서 컴퓨터가 이해할 수 있는 언어로 변경을 해주고 컴퓨터에서 실행을 해줍니다. 즉 둘의 차이점은 컴파일러는 모든 코드를 번역해놓고 코드를 실행하는 것이고 인터프리터는 코드를 진행하면서 한줄씩 번역해서 실행하는 것 인터프리터의 장단점 장점: 초반 실행하는 속도는 빠릅니다. 단점: 비교적 실행 속도가..

이 카테고리에서는 면접에서 질문 받았던 것들을 정리하여 나름의 답들을 찾아 올려보는 시간을 가지려고 합니다. 자바스크립트는 컴파일언어? 자바스크립트는 interpreter 언어입니다. 개발자도구 콘솔에서 스크립트를 작성해 실행하는데 컴파일이 필요하지 않기 때문입니다. 하지만, 결론부터 이야기하면 자바스크립트도 컴파일 과정을 거칩니다. 다만 자바스크립트 엔진 내부에서 실행 도중 컴파일이 필요한 경우에 내부에서 컴파일 합니다. 컴파일러(compiler) 전체 파일을 스캔하여 한꺼번에 번역한다. 초기 스캔시간이 오래 걸리지만, 한번 실행 파일이 만들어지고 나면 빠르다. 기계어 번역과정에서 더 많은 메모리를 사용한다. 전체 코드를 스캔하는 과정에서 모든 오류를 한꺼번에 출력해주기 때문에 실행 전에 오류를 알 수..

오늘은 생에 처음으로 면접을 보게 되었다. 이번 면접이 되지 않더라도 다음 면접을 위해 피드백을 하기 위해 녹음을 진행하였고 면접이 끝나고 집에 돌아가는 도중 녹음 파일을 들었는데 우선 자세와 목소리부터 고쳐야겠다고 생각했다. 첫 면접이라 어쩔 수 없었겠지만 너무나 자신없는 목소리 시도때도 없이 하는 '어~'라는 말은 정말 좋지 않은 습관이였던 것 같다. 면접관 분들 대표님과 이야기 하면서 이 회사 정말 좋은 회사구나 라고 느끼게 되었다. 내가 횡설수설한 대답 면접관분들이 다시 한번 포장해주셨고 대표님의 회사님이 이 회사를 얼마나 사랑하시는지 알 수 있었던 것 같다. 면접을 보고 돌아오면서 '하필 처음 면접을 보게된 곳 이렇게 좋은 회사였다니' 푸념을 늘어놓았다. 면접에서 받았던 질문들을 정리하여 노션에..

event.preventDefault(); preventDefault 는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드입니다. ,,의 기본 동작을 막을 수 있습니다. event.stopPropagation(); 이벤트가 상위 DOM으로 전달,전파를 하지 않도록 하는 코드입니다. 이벤트 전파를 막아 주지만 기본 이벤트를 막아주진 않습니다. 아래는 간단한 예제소스입니다. 클릭할 경우 div 요소의 이벤트도 발생할 것으로 예상할 수 있습니다. stopPropagation()을 사용하여 이벤트 버블링을 제거하여줍니다. Click Me!! function showmsg = function() { event.stopPropagation(); console.log('Webisfree'); }

// Iterable 하다는건! 순회가 가능하다는 것 // [Symbol.iterator](): IterableIterator // 심볼정의를 가진 객체나, 특정한 함수가 IterableIterator를 // 리턴한다는 것은 순회 가능한 객체다! 라는것을 의미한다. // 순회가 가능하면 무엇을 할 수 있나? // 바로 반복문, 연산자들을 사용할 수 있습니다. const arr = [1, 2, 3] console.log(arr.values()) console.log(arr.entries()) console.log(arr.keys()) // iterator 사용해 보기 // values는 iterableIterator를 리턴합니다. const iterator = arr.values() while (true)..

접근 제어자 한번 데이터를 지정해주면 외부에서 변경하지 못하게 해주고 싶을 경우 const apple = new Fruit('apple', 'APPLE') 이 때 접근 제어자를 통해 캡슐화를 할 수 있습니다. // 접근제어자 - 캡슐화 // 다른 언어에서는 private(#), public(기본), protected class Fruit { #name #upercase #type = '과일' constructor(name, upercase) { this.name = name this.upercase = upercase } display = () => { console.log(`${this.name}: ${this.upercase}`) } } const apple = new Fruit('apple', 'A..

class Fruit{ this.name this.emoji display(){} } let apple = { name:'apple', uppercase:'APPLE', display(){} } let orange = { name:'orange', uppercase:'ORANGE', display(){} } 지금까지 클래스를 정할때의 프로퍼티와 메소드는 인스턴스 레벨의 프로퍼티와 메소드라고 할 수 있습니다. 이말은 클래스를 통해서 만든 인스턴스에 클래스에서 정의한 프로퍼티와 함수들이 중복적으로 만들어집니다. 지금까지는 key의 value가 다르기 때문에 이렇게 해주는게 맞았지만 모든 객체마다 동일하게 참조해야하는 속성이나 행동이 있다면 어떻게 해야할까요? 바로 클래스 레벨의 프로퍼티와 메서드를 사용하면 ..

Polymorphism (다형성) 필요한 메서드를 재정의 해서 사용할 수 있다 (오버라이딩) 오버라이딩 한 상태에서 부모 class의 메서드를 사용하고 싶으면 super 키워드를 사용하면 된다 // 부모 class class Shape { constructor(width, height, color) { this.width = width; this.height = height; this.color = color; } draw() { console.log(`drawing ${this.color} color of`); } getArea() { return this.width * this.height; } } class Rectangle extends Shape {} class Triangle extends S..

Inheritance (상속) 부모 class에 있는 모든 것들이 자식 class에 포함이 됨 공통되어지는 값들을 extends 키워드로 재사용 할 수 있다 부모 class의 값을 변경하면 자식(상속 받은) class의 값들도 자동으로 변경됨 부모의 constructor가 2개일 때 class Animal { constructor(color,eat) { this.color = color this.eat = eat } eat() { console.log('먹자!') } sleep() { console.log('잔다') } } class Dog extends Animal { constructor(color,eat ,ownerName) { super(color, eat) this.ownerName = owne..