[Javascript/React] Frontend 질문 정리

내일 당장 발표라서 예상 질문들을 적어보고 정리해보았다... 화이팅...

 

1. 동기 / 비동기

자바스크립트는 한번에 하나의 동작만을 실행한다.

이러한 동작을 단일 스레드( 싱글 스레드), 동기( Synchronous) 라고 부른다.

 

비동기는 어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식을 말한다.

 

원래는 콜백으로 해결했지만, 끝없이 콜백을 걸면 콜백지옥에 빠질 수 있기 때문에, 

이를 해결하기 위해 나온게 async/await. Promise

- Promise 

new Promise((resolve, reject)=>{};

1. executor : 첫 번째 인수로 reolve이며, 두번째 인수로 reject를 받습니다.

resolve 는 비동기 작업이 성공했다는 의미이고, reject는 비동기 작업이 실패했다는 의미입니다.

 

2. new Promise(...) 하는 순간 여기에 할당된 비동기 작업이 바로 시작됩니다.

비동기 작업의 특징은 언제 끝날지 모르기 때문에 return 값이 Promise 이다.

Promise가 끝나고 다음의 동작을 설정할 수 있는데, then과 catch이다.

then : Promise가 성공했을 때의 동작을 지정한다. 인자로 함수를 받는다.

catch : Promise가 실패했을 때의 동작을 지정한다. 인자로 함수를 받는다.

 

executor로 새로운 Promise를 만든 다음, then과 catch를 이용하여 후속 동작까지 지정해 줘야 Promise가 돌아가는 것을 볼 수 있다.

 

- aync/ await

async 키워드는 함수를 선언할 때 붙여줄 수 있다.

async 함수의 리턴 값은 무조건 Promise 이다. 그러므로 then과 catch를 활용하여 흐름을 제어해야 한다.

그래서 보통 try...catch를 사용해서 reject가 발생하는 경우에 catch절에서 해결하게 된다.

async 함수 안에서는 await를 사용할 수 있다.

 

await는 Promise가 fulfilled가 되든지 reject가 되든지 아무튼간에 끝날 때 까지 기다리는 함수이다.

 

2. 리액트 동작..

https://sewonzzang.tistory.com/13

[React] 자주 사용되는 생명주기 메서드

 

마운트

constructor() > render() > DOM 및 refs 업데이트 > ComponentDidMount()

업데이트

New Props > render

setState() > render() > React DOM 및 refs 업데이트 > componentDidUpdate()

제거

componentWillUnmount()

 

 

1. constructor : React에서 Component를 생성할 때 state값을 초기화 하거나 메소드를 바인딩 할 때 사용.

super : 부모 클래스 생성자를 가리킨다. ( React 에서는 React.Component)

super(props) 가 호출되면 현재 클래스형 컴포넌트가 상속하고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출해 주는 것이다. 따라서, super(props)를 호출하기 전까지는 constructor에서 this를 사용할 수 없다.

super()가 호출되지 않으면 this가 초기화 되지 않기 때문이다. super(props)에서 인자로 props를 넘겨주는 것이 constructor 안에서 this.props를 접근할 수 있게 만들어 주는 것이다.

 

class 컴포넌트에서 state를 사용할 때에는 컴포넌트의 형태가 클래스이기 때문에 this.state로 사용할 수 있다.

 

 

 

(공통 코드에는 get pageContainer(){} 로 prop를 받아왔음)

{get prop(){...}}

접근자(getter): 명시적인 함수 호출 없이도 객체의 내부 변수 상태를 반영하는 값을 나타내고 싶은 경우에....

prop: 주어진 함수를 바인딩 할 속성 이름

정리하자면 props는 부모 컴포넌트에서 설정한 것이고, 자식에게로만 전달이 가능한 데이터..(자식은 props로 부모에게 줄 수 없음)

부모에게 물려받은 props(pageConatiner)를 자식에서 pageContainer라는 변수에 집어넣어서 사용하겠다는 의미..인거같음...!

util도 마찬가지...!!!

 

1) Getter

getter는 어떤 프로퍼티(property)에 접근할 때마다 그 값을 계산하도록 해야 하거나 내부 변수의 상태를 명시적인 함수 호출 없이 보여주고 싶을 때 Javascript의 getter를 이용할 수 있습니다.

바인딩(binding)이란 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는 행위를 의미합니다. 예를 들어 함수를 호출하는 부분에서 실제 함수가 위치한 메모리를 연결하는 것도 바로 바인딩입니다.

프로퍼티(property)는 일부 객체 지향 프로그래밍 언어에서 필드(데이터 멤버)와 메소드 간 기능의 중간인 클래스 멤버의 특수한 유형입니다. 프로퍼티의 읽기와 쓰기는 일반적으로 게터(getter)와 세터(setter) 메소드 호출로 변환됩니다.

https://axce.tistory.com/59

