24년 12월 6일

node js 란 ?

Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임이다.

Node.js를 설치하면 브라우저를 키지 않아도 자바스크립트를 컴퓨터에서 수행할 수 있게됩니다.

간단히 이해하면 브라우저 없이 자바스크립트를 실행할 수 있게하는 프로그램 ?

NPM ?

Node Package Manager Node Package : Node.js 환경에서 사용가능한 모듈(라이브러리)를 의미 Node.js 환경에서 사용 가능한 패키지를 다운 받을 수 있게 하는 도구 Node.js 를 설치하면 자동으로 설치된다. 다운 받아진 모듈들은 ./node_modules 에 설치된다 npm install [모듈명] 로 다운받아 사용가능

사용할 폴더에서 cmd 로 npm init -y

하면 package.json 파일 생김

package.json 이란
  package.json 파일은 Node.js 프로젝트의 핵심 설정 파일입니다. 이 파일은 프로젝트의 메타데이터와 함께 의존성 관리, 스크립트 정의 등 다양한 정보를 포함합니다.
  주로 npm (Node Package Manager)을 통해 패키지를 관리하고 프로젝트를 초기화할 때 자동으로 생성됩니다.

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",  //메인 자바스크립트
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
} //package.json 예시코드

  //주요 역할과 내용
  [프로젝트 정보 포함]
  이름 (name): 프로젝트의 이름을 정의합니다.
  버전 (version): 현재 프로젝트의 버전을 관리합니다.
  설명 (description): 프로젝트에 대한 간단한 설명을 제공합니다.

npm install parcel-bundler -D 명령어는 현재 프로젝트에 parcel-bundler를 개발 시에 사용할 패키지로 설치하겠다는 뜻입니다.

Parcel은 웹 애플리케이션을 위한 빠르고 간편한 번들러(bundler)입니다. 주로 정적 자원들(HTML, CSS, JavaScript 등)을 하나의 번들로 묶어서 브라우저가 이해할 수 있는 형태로 변환해주는 도구입니다. 고도화된 개발을 하기 위해 로컬 서버를 돌릴 수 있도록 도와주는 모듈입니다.

"번들(bundle)"은 웹 개발에서 여러 개의 파일을 하나로 묶는 과정이나 그 결과물을 의미합니다. 보통 웹 애플리케이션에서는 HTML, CSS, JavaScript와 같은 여러 종류의 파일들이 각각 분리되어 있지만, 이들을 하나의 파일로 묶어서 브라우저에서 처리할 수 있도록 합니다.

 

npm install : npm을 사용하여 패키지를 설치하는 명령어입니다. parcel-bundler: 설치할 패키지의 이름입니다. 이 경우에는 parcel-bundler라는 이름의 패키지를 설치하겠다는 뜻입니다. parcel-bundler는 Parcel이라는 웹 애플리케이션 번들러입니다. -D 또는 --save-dev: 이 옵션은 패키지를 개발 종속성으로 설치하겠다는 의미입니다. 개발 종속성은 개발 시에만 필요한 패키지로, 실제 배포 환경에서는 필요하지 않을 수 있습니다. 예를 들어, 테스트 도구나 번들러와 같은 개발용 도구들이 여기에 포함됩니다.

 

node module : build.gradle 파일 같은거

이거 삭제해도 npm install 하면 다시 생김

 

node 설치 →

nodejs 에서 dist 폴더 : 컴파일된 결과물 파일

 

---

에러 PSSecurityException

https://h-owo-ld.tistory.com/119

npx parcel index 했을 때 오류 날 때 해결법 ?

보안 오류: (:) [], PSSecurityException

• FullyQualifiedErrorId : UnauthorizedAccess PS C:\Users\Administrator\Downloads\node>

윈도우 powershell 관리자권한 실행

set-ExecutionPolicy RemoteSigned

명령어 실행

---

깃허브 푸쉬 주의점

node.modules 폴더는 크기가 커서 , 깃허브에 프로젝트파일을 push 할 때는 이 폴더를 빼고 push 해야함 !

gitignore 라는 사이트를 사용해서 제외할 파일을 정해서 push 할 수 있음

