목차 - https://okane-on-cliff.tistory.com/227 vue-cli의 디렉터리 구조는 다음과 같다. 먼저 App.vue부터 작성을 시작해 본다. App.vue는 라우터 뷰를 통해 전환되는 컴포넌트들만 출력한다. 메인 페이지 컴포넌트를 작성한다. MainView.vue의 내용은 다음과 같다. 메인페이지 전송 {{ article.num }} {{ article.title }} 로컬호스트로도 연결해보자 여기서 router-link 의 속성 :to에는 " " 안에 백틱을 적어서 백틱안에 ${ }이 String이 되는 효과를 누려보자 router-link는 router/index.js에서 mapping된 주소로 컴포넌트를 꺼내준다. router/index.js의 내용은 다음과 같다. im..

목차 - https://okane-on-cliff.tistory.com/227 vue-cli 환경을 구축하기 위해 npm을 설치한다. npm은 인터넷에서 적당히 검색하면 컴퓨터에 잘 설치 할 수 있다. 이제 cmd로 'npm 명령어'를 쳐서 npm을 실행할 수 있다. npm install vue npm install -g @vue/cli 를 입력하여 vue와 vue/cli를 설치한다. 이제 'vue 명령어'를 사용하여 vue를 실행할 수 있다. 프로젝트를 생성하고 싶은 경로로 cd 명령어를 통해 이동한 후 vue create gogo 를 입력하여 gogo라는 이름의 프로젝트를 만든다. preset은 직접 하는 것으로 선택 vuex는 이번 프로젝트에선 사용하지 않았다. 2버전을 배웠으니 2버전 선택했다. ..

목차 - https://okane-on-cliff.tistory.com/227 개발환경으로는 STS를 사용했다. STS는 검색하여 적당히 다운 받으면 되는 일이다. 1. 프로젝트 생성 2. application.properties 3. pom.xml 4. mybatis 맵퍼 파일 5. 데이터베이스에서 만든 테이블 구조에 맞는 Dto 클래스를 작성한다. 6. Controller를 작성한다. 1. 프로젝트 생성 새 프로젝트를 만들어 준다. Spring Starter Project를 선택하고 Maven으로 프로젝트를 생성한다. 왜 인지 모르겠는 점은 Spring Boot Version은 3.0.0이 되면 오류가 난다. 다운그레이드 해야 한다. 그리고 의존성도 할 수 있는건 여기서 추가해 준다. 2. appli..

목차 - https://okane-on-cliff.tistory.com/227 이번 프로젝트는 사용성과 디자인은 생각하지 않고 오로지 기능 시연을 위해 만들었다. 이 글은 다시 만들 때 해메지 않도록 개발 과정의 뼈대들과 내가 겪은 시행착오들을 기술한다. 프로젝트 소개 메인페이지 - 제목과 내용을 적을 수 있는 , 글 목록 글 페이지 - 메인페이지에서 글 목록의 제목을 클릭하면 넘어갈 수 있는 페이지 글 내용을 확인할 수 있고 수정 삭제를 할 수 있다. 글 수정 페이지 - 글 페이지에서 수정 버튼을 누르면 넘어갈 수 있는 페이지 글 제목과 글 내용을 적을 수 있는 이 있다. 데이터 베이스 - table인 article은 3개의 column을 가지고 있다. (1)num = 기본키이며 자동으로 숫자가 1씩 ..