Node.js 웹개발 노트

Node.js 쇼핑몰 만들기 - Node.js 설치 및 SublimeText 설치

끼뱅 2020. 7. 15. 21:02

 

Node.js 쇼핑몰 만들기 - Node.js mongoDB 설치 및 환경설정

 

안녕하세욧!! 끼뱅끼뱅입니다.

 

이번 포스팅을 시작으로 Node.js로 만드는 쇼핑몰을 시작하게 됐습니다.

 

우선 이 프로젝트는 Node.js, MongoDB를 사용해서 백엔드 구축할 것이고

 

Jquery, Bootstrap으로 프론트엔드를 구축할 예정입니다.

 

그렇다면 우선 환경설정을 시작해야겠죠??

1. Node.js 설치가이드

1. 홈페이지 접속 (Node.js 설치 홈페이지)

아래에 링크로 들어가신 뒤,

https://nodejs.org/ko/

Node.js 설치 홈페이지

사진에서 보이는 주황색 버튼을 눌러서 설치 파일을 다운받아주세욧!!

 

2. 설치 프로그램 실행

설치하는 과정에서 모두 NEXT만 눌러주세요!

실행해주세욧!

 

Next를 눌러주시구욧!
형광팬 부분을 체크하고 Next를 눌러주세욧!
또 다시 Next를 눌러주세욧!
Next를 눌러주세욧!
체크안하고 Next눌러주세욧!
인스톨을 눌러주세욧!

3. 설치 확인 (CMD 혹은 터미널 접속)

 

네~~ 이제 설치가 완료됐다면 정상적으로 설치가 됐는지 확인해야겠죠??

윈도우를 사용 중이라면 CMD 창에서

node -v 명령어와

npm -v 명령어를 입력하셔서 위와 같이 설치한 버전이 출력되면 성공입니다.

 

맥북을 사용 중인 분이라면 터미널에서

node -v 명령어와

npm -v 명령어를 입력하셔서 위와 같이 설치한 버전이 출력되면 성공입니다.

 

이로써 Node.js 설치는 끝입니다. 

 

자 그럼 이제 편리한 코딩환경을 제공하기 위해서 SublimeText3를 설치해볼까요??

 

2.SublimeText3 설치가이드

간단하게 SublimeText3를 선택한 이유를 말씀드리자면,

이 툴은 여러가지 언어를 보기 편하고 자동완성 기능을 제공하기 때문에

개발하기 좋은 환경을 셋팅할 수 있도록 도와줍니다.

또한, 가벼운(?) 프로그램으로써,

저사양 컴퓨터에도 높은 호환성을 제공합니다.

 

1. 홈페이지 접속(SublimeText3 설치 홈페이지)

운영체제에 맞는 버전으로 설치해주세욧!

2. 설치 프로그램 실행

실행버튼을 눌러주세욧!
Next를 눌러주세욧!
또 다시 Next를 눌러주세욧!
Install을 눌러주세욧!

3. 프로그램 실행 및 패키지 설치

서브라임텍스트를 잘 사용하기 위해서

 

패키지 콘트롤을 설치해야하고

 

설치한 패키지 콘트롤을 이용해서

 

사용자에게 알맞은 패키지를 설치한답니다.

패키지컨트롤을 설치합니다.
설치가 완료되면 아래와 같이 알럿이 출력됩니당

설치가 완료되고 다시 PackageControl로 들어가면

짜잔~

Package Control: install Package를 눌러주세요.

눌러주시면 아래와 같이 나오는데요

IMESupport ( 한글 입력을 할  한글자씩 늦게 보이는 현상을 완화시켜준다. Only Window )

ConvertToUTF8 ( 이 플러그인을 깔고 File - Set File Encoding To 에서 EUC-KR을 선택하면 된다. )

BracketHighlighter ( 태그의 처음과 끝을 하이라이트 시켜서 코드 가독성을 높여준다. )

Emmet (젠코딩 없이도 서브라임 기본 기능만으로도 부족함이 없다.)

SideBarEnhancements ( 사이드바의 기능을 확장시켜준다. 저는 잘 사용하지 않습니다.)

JQuery ( JQuery 자동완성 기능이 추가된다. )

CSS Format ( css 를 여러가지 방법으로 정렬시켜준다. )

CSScomb ( css 의 속성 순서를 원하는 순서로 변경시켜준다. CSSFormat 과 같은 기능도 있다. )

 

위에 목록을 차례대로 입력하시고 다운받아주시면 되겠습니다~

에를들어서, JQuery를 설치하겠습니다.

 

JQuery를 입력해주시고 엔터키를 누르면

화면 하단에 Installing package Jquery라고 나오는데요

설치가 완료되면, Line1,Column1이 다시 출력됩니다.

방금한 과정을 반복적으로

필요한 패키지만 설치해주시면 되겠습니닷!

 

 

자 그럼 오늘은 Node.js와 SublimeText3를 설치해보았는데요.

 

다음 시간에는 설치한 툴을 이용해서

 

Express프레임워크를 이용한 간단한 개발을 진행해보겠습니다~!

 

감사합니닷!