🐣 들어가기 전에이번에는 void type에 대해서 정리해보장!_! void 타입은 함수의 타입을 지정할 때 사용한다고 생각하면 된다. 'void'의 경우 값이 없음을 나타내는데, 아무것도 반환하지 않는(=return 값이 없는) 함수의 반환 유형으로 사용된당!_! 밑에서 개념을 자세히 살펴보자! 꼬우꼬우!(사진은 void staff.... 공허의 지팡이....껄껄)  이전의 union, any, unknwon 타입이 궁금하다면? [TypeScript] union type · any · unknown🐣 union type · any · unknown 공통점이랄까?들어가기 전에 이 세가지의 공통점을 생각해보면! 어떤 타입의 종류가 들어올지 확실하게 모를 때 사용한다는 점을 들 수 있다. 프로젝트 내에서..

[TypeScript] void type · 함수의 타입

🐣 들어가기 전에이번에는 void type에 대해서 정리해보장!_! void 타입은 함수의 타입을 지정할 때 사용한다고 생각하면 된다. 'void'의 경우 값이 없음을 나타내는데, 아무것도 반환하지 않는(=return 값이 없는) 함수의 반환 유형으로 사용된당!_! 밑에서 개념을 자세히 살펴보자! 꼬우꼬우!(사진은 void staff.... 공허의 지팡이....껄껄)  이전의 union, any, unknwon 타입이 궁금하다면? [TypeScript] union type · any · unknown🐣 union type · any · unknown 공통점이랄까?들어가기 전에 이 세가지의 공통점을 생각해보면! 어떤 타입의 종류가 들어올지 확실하게 모를 때 사용한다는 점을 들 수 있다. 프로젝트 내에서..

🐣 union type · any · unknown 공통점이랄까?들어가기 전에 이 세가지의 공통점을 생각해보면! 어떤 타입의 종류가 들어올지 확실하게 모를 때 사용한다는 점을 들 수 있다. 프로젝트 내에서 사용할 때에도 해당 타입을 사용하는 경우는 number 혹은 string 타입 둘 중에 들어온다든지...아니면 어떤 타입이 들어올 지 몰라서 설정한다든지... 무튼..!_! 해당 세 가지의 개념에 대해서 다뤄보도록 하자!_! 꼬우꼬우!(애니 타입을 위한 애니를 가져옴)   참고로 typescript 설치 및 개념에 대해서 알고 싶다면 이전 정리글 참고 [TypeScript] 타입스크립트🐣 타입스크립트 얍얍!오늘은 타입스크립트에 대해서 정리해보고자 한다. 흠 사실 이전에 공부하면서 Notion과 gi..

[TypeScript] union type · any · unknown

🐣 union type · any · unknown 공통점이랄까?들어가기 전에 이 세가지의 공통점을 생각해보면! 어떤 타입의 종류가 들어올지 확실하게 모를 때 사용한다는 점을 들 수 있다. 프로젝트 내에서 사용할 때에도 해당 타입을 사용하는 경우는 number 혹은 string 타입 둘 중에 들어온다든지...아니면 어떤 타입이 들어올 지 몰라서 설정한다든지... 무튼..!_! 해당 세 가지의 개념에 대해서 다뤄보도록 하자!_! 꼬우꼬우!(애니 타입을 위한 애니를 가져옴)   참고로 typescript 설치 및 개념에 대해서 알고 싶다면 이전 정리글 참고 [TypeScript] 타입스크립트🐣 타입스크립트 얍얍!오늘은 타입스크립트에 대해서 정리해보고자 한다. 흠 사실 이전에 공부하면서 Notion과 gi..

🐣 타입스크립트 얍얍!오늘은 타입스크립트에 대해서 정리해보고자 한다. 흠 사실 이전에 공부하면서 Notion과 git에 코드로 정리해뒀던건데, 이리저리 요리조리 가져와서 정리보도록 하겠따!_!  🐣 1. 타입스크립트 쓰는 이유자바스크립트는 Dynamic typing을 지원하는 언어타입스크립트는 에러로 잡아줌 🐣 2. TypeScript 설치2-1. Nodejs2-2. npm install -g typescript한번만 설치하면됨2-3. 폴더 열고 .ts 파일 만들기웹브라우저는 ts 파일 인식 못하기에 js 파일로 변환 작업2-4. Terminal 에 tsc -w 입력해두면 자동으로 ts 파일을 js 파일로 근처 변환HTML 파일 등에서 타입스크립트로 작성한 코드 사용하기 위해서는 .ts가 아닌 변환..

[TypeScript] 타입스크립트

