'프로그램/vue' 카테고리의 글 목록

728x90

프로젝트 해보니 심플하게 나와서 비슷한게 어떤 것이 있는지 잠시 생각해 봤습니다.

심심풀이 여담

스벨렛이 나왔을때 이걸 주로하는 개발자 인터뷰를 본적이 있었습니다. 마치 이천년대 초 초기 웹서비스 만들던 때와 유사한 코드를 보면서 과연 이게 장점이 될수 있을까 ? 왜 장점이 되지 라는 생각을 했습니다.

테스트 코드에 대해서 빠르게 해볼 수 있다는 장점을 본다면 상용서비스를 기획해서 만드는 사람입장에서 약간 의아할 수 있다 생각들었습니다.

또 react를 보고 vue를 해본사람이 하기 쉽다는 말을 들었을때 과연 vue가 뭐길래...

그리고 파이썬으로 스크랩핑과 웹서비스 장고를 만들어 보고 ... 이러저러한 것을들 해본적이 있었는데, 때 마침 vue가 궁금해져서 pinia 상태관리를 가지고 게시판을 한번 만들어 보고 싶었습니다.

react를 해본 사람이 vue를 해보면 더 쉽다. 그리고 jsp와 기타 axios등 부가적인 내용들을 기본적으로 알고 있는 사람이라면 더욱 쉽다.

그럼 이걸로 뭘 할 수 있지? 샘플 코드 짜보는 것을 쉽겠다 라는 생각이 들었습니다.

그래서 해본건데 확실히 요즘 개발하기 쉬운 환경이 되어있네요.

자 그럼 간단하게 정리를 해보면 vue 는 한 페이지에 html 과 파라메터 입력이 같이 되는 것이다 라는 한줄 소감을 추가하고 싶네요.

세부 문법이나 표현의 미려함을 담기에는 조금더 사용해 봐야 겠지만 특성을 경험하기에는 이번 예제도 좋다고 생각들어 다시 정리해 봅니다.

1. 프로젝트 구조

2025.04.24 - [프로그램/vue] - vue3 pina 크린아키텍쳐 적용 샘플 플젝

vue3 pina 크린아키텍쳐 적용 샘플 플젝

react 처음 사용할때 뷰와 유사하다는 말을 많이 들었지만 막상 프로그램을 만들어본적이 없어 샘플 프로젝트를 진행해 보았다. 기본폴더구조더보기src/├── assets/ # 이미지, 폰트, CSS 등 정적

jsi0.tistory.com

2. vue에 라우터 적용

2025.04.29 - [프로그램/vue] - vue router

vue router

단계별로 글을 적어야 나중에 분리해서 다른 사람에게 알려주기 쉬울것 같아서 중간 정리를 했습니다. 가장 쉽게 vue router 이해하기더보기/src/main.js ( use(router) 사용 ) ... import router from './router' cre

jsi0.tistory.com

3. 목업 게시판 vue

vue_moc_board_files.zip

0.20MB

이글을 보러 오신분들이라면 간단하게 돌려보면서 소스를 따라가는 것이 좋을 것이라 생각해서 전체를 공유합니다.

4. api 연동 vue

vue_api_board_files.zip

0.20MB

/src/router/index.js       # 라우팅 정보
/src/stores/boardStore.js  # 상태와 axios 를 통한 api 호출부
/src/views/boards/BoardDetail.vue  # 게시글 읽기
/src/views/boards/BoardForm.vue    # 쓰기, 수정하기
/src/views/boards/BoardList.vue    # 목록
/src/App.vue               # 라우터 뷰등록
/src/axios.js              # api 경로
/main.js                   # pinia, router 사용

어려워야 뭔가 더 열심히 파헤쳐 볼 것 같은데 쉽게 되어 보시는 분에게 도움이 될 만한 설명이 필요한지 모르겠네요.

5. 파이썬 api

python_flask_sqlite_board_files.zip

0.00MB

파이썬으로 sqlite flask를 이용한 api 구현 했습니다.

