?. optional chaining 지금까지 회사에서 리액트를 다룰 떄 굉장히 많이 썼다. 데이터가 늦게 도착하기 때문에 렌더링 되기전에 에러뜨는걸 막기 위해서 주로 쓴다 . 값이 null 또는 undefined 일 경우 undefined로 처리해달라 ~ 뭐 이런뜻. var user = { name : 'kim' } console.log(user?.name1) ?? nullish coalescing operator var user; console.log(user ?? '로딩중') 값이 null, undefined 일 경우 오른쪽 문자열을 보여주기. if문 대신 사용가능함.

Destructuring은 실전프로젝트 하면서 수없이 쓴거같다. 무턱대고 썼다가 초반엔 어떻게 나오는지 괜히 콘솔 찍어보면서 확인하고 쓰거나 안쓰거나 별 상관없다고 하기엔 사소한 오류를 많이 일으키기 때문에 신경써야하는 부분 중 하나였다. 나중엔 웬만하면 전부 썼다. 로그인 이후 인증 미들웨어를 거친 유저의 정보를 대부분 Destructuring하여 사용했다. async function createBoard(req, res, next) { try { ... const { userName } = res.locals.User; ... } 위 코드는 아래와 같다. var User = { name: 'kim', age: 30, sex: "male"}; const {name, age, sex} = User; co..

class를 복사한다? 상속받는다? 확장한다? 개념. 이전에 작성한 class에서 추가할 때 사용하면 될듯. class Dog{ constructor(종류, 컬러){ this.type = 종류, this.color = 컬러 } } class Cat extends Dog{ constructor(종류, 컬러, 나이){ super(종류, 컬러) this.age = 나이 } } var 강아지1 = new Dog('말티즈', 'white')//Dog { type: '말티즈', color: 'white' } var 강아지2 = new Dog('진돗개', 'gold')// Dog { type: '진돗개', color: 'gold' } var 고양이1 = new Cat('샴', 'white', 20)//Cat { ty..

class Student { constructor(이름, 나이) { (this.name = 이름), (this.age = 나이); } } Student.prototype.sayHello = function() { console.log(`안녕 나는 ${this.name} 이야.`); }; Student.prototype.sayHi = () => { console.log(`안녕 나는 ${this.name} 이야.`); }; var 학생1 = new Student("kim", 20); console.log(학생1); 학생1.sayHello() //안녕 나는 kim 이야. 학생1.sayHi() //안녕 나는 undefined 이야. function으로 쓴 것과 Arrow Function으로 작성한 것에서 thi..

Async Await은 프로젝트 하면서 수없이 써본것 같다. 대부분 함수 내에서 DB에 어떤 요청을 하는 코드에서 썼다. DB에 요청하고 그 처리가 완료될때까지 대기 후 결과를 받아야 하기 때문이다. async function showWorkSpaces(req, res) { try { const workSpaceList = await workSpace.find({}); return res.status(200).json( workSpaceList ); } catch (err) { return res .status(400) .json({ success: false, message: "전체 워크스페이스 조회 실패" }); } } Async는 그냥 함수 앞에 붙여주면 된다. 뭔가 기능을 선언해주는 느낌으로 ? ..

Promise는 코드/함수 디자인 패턴일 뿐이다. 자바스크립트의 새로운 기능 X Promise가 좋은 이유 1. 콜백함수와는 다르게 순차적으로 뭔가를 실행할 때 코드가 옆으로 길어지지 않는다. then 함수를 붙여서 순차적으로 실행. 2. 콜백함수는 불가능한 '실패시 특정 코드를 실행해주세요~' 라고 코드를 짤 수 있다. (catch) 성공하면 then(), 실패하면 catch()를 실행 성공 실패 Promise의 몇가지 특징 1. 일단 new Promise()로 생성된 변수를 콘솔창에 출력해보면 현재 상태를 알 수 있다. 프로미스 오브젝트들은 3개 상태가 있다 성공/실패 판정 전에는 성공 후엔 실패 후엔 이다. 성공을 실패나 대기상태로 다시 되돌릴 순 없다. 2. Promise는 동기를 비동기로 만들어..