NodeJS(Express&Next.js)

시작 전에VScode에서 Extension인를 설치하자.밑에 클릭하면 바로 페이지를 볼 수 있다.위처럼 html파일에 script까지 한꺼번에 넣을 수 있지만, 스크립트 파일 자체도 분리가 가능하다.함수 레벨 스코프(function-level scope)를 가진다. 즉

var로 선언된 변수는 가장 가까운 함수의 전체 범위에서 사용할 수 있다. (function안에서 접근 가능)블록(예: if문, for문) 내에서 var로 변수를 선언하면 해당 블록과 상관없이 함수 전체에서 접근 가능하다.let으로 선언된 변수는 가장 가까운 블록(중괄

호이스트(Hoist)의 뜻은 무언가를 들어 올리거나 끌어 올리는 동작을 설명한다.자동차를 강에서 올린다(Hoist)라고 할 수 있다.JavaScript에서 호이스팅은 코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬 범위(유효 범위)의 맨 위로 들어 올려지거나 끌

원시타입: Boolean, String, Number, null, undefined, Symbol (불변성을 가지고 있다.)참조타입: Object, Array

자바스크립트에서 loop를 실행하면, 코드 블럭을 여러번 실행할 수 있게 해준다.전통적인 for 반복문은 초기화, 조건, 및 반복 후 동작의 세 부분으로 구성된다.객체의 속성에 대해 반복한다. 주로 객체의 key를 순회할 때 사용된다.반복 가능한 객체 (예: 배열, 문

자바스크립트에서 window 객체는 웹 브라우저의 창이나 탭을 대표하는 객체이다. 웹 브라우저 환경에서 window 객체는 전역 객체로 작용하며, 웹 페이지의 내용, 웹 브라우저 자체와 관련된 메서드, 속성, 이벤트를 접근하고 조작할 수 있는 인터페이스를 제공한다.자바

DOM (Document Object Model)은 웹 문서의 구조화된 표현입니다. 이것은 프로그래밍 언어가 웹 페이지 내의 객체에 접근하고 조작할 수 있게 하는 인터페이스로 동작합니다. 주로 자바스크립트에서 웹 페이지의 요소를 선택, 수정, 추가 또는 제거할 때 사용

Document Object

DOM 이벤트는 웹 페이지 내의 특정 요소에 대한 상호작용이나 생명주기의 변화를 나타내는데, 이를 통해 JavaScript는 사용자의 행동에 반응하거나 다른 이벤트에 응답할 수 있다. 예를 들면, 사용자가 버튼을 클릭했을 때 특정 동작을 수행하는 것과 같은 상호작용을

웹에서 일어날 수 있는 이벤트는 매우 다양하다. 아래는 자주 사용되는 이벤트의 카테고리와 그에 속하는 일부 이벤트의 예시를 나열한 것이다.UI 이벤트 (User Interface Events)load: 웹 페이지가 완전히 로드될 때 발생unload: 웹 페이지가 닫힐

OOP(객체 지향 프로그래밍, Object-Oriented Programming)는 컴퓨터 프로그래밍의 패러다임 중 하나로, 프로그램을 객체들의 모임으로 간주하고 이들 간의 상호작용으로 표현하는 방법론이다. OOP는 데이터와 그 데이터를 처리하는 함수를 하나의 단위로

poly(많은) + morph(형태) => 다형성, 다양한 형태를 가질 수 있다.다형성 개념이란 어떤 한 요소에 여러 개념을 넣어 놓는 것이다.예를 들어서, 도형이라는 부모 클래스와 삼각형, 사각형, 원 클래스가 있다 해보자.도형이라는 클래스에 getArea() { r

JavaScript의 프로토타입 (Prototype)은 매우 중요한 개념이다. JavaScript는 프로토타입 기반 언어라고 불린다. 이는 객체 지향 언어의 일반적인 클래스 기반 상속과는 조금 다른 메커니즘을 사용한다.JavaScript에서 모든 객체는 다른 객체를 참

ES6에서 나온 Class를 이용해서 더 쉽게 OOP를 구현할 수 있다.ECMAScript 6 (ES6), 또는 ECMAScript 2015,는 JavaScript 언어의 중요한 업데이트 중 하나이다. 이 업데이트에서는 클래스(class) 문법이 도입되어, 객체 지향

상속(Inheritance)은 객체 지향 프로그래밍의 주요 특성 중 하나로, 하나의 클래스가 다른 클래스의 속성과 메서드를 상속받을 수 있게 해준다. 이러한 상속 메커니즘을 통해 코드의 재사용성이 향상되고, 유지 관리가 쉬워진다.JavaScript에서 ES6 이후로 c

JavaScript에서 super 키워드는 객체의 부모에게 접근할 수 있는 메커니즘을 제공합니다. super는 클래스 내부에서 주로 사용되며, 다음 두 가지 주요 상황에서 사용된다.Constructor 내에서: 자식 클래스의 생성자(constructor)에서 super

클로저(Closure)는 자바스크립트의 중요한 개념 중 하나로, 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합이다. 간단히 말하자면, 클로저는 함수 내부에서 생성되는 지역 변수를 함수 외부에서도 계속해서 접근할 수 있게 해주는 기능이다.

자바스크립트의 이벤트 루프(Event Loop)는 단일 스레드로 동작하는 언어의 특성 때문에 중요한 역할을 한다. 일반적으로 단일 스레드 언어는 한 번에 하나의 작업만 수행할 수 있다. 그러나 자바스크립트는 비동기 작업을 지원하기 위해 이벤트 루프를 사용한다. 이벤트

그래서 하나의 일을 할 때 하나밖에 못하는데 그 하나가 오래 걸리는 일이면, 다른 작업들은 그 하나의 일이 끝날때 까지 기다려야 한다.→ 이러한 문제점을 해결하기 위해서 비동기로 작업을 수행한다.콜백은 자바스크립트에서 비동기 처리를 다루는 가장 기본적인 방법 중 하나이

ES6에서 도입된 Promise는 비동기 작업을 더 쉽게 관리할 수 있는 객체이다. Promise는 대기(pending), 이행(fulfilled), 거부(rejected) 등 3가지 상태를 가질 수 있다.대기(pending): 비동기 처리 로직이 아직 완료되지 않은

async/await는 JavaScript의 ES2017(ES8)에 도입된 문법으로, Promise를 더 간결하고 가독성 좋은 방식으로 다룰 수 있게 해준다. 기존의 Promise와 .then() 체이닝을 사용하는 대신에, 비동기 코드를 마치 동기 코드처럼 작성할 수

Node.js는 서버 측에서 실행되는 JavaScript 환경이다. 이는 V8 JavaScript 엔진 (Google Chrome에서 사용되는 엔진)을 기반으로 작동한다. Node.js는 웹 서버를 개발할 수 있게 해주지만, 그 외에도 다양한 종류의 서버와 도구를 만드

Node.js는 단일 스레드, 비동기, 이벤트 루프 기반의 런타임 환경이다. 이러한 구조는 I/O 집중적인 작업에 특히 잘 맞는다. 이제 Node.js가 작업을 처리하는 방법에 대해 자세히 알아보자.단일 스레드 (Single-Threaded)Node.js는 단일 스레드

Node.js에서 module은 '필요한 함수들의 집합'을 의미한다.사용하고자 하는 모든 기능을 다 자신이 처음부터 만들어서 사용할 수 없다.그래서 누군가가 이미 만들어 놓은 모듈을 이용해서 사용하면 된다.노드JS에서 제공해주는 많은 모듈들을 손쉽게 사용할 수 있다.모

npm은 Node Package Manager의 약자로 Node.js의 패키지 관리 도구이다. npm은 아래와 같은 주요 기능과 특징을 갖는다.패키지 설치: Node.js로 작성된 라이브러리나 프레임워크를 설치할 수 있다. 예를 들면, npm install expres

npm을 설치하고 parcel을 설치한다.json 파일은 아래와 같이 한다.scripts 필드 내에 있는 dev와 build는 npm (또는 Yarn) 스크립트이다. 이 스크립트는 특정 명령어를 단순화하여 개발자가 패키지 관리 도구를 통해 쉽게 실행할 수 있도록 한다.

산술 연산자는 숫자 값에 대한 산술 연산을 수행한다.\+ (덧셈): 두 숫자의 합을 계산한다.\- (뺄셈): 두 숫자의 차이를 계산한다.\* (곱셈): 두 숫자의 곱을 계산한다./ (나눗셈): 한 숫자를 다른 숫자로 나눈다.% (나머지): 한 숫자를 다른 숫자로 나눈

함수 선언은 가장 일반적인 방법으로 함수를 정의하는 방법이다.함수 표현은 함수를 변수에 할당하는 방법이다.참고: 화살표 함수 (Arrow Function)도 함수 표현의 한 형태이다.호이스팅은 자바스크립트에서 변수 및 함수 선언을 상단으로 끌어올리는 (hoist) 동작

String MDNindexOf() 메서드는 호출한 문자열에서 지정된 값과 일치하는 첫 번째 인덱스를 반환하며, 찾지 못한 경우 -1을 반환한다.padEnd() 메서드는 현재 문자열을 지정된 길이로 만든 후, 원래 문자열의 끝에 다른 문자열(또는 여러 번 반복한 문자열

length는 배열의 속성(Property)이다. 배열에 포함된 요소의 수를 반환하며, 배열의 크기를 동적으로 변경하는 데도 사용된다.at() 메서드는 주어진 인덱스에 해당하는 배열 요소를 반환한다. 음수 인덱스를 전달할 경우 배열의 끝에서부터 역순으로 요소에 접근한다

DOM (Document Object Model)은 웹 문서의 구조화된 표현을 제공하며, 프로그래밍 언어를 통해 문서 구조, 스타일 및 내용을 조작할 수 있는 방법을 제공한다. DOM은 웹 문서를 트리 구조로 나타내며, 각 노드는 문서의 일부분, 예를 들면 요소, 속성

웹 서버란? 웹 서버는 텍스트, 이미지, 비디오 및 애플리케이션 데이터와 같은 웹 사이트 콘텐츠를 요청하는 클라이언트에 전달한다. 가장 일반적인 유형의 클라이언트는 사용자가 링크를 클릭하거나 브라우저에 표시된 페이지에서 문서를 다운로드할 때 웹 사이트에서 데이터를 요

Express는 웹 및 모바일 애플리케이션 구축을 위한 광범위한 기능을 제공하는 노드 js 웹 어플리케이션 프레임워크이다. 단일 페이지, 다중 페이지 및 하이브리드 웹 에플리케이션을 빌드하는 데 사용된다.서버와 경로를 관리하는 데 도움이 되는 Node.js 상단에 구축

"Stateless"라는 용어는 HTTP 프로토콜의 핵심 특징 중 하나로, 각 요청과 응답이 독립적이라는 것을 의미한다. HTTP가 Stateless 프로토콜이라는 것은 서버가 클라이언트의 이전 요청이나 상태에 대한 정보를 저장하지 않는다는 것이다. 각 요청은 별개의

데이터베이스(영어: database, DB)는 여러 사람이 공유하여 사용할 목적으로 체계화해 통합, 관리하는 데이터의 집합이다. 작성된 목록으로써 여러 응용 시스템들의 통합된 정보들을 저장하여 운영할 수 있는 공용 데이터들의 묶음이다. 데이터베이스에 속해있는 모델은 다

데이터베이스를 사용할 때 ORM을 많이 사용하게 되는데 ORM이 무엇인지 먼저 알아보겠다.객체와 관계형 데이터베이스의 데이터를 자동으로 변형 및 연결하는 작업이다.ORM을 이용한 개발은 객체와 데이터베이스의 변형에 유연하게 사용할 수 있다.(orm을 사용해서 board

REST API와 Web Socket은 두 가지 주요한 웹 통신 기술이다. 각각은 서로 다른 사용 사례와 특성을 가지고 있다.통신 형식: HTTP 프로토콜을 기반으로 동작한다.상태: 상태가 없는(stateless) 통신이다. 각 요청은 독립적이며 이전 요청의 정보를 유

부트스트랩 5 CDN이 코드는 Socket.io를 사용하여 실시간 웹 애플리케이션에서 소켓 이벤트를 핸들링하는 부분을 보여준다.users 배열은 연결된 사용자의 데이터를 저장하는 데 사용된다.io.on('connection', ...)은 새로운 사용자가 서버에 연결될

미니 프로젝트1에서 만든 기본 구조를 가져온다.connect-flash플래시 메세지를 위한 미들웨어 모듈method-overrideHTML Form 태그에서 원래 POST, GET 메소드만 지원하는데 DELETE, PUT을 사용할 수 있게 지원해 주는 모듈multer파