자바스크립트는 단일 쓰레드(single-threaded) 언어이다. 이는 자바스크립트 엔진이 한 번에 하나의 작업만 처리할 수 있다는 것을 의미한다. 다른 많은 프로그래밍 언어들은 멀티 쓰레드(multi-threaded)를 지원하여 동시에 여러 작업을 처리할 수 있다. 멀티 쓰레드 언어에서는 한 쓰레드가 작업을 처리하는 동안에도 다른 쓰레드가 다른 작업을 처리할 수 있다. 그러나 자바스크립트는 단일 쓰레드 언어이므로 한 번에 하나의 작업만 처리할 수 있다. 이는 자바스크립트 코드가 순차적으로 실행되는 것을 의미한다. 자바스크립트는 이벤트 루프(event loop)와 비동기 콜백(callback)을 통해 비동기적인 작업을 처리할 수 있게 한다. 이벤트 루프는 콜백 함수를 대기열에 추가하고, 대기열의 작업이..

2015년, 자바스크립트 ES6 버전이 디벨롭되면서 화살표 함수(arrow function)라는 문법이 생겨났고, 이 화살표 함수를 사용함으로 함수 코드의 작성 시의 간결함과 가독성을 높여주었다. 하지만 화살표 함수가 기존의 함수 작성 문법인 익명 함수(anonymous function)을 완전히 대체하지 못하는데, ES6 이상의 모던 자바스크립트로 학습을 시작한 학습자, 또는 심지어 많은 주니어 개발자들이 이를 모르고 있는 경우가 많아, 이 둘의 특징과 차이점을 정리해보았다. 1. 구문 익명 함수는 'function' 키워드를 사용하여 함수를 작성한다. 함수 이름이 없으며, 변수에 할당하거나 다른 함수의 매개 변수로 전달할 수 있다. const anonymous = function() { // 함수 내..

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

객체의 선언은 아래 코드와 같다. 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가 나올 것이다. 다음은 객체를 추가하는 방법이다. 처음에..

Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `string` type. Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `object` type. Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `boolean` type. 위의 에러 구문이 발생하는 원인은 리액트의 이벤트 핸들러(event handler)는 반드시 '함수' 형태로 받아야 하는데, '함수가 아닌 다른 형식'으로 받았기 때문입니다...