Let's Study Coding

Welcome to Visit!!
Let's get it

웹 개발자로의 새로운 여정을 시작해 보겠습니다.

총 방문자
총 포스팅
오늘 방문자
000일 째 블로그 운영중

여러분들의 방문을
진심으로 환영합니다

웹 개발자로서, 다양한 개발 지식을 다루는
블로그를 만들어보겠습니다. 😃

최근 글

막 올라온 최신 포스팅을 구경해보세요 !

참고하는 웹사이트 목록 💻

필자가 자주 참고하는 웹사이트를 둘러보세요.

Img
2023. 2. 22. 22:45
[WebSite] 🖥️ 웹 개발을 할 때 자주 참고하는 사이트 모음.
목차 제가 웹개발을 할 때 자주 참고하는 사이트를 정리한 포스팅입니다. @Web's CSS 코드펜의 자료들 중 좋은 자료들을 모아 놓은 티스토리 블로그 사이트. 매우 유용한 자료가 많아서 애용하는 블로그다. @web's CSS 코드펜 레퍼런스 사이트입니다. wsss.tistor
더보기
Img
2023. 2. 13. 15:16
[WebSite] 🎨 유용한 무료 이미지 사이트 모음
목차 제가 주로 사용하는 또는 인터넷에서 찾은 유용한 무료 이미지 사이트를 모아서 정리한 포스팅입니다. Unsplash Unsplash는 200만개 이상의 완전 무료 고해상도 이미지를 제공하는 무료 이미지 사이트이다. 전 세계의 사진가들이 라이브러리에 사진을 제공하기
더보기
Img
2023. 2. 13. 15:01
[WebSite] 🖥️ 저작권 무료 목업 사이트 6곳 추천
포토샵, 일러스트를 이용한 디자인 작업을 할 때 로고나 웹, 패키지 등 디자이너들이 자신의 작업물을 더 업그레이드 하기 위하여 목업을 활용하고 있다. 오늘은 제가 주로 사용했던 무료 목업 사이트를 작성해보려고 한다. 1. Anthony Boyd Graphics Free Mockups
더보기
Img
2023. 2. 11. 20:33
[WebSite] 🌈 Gradient 사이트 모음.
목차 프론트엔드 웹개발을 하다 보면 Gradient를 이용하여 작업을 해야할 때가 많다. 문제는 Gradient 디자인을 할 때 단색으로 많은 톤을 잡지만 두 가지 이상을 사용할 때 조합이 어색하다면 전체적인 느낌이 살지 않을 수 있다. 하지만 조합이 잘된 그라데이션(Grada
더보기
Img
2023. 2. 11. 19:26
[WebSite] 🖥️ 유용한 SVG 사이트 모음
프론트엔드 작업을 하다보면 SVG를 사용하여 사이트를 만들어야 할 때가 생긴다. 그래서 어떤 유용한 SVG 사이트가 있는지를 알아볼 겸 자주 사용하는 SVG 사이트를 정리해서 작성해보려고 한다. 필자는 주로 7개의 SVG 사이트를 이용한다. 1. 부트스트랩(Bootstra
더보기

CSS 스타일링 🎨

웹 개발을 할 때 사용하는 CSS 사용방법을 확인해보세요.

Let's Write Message

Guest Book

블로그를 방문해주셔서 감사드립니다.
자유롭게 댓글 달아주세요 ~

Let's Choose Tag Box

Tag Page

원하시는 태그를 클릭해보세요.

Light Dev
Light Dev에서 공부한 내용을 정리합니다.

-

[Node.js] 📚 package.json 이란❓ 본문

[Node.js] 📚 package.json 이란❓

Light9639

목차

    package.json이란?

    package.json이란 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)을 통해 설치한 모듈들의 의존성을 관리하는 파일이다.

    JavaScript
    {
      "name": "tutorial",
      "version": "1.0.0",
      "description": "",
      "main": "server.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }

    이름처럼 JSON 포맷으로 이루어져 있다.


    생성방법

    package.json을 생성하려면 다음 명령어를 통해 생성할 수 있다.

    Shell
    npm init // 프로젝트명, 설명 등 작성할 내용이 있을 경우
    npm init -y // 입력할 내용없이 package.json 생성
    
    
    yarn init
    yarn init -y

    package.json의 기본 정보

    기본 정보란 package.json을 자동으로 생성할 때(npm init), -y를 명령어를 붙이지 않은 경우 입력하게 되는 것들을 나타낸다.

     

    name, version, description, author, license 등을 입력할 수 있는데, 프로젝트에 대한 간략한 내용을 입력할 수 있다. 처음 생성할 때 입력하지 않은 경우에 추후에 package.json을 변경하여 입력할 수 있다.


    버전관리

    의존성 모듈을 설치하게 되면 dependencies안에 해당 모듈의 버전과 이름이 추가된다.

    JavaScript
    {
      "name": "tutorial",
      "version": "1.0.0",
      "description": "",
      "main": "server.js",
      "dependencies": {
        "react": "^17.0.2", // react 설치 결과
      },
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }

    특정 버전인 경우

    JavaScript
    "react": "17.0.2"

    Tilde Ranges(~)

    JavaScript
    "react": "~17.0.2"

    Tilde Ranges(~)의 경우에는 마이너 버전이 명시되어 있으면 패치버전만 변경하며 버전을 적용한다.

     

    예를 들어 ~17.0.2인 경우, 17.0.9까지 버전을 갱신한다. ~0일 경우는 0.0.0부터 0.9.9까지 버전을 갱신한다.


    Caret Ranges(^)

    JavaScript
    "react": "^17.0.2"

    Caret Ranges(^)의 경우에는 정식버전에서 마이너버전과 패치버전을 변경하며 버전을 적용한다.

     

    예를 들어 ^17.0.2인 경우, 17.9.9까지 버전을 갱신하다. ^0일 경우는 0.0.0부터 0.0.9.까지 버전을 갱신한다.


    의존성 모듈 설치

    package.json은 의존성을 모듈로 관리하는 하나의 파일이다. 즉, 모듈들이 차곡차곡 쌓일 수록 dependencies에는 다양한 내용들이 추가된다. 이 파일 하나로 프로젝트에 필요한 모듈들을 한번에 설치할 수 있다.

    Shell
    npm install

     

    위의 명령어를 통해 package.json - dependencies에 명시되어 있는 모듈들의 버전에 따라 설치를 진행하게 된다.


    잘못된 내용이 있으면 언제든 피드백 부탁드립니다.

    이 글이 좋으셨다면 구독 & 좋아요

    여러분의 구독과 좋아요는
    저자에게 큰 힘이 됩니다.


    Light Dev
    Light dev
    웹 개발자로의 새로운 여정을 시작해 보겠습니다. 조언해주실 부분이 있으시면 언제든 이메일 부탁드립니다.

    사이트를 방문해 주셔서 감사합니다

    만일 도움이 되셨으면 공감과 구독 버튼 클릭 부탁드립니다.
    추가적인 질문사항이나 이해가 안되는 점이 있으면 댓글로 적어주세요.

      Light9639
      티스토리에 팔로잉