파이썬 v3이상에서는 sqlite가 기본 지원하고 있고 flask가 가벼운 웹서비스가 가능하기 때문에 선택해서 만들었습니다.

from flask import Flask, request, jsonify

from flask_cors import CORS

from flask_sqlalchemy import SQLAlchemy

import os

import sqlite3

app = Flask(__name__)

CORS(app, origins=["http://localhost:8080"])

# SQLite DB 설정

BASE_DIR = os.path.abspath(os.path.dirname(__file__))

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + os.path.join(BASE_DIR, 'board.db')

app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)

# 게시글 모델

class Post(db.Model):

id = db.Column(db.Integer, primary_key=True)

title = db.Column(db.String(100), nullable=False)

content = db.Column(db.Text, nullable=False)

def to_dict(self):

return {

'id': self.id,

'title': self.title,

'content': self.content

}

# DB 초기화

appHasRunBefore:bool = False

@app.before_request

#@ app.before_first_request

def create_tables():

db.create_all()

appHasRunBefore = True

# 게시글 목록 조회

@app.route('/api/posts', methods=['GET'])

def get_posts():

print('/api/posts *** get_posts()')

posts = Post.query.all()

return jsonify([p.to_dict() for p in posts])

# 게시글 단건 조회

@app.route('/api/post/<int:post_id>', methods=['GET'])

def get_post(post_id):

print('/api/posts/post_id *** get_post()')

post = Post.query.get_or_404(post_id)

return jsonify(post.to_dict())

# 게시글 등록

@app.route('/api/posts', methods=['POST'])

def create_post():

print('/api/posts *** create_post()')

data = request.get_json()

post = Post(title=data['title'], content=data['content'])

db.session.add(post)

db.session.commit()

return jsonify(post.to_dict()), 201

# 게시글 수정

@app.route('/api/posts/<int:post_id>', methods=['PUT'])

def update_post(post_id):

print('/api/posts/post_id **PUT* update_post()')

post = Post.query.get_or_404(post_id)

data = request.get_json()

post.title = data['title']

post.content = data['content']

db.session.commit()

return jsonify(post.to_dict())

# 게시글 삭제 (선택사항)

@app.route('/api/posts/<int:post_id>', methods=['DELETE'])

def delete_post(post_id):

post = Post.query.get_or_404(post_id)

db.session.delete(post)

db.session.commit()

return jsonify({'message': 'Deleted'})

# 헬스 체크크

@app.route('/', methods=['GET'])

def get_helth():

return jsonify({'message': 'server live'})

if __name__ == '__main__':

app.run(debug=True)

※ sqlite 참고 : DB사용은 기본은 비슷하니 참고하시면 될 것 같습니다.

※ 엑셀파일 비교 간단 개념이해

: 물리적 DB 파일 == 엑셀 파일, 테이블 == 엑셀.시트, 컬럼 == 엑셀.시트.열, 데이터1row = 엑셀.시트.행

※ DB 사용 방법 이해

: 물리적 파일 연결 -> 커서 -> 테이블 -> CRUD -> COMMIT -> 닫기

2025.04.26 - [프로그램/python&&AI] - python에서 SQLite

python에서 SQLite

DataBase에 아직 개념이 없는 사람에게 쉽게 경험해 볼수 있는 것을 찾다가 Python에서 sqlite3 라이브러리를 기본 제공해서 바로 사용할 수 있다고 해서 정리해 보았다. 예제1 일반예제더보기import sqli

jsi0.tistory.com

728x90

'프로그램 > vue' 카테고리의 다른 글

vue router (0)	2025.04.29
vue3 pina 크린아키텍쳐 적용 샘플 플젝 (0)	2025.04.24

728x90

단계별로 글을 적어야 나중에 분리해서 다른 사람에게 알려주기 쉬울것 같아서 중간 정리를 했습니다.

가장 쉽게 vue router 이해하기

/src/main.js ( use(router) 사용 )

...

