Per ardua ad astra.

.js 파일에서 Uncaught SyntaxError: Unexpected token '들어가며@.js@ 파일에서 @Uncaught SyntaxError: Unexpected token '이 문제는 Vite로 만든 프로젝트에 발생하는 문제이다.  문제 발생 상황@/src/utils/links.js@ 파일에서 컴포넌트(Component)가 @value@로 들어 있는 @key@가 들어 있는 객체를 외부 컴포넌트에서 import 하여 사용하려고 할 때, 다음과 같은 오류가 발생하였다. /src/utils/links.js@icon@ 키의 값을 외부 컴포넌트에서 불러올 때 위와 같은 오류가 발생하였다.const links = [ { id: 1, text: 'stats', path: '/', ..

for 문 정리 (for, for...in, for...of, forEach, for await...of)들어가며자바스크립트(JavaScript)에서 사용할 수 있는 for 문(@for@, @for...in@, @for...of@, @forEach@, @for await...of@)에 대해 간단하게 정리해본다. 종류① @for@ 문특정 횟수만큼 반복할 때 사용한다.for (initialization; condition; increment) { // 반복할 코드} 예제 코드for (let i = 0; i  ② @for...in@ 문객체의 열거 가능한 속성을 반복할 때 사용한다.배열(Array)에서도 인덱스를 반복할 수 있지만, 일반적으로 객체(Object)에 사용된다.for (const key in ob..

JSON(JavaScript Object Notation) 다루기들어가며웹 서버 뿐만 아니라 다양한 곳에서 데이터를 교환할 때 사용되는 파일 형식인 JSON(JavaScript Object Notation)에 대해 정리해본다. JSON(JavaScript Object Notation)개념데이터 교환 형식으로 널리 사용되며, 문자열로 인코딩된 객체를 포함한 구조화된 데이터를 표현한다.자바스크립트는 JSON 데이터를 다루기 위해 JSON 객체를 제공한다. 주요 메서드JSON 객체의 주요 메서드로는 @JSON.stringify()@와 @JSON.parse()@가 있다. ① JSON.stringfy()자바스크립트 객체(@{ prop: value, ... }@)나 배열(@[value1, ..., valueN]@)..

요소에서 제출(Submit) 버튼 사용 시 기본 동작 막는 방법들어가며@@ 요소 안에 @type@이 @submit@인 버튼을 두고, 클릭할 때, 폼 제출 효과가 발생한다.해당 버튼을 클릭할 때 폼 데이터가 서버로 전송되면서 페이지가 새로고침 되는데, 이것은 폼의 기본 동작이다. // ... 제출 이때 폼 제출 효과 막을 수 있는 방법을 정리해본다. 방법방법 1 : @@ 요소의 @type@ 속성을 @button@으로 지정하기@@ 요소의 @type@ 속성을 @submit@이 아닌 @button@으로 지정하는 방법이다.function handleSubmit() { console.log("Submitted!");} 로그인  방법 2 : @@ 요소의 @onClick@ 이벤트 함수에 @event...

Intl.NumberFormat 객체들어가며자바스크립트(JavaScript)의 @Intl.NumberFormat@ 객체에 대해 알아보자.@Intl.NumberFormat@ 객체를 사용하면 숫자를 특정 로케일과 옵션에 맞춰 포맷팅(Formatting) 할 수 있다. Intl.NumberFormat 객체개념에크마스크립트(ECMAScript) 국제화 API의 일부로, 숫자의 형식을 지정하는 데 사용된다.로케일(Locale)과 옵션(Option)을 사용하여 숫자의 형식을 세부적으로 지정할 수 있다. 주로 통화, 소수점 자리수, 숫자 그룹화 등의 형식을 지정하는데 사용된다. 사용 방법new Intl.NumberFormat(locales, options) @locales@로케일 지정로케일(Locale)컴퓨터 프로그..

map 함수를 사용할 때 중괄호({})와 소괄호(())들어가며리액트(React)에서 중괄호 @{}@와 소괄호 @()@는 주로 JSX 안에서 사용되며, 특히 @map()@ 메서드와 함께 사용될 때 주의해야 할 점이 몇가지 있다.@map@ 함수를 사용할 때 중괄호(@{}@)와 소괄호(@()@)를 사용하는 경우의 차이에 대해 알아보자. 중괄호(@{}@)자바스크립트 표현식(Expression)을 감싸기 위해 사용된다.중괄호를 사용할 때는 반드시 반환값이 있어야 하며, 명시적으로 @return@ 키워드를 사용해서 값을 반환해야 한다.여러 줄의 코드가 필요하거나 조건문 등 복잡한 로직을 작성해야 할 때 사용한다.const items = ['Apple', 'Banana', 'Cherry'];const listItem..

실시간으로 특정 요소의 길이값 가져오기들어가며리액트애서 실시간으로 특정 요소의 길이값을 가져오는 방법을 알아보자. 방법우선 @useRef@를 이용하여 실시간으로 길이값을 가져올 요소를 지정해준다.import {useRef} from 'react';// ...const horiRef = useRef(null);// ...return ( {/* ... */} ); 다음과 같이 @useEffect@와 @ResizeObserver@를 이용하여 해당 요소의 사이즈값을 실시간으로 가져올 수 있다.import { useEffect } from 'react';useEffect(() => { const resizeObserver = new ResizeObserver((entries) => ..

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

변수 재선언과 재할당 (var, let, const) 들어가며 자바스크립트의 변수(@var@, @let@, @const@)의 재선언과 재할당에 대하여 알아보자. 재선언과 재할당 ① @var@ 재선언 및 재할당이 모두 가능하다. var sum = add(10, 20); console.log(sum); // 30 var sum = 100; // 재선언 (가능) console.log(sum); // 100 sum = 200; // 재할당 (가능) console.log(sum); // 200 하지만 @var@을 사용할 경우, 다음과 같이 호이스팅(Hoisting)이 발생할 수 있다. var x = 10; var sum = x + y; // y 변수가 선언되기 전에 실행 var y = 20; console.log..

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

클래스 컴포넌트(Class Components)와 함수형 컴포넌트(Functional Components) 들어가며 리액트(React)는 기본적으로 클래스 컴포넌트(Class Components)와 함수형 컴포넌트(Functional Components) 2가지 유형의 컴포넌트를 제공한다. 최신 리액트 버전에서는 함수형 컴포넌트와 훅스(Hooks)를 사용하는 것이 권장되며, 상태 관리나 라이프사이클 이벤트 처리를 더 간단하게 할 수 있는 장점이 있다. 그러나 이미 클래스 컴포넌트로 작성된 코드가 많다면, 따로 변경할 필요는 없다. 클래스 컴포넌트와 함수형 컴포넌트에 대해 알아보자. 클래스 컴포넌트(Class Components) ES6의 클래스 문법을 사용하여 생성된다. @class@ 키워드를 사용하여 ..

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

훅(Hook)들어가며리액트(React)에서 사용되는 기본적인 훅(Hook)들에 대해 알아보자. 훅(Hook)개념함수 컴포넌트에서 상태(State)나 생명주기 기능 등을 사용할 수 있도록 도와주는 기능클래스 컴포넌트의 기능을 함수 컴포넌트에서도 사용할 수 있게 해준다.가장 널리 사용되는 훅으로는 @useState@, @useEffect@, @useContext@ 등이 있다.각각의 훅을 활용하면 함수 컴포넌트에서 상태 관리, 부수 효과 처리, 전역적인 데이터 공유 등을 편리하게 할 수 있다.이 외에도 많은 다양한 훅이 있으며, 직접 커스텀 훅을 만들어 사용할 수도 있다.훅을 사용하면 함수 컴포넌트에서 상태를 관리하고, 생명주기 메서드를 이용할 수 있어 훨씬 간결하고 유연한 코드를 작성할 수 있게 된다. 종류..

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..

리액트(React)에서 HTML 요소의 클래스를 지정할 때 class가 아닌 className을 사용하는 이유? 들어가며 리액트(React)에서 HTML 요소의 클래스를 지정할 때 @class@가 아닌 @className@을 지정하는 이유를 알아보자. 이유 리액트(React)에서 HTML 요소의 클래스를 지정할 때, 다음과 같이 @class@가 아닌 @className@을 지정한다. 그 이유는 자바스크립트(JavaScript)와의 충돌을 피하기 위해서이다. 리액트는 자바스크립트와 JSX를 사용하여 UI를 작성한다. JSX는 자바스크립트의 확장 문법이다. JSX는 HTML과 유사하게 보이지만, 자바스크립트의 일부이다. 자바스크립트에는 @class@라는 키워드(Keyword)가 있기 때문에 리액트에서 HTM..

==/!= 연산자와 ===/!== 연산자의 차이점들어가며자바스크립트에서 사용되는 @==@ / @!=@ 연산자와 @===@ / @!==@ 연산자의 차이점에 대해 알아보자. @==@ / @!=@ 연산자비교하는 피연산자의 자료형을 자동으로 변환해서 비교한다.숫자 @3@과 문자열 @"3"@을 비교하면, 문자열로 변환해서 비교하므로 2개의 값이 같다고 인식한다.3 == "3" // true3 != "3" // false @===@ / @!==@ 연산자값 뿐만 아니라 데이터 유형(자료형)까지 비교한다.자동으로 자료형이 변환되지 않는다.따라서 자바스크립트를 사용하면서 값을 비교할 때는 @==@, @!=@ 연산자보다 @===@, @!==@ 연산자를 사용하는 것이 좋다.3 === "3" // fals..