[월:] 2024년 12월

Categories
프로그래밍

Vue 3, Options API vs Composition API

Options API 는 기존 Vue.js의 전통적인 방식으로

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

이런 식으로 data, methods, computed, watch 등의 정해진 구조 안에 작성하는 방식이다.

하지만 Vue 3 부터는 Composition API 라고 해서

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <!-- 이 버튼이 작동하도록 만들어 봅시다 -->
  <button>숫자 세기: {{ count }}</button>
</template>

이런 식으로 함수를 import 하고 JavaScript 와 비슷하게 작성된다.

Composition API 의 장점은 정해진 틀 안에 작성하는게 아니라 유연하고 상태와 로직이 분리되지 않고 한 덩어리로 있어서 보기 편하다.

Vue 3 에서도 Options API 를 계속해서 지원하지만 본인은 Composition API 를 주로 사용 할 예정이다.

Categories
프로그래밍

Docker & GitLab 설치

로컬 컴퓨터에서 GitLab을 사용하고 싶은데 설치를 하려면 docker 가 필요했다.

윈도우 WSL Ubuntu 환경에서

sudo apt update
sudo apt install apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt update
sudo apt install docker-ce
sudo docker --version

이렇게 하면 docker 가 설치된다.

이후에

docker pull gitlab/gitlab-ce:latest

gitlab 최신 버전을 받아주고

docker run --detach \
  --hostname your-gitlab-domain.com \
  --publish 443:443 --publish 80:80 --publish 22:22 \
  --name gitlab \
  --restart always \
  --volume /docker/gitlab/config:/etc/gitlab \
  --volume /docker/gitlab/logs:/var/log/gitlab \
  --volume /docker/gitlab/data:/var/opt/gitlab \
  gitlab/gitlab-ce:latest

이렇게 입력을 하면 실행이 된다.

잘 실행이 되어서 작업하던 개인 프로젝트를 모두 올려놨다.

Categories
프로그래밍

비밀번호 암호화 및 dotenv 사용

기존 소스에서는 회원가입을 할 때

프론트엔드에서 salt 생성 및 해시화를 한 이후 백엔드로 넘겨주었는데

이렇게 하면 프론트엔드에서 탈취를 할 가능성이 있다고 한다.

그래서

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
app.post(‘/register’, (req, res) => {
    const { email, username, password } = req.body;
 
    const salt = crypto.randomBytes(16).toString(‘hex’);
    const hash = crypto.createHash(‘sha256’).update(password + salt).digest(‘hex’);
 
    const query = ‘INSERT INTO users (email, username, password, salt) VALUES (?, ?, ?, ?)’;
 
    db.query(query, [email, username, hash, salt], (err, results) => {
        console.log(results);
        if (err) {
            return res.status(500).json({ message: ‘회원가입 실패’ });
        }
        return res.status(201).json({ message: ‘회원가입 성공’ });
    });
});
 
cs

백엔드에서 처리를 하게 바꾸었고

하드코딩 되어있던 MySQL 등 환경 변수들을 dotenv 를 이용하여

.env 파일로 관리하게 바꾸었다.

Categories
미분류

SHA-1 & SHA-256

SHA 이란?

Secure Hash Algorithm 의 줄인 말

1. SHA-1

160비트(20바이트)

충돌 공격 매우 희박한 확률로 다른 값이 같은 해시를 가질 수 있다.

안전하지 않아서 현재 SHA-256으로 대부분 전환되었다.

    2. SHA-256

    256비트(32바이트)

    SHA-2의 한 종류

    Categories
    미분류

    Visual Studio Code 에서 npm 실행이 안될 때

    npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npm.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
위치 줄:1 문자:1
+ npm
+ ~~~
    + CategoryInfo          : 보안 오류: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

    이런 오류가 뜨면 VS Code를 관리자 권한으로 실행해서

    Set-ExecutionPolicy RemoteSigned

    입력한다.