Category/JavaScript9 원시값(Primitive)과 객체의 차이 typeof value === "object"는 객체({})나 배열([]) 같은 참조 타입을 의미함하지만 원시값(number, string, boolean, null, undefined, symbol, bigint)은 객체가 아님원시값과 객체 비교 예제console.log(typeof 42); // "number"console.log(typeof "hello"); // "string"console.log(typeof true); // "boolean"console.log(typeof null); // "object" (JS의 버그, 실제로는 원시값!)console.log(typeof {}); // "object"console.log(typeof []); // "object" 2025. 3. 20. ... (Spread Operator)로 얕은 복사(Shallow Copy)하기 스프레드 연산자는 얕은 복사를 수행한다.하지만, 모든 값이 복사되는 방식이 다름!Primitive 타입(원시값) → 새로운 값이 복사됨Object 타입 (참조값) → 기존 객체의 참조(reference) 가 복사됨코드 실행 결과const test = { name: "bob", profile: { email: "test@", },};// 얕은 복사 (Shallow Copy)const test2 = { ...test };test2.name = "w"; // (1) 새로운 값으로 변경test2.profile.email = "changed@"; // (2) 중첩 객체 내부 값 변경console.log(test); // 원본 객체console.log(test2); // 복사된 객체출력 결과// 원본 .. 2025. 3. 18. JavaScript에서 export와 import의 개념과 사용법 JavaScript의 모듈 시스템 (ES6 Modules) 에서 export와 import는 코드의 재사용성과 유지보수성을 높이는 중요한 기능입니다.이를 통해 하나의 파일에서 정의한 변수, 함수, 클래스 등을 다른 파일에서도 사용할 수 있습니다.1. export의 종류JavaScript에서는 두 가지 방식으로 모듈을 내보낼 수 있습니다.(1) Named Export (이름을 지정한 내보내기)Named Export는 하나의 파일에서 여러 개의 변수, 함수, 클래스를 개별적으로 내보낼 수 있는 방식입니다. 사용법// utils.jsexport const add = (a, b) => a + b;export const subtract = (a, b) => a - b;export const multiply = (.. 2025. 3. 15. Axios: HTTP 요청을 쉽게 만드는 JavaScript 라이브러리 Axios는 웹 개발자들이 브라우저와 Node.js 환경에서 쉽게 HTTP 요청을 보낼 수 있도록 도와주는 JavaScript 라이브러리입니다. 주로 API와의 통신을 위한 요청을 보내고 응답을 처리할 때 사용됩니다.1. 주요 기능Promise 기반 비동기 처리: async와 await를 통해 비동기 처리를 쉽게 작성할 수 있습니다.자동 JSON 데이터 변환: 요청과 응답 데이터를 JSON으로 자동 변환하여 다루기 쉽게 해줍니다.요청/응답 인터셉터: 요청이 보내지기 전이나 응답이 도착하기 전에 미리 작업을 지정할 수 있습니다. 예를 들어, 인증 토큰을 자동으로 추가할 때 유용합니다.브라우저와 Node.js 환경 모두에서 사용 가능: Axios는 클라이언트와 서버에서 동일한 방식으로 사용할 수 있습니다.C.. 2024. 11. 11. [JavaScript] 브라우저의 기본 동작 막기 event.preventDefault() JavaScript에서 event.preventDefault()는 브라우저의 기본 동작을 막는 메서드입니다. 이 메서드는 특히 웹 개발에서 폼 제출, 링크 클릭, 키 입력 등의 이벤트가 발생했을 때 기본적으로 수행되는 브라우저의 동작을 방지하고, 개발자가 정의한 로직을 실행하고자 할 때 유용하게 사용됩니다.기본 동작이란?HTML 요소에는 특정 이벤트가 발생할 때 수행되는 기본적인 동작들이 있습니다. 예를 들어: 요소에서 submit 이벤트가 발생하면, 기본적으로 페이지가 새로고침되거나 폼 데이터가 전송됩니다. 태그의 링크를 클릭하면, 지정된 URL로 이동합니다.input[type="checkbox"]를 클릭하면 체크박스가 선택되거나 선택 해제됩니다.이런 기본 동작들은 브라우저가 자동으로 처리하지만, 때로.. 2024. 11. 7. 자바스크립트 reduce() reduce()는 자바스크립트 배열의 메서드로, 배열의 각 요소를 순차적으로 처리하여 하나의 값으로 축약하는 기능을 합니다. reduce()는 배열의 모든 요소에 대해 주어진 콜백 함수를 실행하고, 그 결과를 누적하여 최종 값을 반환합니다. 이 과정에서 이전 단계의 반환 값이 다음 단계의 입력 값으로 사용됩니다.기본 문법:array.reduce(callback(accumulator, currentValue, index, array), initialValue);매개변수:callback: 배열의 각 요소에 대해 호출되는 함수. 총 4가지 인자를 받습니다:accumulator: 이전 단계에서 반환된 누적 값.currentValue: 현재 처리 중인 배열 요소.index (선택 사항) : 현재 처리 중인 배열 .. 2024. 10. 29. 이전 1 2 다음