🐣 타입스크립트 얍얍!오늘은 타입스크립트에 대해서 정리해보고자 한다. 흠 사실 이전에 공부하면서 Notion과 git에 코드로 정리해뒀던건데, 이리저리 요리조리 가져와서 정리보도록 하겠따!_!  🐣 1. 타입스크립트 쓰는 이유자바스크립트는 Dynamic typing을 지원하는 언어타입스크립트는 에러로 잡아줌 🐣 2. TypeScript 설치2-1. Nodejs2-2. npm install -g typescript한번만 설치하면됨2-3. 폴더 열고 .ts 파일 만들기웹브라우저는 ts 파일 인식 못하기에 js 파일로 변환 작업2-4. Terminal 에 tsc -w 입력해두면 자동으로 ts 파일을 js 파일로 근처 변환HTML 파일 등에서 타입스크립트로 작성한 코드 사용하기 위해서는 .ts가 아닌 변환..

🐣 순서대로 잘 따라 왔는가오늘의 정리는 다음의 순서대로 진행됐다. 스스로 잘 따라왔는지 모르겠다. 번들러, 모듈 번들러 > 웹팩(Webpack) > 바벨(Babel) > 폴리필(Polyfill) > 비트(Vite) 아무튼 오늘 마지막으로 비트(vite)에 대해서 정리해보자!   🐣 비트(Vite) 1. 개념 비트(Vite)는 Vue 창시자 Evan You가 만든 새로운 프론트엔드 도구로 프랑스어로 "빠르다(Quick)"의 의미를 지니고 있음. 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구.  Vite는 네이티브 자바스크립트 모듈(ES Module)을 기반으로 한 데브 서버. 이미 현대 프론트엔드 개발 생태계는 웹팩(Webpack)을 중심으로 개발 환경과 배포 시스템이 구..

비트(Vite)에 놀아보자! 드랍 더 비트!

🐣 순서대로 잘 따라 왔는가오늘의 정리는 다음의 순서대로 진행됐다. 스스로 잘 따라왔는지 모르겠다. 번들러, 모듈 번들러 > 웹팩(Webpack) > 바벨(Babel) > 폴리필(Polyfill) > 비트(Vite) 아무튼 오늘 마지막으로 비트(vite)에 대해서 정리해보자!   🐣 비트(Vite) 1. 개념 비트(Vite)는 Vue 창시자 Evan You가 만든 새로운 프론트엔드 도구로 프랑스어로 "빠르다(Quick)"의 의미를 지니고 있음. 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구.  Vite는 네이티브 자바스크립트 모듈(ES Module)을 기반으로 한 데브 서버. 이미 현대 프론트엔드 개발 생태계는 웹팩(Webpack)을 중심으로 개발 환경과 배포 시스템이 구..

🐣 바벨(babel)? 폴리필(polyfill)?바벨에 대해서 공부를 하다보면 폴리필이란 개념에 대해서 자연스레 접하게 되는데, 얼핏 들어서는 둘이 비슷해보이지만 차이점이 명확히 존재하기 때문에 한번 정리해보고자 한다. 꼬우꼬우!   참고로 bebel 에 대한 개념은 아래 게시물에 정리해뒀으니 참고 웹팩(Webpack) > 바벨(Babel)'의 순서대로 정리를 하고 있다. 뒤돌아서면 " data-og-host="haileyham.tistory.com" data-og-source-url="https://haileyham.tistory.com/entry/%EB%B0%94%EB%B2%A8Babel%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-%EC%95%8C%EC%95%84%EB%B3%..

폴리필(Polyfill)과 바벨(Babel) 비교하며 개념 체크!

🐣 바벨(babel)? 폴리필(polyfill)?바벨에 대해서 공부를 하다보면 폴리필이란 개념에 대해서 자연스레 접하게 되는데, 얼핏 들어서는 둘이 비슷해보이지만 차이점이 명확히 존재하기 때문에 한번 정리해보고자 한다. 꼬우꼬우!   참고로 bebel 에 대한 개념은 아래 게시물에 정리해뒀으니 참고 웹팩(Webpack) > 바벨(Babel)'의 순서대로 정리를 하고 있다. 뒤돌아서면 " data-og-host="haileyham.tistory.com" data-og-source-url="https://haileyham.tistory.com/entry/%EB%B0%94%EB%B2%A8Babel%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-%EC%95%8C%EC%95%84%EB%B3%..

🐣 이번 시간에는 !지난 시간에는 웹팩(Webpack)에 대해서 살펴봤다. 지난 게시물 순서대로 살펴보면, '번들링 · 모듈 번들러 > 웹팩(Webpack) > 바벨(Babel)'의 순서대로 정리를 하고 있다. 뒤돌아서면 까먹는 나를 위해 해당 개념들은 순서에 따라 천천히 함께 따라 갈 수 있으니 언제든 다시 보기!    🐣 바벨(Babel)에 대해서 살펴보자!1. 개념자바스크립트 컴파일러Babel은 자바스크립트 컴파일러로, 최신 자바스크립트를 구 버전으로 변환하여 호환성을 확보하는 역할. 자바스크립트는 인터프리터 언어인데 컴파일러가 필요한 이유는? babel을 정확히 설명하면 JavaScrpt로 결과물을 만들어주는 컴파일러이기 때문. 만약 자바스크립트의 특징인 인터프리터에 대해서 잘 모른다면, 이전..

