로슬린의 인생잡담

1, 먼저 Typescript 기반으로 설치npm create vite@latest my-modern-react -- --template react-ts- 실행시 곧바로 http://localhost:5173 수행화면을 확인할 수 있다. 2. Tailwindcss 설치npm install tailwindcss @tailwindcss/vite 3. Tailwindcss 설정import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import tailwindcss from '@tailwindcss/vite'import path from 'path'export default defineConfig({ plugins: [ rea..

2026년 프론트엔드 엔지니어링 시장의 패러다임 전환과 아키텍처 진화에 관한 심층 연구 보고서전 세계 프론트엔드 개발 생태계는 2026년에 이르러 이른바 ‘피크 프레임워크(Peak Framework)’ 시대로 명명되는 성숙기에 진입했다.1 과거 새로운 라이브러리가 매달 등장하며 개발자들의 피로도를 높였던 혼란기는 종식되었으며, 이제 시장은 리액트(React)와 뷰(Vue), 앵귤러(Angular)라는 3대 거대 프레임워크를 중심으로 고착화된 안정성을 보이고 있다.1 이러한 안정성 이면에는 단순히 라이브러리의 선택을 넘어, 이를 어떤 메타 프레임워크 및 콘텐츠 인프라와 결합할 것인지가 기술 결정의 핵심 차별화 요소로 부상했다.1 본 보고서는 과거 리액트와 뷰를 경험했던 개발자가 현대의 시장에 다시 진입할 ..

1. 프로젝트를 생성합니다.npx create-next-app@latest 2. 다음과 같이 설정합니다.What is your project named? my-appWould you like to use TypeScript? YesWould you like to use ESLint? YesWould you like to use Tailwind CSS? YesWould you like to use `src/` directory? YesWould you like to use App Router? (recommended) YesWould you like to customize the default import alias (@/*)? Yes 3. 기본 라이브러리를 설치해 줍니다.npm i 4. 실행하여 ..

Identity서버를 연결하기 위해 가장 기본인 oidc-client를 이용한 접속을 시도해 보겠습니다. (1) 먼저 Next.js 프로젝트를 생성해 주세요. npx create-next-app testapp (2) oidc-client 를 설치해 줍니다. npm install oidc-client (3) root에 위치한 page.tsx 에 내용을 다음과 같이 작성해 줍니다. "use client" import { OidcClient,UserManager } from "oidc-client"; export default function Home() { var config = { authority: "https://localhost:5100", client_id: "RoslynDevJS", redirec..

Next.js 프로젝트를 셋팅하기 위해서는 기본적으로 Node.js, NPM 등이 설치되어 있어야 합니다. (1) create-next-app의 최신 버전을 설치해 줍니다. npm install create-next-app@latest -g (2) npx를 이용해 create-next-app를 실행합니다. (앱폴더가 자동으로 생성됩니다.) npx create-next-app testapp (3) 실행하면 설치에 관련된 요소들에 대해 질문하며, 적절히 답변하면 Next.js가 생성됩니다. (4) 이제 code . 으로 생성된 프로젝트를 vs code에서 확인할 수 있습니다. code .

Apps로 구성된 nest.js에 프로젝트는 기본적으로 다음과 같은 명령으로 실행시킵니다. npm run start:dev targetproject 문제는 이런 식으로는 한번에 하나씩만 실행이 가능하니 여러 프로젝트를 동시에 테스트할 생각이라면 다음과 같은 배치 파일을 만들어 놓으면 편할 것입니다. 먼저 pm2를 설치해 줍니다. 동시 실행하여 전체 프로세스를 테스트하기 위함이므로, 일괄 실행을 위해 pm2로 매니징을 할 것입니다. npm install -g pm2 이번에는 batch 파일을 만들어서 일괄로 실행시키고, 일괄로 중지하도록 해보겠습니다. 다음과 같이 3개의 batch 파일을 만들어 줍니다. 먼저 start.bat 파일입니다. @echo off echo compiling start /B npm..

먼저 Nest.js의 프로젝트를 생성해 봅니다. nest new multiapp 리포지토리 선택자에서 npm을 선택해 줍니다. (자신에게 맞는 것을 선택해 줍니다.) 그럼 프로젝트의 각 요소들이 설치가 되는 화면이 보여집니다. 이제 해당 폴더로 이동한 다음, app 명령을 통해, 하나의 프로젝트에 2개 이상의 백엔드 api 를 구축할 수 있게 됩니다. 다음 명령을 입력해서 member app을 추가해 봅시다. nest g app member 프로젝트가 설치된 상황을 VS CODE로 확인해 봅시다. 보다시피, 먼저 설치한 프로젝트와 나중에 app 명령으로 추가한 member가 apps 폴더 아래에 나란히 배치됩니다. 둘은 동급 요소로써 취급됩니다. 이제 app 명령으로 필요한 만큼 프로젝트를 얼마든지 추가..

자바스크립트 배열의 메소드가 어떤게 있는지 예시로 한번에 살펴보자. [3, 4, 5, 6].at(1); // 4 [3, 4, 5, 6].pop(); // [3, 4, 5] [3, 4, 5, 6].push(7); // [3, 4, 5, 6, 7] [3, 4, 5, 6].fill(1); // [1, 1, 1, 1] [3, 4, 5, 6].join("-"); // '3-4-5-6' [3, 4, 5, 6].shift(); // [4, 5, 6] [3, 4, 5, 6].reverse(); // [6, 5, 4, 3] [3, 4, 5, 6].unshift(1); // [1, 3, 4, 5, 6] [3, 4, 5, 6].includes(5); // true [3, 4, 5, 6].map((num) => num + 6..

기본적으로 js 기반의 프로젝트들은 프로젝트 명을 작성할 때 [소문자]로만 해주는 것이 좋다. 리액트의 경우 npx create-react-app [project name] --template=typescript 뷰의 경우 vue create [project name] 위와 같이 지정하면 선택 메뉴가 등장한다. 메뉴얼을 선택해주자. 그럼 초기 설정값을 내가 선택할 수 있게 되는데, 기본적으로 Babel과 Linter만 선택되어 있다. TypeScript, Router, Vuex 등을 추가 선택해주자. 위아래 키보드로 이동해서 스페이스바를 눌러주면 선택된다. 선택이 끝났으면 엔터를 눌러주자. Vue의 버전을 선택하는 화면이 나온다. 3.x를 선택해 주자. 이번에는 class-style component 신..

Nest.js 에서 초기에 자동 생성되는 테스트 코드는 실행하면 오류가 발생합니다. tsconfig.json 에서 다음 항목을 수정해 주어야 합니다. { "compilerOptions": { //기존항목 "types": ["node","jest"], }, } 다음으로 단위 테스트 파일은 src 폴더 하위에, 파일명에 spec 이란 문자열을 포함하여 작성해야 합니다. 먼저 다음 메소드들에 대해서 알아야 합니다. "describe" 함수는 테스트 코드를 그룹화하고, 해당 그룹에 대한 설정을 제공하는 Jest에서 제공하는 함수 중 하나입니다. 이 함수를 사용하면 테스트를 더 구조화하고 읽기 쉽게 만들 수 있습니다. "beforeEach"는 Jest에서 제공하는 함수 중 하나로, 각 테스트가 실행되기 전에 공통..