🐣 함수선언, 함수표현식, 화살표함수!최근 알고리즘에 대해서만 정리를 했었는데, 주제의 다양성을 위해 다시 JavaScript 개념을 정리하여 다뤄볼까한다. 오늘의 주제는 함수선언문, 함수표현식 그리고 화살표함수이다!_! 그리고 호이스팅과 TDZ 까지 살펴볼건데, 쉽게 쉽게 정리를 할테니~ 오늘도 스따뜨!!   🐣 함수 선언형1. 개념 및 특징  함수 선언문은 함수 이름과 함께 "function" 키워드를 사용하여 함수를 정의하는 방식. 함수가 호이스팅되기 때문에 함수 정의 이전에 호출해도 동작  함수 선언형은 function 키워드를 사용하여 함수를 선언스크립트나 함수 내에서 어디서든 호출할 수 있음함수 선언형은 호이스팅으로 인해 선언부가 코드 상단으로 끌어올려짐 2. 코드로 살펴보기function..

[JavaScript] 함수 선언문과 함수 표현식, 화살표 함수 그리고 호이스팅

🐣 함수선언, 함수표현식, 화살표함수!최근 알고리즘에 대해서만 정리를 했었는데, 주제의 다양성을 위해 다시 JavaScript 개념을 정리하여 다뤄볼까한다. 오늘의 주제는 함수선언문, 함수표현식 그리고 화살표함수이다!_! 그리고 호이스팅과 TDZ 까지 살펴볼건데, 쉽게 쉽게 정리를 할테니~ 오늘도 스따뜨!!   🐣 함수 선언형1. 개념 및 특징  함수 선언문은 함수 이름과 함께 "function" 키워드를 사용하여 함수를 정의하는 방식. 함수가 호이스팅되기 때문에 함수 정의 이전에 호출해도 동작  함수 선언형은 function 키워드를 사용하여 함수를 선언스크립트나 함수 내에서 어디서든 호출할 수 있음함수 선언형은 호이스팅으로 인해 선언부가 코드 상단으로 끌어올려짐 2. 코드로 살펴보기function..

🐣 순서대로 잘 따라 왔는가오늘의 정리는 다음의 순서대로 진행됐다. 스스로 잘 따라왔는지 모르겠다. 번들러, 모듈 번들러 > 웹팩(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, 이미지 등)를 보다 관리하기 쉬운 형식으로 결합하는 단일 파일 또는 파일 세트를 의미. 번들은 웹 애플리케이션을 로드하기 위해 브라우저에 제공. 🐣 ..

🐣 ASCII 코드오늘은 아스키코드에 관련된 charCodeAt() 그리고 fromCharCode() 함수에 대해서 알아보도록 하겠다. 사실 비전공자인 나는 아스키코드에 대한 개념을 작년에 코테 문제를 풀며 처음 접하게 되었었는데, 그때 정리해둔 내용을 옮겨담아본다. 참고로 해당 개념을 이용한 문풀도 따로 정리해뒀다. ASCII(정보 교환을 위한 미국 표준 코드)는 각 문자에 숫자 코드를 사용하여 컴퓨터에서 텍스트를 나타내는 문자 인코딩 표준. 여기에는 문자, 숫자, 구두점 및 제어 문자로 구성된 128개의 문자가 포함되어 있어 장치와 애플리케이션 간의 텍스트 데이터 교환을 용이하다. 참고로 아래는 아스키 코드를 이용하여 문제를 풀었던 정리글 [백준] 이 구역의 승자는 누구야? 20154🤖 문제https..

[JavaScript] ASCII 코드 - charCodeAt() 와 fromCharCode()

🐣 ASCII 코드오늘은 아스키코드에 관련된 charCodeAt() 그리고 fromCharCode() 함수에 대해서 알아보도록 하겠다. 사실 비전공자인 나는 아스키코드에 대한 개념을 작년에 코테 문제를 풀며 처음 접하게 되었었는데, 그때 정리해둔 내용을 옮겨담아본다. 참고로 해당 개념을 이용한 문풀도 따로 정리해뒀다. ASCII(정보 교환을 위한 미국 표준 코드)는 각 문자에 숫자 코드를 사용하여 컴퓨터에서 텍스트를 나타내는 문자 인코딩 표준. 여기에는 문자, 숫자, 구두점 및 제어 문자로 구성된 128개의 문자가 포함되어 있어 장치와 애플리케이션 간의 텍스트 데이터 교환을 용이하다. 참고로 아래는 아스키 코드를 이용하여 문제를 풀었던 정리글 [백준] 이 구역의 승자는 누구야? 20154🤖 문제https..

🐣 for... of 와 for ... in 에 대해서오늘은 for ... of 와 for ... in 에 대해서 이전에 Notion 정리 해뒀던 내용들을 다듬어서 작성해보려한다. 처음 for ... of 와 for ... in을 접한 것은 javascript 코딩테스트 걸음마를 떼기 시작하면서부터인데... 크흠! 아무튼 정리해보겠다!  참고로 아래는 for of와 for in을 이용해서 풀었던 백준 문제 풀이 정리글! [백준] 복호화 9046🤖 문제https://www.acmicpc.net/problem/9046   1. 문제 내용 암호학에서 치환 암호(substitution cipher)란, 평문에 들어있는 각각의 문자를 주어진 치환 방법으로 암호화하는 방법 중 하나다.가장 단순한haileyham..

[JavaScript] 반복문 for...of 그리고 for...in

🐣 for... of 와 for ... in 에 대해서오늘은 for ... of 와 for ... in 에 대해서 이전에 Notion 정리 해뒀던 내용들을 다듬어서 작성해보려한다. 처음 for ... of 와 for ... in을 접한 것은 javascript 코딩테스트 걸음마를 떼기 시작하면서부터인데... 크흠! 아무튼 정리해보겠다!  참고로 아래는 for of와 for in을 이용해서 풀었던 백준 문제 풀이 정리글! [백준] 복호화 9046🤖 문제https://www.acmicpc.net/problem/9046   1. 문제 내용 암호학에서 치환 암호(substitution cipher)란, 평문에 들어있는 각각의 문자를 주어진 치환 방법으로 암호화하는 방법 중 하나다.가장 단순한haileyham..