바벨(Babel)에 대해서 알아보자!

🐣 이번 시간에는 !지난 시간에는 웹팩(Webpack)에 대해서 살펴봤다. 지난 게시물 순서대로 살펴보면, '번들링 · 모듈 번들러 > 웹팩(Webpack) > 바벨(Babel)'의 순서대로 정리를 하고 있다. 뒤돌아서면 까먹는 나를 위해 해당 개념들은 순서에 따라 천천히 함께 따라 갈 수 있으니 언제든 다시 보기!    🐣 바벨(Babel)에 대해서 살펴보자!1. 개념자바스크립트 컴파일러Babel은 자바스크립트 컴파일러로, 최신 자바스크립트를 구 버전으로 변환하여 호환성을 확보하는 역할. 자바스크립트는 인터프리터 언어인데 컴파일러가 필요한 이유는? babel을 정확히 설명하면 JavaScrpt로 결과물을 만들어주는 컴파일러이기 때문. 만약 자바스크립트의 특징인 인터프리터에 대해서 잘 모른다면, 이전..

🐣 들어가기 전에지난 시간에는 '번들', '번들링', '모듈', '모듈 번들러'에 대해서 살펴보았다. 사실 해당 개념들은 작년에 스터디원들과 함께 공부 했었지만, 후루룩 시간이 지난 지금 누군가에게 자신있게 설명할 수 없었기 때문에 다시 정리를 시작했다. 지금은 번들링과 모듈 번들러의 차이에 대해서 설명할 수 있다구! 아무튼 오늘은 모듈 번들러 중 하나인 웹팩(Webpack)에 대해서 정리하겠다! 꼬우꼬우!  🐣 웹팩(Webpack)1. 개념웹팩(Webpack)은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 모두 각각의 모듈로 보고 하나(또는 여러개)의 파일로 번들링하는 모듈 번들러(번들링 프로세스를 수행하는 특정 도구 또는 소프트웨어). 참고로 번들링과 모듈 번들러에 대한 개념은..

웹팩(Webpack)을 파헤쳐 보자!

🐣 들어가기 전에지난 시간에는 '번들', '번들링', '모듈', '모듈 번들러'에 대해서 살펴보았다. 사실 해당 개념들은 작년에 스터디원들과 함께 공부 했었지만, 후루룩 시간이 지난 지금 누군가에게 자신있게 설명할 수 없었기 때문에 다시 정리를 시작했다. 지금은 번들링과 모듈 번들러의 차이에 대해서 설명할 수 있다구! 아무튼 오늘은 모듈 번들러 중 하나인 웹팩(Webpack)에 대해서 정리하겠다! 꼬우꼬우!  🐣 웹팩(Webpack)1. 개념웹팩(Webpack)은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 모두 각각의 모듈로 보고 하나(또는 여러개)의 파일로 번들링하는 모듈 번들러(번들링 프로세스를 수행하는 특정 도구 또는 소프트웨어). 참고로 번들링과 모듈 번들러에 대한 개념은..

🐣 번들(bundle)과 번들링(bundling) 그리고 모듈(module)혹시 번들링과 모듈 번들러에 차이에 대해서 자세히 설명할 수 있을까? 머뭇거렸다면 정리된 글을 통해 번들링과 모듈 번들러에 대해서 한 번 살펴보자. 그리고 이어서 웹팩(Webpack), 바벨(Babel), 폴리필(Polyfill) 그리고 비트(Vite)까지 순서대로 차례차례 정리해볼 것이다. (물론 이전에 Notion 정리했던 개념들을 또 다시 긁어와서 정리하는 것이지만..!) 오늘도 레츠꼬우! 🐣 번들(bundle)1. 개념"번들"은 여러 리소스(예: JavaScript, CSS, 이미지 등)를 보다 관리하기 쉬운 형식으로 결합하는 단일 파일 또는 파일 세트를 의미. 번들은 웹 애플리케이션을 로드하기 위해 브라우저에 제공. 🐣 ..

번들(bundle)과 번들링(bundling)

🐣 번들(bundle)과 번들링(bundling) 그리고 모듈(module)혹시 번들링과 모듈 번들러에 차이에 대해서 자세히 설명할 수 있을까? 머뭇거렸다면 정리된 글을 통해 번들링과 모듈 번들러에 대해서 한 번 살펴보자. 그리고 이어서 웹팩(Webpack), 바벨(Babel), 폴리필(Polyfill) 그리고 비트(Vite)까지 순서대로 차례차례 정리해볼 것이다. (물론 이전에 Notion 정리했던 개념들을 또 다시 긁어와서 정리하는 것이지만..!) 오늘도 레츠꼬우! 🐣 번들(bundle)1. 개념"번들"은 여러 리소스(예: JavaScript, CSS, 이미지 등)를 보다 관리하기 쉬운 형식으로 결합하는 단일 파일 또는 파일 세트를 의미. 번들은 웹 애플리케이션을 로드하기 위해 브라우저에 제공. 🐣 ..