NPM initializer 기본 만들기


npm 만들기를 조사하던중 궁금한 사항이 생겼다. React 개발을 한번이라도 해본 개발자라면 잘 알고 있을 Facebook에서 제공하는 create-react-app 이라는 스타트킷(?)을 한번이라도 보았을 것이다. 그래서 이건 어떻게 만들어 졌을까? 라는 궁금증에 이에 대하여 조사 및 테스트를 진행해 보았다.


Creact React App은 어떻게 만들었을까?

npx create-react-app my-app or npm init react-app my-app
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

위처럼 명령어를 입력하면 위 그림과 같이 react 개발을 위한 기본적인 디렉티로/파일/구조 등을 자동으로 설치하여 개발자고 초기 설정 및 세팅을 하는 수고로움을 덜어주는 아주 좋은 개발자 스타터 킷 이라고 생각했다. 그래서 혹시나 우리도 프로젝트를 새로 세팅할 경우 기본적인 구조를 자동으로 설정해주면 편리하겠다는 생각에서 출발하였다.

검색을 하던중 아래와 같은 사이트에서 대략적인 힌트를 얻었다.

https://github.com/saostad/node-typescript-starter

이 친구도 아마도 나와 같은 생각으로 출발했던거 같기도 하고, 뭔가 단서가 될만한 내용이 있을거 같은 느낌으로 일단 여기서부터 출발 하기로 했다.

어떻게 저 명령어를 실행하면 일반적으로 모듈을 설치하는 npm -i 와 같이 module을 다운받아 설치하는 로직이 아닌 cli가 실행이될까? 그리고 이건 어떻게 할까?

그래서 일단 내용은 뭐가 뭔지 모르겠고(안되면 되게 하라!) 무식하게 일단 package.json부터 살펴본다. 아래의 내용에서 뭔가 단서가 될만한 내용을 찾던 중 아래와 같은 경험있는 개발자들에겐 흔한 단어인 bin 이라는 걸 발견했다. 나머지 내용들은 프로젝트를 진행하던중 많이 봐 왔던 내용이라 어떤 일을 수행하는지 대략 알기에 내가 모르는 내용이 있을까하고 찾아 들어갔다.


그래서 바로 해당 파일을 또 파들어~~~~ 간다. 일단 첫 몇줄부터 내가 원하던 내용이 대략 보이는거 같다. "create folder" 그래 폴더를 만들고 파일을 추가하고 뭐 이런거구나, 결론은 윈도우의 cmd 명령어 창에 프로그램으로 직접 코드를 짜줘야 하는거였구나(ㅠ,.ㅜ)라는 불길한 예감은 항상 적중했다...ㅠ,.ㅜ


위 그림에서 보는 바와 같이 파일이 실행되고 setup()라는 함수를 통해 폴더를 생성하고 파일을 복사하고 기타 npm 명령들을 실행하여 기본 설정을 하는 것 같다.


Creact React App과 같은 instalizer 만들기 실습

자 그래서 위에서 많은 힌트를 얻었으니 직접 만들어보자. "백문이 불여일견, 백견이 불여 일행" 이라고 필자의 철학이다...ㅎㅎㅎ

