취미로 코딩하기

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

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

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

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

yarn도 설치해봅시다. npm 보다 설치속도가 더 빠르다고 하네요. 전역(-g 옵션)으로 설치하는 패키지는 npm을 사용하고, 그 외에는 yarn을 설치하는 것이 좋다고 합니다.

Svelte 프로젝트 생성합니다. : > npx degit sveltejs/template svelte-tutorial

이제, 웹브라우저가 자동으로 실행이 되며, http://localhost:5000 으로 접속되어, 아래와 같은 화면이 나오게 됩니다. 그러면 일단 성공~!!!

Svelte 코드 컨벤션을 지키기 위해 Prettier를 적용해보고자 합니다. prettier-plugin-svelte를 디펜던시로 받아줍니다.

npm i --save-dev prettier-plugin-svelte prettier
# or yarn add prettier-plugin-svelte prettier -D

Prettier에도 기본 설정이 있는데, 프로젝트의 루트 디렉토리에 .prettierrc 파일을 생성해서 설정을 변경할 수 있습니다.

{
  "svelteSortOrder": "scripts-styles-markup",
  "svelteStrictMode": true,
  "svelteBracketNewLine": true,
  "svelteAllowShorthand": false
  // ... 기타 커스텀 옵션
}

라우팅 설정을 위해서 svelte-routing 을 설치합니다.

npm install --save svelte-routing

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

CSS Framework로는 Svelte Material UI 를 사용할 것입니다. 이 녀석은 다른 프레임워크와는 다르게 컴포넌트마나 매번 별도의 설치를 해야 합니다. 그래서, 튜토리얼을 진행하면서 설치를 그때마다 하겠습니다.

이제, 코드를 살짝 수정해볼까요? App.svelte 파일을 열어서, 다음처럼 바꾸어봅니다. ~.svelte 파일을 컴포넌트라고 합니다. 컴포넌트는 script, style, html 로 구분이 되고, 순서는 상관이 없습니다. 일반적으로 HTML파일도 거의 같은 구조로 되어 있고, Vue의 컴포넌트 파일도 거의 같은 모양입니다. html 코드 내에서 중괄호{} 안에 변수를 넣으면, 변수의 내용을 출력합니다. 백엔드 프레임워크의 일반적인 템플릿(뷰)의 형식과 거의 비슷합니다. Vue도 역시 비슷한 방법을 사용하고 있습니다.

<script>
	let name = "세상아";
</script>

<main>
	<h1>안녕, {name}!</h1>
</main>

<style>
	h1 {
		color: #2ab11e;
		font-size: 4em;
		font-weight: 100;
	}
</style>

결과는 아래처럼 나오겠지요~!! 여기까지가 Svelte를 위한 개발환경 구성 및 프로젝트 생성, 헬로월드 만들어보기 였습니다. 기존의 다른 프레임워크들보다는 상당히 단순하게 구성이 되어 있어서 공부하는데 어렵지 않을거에요.

.eslintrc.js 파일의 rules 항목에 semi를 추가해준다.

  rules: {
  ...
    'semi': [2, 'always'],
    // or
    // 'semi': 'off',
  ...
  }

이렇게 설정하면, 미리 만들어진 다른 파일에서 세미콜론이 추가되어 있지 않은 경우, 에러를 낼 것이다. 이 에러를 무시하려면 해당 파일에 아래 주석을 넣어주면 된다.

/* eslint-disable */
// 위의 주석은 파일 전체에 에러를 무시하게 된다.

// eslint-disable-next-line
// 위의 주석은 다음 줄의 에러만 무시한다.

[참고]

• https://eslint.org/docs/rules/semi
• https://blog.naver.com/1ilsang/221337351543
• https://develoger.kr/frontend/eslint-기본적인-사용법

본 튜토리얼에서는 대부분의 사이트에 기본적으로 필요한 기능을 익히는데 목적이 있습니다. 예제에서는 관리자로 로그인/로그아웃하고, 관리자를 등록/수정/삭제 등을 할 수 있는 기본적인 기능을 포함하는 예제를 만들어봅니다. 그리고, 비밀번호의 단방향 암호화(SHA-256)를 해보는 기능도 포함됩니다. DB 연결시 GORM을 사용하지만, 제공되는 Model 메소드(ORM)를 사용하지 않고, 직접 쿼리(스토어드 프로시저)를 사용하여 처리할 것입니다.

