JavaScript39 [JavaScript] 자바스크립트 구조 분해 할당 구조 분해 할당(Destructuring assignment)구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 한다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 한다. 이럴 때 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assignment) 을 사용할 수 있다.📌 배열 분해구조 분해 할당 [first, second, third] = numbers는 numbers 배열의 값을 별도의 변수 first, second 및 third로 추출합니다.// Example 1: .. 2024. 9. 4. [React] Vite 를 이용한 React + Typescript 실행환경 세팅하기 비트(Vite)란?Vite는 웹 개발을 위한 빠르고 간단한 빌드 도구입니다. Vue.js의 창시자인 Evan You가 개발하였으며, 이후 React, Svelte 등 다양한 프레임워크와 라이브러리에서 사용할 수 있도록 확장되었습니다. 📌 Vite의 장점장점설명빠른 시작 속도기존 번들러에 비해 개발 서버 시작 속도가 매우 빠릅니다.개발 생산성HMR(핫 모듈 교체)를 통해 변경된 파일을 다시 로드하여 애플리케이션을 즉시 업데이트합니다.모던 개발 경험최신 JavaScript 기능과 ES 모듈을 기본적으로 지원합니다.작은 번들 크기Rollup을 통해 최적화된 생산 빌드를 생성하여 작은 번들 크기를 유지합니다. 📌 Vite 지원하는 템플릿JavaScriptTypeScriptvanillavanilla-tsvue.. 2024. 8. 14. [Node.js] Nodejs 모듈(CommonJS / ES Modules) 모듈(Module) 이란?분리된 하나의 파일을 모듈(module)이라고 부르는데, 모듈은 대게 클래스 하나 혹은 특정한 목적을 가진 여러개의 함수를 포함하는 라이브러리로 구성되어 있다.모듈 시스템CommonJS - NodeJS 환경을 위해 만들어진 모듈 시스템ES Module - ES6(ES2015)에 도입된 자바스크립트 모듈 시스템특징CommonJSES6 모듈확장자.js .cjs.js(package.json에 "type":"module" 추가) .mjs로딩 방식동적 로딩 (런타임)정적 로딩 (컴파일 타임)문법require, module.exportsimport, export모듈 범위파일 단위파일 단위트리 셰이킹지원하지 않음지원 (최적화 가능)사용 환경주로 서버 (Node.js)브라우저, 서버 (트랜스.. 2024. 8. 9. [Node.js] Package.json 패키지 관리 package.json 이란?패키지 관리 저장소새로운 프로젝트나 패키지를 만들 때가장 먼저 하는 일은 npm 프로젝트로 초기화 해주는 명령어 npm init을 실행하는 것이다.이 때 package.json 파일이 생성되는데언뜻 봐도 프로젝트에 대한 정보를 담고 있는 중요한 파일처럼 보인다. Node.js 프로젝트에서는 많은 패키지를 사용하게 되고 패키지의 버전도 빈번하게 업데이트 되므로, 프로젝트가 의존하고 있는 패키지를 일괄적으로 관리할 필요가 있다. npm은 package.json 파일을 통해서 프로젝트의 정보와 패키지 의존성(dependency)을 관리한다. package.json 파일에는 이 프로그램을 실행시키기 위해 필요한 모듈들에 대한 정보와, 프로그램을 실행시키는 방법, 프로그램을 테스트하는.. 2024. 8. 9. [TypeScript] 콜백 함수 활용 함수 - forEach(), map(), filter() 콜백 함수자바스크립트는 함수도 하나의 자료형이기 때문에 매개변수로 함수를 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 콜백(callback) 함수라고 말한다.그리고 동시에 제어권도 함께 전달하는 함수이다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해서 이 콜백 함수를 적절한 시점에 실행한다.콜백 함수를 활용하는 함수자바스크립트가 기본적으로 제공하는 함수 중에서도 콜백 함수를 활용하는 함수가 많다. 어떠한 형태로 콜백 함수를 활용하는지 알아보자.forEach()map()filter()📌 제어권 - 매개변수위의 메소드들의 공통점은 콜백 함수가 매개변수로 value, index 를 사용한다는 것. 콜백 함수를 위임 받은 각 함수(forEach, map, filter)는 콜백 함수의 매개변수.. 2024. 8. 7. [TypeScript] 타입스크립트 예외 처리 Errors (Try, Catch, Finally, Throw) 📖 예외 처리(exception handling)코드 실행 중에 예기치 못한 에러가 발생했을 때, 코드의 실행 흐름을 복구할 수 있는 기능⏳ 오류의 종류1. 코드가 실행조차 되지 않는 오류 프로그램 실행 전에 발생하는 오류를 구문 오류(syntax error)라고 부름. 2. 코드 실행 중간에 발생하는 오류 프로그램 실행 중에 발생하는 오류를 예외(exception) 또는 런타임 오류(runtime error)라고 부름.📚 예외 처리try catch finallytry..catch는 오직 런타임 에러에만 동작 try { // 1) 먼저 실행된다. // 2) 에러가 없으면 catch 구문은 무시된다. // 3-1) 에러가 있으면 실행이 중단되고, catch 블록으로 error객.. 2024. 7. 26. [JavaScript] 자바스크립트 세미콜론(;) ✍️ 중괄호{} 로 묶인 블록을 제외하고는, 세미콜론 입력 세미콜론(;)은 문의 종료를 나내며, 자바스크립트에서는 자동 삽입 기능을 제공한다. 세미콜론은(;)은 문(컴퓨터에 내리는 명령으로 선언문, 조건문, 반복문, 할당문등) 의종료를 뜻한다.자바스크립트에서 중괄호{}로 묶인 블록을 제외하고는 세미콜론을 입력한다. 이를 통해 자바스크립트가 문의 종료한 위치를 파악하여 하나씩 코드를 실행할 수 있도록 해주는 것이다. 중괄호로 묶인 블록에 사용하지 않아도 되는 이유는코드 블록{}은 자체 종결성을 가지고 있기 때문이다. 하지만 세미콜론을 기입하지 않아도 잘 동작이 되는 것을 볼 수 있다. 왜냐하면 자바스크립트는 문의 종료지점으로 예측되는 지점에 자동으로 세미콜론을 삽입해 주는 기능이 있기 때문이다. 그럼에도.. 2024. 7. 26. [TypeScript] TypeScript 개발환경 세팅하기 👉 선행작업이 필요합니다.이에 대한 방법은 아래 링크를 참고해 주시기 바랍니다.https://creative103.tistory.com/187 [NodeJS] Node.js 환경에서 TypeScript 실행환경 세팅하기Node 설치 (LTS)Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. https://nodejs.org/en/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 프로creative103.tistory.com🗂️ 새 작업공간 폴더 생성🗂️ 기존 파일 - 복사해서 가져오기".. 2024. 7. 19. [NodeJS] Node.js 환경에서 TypeScript 실행환경 세팅하기 Node 설치 (LTS)Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. https://nodejs.org/en/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 프로젝트 파일 생성NodeJS 설치가 완료되었다면 커맨드 창을 열고 (윈도 키 + R > cmd 입력 후 엔터)타입 스크립트 연습용 프로젝트를 생성할 경로로 이동한다. 비주얼 스튜디오로 해당 프로젝트 폴더를 연다.# 터미널 창ctrl + Shift + `(Backtick)# 노드 버전 확인node -v🗂️ Node.js 환경변수 .. 2024. 7. 15. 이전 1 2 3 4 5 다음 728x90 반응형
