Express + mysql 게시판 - Express + mysql gesipan

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

이전 포스팅

https://codingstep.tistory.com/entry/Vue-Express-MySQL-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EB%A7%8C%EB%93%A4%EA%B8%B0-1-Nodejs-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0

Vue + Express +MySQL 게시판 만들기 - 1. Node.js 설치하기

안녕하세요. Vue.js, Express, MySQL을 이용하여 게시판을 만드는 포스팅을 제작하려고 합니다. 저도 아직 배워야할게 아주 많은 입장이라 가능한 알고있는 상식들은 적겠지만 자세한 개념들은 패쓰

codingstep.tistory.com

Express + mysql 게시판 - Express + mysql gesipan

저번시간 Node.js를 설치한 후()에 이어서 코드를 작성할 에디터인 Visual Studio Code를 설치하고

Vue 작성을 도와줄 확장 기능을 설치해보겠습니다.

1.Visual Studio Code 설치하기

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

Express + mysql 게시판 - Express + mysql gesipan

Visual Studio Code 홈페이지에 접속을 합니다.

Express + mysql 게시판 - Express + mysql gesipan
Visual Studio Code 공식 홈페이지

Download for Windows를 눌러 다운로드를 받아줍니다.

그리고 어려운게 없으니 그냥 Next를 쭉 눌러서 설치를 해주시면 됩니다.

2-1. 확장 기능 설치 - Vetur

Visual Studio Code를 실행하여 아래 그림의 왼쪽에 노랗게 사각형으로 체크된 Extensions 를 클릭하고

Vetur를 검색하여 install을 해줍니다.

이 Vetur는 나중에 우리가 쓸 .vue라는 확장자를 가진 파일의 텍스트를 하이라이트 하는 기능을 제공해줍니다.

무슨 말인지 모르겠다 하시면 안깔고 넘어가셔도 상관없습니다. 나중에 '아~' 하시며 무조건 깔게 되있습니다.

Express + mysql 게시판 - Express + mysql gesipan
Vetur 설치

2-2. 확장 기능 설치 - Vue 3 Snippets

다음 설치할 기능은 Vue 3 Snippets입니다. Vue코드를 작성하는 생산성을 높여줍니다.

Express + mysql 게시판 - Express + mysql gesipan
Vue3 Snippets

2-3. 확장 기능 설치 - HTML CSS Support

마지막으로 HTML CSS Support를 설치해줍니다. 문서에 있는 CSS를 추천해주는 기능을 제공해줍니다.

오타를 치는 실수를 줄여주고 은근히 편리합니다.

Express + mysql 게시판 - Express + mysql gesipan
HTML CSS Support

오늘은 이렇게 Vue Code를 작성할 에디터와 확장기능을 설치해보았습니다.

다음 포스팅에서는 깃을 연동하여 형상관리를 할 수 있도록 해보겠습니다.

안녕하세요. Vue.js, Express, MySQL을 이용하여 게시판 만들기 프로젝트를 구현하는 포스팅을 제작하려고 합니다.

저도 배워야 할 것이 아주 많은 입장이라 가능한 알고있는 상식들은 적겠지만 자세한 개념에 대해서는 넘어갈 수 있으니 양해 바랍니다.

혹여 포스팅을 진행하며 잘못된 부분 또는 추가로 말씀해주실 부분은 언제든지 적어주시면 감사하겠습니다.

그럼 시작 하도록 하겠습니다.

1.Node.js 설치하기

https://nodejs.org/ko/

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

Express + mysql 게시판 - Express + mysql gesipan

nodejs 홈페이지에 접속을 합니다.

현재

Express + mysql 게시판 - Express + mysql gesipan
Node.js 홈페이지

최신버전을 다운로드하고 실행을 해줍니다.

Express + mysql 게시판 - Express + mysql gesipan
Node.js 설치 1

1. Next를 눌러줍니다.

Express + mysql 게시판 - Express + mysql gesipan
Node.js 설치 2

2. I accept the terms in the ~~~ 체크 후 Next를 눌러줍니다.

Express + mysql 게시판 - Express + mysql gesipan
Node.js 설치 3

3. 설치 경로 확인 후 Next를 눌러줍니다.

Express + mysql 게시판 - Express + mysql gesipan
Node.js 설치 4

4. 무엇을 설치하고 무슨짓을 하는 지봅니다.

자세히 보시면 Add to PATH라고 환경변수를 설정해주는 부분이 있습니다.

환경변수 설정 이유에 대해서 알지 못한다면 파악하고 넘어갑시다.

Express + mysql 게시판 - Express + mysql gesipan
Node.js 설치 5

5. 추가적인 개발 툴을 더 설치한다는 내용인거 같은데 무슨내용인지 정확히 모르겠습니다.

간단한 개발이기에 따로 체크는 안했습니다. (아직까지 체크를 안했다고해서 큰 문제는 없었네요..)
사실 추가 안하고 설치해서 에러가 난다면 그것을 고치는 과정은 그것대로 공부라고 생각합니다.

어째뜬 마지막 install버튼이 나오면 install 후 완료 해주시면 됩니다.

인스톨이 완료되면 cmd창을 켜줍니다. ( 윈도우키 + r cmd입력후 실행)

Express + mysql 게시판 - Express + mysql gesipan
Node.js 버전확인

6. 명령창에 node -v후 실행합니다.

버전이 나온다면 Node.js가 설치된 것입니다.