0. 목차 (1) 개발 환경 구축(프론트) : https://okane-on-cliff.tistory.com/247 (2) 개발 환경 구축(백) : https://okane-on-cliff.tistory.com/248 (3) 코드 작성 (프론트) : https://okane-on-cliff.tistory.com/249 (4) 코드 작성 (백) : https://okane-on-cliff.tistory.com/250 (5) 배포 : https://okane-on-cliff.tistory.com/251 1. 깃 (프론트) : https://github.com/okanekudasai/picturePractice_front.git (백) : https://github.com/okanekudasai/picture..

vue-cli와 spring-boot를 활용하여 채팅 사이트를 만들어 보는 프로젝트이다. 완전히 csr방식으로 만들었다. 1. 환경 구축 (프론트) https://okane-on-cliff.tistory.com/241 (백) https://okane-on-cliff.tistory.com/242 2. 프론트 코드 : https://okane-on-cliff.tistory.com/243 3. 백 코드 : https://okane-on-cliff.tistory.com/244 4. 배포 : https://okane-on-cliff.tistory.com/245 1. 깃 주소 (프론트) : https://github.com/okanekudasai/socketFront.git (백) : https://github.c..

목차 - 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..