자바스크립트 변수의 생성과정과 호이스팅 개념

JS의 변수 생성 과정자바스크립트 엔진은 변수 선언을 다음과 같은 단계에 거쳐 수행한다.1. 선언 (실행 컨텍스트에 등록하여 자바스크립트 엔진에 변수의 존재를 알린다) => 스코프가 참조2. 초기화 (메모리에 공간 확보, undefined를 할당하여 초기화)3. 할당 (실제 값 할당)  실행 컨텍스트실행 컨텍스트는 코드가 실행되기 위해 필요한 환경. - 모든 JavaScript 코드는 실행 컨텍스트에서 실행되며, 실행 컨텍스트는 코드 실행에 필요한 환경 정보를 제공한다.- 자바스크립트 엔진은 실행 컨텍스트를 관리하며 선언된 코드가 등록됨.- 실행 컨텍스트는 코드가 실행되기 전 메모리에 변수를 할당하고 실행할 준비를 마친다. JS 엔진은 코드를 실행하기 전 코드를 형상화하고 구분하는 과정을 거친다.즉, 자..

• format_list_bulleted Web/JavaScript
• · 2024. 9. 15.
• textsms

Promise 객체와 Promise All 의 사용

Promise비동기 작업을 순차적으로 실행하기 위하여 사용되는 객체 그러나 단지 callback함수 대신 보기 쉽게 만들어주는 것. 실행되지 않았지만 결과를 받는 처리(약속) - 상태: 3가지 1. Pending (대기) 2. Fulfilled (완료) 3. Rejected (실패) - then, catch, finally 3가지 메서드를 가진다.then : promise 객체가 fulfilled 상태가 되면 실행할 콜백함수를 등록하는 메서드catch : promise객체가 rejected 상태가 되면 콜백함수를 등록하는 메서드finally : 어떤 작업의 성공, 실패 여부와 상관없이 항상 실행하고 싶은 콜백함수를 등록 new Promisenew Promise 란 ? - promise 객체를 직접 생성할..

• format_list_bulleted Web/JavaScript
• · 2024. 9. 15.
• textsms

[Nest.js] Bun 환경에서 Nest.js Init, 구조 모듈화

Express + TypeScript 사용하여 bun 환경에서 프로젝트 : 1. bun --help를 통해 bun설치여부 확인 2. bun init -y 로 기본 프로젝트 3. bun run index.ts Hello via Bun! 출력 확인하면 끝. Express 는 자유롭다.하지만 그 자유로움에는 책임이 따른다.. NestJS ? NestJS는 서버 개발 시의 아키텍처를 누구든 비슷하게 설계하도록 아키텍처 문제를 해결하는 데 중점을 두고 있다. - Node.JS 에서 실행하는 서버사이드 프레임워크 - 타입스크립트 완벽 지원 - 자바스크립트의 최신 스펙을 사용하므로, 바닐라 자바스크립트를 사용한다면 babel 사용이 필수 - HTTP요청 부분은 추상화된 코드를 제공해, 익스프레스와 Fastify를 사..

• format_list_bulleted Web/JavaScript
• · 2024. 4. 17.
• textsms

[Bun] 초고속 JavaScript 런타임! Bun 에 대해 알아보자

Bun에 대하여... 자바스크립트 엔진이란 우리가 작성한 자바스크립트 코드를 컴퓨터가 특정 작업을 수행할 수 있는 기계어 코드로 변환하는 프로그램. Node.js는 크롬 브라우저를 구동하는 구글의 V8 엔진을 사용하는 반면, Bun은 애플에서 사파리용으로 개발한 오픈 소스 자바스크립트 엔진인 JavaScriptCore(JSC)를 사용 JSC는 실행 시간은 약간 느리지만, 시작시간이 빠르며 메모리 사용량 감소를 우선시한다. V8은 런타임 최적화를 통해 빠른 실행을 우선시 하기 때문에, 메모리 사용량이 늘어날 수 있다.따라서Bun 은 Node.js보다 최대 4배 더 빠르게 시작할 수 있다. Bun은 런타임에 자바스크립트 트랜스파일러가 통합되어 있어 .js, .ts, .jsx, .tsx파일을 직접 실행할 수 ..

• format_list_bulleted Web/JavaScript
• · 2024. 4. 5.
• textsms

[Node.js] MongoDB 연결 및 서버 개발 환경 구축

모든 API 는 async await 을 사용해 구분한다. MongoDB 연결 유틸리티 만들기 API 호출시 데이터를 저장, 조회, 삭제하려면 DB와 연결해야한다. 몽고디비 커넥션을 반환하는 유틸리티 함수를 만들어서 사용 mongodb-connection.js const {MongoClient}= require('mongodb'); const url = "mongodb+srv://wjdwwidz:@cluster0.5fd3khr.mongodb.net/board" module.exports = function(callback){ return MongoClient.connect(url, callback); } app.js ... let collection; app.listen(3000, async()=>{ c..

• format_list_bulleted Web/JavaScript
• · 2024. 3. 27.
• textsms

[Node.js] express 프로젝트에 핸들바 템플릿 엔진 적용하기

익스프레스 설치 npm i express@4.17.3 npm i mongodb@4.13.0 프로젝트 디렉터리 구조 잡기 보통 모든 기능을 제공하는 풀스택 프레임워크는 디렉터리 구조를 강제한다. (ex)Django) 반면 마이크로 프레임워크는 디렉터리 구조를 강제하지 않는다. 익스프레스 또한 강제하는 부분이 거의 없다. 보편적으로 사용되는 3계층구조 아키텍처(컨트롤러, 서비스, 데이터 엑세스) 를 사용하여 개발 (웹 프레임워크에서 사용하는 MVC 패턴을 적용하기에도 좋음) - 컨트롤러 : 뷰에서 넘어온 요청을 받아서 권한 체크, 유효성 검증을 한 후에 서비스 계층으로 넘어감 - 서비스 : 비즈니스 로직 처리 - 데이터 엑세스 : 서비스 계층과 데이터를 주고받음 API들이 많지 않으므로 라우터와 컨트롤러 코..

• format_list_bulleted Web/JavaScript
• · 2024. 3. 27.
• textsms