폴리프레임

dependencies와 devDependencies는 둘 다 Node.js의 패키지 관리자인 npm 또는 Yarn에서 사용하는 속성입니다. dependencies:목적: 애플리케이션이 프로덕션(실제 운영) 환경에서 실행되는 데 필요한 패키지를 지정합니다.사용: 사용자가 애플리케이션을 배포하거나 실제 환경에서 실행할 때, 이러한 패키지가 설치됩니다. 예를 들어, 애플리케이션이 데이터베이스에 연결하거나 API를 호출하는 데 필요한 라이브러리들이 여기에 포함됩니다.예시: express, mongoose 등과 같이 애플리케이션의 핵심 기능을 위해 필요한 패키지.devDependencies:목적: 개발 환경에서만 필요한 패키지를 지정합니다.사용: 개발자들이 애플리케이션을 개발하고 테스트하는 동안 사용되는 도구나..

JavaScript 2024. 5. 10. 15:38

npx create-next-app@latest 앱이름 --typescript --tailwind --eslint 이미 Next.js 을 설치하고 시작하는 경우는 여기 부터, 터미널에서, npx shadcn-ui@latest init , 하면 선택창 제시어를 아래 처럼 선택한다.npx shadcn-ui@latest init// 아래 주로 default 선택Need to install the following packages:shadcn-ui@0.8.0Ok to proceed? (y)√ Which style would you like to use? » Default√ Which color would you like to use as base color? » Slate√ Would you like to us..

JavaScript 2024. 5. 9. 11:41

JavaScript 또는 Node.js에서 모듈 이름 앞에 @를 붙이는 것은 일반적으로 "스코프 패키지"를 나타냅니다. 스코프 패키지는 특정한 이름 공간(스코프) 아래에 그룹화된 패키지를 의미하며, 주로 프로젝트나 조직을 위해 고유한 네임스페이스를 생성할 때 사용됩니다. @를 사용하는 경우 (스코프 패키지)예시: @angular/core, @types/node목적: 패키지를 조직적으로 관리하고 이름 충돌을 방지하기 위해 사용합니다. 예를 들어, 다양한 개발자나 팀이 만든 패키지가 같은 이름을 가질 수 있는데, 이를 @username/package-name 형식으로 구분하여 각자의 공간에서 관리할 수 있습니다.저장소: 주로 조직이나 프로젝트 내에서 사용되며, 공개적으로 또는 사설 저장소에서 관리될 수 있습..

JavaScript 2024. 5. 9. 10:27

Vite.js와 React를 사용하여 css 를 처리하는 것은 페이지가 몇개 안될때는 하나의 index.css 또는 app.css 파일을 만들어서, main.js  파일로 불러들여 단일 페이지로 처리 할수있다. import './index.css' 그러나 협업의 단계에서는 동일 컴포넌트 내에서 CSS를 적용하는 방법을 택하는 것이 맞습니다, 여기서는 CSS 모듈과 스타일드 컴포넌트(Styled Components) 두 가지 방식을 설명하겠습니다.1. CSS 모듈 사용CSS 모듈은 CSS를 컴포넌트 레벨에서 캡슐화하여 사용할 수 있게 해주며, 클래스 이름 충돌을 방지해줍니다. 각 CSS 파일은 하나의 JavaScript 객체로 가져오고, 해당 객체의 속성으로 접근하여 스타일을 적용합니다. 아래 두개의 파일..

JavaScript 2024. 5. 8. 15:13

개발의 시작점을 Grid 로 초기 설정한 것을 메모합니다.1. 1200 과 768 에서 변경2. // src/SideMenu.jsexport default function SideMenu() { return ( Side Menu );}// src/RightBanner.jsexport default function RightBanner() { return ( Right Banner );}// src/MainContent.jsexport default function MainContent() { return ( Main Content );}// src/App.jsimport './App.css';import SideMenu fr..

JavaScript 2024. 5. 8. 10:35

포스트 작성일 기준으로 다운받으면 version 10.7 을 받습니다. 따라서, --save 옵션은 무시해도 됩니다. 궁금증 해소 차원으로 아래 정리합니다.npm 버전 5.0 이전--save 옵션을 사용할 때: 이 옵션을 사용하면 설치하는 패키지가 package.json 파일의 dependencies 섹션에 자동으로 추가됩니다. 이는 해당 애플리케이션 또는 프로젝트가 해당 패키지를 실행에 필수적으로 요구한다는 것을 의미합니다.--save 옵션을 사용하지 않을 때: npm 버전 5.0 이전에서는 --save를 명시적으로 사용하지 않으면 package.json에 패키지가 추가되지 않습니다. 즉, 패키지는 설치되지만, 프로젝트의 의존성으로 기록되지 않습니다.npm 버전 5.0 이후--save 옵션을 사용할 때..

JavaScript 2024. 5. 7. 10:11

npm i lodash이 명령어는 lodash 전체 라이브러리를 설치합니다. lodash는 유틸리티 함수의 모음으로, 배열, 객체, 문자열 등의 다양한 데이터 구조를 다루는 함수들을 제공합니다. 이 전체 라이브러리를 설치하면 모든 함수가 패키지에 포함됩니다. //npm install lodashimport _ from 'lodash';const filtered = _.filter(users, user => _.includes(user.toLowerCase(), query.toLowerCase())); npm i lodash.filter이 명령어는 lodash 라이브러리의 일부인 filter 함수만을 설치합니다. 이는 lodash에서 제공하는 많은 함수 중 하나인 filter만 독립적으로 설치하는 방법입니..

JavaScript 2024. 5. 7. 10:05

Object.keys()const layers = { OL : "OpenLayes", LF : "Leaflet"};const firstValue = Object.keys(layers)[0];const firstKey = layers[Object.keys(layers)[0]];console.log(firstValue);//OLconsole.log(firstKey); // OpenLayesconsole.log(Object.keys(layers)); // (2) ['OL', 'LF']for (const key of Object.keys(layers)){ console.log( key, layers[key])} // OL OpenLayes// LF Leafletfor (const key of O..

JavaScript 2024. 5. 6. 18:06