#14. 자바스크립트(javascript) - getter 와 setter

//

OOP 언어에서 getter/setter가 사용되는 이유는 OOP의 기본 개념 중 하나인 캡슐화 (encapsulation) 때문입니다. 캡슐화라는 것은 간단히 말하면 오브젝트 내부의 성질을 오브젝트 외부에서 직접 관여하지 못하게 하는 것이고 오직 오브젝트가 제공하는 루트를 통해서만 관여할 수 있게끔 하는 것입니다.

//

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/get

접근자 - JavaScript | MDN

 

3. object.freeze() // 열거형

객체를 불변하게 만듦

객체의 속성을 확인하면 알 수 있다..!

객체의 속성 설명자에는 value, writable, enumerable, configurable 으로 네 가지 설명자가 존재한다.

이는 getOwnPropertyDescriptor() 함수를 통해 확인할 수 있다.

- writable : 해당 속성 값을 변경할 수 있는지 여부를 나타냄 ( freeze가 된 객체는 writable이 flase로 되어 있음)

Object.defineProperty() 함수로 설명자의 writable 속성 값 변경 가능

Object.defineProperty(obj, 'name', {writable:false});

객체는 값을 가지는 형식(call by value)가 아니라 값을 참조하는 형식(call by reference)이므로 중첩된 객체의 속성을 변경하는 것을 막지 않는다.

-enumerable : 객체의 속성은 열거 가능하므로 for...in반복문으로 접근할 수 있다.

-configurable : false 일 때 해당 속성을 잠그고 enumerable 및 configurable을 다시 변경하는 것을 방지, 그리고 해당 속성을 삭제하지 못하도록 방지, 그러나 쓰기(writable)는 가능.

 

vs object.seal() : 객체를 봉인한다. 

속성 제거 불가능, 새로운 속성 추가 불가능

기존 속성의 값을 변경할 수 있다.

 

vs object.preventExtensions() : 객체를 확장 불가능한 상태로 변환

해로운 속성 추가 불가능

기존속성의 값 변경 가능, 이미 존재하는 속성을 제거할 수 있다.

 

https://developer-talk.tistory.com/277

[JavaScript]객체 속성(writable, enumerable, configurable)

(+ const 블록 범위의 상수를 선언, 상수의 값은 재할당 할 수 없으며 다시 선언할 수 없다.)

 

 

4. ?. 옵셔널 체이닝

 

프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근이 가능

앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

(옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작한다. 선언하지 않은경우에는 error)

 

5. 구조 분해

callapi를 할 때 객체를 분해함 ! ({resultData, resultMsg, resultCode} = await this.callApi(...);)

배열의 요소를 직접 변수에 할당하는 것보다 코드의 양이 줄어든다는 점만 다르다.

 

6. [... array] 전개 구문

배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 또는 요소로 확장하여

확장시킬 수 있다.

menu:{

1:[], 2:[], 3:[]

}

 

1번메뉴 menu[1], 2번메뉴 menu[2], 3번메뉴 menu[3]

을 0에 모아서 반환하려고 한다..

return [ ...menu[1], ...menu[2], ...menu[3]];

 

 

// 유사객체배열 vs 배열

// 유사객체배열은 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다.

// 배열의 forEach, map, filter, reduce 같은 메서드를 사용할 수 없다는 것이 배열과의 차이점이다.

// 그렇다면 어떻게 해야 하는가? >> Array.from() 메소드를 사용하는 것이다

// Array.from() : 유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 Array객체를 만든다.

 

 

 

pageContainer

HOC (Higher-order Component)

 

//

 

코드를 작성하다보면, 자주 반복해서 작성하게 되는 코드들이 있습니다. 우리는 주로 그러한 것들을 함수화하여 재사용 하곤 하죠. 컴포넌트 또한 비슷하죠. 같은 UI 관련 코드가 재사용 될 수 있다면 우리는 컴포넌트를 만들어서 컴포넌트를 재사용합니다. 자, 그런데 컴포넌트 기능 상에서도, 자주 반복되는 코드들이 나타날 수 있습니다. 소프트웨어 개발 원리 중에서 DRY 라는 개념이 있죠 – 같은 작업을 반복하지 마라 (Don’t repeat yourself)

리액트 컴포넌트를 작성하게 될 때 반복될 수 있는 코드들은, HOC 를 만들어서 해결해줄 수 있습니다. HOC 는, 하나의 함수인데요, 함수를 통하여 컴포넌트에 우리가 준비한 특정 기능을 부여합니다. 직접 만들어볼 때 까지는 감이 잡히지 않을 수도 있습니다. 한번, 직접 만들어봅시다!

 

//

 

 

 

 

클래스 필드 (Class Field)

클래스 블록 안에서 할당 연산자(=)를 이용해 인스턴스 속성을 지정할 수 있는 문법을 클래스 필드(class field)라고 합니다.