검색을 하던중 중요한 내용 한가지는 npm 패키지를 만들기 위한 과정에서 명명규칙 앞에 항상 create-라는 단어를 넣어 주어야 한다는 것을 알았다. 이건 규칙인듯 하다. 혹시 npm 만들기를 안해본 사람이거나 모르는 사람은 여기(https://nurioweb.blogspot.com/2021/10/npm.html)를 참고하시기 바랍니다.

패키지를 생성하고 초기화하고 등록하는 전 과정은 npm 만들기와 동일하다. 그래서 여기서는 간단히 npm 만들기와 틀린 부분을 위주로 설명하였다.

현재 디렉토리에서 npm 만들기를 하면 아래와 같이 기본적인 파일들이 만들어 진다. 여기서 package.json을 수정해야 한다.

"bin": "setup.js" 를 추가하고 setup.js 파일을 해당 위치에 생성하자. 그리고 setup.js을 열어 우리가 원하는 내용을 입력하면 된다.


위와 같이 테스트를 위해서
1. 콘솔 로그로 찍으면 명령창에 텍스트로 표시된다.
2. 디렉토를 생성하기 위해 root 디렉토리를 찾아 콘솔로 표시했다.
3. 사용자에게 입력 받은 디렉토리 명 또는 위에서 설정한 기본 디렉토리 명으로 디렉토리를 생성한다.

이렇게 코드를 작성하여 npm 레파지토리에 등록하고 정상적으로 등록이 완료되면 테스트를 임의 디렉토리로 이동하여 테스트 해보도록 한다.


npm init xxxxx-xx[본인패키지명 create 제외] new-project[생성폴더명]

위와 같이 명령어를 실행하면 우리가 작성한 내용으로 콘솔에 실행된다. 처음에 접근은 쉽지 않았으나 현재 내용을 정리해서보면 간단한 내용이다. 
  1. npm init로 초기화 및 생성(모듈명 앞엔 create- 필 작성)
  2. package.json에 "bin"="setup.js" 추가
  3. setup.js에 원하는 코드 추가(명령창에서 실행할 내용)
  4. npm 등록
  5. npm 사용


참고

댓글

댓글 쓰기

이 블로그의 인기 게시물

[JAVA] 변수란? 변수타입?

이미지
프로그램 언어를 배울때 항상 먼저 배우거나 집고 넘어가는 것이 있죠? 네 맞습니다.  변수 라는 것입니다. C언어나 Java에서는 int, char, float 등 자료형에 따라 다르고, Javascript에서는 모든 변수를 그냥 var로 사용하죠. 물론 또 개발 언어마다 조금씩 차이가 있습니다. 하지만, 기본적으로 "변수"라는 기본 개념은 모든 언어에서 모두 동일합니다. 이번 포스팅은 이 변수에 대하여 낱낱이 파헤쳐 봅시다.  아! 참고로 변수에 대하여 정말로 낱낱이 땅끝까지 파헤치자면 이 한번의 포스팅으로는 부족합니다. 따라서 오늘은 일차적으로 가장 기본이 되는 변수의 정의와 원시타입에 대해서만 낱낱이 살펴보도록 하겠습니다. 변수란 무엇일까? 자! 일단 변수란 무엇일까요? 변수란? 물어보면 가장 먼저 사람들은 당당히 말을 하죠.  "변하는 수" 물론 이 말도 틀린 말은 아닙니다. 우리 프로그래밍에서는 변수라는 공간에 값이 항상 변하는 그리고 그런 용도로 사용하려는 것이 변수니까요. 변수는 영어로 "Variable"라고 읽습니다. 이것을 사전에서 찾아보면 "변화하기 쉬운, 변덕스러운, 다양한" 이라는 의미를 갖습니다. 뭐 이 말도 틀린 말은 아니네요. 하지만! 우리는 개발자로도 더 프로그래밍 적인 의미를 원합니다. 그래서 이렇게 정의를 했죠. 변수란? 데이터(값)을 저장할 수 있는 프로그램의 저장 공간! 서론이 길었네요. ^^. 항상 무언가 정의를 내리기란 쉽지 않습니다..ㅎㅎㅎ 변수를 좀 더 이해하기 위해 아래의 그림을 예를 들어 보겠습니다. 위와 같이 우리가 물을 마셔야 한다면, 물을 마시기 위해 당연히 물 컵이 있어야겠죠.  아! 물통에 입을 대고 드시는 분들도 계시지만... 그러면 엄마한테 혼납니다. ㅎㅎ 아무튼 이렇게 물을 마시기 위해 물을 담을 컵을 준비하는 것을 프로그래밍에서는 "데이터를 사용하기 위해 변수를 선언한다" 라고 이야기 할 수 있습니다.  그럼 ...
자세한 내용 보기

[JAVA] 문자셋(Charset)

이미지
문자셋의 역사 2022년 현재를 기준으로 가장 많이 사용되고 많이들 알고 있는 문자셋(Charset)은 UTF-8일 것이라 생각합니다. 물론 여러분들이 프로그래밍을 공부했거나 컴퓨터 공학을 전공했다면 ASCII 뿐만 아리나 UNICODE 등 다양한 문자셋을 알고 있겠죠. 그래서 이렇게 많은 문자셋들이 왜 생겨서 우리를 괴롭히는지 그리고 다 공부해야하는지 궁굼해 하는 분들이 많으실거라 생각하여 짧게 문자셋의 역사와 자주 사용되는 문자셋 몇개를 정리해 보려 합니다. 일단 문자셋의 대략적인 역사 또는 발전기를 아래와 같은 그림으로 살펴보도록 하죠. 위에서 보는 바와 같이 최초의 컴퓨터는 알파벳권에서 처음 개발 및 사용되었다고 합니다. 그래서 초기에 컴퓨터를 만들 당시 알파벳만 사용하면 되었던 것이죠. 그 시대 배경을 보더라도 글로벌 시대도 아닌 냉전 시대였으니 뭐 당연한거라고 생각할 수 있었을거 같습니다. 그렇게 시작되었던 초기 컴퓨터에서 0과 1밖에 모르던 컴퓨터에서 사람이 사용하기 위해 글자를 표시할 방법을 컴퓨터 과학자들이 의논하게 되죠. 고민끝에 컴퓨터에서는 데이터를 부호화하는 방법으로 숫자를 문자로 치환하는 방법을 생각하게 됩니다. 예를 들어 0은 NULL 이라는 아무것도 없다라는 기호로 그리고 숫자 65면 문자 알파벳 대문자 ‘A’로 66면 대문자 ‘B’ 이렇게 쭈욱 이어지다가 소문자 ‘a’는 97로 정하게 되죠.  이렇게 사람이 볼수 있는 문자를 컴퓨터 언어인 코드번호로 변경 또는 ‘부호화’하는 방법을 ‘인코딩(Encoding)’ 이라고 하고. 코드번호를 사람이 알아들을 수 있는 문자로 다사 되돌리는 것을 복호화 또는 ‘디코딩(Decoding)’이라고 합니다. 인코딩 : 문자, 숫자, 기호 등을 컴퓨터의 내부처리를 위해 숫자코드번호로 변경하는 것. 디코딩 : 컴퓨터의 내부처리 숫자코드번호를 문자, 숫자, 기호 등을로 다시 복원하는 것. 그래서 처음으로 이러한 기준을 만들었던 것이 ASCII(American Standard Code for Info...
자세한 내용 보기

[JAVA] 문자열 비교[== vs equals()]의 차이

이미지
자바에서 기본 자료형(원시타입)의 비교 연산은 일반적으로 == 연산자를 사용합니다. 하지만 String의 경우는 == 연산자를 사용하여 비교하면 안전하지 않죠? 안전하지 않다는 말은 무슨 뜻일까요? String의 경우 여러분들이 편하게 아무생각(?) 없이 사용하는 리터럴 즉, 대입 연산자를 이용해 바로 상수를 대입하는 방식으로 사용할 경우에는 일반적으로 == 를 이용해 값을 확인해도 문제가 없습니다. 하지만 사용자로 부터 입력을 받아 사용할 경우 동일한 값을 입력 받더라도 비교 연산자(==)는 동일한 값인데도 false를 반환하죠. 즉 아래와 같이 코드를 작성했다고 가정합시다.  Scanner sc = new Scanner(System.in); String id = sc.next();      // 사용자한테 ‘abc’를 입력 받았다고 가정. System.out.println(id == “abc”); // 비교연산자(==)를 이용해 비교하면 false. // 그래서 우리는 String의 메소드인 equals()를 이용해 비교하면 true를 반환합니다. System.out.println(id.equals("abc")); 이처럼 비교연산자(==)와 equals()는 왜 차이가 나는 것인지 한번 살펴보기로 하겠습니다. 먼저 그림을 보도록 하겠습니다. 위 그림에 대한 결론부터 이야기 하자면 String과 같은 클래스에서의 비교연산자(==)는 객체의 주소을 비교하는 것이고, equals()는 주소가 가리키는 실제의 값, 즉 문자열을 비교하는 메소드입니다. 따라서 우리는 String를 사용할 때 항상 안전하게 그리고 생각하지 말고 equals()를 사용하라고 배우죠. 위의 그림에서 선언한 각각의 변수들 주소를 이클립스에서 출력해보면 다음과 같습니다. String str1 = "Hello"; String str2 = "Hello"; String str3 = new String("World...
자세한 내용 보기