또한, 튜토리얼의 소스는 https://github.com/gauryan/fiber-tutorial 에서 확인 가능합니다.

1. 시작 (설치 및 첫페이지 만들어보기)
2. MySQL 설치와 연결
3. 관리자 목록 보여주기
4. 관리자 추가하기
5. 관리자 비밀번호 변경하기
6. 관리자 수정하기
7. 관리자 삭제하기
8. 비밀번호 단방향암호화(SHA256) 하기
9. 로그인/로그아웃 처리하기

여기에서는 비밀번호의 단방향 암호화를 구현해보도록 하겠습니다. SHA256을 적용하겠습니다. Fiber에서는 아무런 작업을 하지 않고, DB(MySQL)에서만 작업을 하겠습니다.

1. 일단 DBMS에 접속해봅니다.

$ mysql -u xyz -pxyz123 xyz
mysql: [Warning] Using a password on the command line interface can be insecure.
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A
 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 282
Server version: 8.0.26-0ubuntu0.20.04.2 (Ubuntu)
 
Copyright (c) 2000, 2021, Oracle and/or its affiliates.
 
Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.
 
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
 
mysql>

2. Admins 테이블에 있는 모든 항목을 삭제합니다.

mysql> CALL listAdmins();
+-----+---------+-----------+-------+
| sno | userid  | password  | nick  |
+-----+---------+-----------+-------+
|   1 | testid1 | passwd101 | nick1 |
|   2 | testid2 | passwd2   | nick2 |
|   3 | testid3 | passwd3   | nick3 |
+-----+---------+-----------+-------+
3 ROWS IN SET (0.00 sec)
 
Query OK, 0 ROWS affected (0.00 sec)
 
mysql> DELETE FROM admins;
Query OK, 3 ROWS affected (0.01 sec)
 
mysql> CALL listAdmins();
Empty SET (0.00 sec)
 
Query OK, 0 ROWS affected (0.00 sec)

3. 저장프로시저(insertAdmin, updateAdminPassword)를 삭제합니다.

mysql> DROP PROCEDURE insertAdmin;
Query OK, 0 ROWS affected (0.00 sec)
 
mysql> DROP PROCEDURE updateAdminPassword;
Query OK, 0 ROWS affected (0.01 sec)

4. 저장프로시저(insertAdmin, updateAdminPassword)에 SHA256을 적용하여 다시 생성합니다.

DELIMITER $$
CREATE PROCEDURE insertAdmin
  (i_userid VARCHAR(255),
   i_password VARCHAR(255),
   i_nick VARCHAR(255))
BEGIN
  INSERT INTO admins(userid, password, nick) VALUES(i_userid, SHA2(i_password, 256), i_nick);
END $$
DELIMITER ;

DELIMITER $$
CREATE PROCEDURE updateAdminPassword
    (i_sno INT,
     i_password VARCHAR(255))
BEGIN
    UPDATE admins SET password = SHA2(i_password, 256) WHERE sno = i_sno;
END $$
DELIMITER ;

5. 관리자 3명을 추가해봅니다.

mysql> CALL insertAdmin('userid1', 'passwd1', 'nick1');
Query OK, 1 row affected (0.00 sec)

mysql> CALL insertAdmin('userid2', 'passwd2', 'nick2');
Query OK, 1 row affected (0.01 sec)

mysql> CALL insertAdmin('userid3', 'passwd3', 'nick3');
Query OK, 1 row affected (0.00 sec)

6. 관리자 목록을 조회해보면… 비밀번호가 제대로 암호화되었다는 것을 확인할 수 있습니다.

mysql> CALL listAdmins();
+-----+---------+------------------------------------------------------------------+-------+
| sno | userid  | password                                                         | nick  |
+-----+---------+------------------------------------------------------------------+-------+
|  10 | userid1 | 3b1d7e9a7c37141350fb473fa099b8b18030cde1909f363e3758e52d4ea1a7b4 | nick1 |
|  11 | userid2 | 5a7d362627a891441ee34012b087915f03a6958c1062fe4cf01de24abecee053 | nick2 |
|  12 | userid3 | 44f1471b4598a6f5577221f7caf011743343b8b3b29c9675738cd225055563b7 | nick3 |
+-----+---------+------------------------------------------------------------------+-------+
3 rows in set (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

mysql> exit