[VanillaJS] 고양이 검색 사이트 🐈‍⬛ - 세팅편 | protect-me

🕊 프로그래머스 - [프론트엔드] 고양이 사진 검색 사이트

1. 프로젝트 세팅(Parcel Bundler)

basic init/install

// 폴더 생성
$ mkdir search_cat_photo

// 디렉토리 이동
$ cd ./search_cat_photo

// npm init => package.json 파일 생성
$ npm init -y 

// parcel-bundler 개발 의존성 설치 => package-lock.json, node_modules 폴더 생성
$ npm i -D parcel-bundler

package.json 수정

  • script 수정
{
  "name": "search_cat_photo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.5"
  }
}

index.html 생성

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Search Cat Photo</title>
</head>
<body>
  
</body>
</html>

.gitignore 생성

node_modules
.cache
dist
.DS_Store

2. npx digit

기본 세팅 되어있는 파일 및 내용이 많기 때문에 복사하는 작업은 생략

아래 명령어로 초기 세팅된 프로젝트를 복사할 수 있음
$ npx digit protecet-me/search_cat_practice yourProjectName

아래 명령어로 프로젝트를 실행할 수 있음
$ npm run dev

Photo by Hannah Troupe on Unsplash

[TIL] 2021. 02.22
[BOJ] 카드 구매하기 (no.11052)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage