JSDoc이란? JSDOC은 Javascript 소스코드 파일에 주석 용도의 마크업 언어입니다. 주석이기 때문에 코드에 영향을 주지 않습니다. 빨간 박스 안에 있는 부분이 JSDoc입니다. // 스크린샷 기준으로 맨 윗 줄인 해당 문구를 통해 props의 자료형이 object임을 알려주고 있습니다. @param {object} props // 해당 구문을 통해서는 props.align에 어떤 속성들이 있는지 알려주고 있습니다. @param {'right' | 'center' | 'left' } props.align 아래 첨부사진과 같이 JSDoc에 param들에 커서를 두면 프로퍼티 목록을 제공합니다. 저는 타입과 프로퍼티를 가이드하옂 가독성을 높여 유지보수를 수월하게 하는 도구로 사용하고 있습니다. 공..

const obj = { author: "cotist", age: 10 } 위와 같이 author, age 두 개의 키를 가진 객체가 있고 같은 양식의 객체들이 필요하다면 어떻게 해야할까? 위의 객체를 ctrl+c, ctrl+v를하여 객체명과 키의 값만 바꿔도 되긴 하겠지만 키가 개수가 많아질수록 반복되는 코드가 늘어나고 결국은 레거시처럼 보일 것이다. (레거시처럼 보이는게 아니고 레거시가 맞다.) // bad example const obj1 = { author: "cotist1", age: 10 } const obj2 = { author: "cotist2", age: 11 } const obj3 = { author: "cotis3", age: 12 } const obj5 = { author: "cot..

객체의 선언은 아래 코드와 같다. const tistory = { author: "cotist", date: "22/07/31", age: 8, }; tistory라는 객체를 선언을 하였다. 각 요소의 좌변은 키(key)이며 author, date, age에 해당되며 우변은 키의 값이다. 객체의 요소에 접근하는 방법은 두 가지가 있는데 콘솔 로그로 아래 코드를 보자. const tistory = { author: "cotist", date: "22/07/31", age: 8, }; // 객체의 요소에 접근하는 방법 console.log(tistory.author); console.log(tistory["author"]); 두 결과 모두 cotist가 나올 것이다. 다음은 객체를 추가하는 방법이다. 처음에..

hoist : 끌어(감아) 올리다. 자바스크립트는 유연한 언어인 만큼, 실행되지 않아야 할 코드가 예상하지 못한 결과로 도출될 경우가 종종 있습니다. 그 중 하나가 "var Hoisting(호이스팅)"입니다. var 호이스팅이란 var를 통한 선언문을 실행 시 스코프의 최상단으로 올려 할당하는 것을 의미합니다. 아래 예시를 보고 이 동작이 왜 문제가 되는지 let과 비교하여 생각해 보세요. 순차적으로 보았을 때, 초기화, 선언되지도 않은 변수를 불러오면 당연히 에러가 떠야하는 것이 일반적입니다. let 선언 시, 생각대로 에러가 발생하는 것을 보여주고 있습니다. 하지만 var은 호이스팅이 발생하면서 undefined 혹은 100을 뱉고 있습니다. 프로젝트에서 이를 인지하지 못하고 실수가 곁들인 코드를 짠..