본문 바로가기

JS8

[Node.js]EJS(Embedded JavaScript Templating) EJS는 Node.js에서 사용되는 템플릿 엔진으로, HTML 문법을 그대로 사용할 수 있는 특징이 있습니다. EJS를 사용하면 정적인 HTML에 동적인 기능을 추가할 수 있으며, 자바스크립트 문법을 사용할 수 있습니다. EJS의 주요 특징  * 동적 페이지 생성: EJS를 사용하면 서버에서 보낸 변수를 가져와 동적으로 페이지를 생성할 수 있습니다.  * 자바스크립트 코드 삽입: EJS의 기본 문법에는 주석, JS 코드, 변수 출력, 파일 분할 등이 포함되어 있습니다.  * 레이아웃 기능 지원: EJS는 Pug와 달리 레이아웃 기능을 지원하지 않지만, 부분 템플릿 기능을 제공합니다.  EJS 사용 방법  1. Node.js 프로젝트에 'ejs' 패키지를 설치합니다.  2. 뷰 엔진을 설정하여 EJS를 사.. 2024. 6. 20.
[React]useState 보통 html에서 값을 변경하면 웹페이지에서 새로고침을 해야 변경 된 값이 보이는데 리액트에서는 useState를 사용하면 페이지의 새로고침 없이 데이터 변경이 이루어 집니다. useState 개요 useState는 리액트 16.8 버전에 도입되었으며, 함수형 컴포넌트에서 상태를 관리할 수 있게 해줍니다. 클래스 컴포넌트에서 사용했던 state와 setState 기능을 대체할 수 있습니다. 상태 값을 쉽게 생성하고 업데이트할 수 있어 컴포넌트의 상태 관리가 간편해집니다. useState 사용법 1. useState를 import하여 사용합니다. 2. useState 함수를 호출하면 상태 값과 상태 업데이트 함수를 반환합니다. 3. 상태 값과 상태 업데이트 함수를 구조 분해 할당하여 사용합니다. 4. 상태.. 2024. 4. 22.
자바스크립트 참조타입과 원시타입 그리고 깊은 복사(DeepCopy) 자바스크립트에서 자료형을 원시타입과 참조타입으로 분류합니다. 참조 타입의 경우 메모리 주소에 저장이 되기 때문에 값을 다른 변수에 복사를 해도 복사 된 변수에서 값을 변경하면 두개의 변수 모두 값이 동일하게 바뀌게 됩니다. 이 부분을 설명하기 위해 참조타입과 원시타입을 알아보고 깊은복사에 대해 알아보고자 합니다. 원시타입 자료형 : Number, String, Boolean, null, undefined, Symbol 참조타입 자료형 : Object, Array, Function, Map, Set, RegExp 등 원시 타입 변수는 값을 직접 저장하지만, 참조 타입 변수는 값이 저장된 메모리 주소를 참조합니다. 이 차이로 인해 변수 할당과 메모리 사용 방식이 달라집니다. 원시 타입과 참조 타입 변수의 차.. 2024. 4. 22.
next.js란? Next.js는 React 기반의 오픈 소스 웹 개발 프레임워크입니다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(Static Site Generation, SSG), 그리고 클라이언트 사이드 렌더링(Client-Side Rendering, CSR)을 포함한 다양한 렌더링 방법을 지원합니다. 이를 통해 개발자들은 사용자 경험과 검색 엔진 최적화(SEO)를 향상시킬 수 있으며, 다양한 데이터 소스로부터 동적인 웹 사이트나 애플리케이션을 쉽게 구축할 수 있습니다. Next.js는 Vercel이라는 회사에 의해 개발되었으며, React 기반 프로젝트를 빠르고 쉽게 배포할 수 있는 플랫폼을 제공합니다. 이 프레임워크는 라우팅 시스템, 이미지 최적화, 국제화 지원 등을 내장하고 있어 복잡한 설정 없이도 풍부.. 2024. 4. 5.