취미로 코딩하기

아래 코드가 들어간 프로그램을 컴파일 하면 에러가 발생한다.

module controller

import vweb
import x.json2

pub struct Mattabu {
    vweb.Context
}

@["/request"; post]
fn (mut app Mattabu) request() vweb.Result {
    println(app.req.data)
    raw_json := json2.raw_decode(app.req.data)!

    json := raw_json.as_map()
    println(json)
    return app.text('Request')
}

해당 에러는 다음과 같다.

이를 해결하기 위해서 아래 코드를

raw_json := json2.raw_decode(app.req.data)!

이렇게 바꾸어주었다.

raw_json := json2.raw_decode(app.req.data) or { 
    return app.text('error: ${err}')
}

* 참고 : https://github.com/v-analyzer/v-analyzer

1. Powershell 에서 다음을 실행한다.

curl -o install.vsh https://raw.githubusercontent.com/v-analyzer/v-analyzer/main/install.vsh; v run install.vsh; del install.vsh

2. v-analyzer extention 을 설치한 후에 `V-analyzer: Server Path` 항목에 v-analyzer 가 설치된 위치를 적어준다.

C:\Users\아이디\.config\v-analyzer\bin\v-analyzer

브라우저에서 https://windows.php.net/download/ 에 접속합니다. 오른쪽에서 원하는 버전의 ZIP 파일을 다운로드 받습니다. 그리고, 화면 왼쪽 VC15 & VS16 항목에서 "Visual C++ Redistributable for Visual Studio 2015-2019" VC_redist.x64.exe 도 다운로드받아서 설치합니다. 이미 설치되어 있으면 설치하지 않아도 됩니다. 그리고, PHP ZIP 파일을 적당한 곳에 풀어서 폴더명도 정해봅니다. 저는 D:\bin\php-8.1.6 에 풀었습니다.

환경설정을 위해서 설정 > 정보 > 고급 시스템 설정 을 선택합니다.

시스템 속성 창에서 "환경 변수..." 버튼을 클릭한다.

환경 변수 창에서 Path를 찾아서 "편집..." 버튼을 클릭합니다.

"새로 만들기" 버튼을 클릭하고, PHP가 설치된 폴더를 지정하고, "확인" 버튼을 클릭해서 마무리한다.

커맨드 창을 열어서 php -v 를 실행해서 다음처럼 나오면 성공이다.

php.ini 파일에서 필요한 extension 이 있다면, 주석을 풀어주자.

마지막으로, https://getcomposer.org/Composer-Setup.exe 를 다운로드 받아서, Composer 까지 설치해 놓자.

전체목차 : https://gauryan.tistory.com/214

이제, 본격적으로 시작해봅시다. 우선, https://code.visualstudio.com/ 에서 Visual Studio Code를 다운로드하여 설치합니다. 에디터는 자신이 원하는 다른 것(IntelliJ IDEA, Atom, Eclipse 등)으로 하셔도 괜찮습니다.

Vue.js 3에 관련된 확장프로그램은 아래와 같이 설치하였습니다.

https://nodejs.org/ 에서 Node.js를 다운로드하여 설치한다. 

node.js 설치를 마치고 다음처럼 설치가 잘 되었는지 확인해보자~! 저는 LTS버전을 설치했는데, 아무거나 설치하셔도 됩니다.

Vue 3 프로젝트를 생성합니다. > npm init vue@latest

Vue Router, Pinia, ESLint 등을 선택하였다.

이제, 웹브라우저에 http://localhost:5173 으로 접속하면, 아래와 같은 화면이 나오게 됩니다. 그러면 일단 성공~!!!

프로젝트 폴더에서 VS Code를 실행해봅니다. 아래처럼...

프로젝트의 디렉토리 구조를 유심히 봐주시고, 어떤 파일들이 있는지도 눈여겨 봅시다. 각 디렉토리와 파일에 대해서는 다음 글에서 설명하도록 하겠습니다.

ESLint 설정을 위해서, View 메뉴의 Command Palette 를 선택(단축키: ctrl+shift+p)하고, Open User Settings (JSON)을 입력한다. 그러면, settings.json 파일이 열리며, 아래 내용을 추가해준다.

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
      "source.fixAll": true
  },
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
  "javascript.format.placeOpenBraceOnNewLineForFunctions": false
}

.eslintrc.js 파일에는 rules 안에 다음을 추가해준다. 개인적으로는 세미콜론을 사용하는 것을 선호하며, Camel Case 를 사용하기도 하지만, Snake Case 도 함께 사용한다.

rules: {
..
  // 'semi': [2, 'always'],
  'semi': 'off',
  'camelcase': 'off',
  "prettier/prettier": [
    "error",
    {
      "endOfLine": "auto",
      "printWidth": 160,
    }
  ],
..
}

File > Preferences > Configure User Snippets > New Global Snippets File... 메뉴를 선택하고, vue3 를 입력한다. 그리고, vue3.code-snippets 파일에 다음을 입력해준다. 이렇게 하면, vue 파일을 생성하고, 에디터에서 vue3 라고 입력하면 미리 입력된 코드조각을 쉽게 넣을 수 있다. 자신의 코드스타일에 맞추어서 바꾸는 것도 괜찮을 듯 한다.

	"Initialize Vue3": {
		"scope": "vue",
		"prefix": "vue3",
		"body": [
			"<style scoped>",
			"</style>",
			"",
			"<template>",
			"</template>",
			"",
			"<script setup>",
			"// import { ref } from 'vue'",
			"</script>",
			""
		],
		"description": "Initialize Vue3"
	}

src/components/HelloWorld.vue 파일을 삭제하고, src/assets/logo.png 파일도 삭제합니다. 그리고, src/App.vue 파일을 아래처럼 수정해주세요. ~.vue 파일은 뷰컴포넌트를 의미합니다. 뷰컴포넌트는 script, template, style 로 구성됩니다.

<style scoped>
h1 {
  text-align: center;
}
</style>

<template>
  <h1>Hello, World~!</h1>
</template>

<script setup></script>

이렇게 저장하고, 웹브라우저를 보면 아래처럼 Hello, World~! 출력될 거에요. 앞으로 우리는 App.vue 에서 대부분의 작업을 할 예정입니다.

Bootstrap 도 설치해봅시다.

> npm i bootstrap
> npm i @popperjs/core

Bootstrap 을 적용하려면, main.js 파일을 열어서 아래 내용을 추가한다.

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap.js";

또는, App.vue 파일에서 <style>바로 아랫줄에 bootstrap.css파일을 임포트하고, <script> 아랫줄에는 bootstrap.js 파일을 임포트해준다. 아무래도, main.js 파일에 적용하는 것이 더 간편할 듯 하다.

<script setup>
import "bootstrap/dist/js/bootstrap.js";
...


<style scoped>
@import "bootstrap/dist/css/bootstrap.css";
...

그리고, 다시 src/App.vue 파일을 아래처럼 수정해본다.

<script setup></script>

<template>
<div>
  <h1>Hello, World~!</h1>
  <button class="btn btn-primary">부트스트랩 버튼</button>
</div>
</template>

<style scoped>
div {
  text-align: center;
}
</style>

이제, 진짜 마지막 화면입니다. 부트스트랩 디자인 버튼을 하나 만들었는데, 잘 나오네요.

마지막으로, 크롬 확장프로그램을 설치할거에요. chrome 웹 스토어에서 vue를 검색하여, Vue.js devtools를 설치합니다. 크롬에서 Vue 디버깅할때 아주 유용하다고 합니다.