Per ardua ad astra.

모듈 방식 사용하기들어가며타입스크립트(TypeScript)에서 모듈 방식을 사용하는 방법을 정리해본다. 방법타입스크립트 파일(@.ts@/@.tsx@)은 기본적으로 모듈(Module)로 간주되지 않고, 전역 범위의 스크립트로 처리된다.여러 파일에서 동일한 변수명을 생성할 경우, 오류가 발생한다.fileA.tslet name = 'stickman';const susan = 'susan'; fileB.tsconst susan = 'susan'; // 오류 발생 이때, 다음과 같이 2가지 방법으로 타입스크립트 파일을 모듈로 변환할 수 있다. 방법 ① : @import@, @export@ 문 사용하기타입스크립트 파일에 @import@ 또는 @export@ 문을 추가하여 ES6 모듈로 취급되게 하는 방법이다. ..

전개 연산자 (Spread Operator, ...)들어가며자바스크립트(JavaScript)에서 사용할 수 있는 전개 연산자(Spread Operator, @...@)에 대해 정리해본다. 전개 연산자(Spread Operator, @...@)개념배열(Array)이나 객체(Object)를 쉽게 확장하거나 복사할 수 있는 기능배열, 객체, 함수 호출에서 다양하게 사용할 수 있다.배열의 병합 & 복사객체의 병합 & 복사함수 호출 시 인수 확장전개 연산자를 사용할 때, 얕은 복사(Shallow Copy)가 이루어진다.ES6(ECMAScript 2015)부터 사용할 수 있다. 얕은 복사는 객체나 배열의 최상위 수준만 복사한다. (중첩된 객체나 배열은 원본 데이터에 대한 '참조'를 유지한다.) 따라서 전개 연산자를..