import router from './router'

createApp(App).use(router).mount('#app')

...

/src/App.vue

<router-view/>

</div>

</template>

export default {

name: 'App',

}

</script>

/src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

import BoardList from '@/views/boards/BoardList.vue'

import BoardDetail from '@/views/boards/BoardDetail.vue'

import BoardForm from '@/views/boards/BoardForm.vue'

const routes = [

{ path: '/', redirect: '/boards' },

{ path: '/boards', name: 'BoardList', component: BoardList },

{ path: '/boards/:id', name: 'BoardDetail', component: BoardDetail },

{ path: '/write', name: 'BoardCreate', component: BoardForm },

{ path: '/edit/:id', name: 'BoardEdit', component: BoardForm }

]

const router = createRouter({

history: createWebHistory(),

routes,

})

export default router;

각화면 소스경로 '@' 사용 설정

/vue.config.js

const path = require('path')

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

transpileDependencies: true,

configureWebpack:{

resolve:{

alias:{

'@':path.resolve(__dirname,'src')

}

})

vue 를 처음 사용해본다면 문법적인것은 받아들이면 될 것 같고, react를 해본 사람은 어려운 내용은 없어 보이네요.

728x90

'프로그램 > vue' 카테고리의 다른 글

vue python sqlite 게시판 (0)	2025.04.30
vue3 pina 크린아키텍쳐 적용 샘플 플젝 (0)	2025.04.24

728x90

react 처음 사용할때 뷰와 유사하다는 말을 많이 들었지만 막상 프로그램을 만들어본적이 없어 샘플 프로젝트를 진행해 보았다.

기본폴더구조

src/
├── assets/             # 이미지, 폰트, CSS 등 정적 파일
├── components/         # 재사용 가능한 UI 컴포넌트
├── views/              # 페이지 단위 컴포넌트 (라우팅 대상)
├── router/             # Vue Router 설정
├── store/              # 상태관리 (Vuex or Pinia)
├── usecases/           # 유스케이스: 기능 단위의 비즈니스 로직
├── domain/             # 엔터티와 인터페이스 정의 (도메인 모델)
│   └── models/         # 도메인 모델
├── infrastructure/     # 외부 API, DB, 로컬스토리지 등 의존성 구현
├── services/           # 외부 서비스와의 통신, axios 등
├── composables/        # Composition API용 훅 (Vue 3 기준)
├── utils/              # 공통 유틸 함수
├── App.vue             # 루트 컴포넌트
└── main.js             # 앱 진입점

프로젝트 생성

리액트를 이미 사용중이지만 버전을 최신화도 할겸 vue 프로그램 관련된것을 설치하면서 npm도 버전업 했다. (2025.4.24)

> npm install -g @vue/cli

...

> npm install -g npm@11.3.0

> vue create my-vue-app

[Vue 3] babel, eslint

pnpm

initializing

> cd my-vue-app

> pnpm run serve

[...기본 화면이 나옴 http://localhost:8080]

기본 화면 연결 페이지

1. vue-cli documentation : vue 에 대한 설명

2. 플러그인 : 리액트와 비슷한 명칭이 나오네요

babel : 최신 자바스크립트 문법(ES6+, ES2020 등) 을 오래된 부라우저에서도 동작하도록 변환

eslint : 자바스크립트 코드 검사기

3. 주요 링크

Core Docs

Forum

Community Chat

Twitter

News

4. Ecosystem

vue-router

vuex : 상태관리 플러그인 ( 참고로 예제 프로젝트는 pina를 사용 )

vue-devtools

vue-loader

awesome-vue

로그인 구현

src/
├── domain/
│ └── interfaces/UserRepository.js
├── usecases/LoginUser.js
├── services/UserApiService.js
├── store/member.js
├── composables/useAuth.js
├── views/LoginView.vue

728x90

'프로그램 > vue' 카테고리의 다른 글

vue python sqlite 게시판 (0)	2025.04.30
vue router (0)	2025.04.29

si0