bright jazz music

1. 개선 후 화면 소개 변경된 파일 확인 2. 개선 전 작업 DB에 값 넣어놓기 필요한 라이브러리 설치 - base.css 삭제. 방해됨 - scss 설치. (노드 서버 실행중에 설치했다면 재시작 해야 적용될 수 있음) - normalize.css 설치 npm install normalize.css package.json 확인 3. 파일 생성 및 구조 기본, 라우터 및 설정 파일 // index.ts import { createRouter, createWebHistory } from "vue-router"; import HomeView from "../views/HomeView.vue"; import WriteView from "../views/WriteView.vue" import ReadView f..

1. 수정화면을 표현할 뷰 컴포넌트 파일 만들기(EditView.vue) 2. 라우터에 등록 // index.ts import { createRouter, createWebHistory } from "vue-router"; import HomeView from "../views/HomeView.vue"; import WriteView from "../views/WriteView.vue" import ReadView from "../views/ReadView.vue"; import EditView from "../views/EditView.vue"; //경로를 적어줌으로써 import 필요 const router = createRouter({ history: createWebHistory(import.me..

1. 글 내용 표시할 화면 파일 만들기 (ReadView.vue) 제목 내용 2. 라우터에 해당 컴포넌트 등록 (index.ts) // index.ts import { createRouter, createWebHistory } from "vue-router"; import HomeView from "../views/HomeView.vue"; import WriteView from "../views/WriteView.vue" import ReadView from "../views/ReadView.vue"; //경로를 적어줌으로써 import 필요 const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes:..

홈 화면에 리스트 보이기 1. 테스트 {{post.title}} {{post.content}} 2. 서버를 통해 DB의 값 가져오기 axios를 사용한다. {{post.title}} {{post.content}} 3. 글 작성 후 홈화면으로 이동하도록 수정&&홈화면으로 이동한 뒤 뒤로가기 못하게 수정 router 사용 글 작성 완료 뒤로 가기를 한 번 눌렀을 때는 돌아가지 않는다. 두 번 이상 누르니까 돌아간다.

지난 포스팅에선 아래와 같이 작성하여 서버 측에서 CORS문제를 해결하였다. //WebConfig.java package com.endofma.blog.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebConfig implements WebMvcConfigurer { //서버에서 CORS문제를 해결하는 방법 //front..

1. Vue component의 대략적인 사용법알아보기 Home 글 작성 안녕하세요 {{count}} 버튼을 눌러주세요 부트스트랩 또는 element ui라는 CSS 프레임워크를 사용하면 좀 더 예쁘게 꾸밀 수 있다. 여기까지가 기본적인 내용이었다. 이제 WriteView.vue 파일의 태그 내부의 내용을 모두 지운다. 2. 본격 글 작성 완료 element plus 설치 https://element-plus.org/en-US/guide/installation.html#hello-world Installation | Element Plus element-plus.org 뷰 프로젝트가 위치한 디렉토리로 이동 $ npm install element-plus --save 이제 element plus에 대한 컴..

1. 필요 없는 디렉토리 및 파일 삭제 AboutView.vue icons 디렉토리 HelloWorld.vue TheWelcome.vue Welcomeitem.vue 위 파일 및 디렉토리 삭제 2. 불필요한 코드 삭제 및 주석처리 router/index.ts 에서 about 주석처리: about을 사용하지 않을 것이므로 router에서 주석처리한다. 삭제해도 무방하다. 이외에도 AboutView.vue를 사용하는 다른 파일들에서 해당 부분을 주석처리 및 삭제하였다. // index.ts import { createRouter, createWebHistory } from "vue-router"; import HomeView from "../views/HomeView.vue"; const router = c..

참고: node.js가 설치돼 있어야 한다. 나는 설치돼 있어서 생략했다. 설치 시 아래 블로그의 포스팅 참고 https://codest.tistory.com/15 [Error] Node.js 설치 / npm install / bash: npm: command not found 에러 안녕하세요! 이번 포스팅에서는 Node.js를 설치하고 로컬 환경에서 npm install 명령어를 사용할 수 있도록 환경변수 편집까지 해보겠습니다. 우선 Node.js를 설치해줍니다. https://nodejs.org/ko/ Node.js Node. codest.tistory.com 노드 설치 - 환경변수 설정까지 해주었다. "'vite' is not recognized as an internal or external co..

11. git merge --no-ff --log : fast forward를 사용하지 않고 merge log를 포함해서 현재 사용중인 main 브랜치에 mybranch를 머지하기. git merge --no-ff --log mybranch 입력하면 아래와 같이 vi로 들어간다. 커밋 메시지를 확인하고 q 또는 wq를 입력하여 나온다. 이를 소스트리와 같은 툴에서 확인하면 차이를 확인할 수 있다. 이전 포스팅의 9번 항목에서 merge했을 때에는 브랜치의 분기가 보이지 않았다. 그러나 이번의 경우는 브랜치가 분기 됐다가 다시 합쳐지는 모습을 확인할 수 있다. 그런 다음 git push해서 원격 리포지토리로 커밋 사항을 push한다. 12. 충돌이 발생 경우 1 1. testbranch라는 브랜치를 만들었..

깃을 쓰는 경우 처음부터 CLI 환경에서의 사용을 추천 소스트리와 같은 도구를 사용하는 경우 문제가 생겼을 때의 원인을 파악하기 어려운 경우가 존재. git status git log git push git push -u origin 푸시할브랜치명 git add 파일명 git add . git checkout git checkout -b 새로운브랜치명 git branch -D 삭제할브랜치명 git commit git commit -m "커밋메시지" git commit -a -m "커밋메시지" git merge git merge --no-ff --log 머지할브랜치명 git rebase 리베이스할브랜치명 git rebase --continue git rebase --abort git reset git re..