https://velog.io/@mendel/.gitignore-문법-정리 https://www.toptal.com/developers/gitignore //gitignore 사이트

ignore push 하는법

gitignore 사이트에서 node 검색 ,

하고나면 gitignore 내용이 생성됨

프로젝트경로에 .gitignore 파일 생성

파일 생성후에 git add * 을 하면 node_modules 폴더가 제외하고 add 된다.

그리고 commit 하면됨.

그리고 remote 하고 push 하면됨

아 , 그전에 branch main 생성하고 push 해줘야함

git push -u origin main 하면 다음에는 branch 일일히 안써도 됨

---

SCSS

• Sass의 3버전에서 새롭게 등장한 것으로, CSS와 거의 같은 문법으로 Sass 기능을 지원한다.
• {}(중괄호)와 ;(세미콜론)을 사용하는 점이 두드러진 차이이다

SASS

• 대표적인 CSS 전처리기 중 하나이다.
• CSS가 동작하기 전에 사용하는 기능으로 CSS Preprocessor라고 부른다.
• CSS 문법과 유사하지만 선택자의 중첩이나 조건문, 반복문 등을 사용하여 더 편리하게 작성할 수 있다.
• 웹에서는 직접 동작하지 않으므로 전처리기로 작성 후 CSS로 컴파일하는 방식으로 사용한다.

---

사용법

scss 에서 & 뜻 : 상위 태그

.container{
    // color:blue;
    height:300px;
    width:300px;
    border:2px solid;
    margin-left: 500px;

    h1{
        color:orange;
        padding:20px;

    }
    ul{
        list-style: none;
        padding:10px;

        li{
            border:3px solid;
            width:150px;
            margin:5px;
            text-align: center;

            &:hover{
                background-color: red;
            }
            &.active{
                background-color:royalblue;
            }
            a{
                text-decoration: none;
                
            }
        }
    }
}

이런식으로 scss 를 사용하면 계층형 구조로 css 파일을 작성할 수 있음.,

$globalSize:200px;  //전역 변수 설정

.container{
    border:3px solid;
    width:$globalSize;
    margin:50px;

    $c1Height:100px; //지역 안의 전역변수
    .item{
        width:$globalSize;
        height:$c1Height;
        background-color: royalblue;
    }
}

.container2{
    $c2Height:120px;
    .item{
        width:$globalSize;
        height:$c2Height;
        background-color: orange;
    }
}

scss 에서 $[이름] 은 변수를 지정하는 것.

선언하는 위치에 따라 전역변수 , 지역변수 처럼 사용할 수 있다.

scss 의 연산처리

scss 에서는 연산을 지원한다.

연산자 설명

==, !=	두 값이 같은지 아닌지 체크하는데 사용됩니다.
+, -, *, /, %	숫자 타입에 대해 연산을 수행하는데 사용됩니다.
<, <=, >, >=	값을 비교하는데 사용됩니다.
and, or, not	논리 연산입니다.and는 그리고, or는 또는, not은 부정을 의미합니다.
+, -, /	문자열을 가공하는데 사용됩니다.

연산규칙

연산은 px(픽셀) 로 수행한다.

/ 연산자는 주의해서 사용해야한다

CSS는 숫자를 분리해서 표현하려고 할 때 /를 이용해서 표현하는 방식을 허용하고 있습니다. 그래서 때에 따라서 /가 나누기 연산자가 아닌 숫자 표현으로 컴파일 될 수 있음을 주의해야합니다.

다음 상황은 / 연산자가 연산자로 사용되기 위한 조건들입니다.

• 피연산자가 변수에 저장되거나 함수에서 반환될 때
• 연산자와 피연산자가 ()로 묶이는 경우

CSS 값 구분 기호:

CSS에서는 슬래시가 특정 속성의 값을 구분하는 용도로 사용됩니다. 예를 들어,

font: 16px/1.5 Arial, sans-serif; // CSS에서 슬래시 사용

속성에서는 슬래시를 사용해 글꼴 크기와 줄 높이를 구분합니다.

---

기본 실행 파일 지정

    "dev": "parcel 03.html",
    "build": "parcel build 03.html"