전체 > 데브키라 (25) 리액트 01: React 설치와 초기화면 출력 안녕하세요, 각성한 데브키라입니다. 오늘은 사용자 인터페이스 구축에 필수인 리액트(React) 프로젝트 시작 방법을 소개합니다. 이 글은 Node.js와 Visual Studio Code 설치에서 리액트 앱 생성까지의 전 과정을 단계별로 안내합니다. 리액트는 선언적이고 효율적인 JavaScript 라이브러리로, 복잡한 UI와 데이터의 변화가 잦은 대규모 애플리케이션을 쉽게 다룰 수 있습니다. 시작해 볼까요?[ 핵심 요약정리 ]1. VsCode에서 프로젝트 디렉터리 생성2. 디렉터리에서 터미널 명령어 실행npx create-react-app . 3. 기존 샘플에 작성된 내용제거App.js, App.css4. 로컬서버 실행명령 npm start접속 url: localhost:30001. NodeJs v20... NextJs 02: NextJs프로젝트 불필요한 파일제거 안녕하세요. 각성한 데브키라입니다. Next.js를 처음 설치하면, 실제 프로젝트에서 사용하지 않을 수 있는 여러 샘플 파일들이 포함되어 있습니다. 이러한 불필요한 내용들을 제거하여 프로젝트를 깔끔하게 정리한 뒤, 최적화된 상태로 Next.js를 시작하는 방법을 알아보겠습니다.[ layout.js 원본 ]import { Inter } from "next/font/google";import "./globals.css";const inter = Inter({ subsets: ["latin"] });export const metadata = { title: "Create Next App", description: "Generated by create next app",};export default func.. Nodejs ex09: 쿠키 암호화 예제 안녕하세요. 각성한 데브키라입니다. ex08에서 쿠키를 설정하고 메인페이지 접속 시 팝업창을 더 이상 뜨지 않도록 제어하는 예제를 포스팅했었는데 내용을 이어서 쿠키암호화 설정을 해보겠습니다. 수정내역ex09 포스팅에서는 바뀐 부분 2줄에 대한 내용만 추가로 포스팅하겠습니다.아래 작성된 내용 중 {[ 변경 ] app.js, [ 변경 controller/cookie/cookie_ctrl.js ] }의 소스코드에서 화살표로 표시된 부분{app.js 1줄, cookie_ctrl.js 1줄}2줄만 수정하시면 됩니다. [기존 : app.js ] const express = require("express")const cookieRouter = require("./src/routes/cookie/cookie_rout.. Nodejs ex08: 쿠키를 이용한 팝업창 특정시간 뜨지 않도록 설정하는 예제 안녕하세요. 각성한 데브키라입니다. Nodejs에서 쿠키를 이용해서 메인페이지 접속 시 공지사항 팝업청을 특정시간 동안 띄우지 않도록 설정하는 예제입니다.예제에서는 편의상 짧은 시간 10초 동안 띄우지 않도록 설정해서 테스트를 진행하였습니다. [ app.js ]const express = require("express")const cookieRouter = require("./src/routes/cookie/cookie_router")const cookieParser = require("cookie-parser")const app = express()app.set("views", "./src/views")app.set("view engine", "ejs")app.use( cookieParser() )ap.. Nodejs ex03 ex04: Router를 사용한 페이지 출력 안녕하세요. 각성한 데브키라입니다. nodejs에서 라우터를 사용해서 페이지를 출력해보겠습니다.실행결과는 동일하지만 ex03은 라우터를 사용하지 않고 직접적으로 페이지를 호출했고 ex04는 라우터를 사용해서 페이지를 호출했습니다.ex03 - 라우터를 사용하지 않고 페이지를 호출라이터를 사용하지 않고 app.js에서 index.ejs를 호출합니다.[ app.js ]const express = require("express");const app = express();app.set("views", "./views");app.set("view engine", "ejs");const router = express.Router();app.use("/", router);router.get("/", (req, res).. NodeJs 06: Systemd를 이용한 Nginx서버 백그라운드 실행 운영 안녕하세요. 각성한 데브키라입니다. 터미널을 닫아도 서버가 종료되지 않도록 nginx로 구축된 사이트를 Systemd를 통해서 백그라운드로 등록하고 운영관리 할 수 있는 환경을 구축해 봅시다.1. nodejs사이트 구축2개의 멀티사이트를 nodejs로 구축후 nginx서버와 연동하였습니다.SSL인증서를 적용하고 인증서 자동갱신 처리까지 완료하였습니다.해당 내용까지 준비가 되지 않으셨다면 아래 87번 포스팅을 참조하셔서 먼저 nodejs사이트를 구축하시길 바랍니다.NodeJs 04: 노드JS사이트에 nginx연동 (alphonse.kr)2. systemd설정1번 사이트) /www/site1/app 3000번포트2번 사이트) /www/site2/app 3001번 포트 그럼 systemd를 사용해서 위의 2개.. NodeJs 02: 노드JS를 시작하기 위한 설치와 환경설정 안녕하세요, 각성한 데브키라입니다. NodeJs에 입문하시려는 분들을 위해 설치부터 설정까지 간편한 가이드를 제공해드려요. NodeJs를 설치하고 기본적인 설정 방법부터 시작해, 간단한 예제 코드를 실행해 보는 과정까지 자세히 설명 드릴 예정입니다. 초보자분들도 쉽게 따라할 수 있도록 각 단계별로 필요한 정보를 알려드리며, 여러분의 NodeJs 여정의 첫발을 도와드리겠습니다.1. NodeJs공식사이트에 접속 후 설치파일을 다운로드합니다.{Recommended For Most Users} 대부분의 사용자에게 권장되는 안정화 버전을 다운로드합니다.다운로드 후 기본으로 모두 NEXT 하시면 간단하게 설치가 완료됩니다.https://nodejs.org/en 2. 설치완료 확인설치완료 확인은 CMD창을 열어서 n.. NodeJs 01: 노드JS의 특징과 활용사례를 소개합니다. 안녕하세요. 각성한 데브키라입니다. Node.js는 Chrome의 V8 JavaScript 엔진에 기반을 둔 JavaScript 실행 환경입니다. 이 기술은 JavaScript가 단순히 웹 브라우저 내에서만 작동하는 것이 아니라, 서버 측에서도 실행될 수 있도록 확장합니다. 일반적으로 이는 웹 서버의 개발을 위해 널리 채택되고 있습니다.1. NodeJs(노드 JS) 특징 노드 JS의 특징과 활용사례를 소개합니다.비동기 및 이벤트 주도: Node.js는 비동기 이벤트 주도 방식을 사용하여 입출력 처리를 합니다. 이는 Node.js가 높은 트래픽을 처리하는데 매우 효율적이며, 비동기 방식으로 인해 서버가 대기 상태에 빠지지 않고 항상 작업을 처리할 수 있습니다.단일 스레드: Node.js는 단일 스레드 모.. 이전 1 2 3 4 다음
