🐶짱구와 꾜미 집에 놀러온 용뇽이🦊

1. Babel이란?Babel은 자바스크립트 컴파일러(JavaScript Compiler) 로, 최신 ECMAScript(ES6+) 코드가 구형 브라우저에서도 정상적으로 실행되도록 변환해주는 도구다.2. Babel이 필요한 이유자바스크립트는 꾸준히 발전하며 새로운 문법(예: let, const, async/await, 화살표 함수 등)이 추가됨. 하지만 구형 브라우저는 최신 문법을 지원하지 않음. 이 문제를 해결하기 위해 Babel이 필요함.Babel의 주요 역할:✅ 최신 자바스크립트 문법을 구형 브라우저에서도 동작 가능하도록 변환✅ JSX(React에서 사용) 및 TypeScript 코드도 변환 가능✅ 코드 최적화 및 플러그인 확장을 통한 개발 환경 개선3. Babel의 핵심 개념(1) 트랜스파일링(T..

1. Webpack이란?Webpack은 자바스크립트 애플리케이션의 모듈 번들러(module bundler)다. 웹 개발에서 여러 개의 자바스크립트, CSS, 이미지 등을 하나의 번들 파일로 묶어주는 역할을 한다.2. Webpack이 필요한 이유웹 개발이 점점 복잡해지면서 다양한 파일과 모듈을 효율적으로 관리해야 하는 필요성이 생김. Webpack을 사용하면 다음과 같은 장점이 있음.모듈화 지원: ES6+ 모듈, CommonJS, AMD 등의 다양한 모듈 시스템을 지원함파일 크기 최적화: 코드 압축, 트리 쉐이킹(Tree Shaking) 등을 통해 최적화 가능개발 생산성 향상: HMR(Hot Module Replacement) 기능으로 코드 변경 시 빠르게 반영됨자원 관리: CSS, 이미지, 폰트 등도 모..

발렌타인 데이때 할만한 너드같은 행동 중 할만한게 뭐가 있을까 고민하다가 HTML + CSS를 활용한 발렌타인 카드 만들기를 하면 좋겠다 싶어서  GPT와 투닥투닥 만들어 보았다. 코드는 다음과 같다. ❤️ Happy Valentine's Day! Send  기본 브라우저로 열면 동작할 것이다. 이제 예쁘게 꾸미는 것은 당신의 몫.

1. Setting Up Node.js in VSCode1.1. Installing Node.jsDownload and install the LTS version of Node.js from the official Node.js website.After installation, open a terminal and verify that Node.js and npm are installed correctly:node -v # Check Node.js versionnpm -v # Check npm version  * For Linux users, you can install Node.js and npm using the following command:sudo apt-get install nodejs n..

1. What is Node.js?Node.js is an open-source, cross-platform JavaScript runtime environment built on the Chrome V8 JavaScript engine. Traditionally, JavaScript was only executed in web browsers, but with Node.js, JavaScript can now run on servers as well.2. Key Features of Node.js2.1. Single-Threaded Event LoopNode.js operates on a single-threaded model but uses an event loop and asynchronous I/..

2025.01.30 - [개발 Code/웹개발 WebDev] - [WebDev][Node.js] Node.js환경 설정 및 Express.js를 활용한 서버 만들기2025.01.31 - [개발 Code/웹개발 WebDev] - [WebDev][Node.js] Node.js로 REST API 개발하기 (CRUD)1. 개요이 글에서는 Node.js와 Express를 사용하여 NoSQL 데이터베이스인 MongoDB와 연동하여 CRUD(Create, Read, Update, Delete) 기능을 구현하는 방법을 다룬다.실습을 통해 REST API를 구축하고 데이터를 관리하는 과정을 학습할 수 있다.2. 프로젝트 설정2.1. 필수 패키지 설치새로운 프로젝트 폴더를 생성하고 VSCode에서 해당 폴더를 엶:mkdi..

2025.01.30 - [개발 Code/웹개발 WebDev] - [WebDev][Node.js] Node.js환경 설정 및 Express.js를 활용한 서버 만들기1. REST API란?REST(Representational State Transfer) API는 HTTP 프로토콜을 기반으로 클라이언트와 서버가 데이터를 주고받는 방식이다.CRUD(Create, Read, Update, Delete) 기능을 통해 데이터를 관리할 수 있다.2. Express.js를 활용한 REST API 구축2.1. 프로젝트 초기화 및 필수 패키지 설치새로운 프로젝트 폴더를 생성하고 VSCode에서 해당 폴더로 이동함:mkdir my-rest-apicd my-rest-apinpm을 사용하여 프로젝트를 초기화함:npm init..

1. VSCode에서 Node.js 환경 설정1.1. Node.js 설치Node.js 공식 웹사이트에서 LTS 버전을 다운로드하여 설치함설치 후 터미널에서 다음 명령어를 입력하여 정상적으로 설치되었는지 확인함:node -v # Node.js 버전 확인npm -v # npm 버전 확인     * linux의 경우 다음 명령어를 통해 쉽게 설치가 가능함sudo apt-get install nodejs npm -y1.2. Visual Studio Code 설정VSCode를 설치함Babel Javascript, Auto Close Tag, Auto Rename Tag, Better Comments, Code Runner 등의 확장(extensions) 설치를 통해 더욱 편한 개발 환경 준비(검색을 통해 자..

1. Node.js란?Node.js는 Chrome V8 JavaScript 엔진 위에서 동작하는 오픈 소스, 크로스 플랫폼 JavaScript 런타임 환경임기존에는 JavaScript가 브라우저에서만 실행되었지만, Node.js를 사용하면 서버에서도 JavaScript를 실행할 수 있음2. Node.js의 특징2.1. 단일 스레드 이벤트 루프 기반Node.js는 단일 스레드 기반으로 동작하지만, 이벤트 루프와 비동기 I/O 처리를 통해 높은 성능을 제공함블로킹(Blocking) 방식이 아닌 논블로킹(Non-blocking) 방식으로 입출력을 처리하여 많은 요청을 동시에 처리할 수 있음2.2. 비동기 I/ONode.js는 콜백(callback), 프로미스(Promise), async/await 같은 비동기..