마우스 호버 효과를 적용하기 위한 커스텀 훅 만들기 (useHover.js) 들어가며 요소 위에 마우스 커서를 호버 시, 효과가 작동할 수 있도록 커스텀 훅을 만들어보자. 방법 기존의 방법 커스텀 훅을 사용하지 않을 경우, @mouseover@, @mouseout@에 대한 각각의 이벤트 핸들러 함수를 만들어서 마우스 호버 효과를 적용시키고 싶은 대상에 연결해 주는 방식으로 구현할 수 있었다. import React, { useState } from react; const MyComponent = () => { const [isHovered, setIsHovered] = useState(false); const handleMouseOver = () => { setShowPopup(true); }; cons..

자바스크립트 비동기 프로그래밍(Asynchronous Programming) 들어가며 자바스크립트의 비동기 프로그래밍(Asynchronous Programming)에 대해 공부했던 내용을 정리해본다. 비동기 프로그래밍(Asynchronous Programming) 개념 자바스크립트에서 서버와 통신을 하다 보면 어떤 자료를 요청하고 받는지에 따라, 또는 네트워크 속도에 따라 조금씩 처리 시간이 달라진다. 그리고 시간 차이가 나는 처리 결과를 받아서 순서대로 처리해야 하는데, 이러한 처리 방식을 '비동기 처리 방식'이라고 한다. 자바스크립트 프로그램은 많은 함수들이 모여서 하나의 기능을 만든다. 그런데 이들 함수의 실행 시간이 서로 다르므로 특정 작업이 끝나면 다른 작업을 하고, 그 작업이 끝나면 이어서 또..

스프레드 연산자(Spread Operator) 들어가며 자바스크립트(JavaScript) ES6에 추가된 스프레드 연산자(Spread Operator)에 대해 알아보자. 스프레드 연산자(Spread Operator) 개념 스프레드 연산자(@...@)는 자바스크립트에서 배열(Array)이나 객체(Object)를 확장하거나 펼치는데 사용된다. 이 연산자를 사용하면 배열이나 객체의 요소를 추출하거나 복제하여 다른 배열이나 객체에 포함시킬 수 있다. 스프레드 연산자는 코드를 더 간결하게 만들고 배열이나 객체를 조작하거나 복제할 때 유용하게 사용된다. 활용 방법 ① 배열(Array)에서의 스프레드 연산자 활용 배열에서 스프레드 연산자는 다음과 같이 사용될 수 있다. const numbers = [1, 2, 3];..

디스트럭처링(Destructuring) 들어가며 자바스크립트 ES6에 추가된 디스트럭처링(Destructuring) 기능에 대해 알아보자. 디스트럭처링(Destructuring) 개념 ECMAScript 2015(ES6)에서 도입된 기능 중 하나 ES6에서 배열(Array)과 객체(Object)의 요소들을 해체(Destructuring)하여 변수에 할당(Assign)하는 방법으로 등장했다. 이전에는 요소들을 하나씩 변수에 할당하는 번거로운 작업을 해야했는데, 디스트럭처링은 이를 보다 간단하고 직관적으로 처리할 수 있게 해준다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있게 되었다. 종류 및 사용 방법 디스트럭처링은 변수 이름과 객체 또는 배열의 속성 이름이나 순서가 일치해야 한다. const an..

Map / Filter / Reduce / Find / FindIndex / IndexOf / Includes 들어가며 자바스크립트 ES6의 @Map@, @Filter@, @Reduce@, @Find@, @FindIndex@, @IndexOf@, @Includes@ 함수에 대해 알아보자. 이 함수들은 배열을 다양한 방식으로 조작하고 필터링하며, 배열 요소를 가공하여 필요한 결과를 얻을 때 유용하게 사용된다. 설명 ① Map Map 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 함수가 반환하는 값을 모아 새로운 배열을 생성한다. 기존 배열의 각 요소를 변환하여 새로운 배열을 만들 때 주로 사용된다. 예를 들어, 모든 요소를 2배로 만드는 경우와 같이 각 요소를 수정하고 새로운 배열을 생성하는 ..

모듈 시스템 (import/export) 들어가며 ES6에서 도입된 모듈 시스템(Module System)에 대해서 알아보자. 모듈 시스템 개념 ES6에서 도입된 모듈 시스템은 자바스크립트 코드를 여러 파일로 나누고 재사용 가능한 모듈로 구성하는 기능을 제공한다. 이 기능은 @import@와 @export@ 키워드를 사용하여 모듈을 가져오고 내보내는 것으로 이루어진다. 내보내기(Export) 모듈에서 특정한 기능, 변수, 함수, 클래스 등을 다른 파일에서 사용할 수 있도록 내보내려면 @export@ 키워드를 사용한다. ① Named Export 내보내려는 대상에 이름을 붙여서 내보내는 방법이다. // 변수, 함수, 클래스 등을 내보내기 export const myVariable = 10; export f..

화살표 함수(Arrow Function)들어가며자바스크립트(JavaScript)의 화살표 함수(Arrow Function)에 대해 알아보자.  화살표 함수(Arrow Function)개념ES6(ECMAScript 2015)에서 도입된 자바스크립트의 새로운 함수 선언 방식일반 함수 선언보다 간결하고 짧은 문법을 제공하여 코드를 더 읽기 쉽고 간결하게 만들어준다.화살표 함수는 간결하고 콜백 함수를 사용할 때 유용한데, 특히 반복적인 코드 작성을 줄여주는데 도움을 준다.그러나 모든 상황에서 사용해야 하는 것은 아니며, 특히 메서드 함수에서는 일반 함수와의 차이점을 고려하여 사용해야 한다. 기본 문법화살표 함수는 @const functionName = (parameters) => { function body }..

Node.js에서 모듈 불러오는 방식 (require, import) 들어가며 Node.js에서 모듈(Module)을 불러오는 방식은 크게 2가지가 있다. CommonJS 스타일로 불러오는 @require@ 방식과 ES6 모듈 스타일로 불러오는 @import@ 방식 2가지가 있다. 이 두 가지 방법의 차이점에 대해 알아보자. Node.js에서 require과 import의 차이점? require require는 Node.js의 기본 모듈 시스템에서 사용되는 방법이다. CommonJS 스타일로 모듈을 가져온다. // 파일 시스템 모듈 가져오기 const fs = require('fs'); // 사용자 정의 모듈 가져오기 (상대 경로 사용) const math = require('./math'); requi..