알렉스 페레이라의 격투 블로그

Form을 전부 만들었다. 이제 백단에서 회원가입 API를 만들어 프론트딴과 통신을 해 회원가입을 구현하자. 알다시피 axios를 사용할것이다. 1.axios를 설치한다. npm install --save axios Vue 컴포넌트의 script단에서 axios를 import한다. import axios from 'axios'; 2. 서버단에서 Controller를 생성한다.(테스트용) 3. 회원가입 버튼에 event를 붙인다. 4.테스트 성공! 이제 Controller딴과 Service, Repository, VO등 작성한다. Controller package com.project.api.signin; import com.project.mybatis.vo.SignInVO; import lombok.Re..

웹 포탈의 가장 기본인 회원가입 / 로그인기능을 만드려고 한다. 다음의 4단계를 거쳐 구성할 계획이다. 화면 설계 개념 정리 DB스키마 설계 화면단 구축 back단 구축 우선 화면을 설계해 보자면, 상단메뉴의 우측에 로그인이 되어있을시 - 로그아웃버튼만 로그인이 되어있지 않을시 - 로그인버튼, 회원가입 버튼을 보여주려 한다. 로그인 및 회원가입 창은 전부 bootstrap의 modal을 통해 보여줄것이고 로그인여부는 axios를 통해 back단에 요청할 계획이다. 사용자 테이블도 구성하여 간단히 회원가입 시킬 예정 (+ 더 가능하다면 네이버 회원가입도) 우선, 상단메뉴 컴포넌트인 NavBar.vue에 버튼을 그린다. isLogin이라는 변수를 통해 분기렌더링 할것. {{msgSearch}} {{msgSe..

bootstrap을 통해서 간단한 상위 메뉴를 만들었다. 네이버에서 제공하는 지도 API를 사이트에 적용해보자. 아래 페이지로 이동한다. https://console.ncloud.com/naver-service/application 우선은 특별한 기능을 사용하기보다는 API를 연동해놓고 추후에 활용할 예정. 이전까지만해도 API를 관리하는 서비스가 따로 있었던거 같은데, 이제는 NCLOUD에서 같이 관리한다고 한다. 신청하는법은 매우 간단하다. 파란색 버튼 Application등록 버튼을 클릭한다. 다양한 서비스에대한 설명/요금 및 개발가이드가 나타난다. Web Dynamic Map을 클릭한다. 선택시 아래에 나타나는 서비스환경을 등록한다. 나는 로컬WAS에서만 사용할것이기 때문에 http://local..

저번글은 vuetify를 사용해 포탈을 꾸미려고 했지만.. 생각보다 vuetify가 쓰기가 힘들다. 일단 태그명이 전부 바뀌고 새로운 플러그인들이 많아지면서 소스가 지저분해지는 탓에 관리가 힘들어 졌다... 하지만 이전글은 삭제하지 않고 남겨두려 한다. 이번글은 Vue를 시작하기 위한 더 좋은 방법을 찾아 해당방식으로 진행하려 한다. 1.일단 bootstrap공식 홈페이지에 들어간다. https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring ..

첫번째 프로젝트를 진행할때.. html5up사이트를 이용해 간단한 HTML, CSS를 참조했다. https://leonjk3.tistory.com/7 4. html5up을 이용하여 HTML템플릿 적용하기 어느정도 형태가 갖춰진 HTML, CSS를 수정하고 커스터마이징은 여러번 해봤지만, 밑바닥부터 HTML과 CSS를 만들어 사용해본적은 없다. 그래서 어느정도 구성된 HTML템플릿을 다운받아 입맛에 맞게 커 leonjk3.tistory.com 하지만 이번 프로젝트는 프론트딴을 Vue.js로 구성할 것이기 때문에 vuetify라는 사이트를 이용해 보자. https://vuetifyjs.com/en/ Vuetify — A Vue Component Framework Vuetify is a no design sk..

이전에도 다뤘지만 mariaDB연동을 위해서는 Spring Boot 프로젝트의 application.proerties파일을 수정해야 한다. 1. application.properties 에 다음 4줄을 추가한다. 2. DB 연결 확인을 위해 다음과 같은 테스트코드를 작성한다. 3. 테스트 실행 4. myBatis연동 application.properties 에 다음 2줄을 추가한다. 5.myBatisConfig.java를 통해 SqlSessionTemplate을 설정해준다. package com.project.config; import org.apache.ibatis.session.SqlSessionFactory; import org.mybatis.spring.SqlSessionTemplate; impo..

Vue.js 프로젝트의 생성은 매우 간단하다. Vue.js에서 제공하는 Vue CLI를 이용하면 자동으로 해주기 때문이다!! 1.VSC에서 Vue.js 프로젝트를 생성하기 위한 경로로 이동한다. 나의 경우엔 D:\project 2.Vue Create [프로젝트명]을 입력하여 Vue 프로젝트를 생성한다. 여기서 Vue.js가 설명하는 cd vue npm run serve 를 통해 Vue.js를 실행해 볼 수 있겠지만, 나는 Spring Boot와 연동을 해주어야 하기 때문에 다음작업을 거친다. 3.Vue.js 프로젝트의 package.json 파일을 수정한다. "serve": "vue-cli-service serve --port 3000", //기본포트인 8080이 Spring Boot와 겹치니 3030으..

1.Spring Boot 프로젝트 생성을 위해서 아래 페이지로 이동한다. https://start.spring.io Project : Gradle빌드를 사용할것이기 때문에 Gradle - Groovy를 선택한다. Language : Java 선택한다. Spring Boot : 3.1.5버전을 선택한다. Project Metadata : Group, Artifact, Name등은 원하는대로 설정하고, Packaging은 jar배포를 할것이기 때문에 Jar을 선택한다. Java는 17버전을 선택한다. Dependencies : 프로젝트에서 사용할 의존성을 미리 주입한 상태로 다운로드 받을 수 있다. 나같은경우 일단 다음 네개를 선택했다. [Spring Web, Lombok, MariaDB Driver, Va..

Vue.js에 대한 기본지식이 늘어감에 따라 프론트(Vue.js) + 백(Spring Boot)을 통한 간단한 웹포탈을 만들어보려고 한다. 간단한 웹 포탈이니 기능은 다음과 같다. 게시글작성(네이버 or 다음 에디터 사용) 회원가입 가능 써드파티 API사용 주의할 점 소스, 형상관리 깔끔하게 관리할것. 다양한 모듈을 유연하게 추가할 수 있게 만들것. 소스 버전 Spring Boot(3.1.5) Java 17 MariaDB(10.8.7), Mybatis Vue.js 3 일단 이정도.. 마무리 잘 하자..!

대략 한달정도 면접을 보고 이력서를 준비하였는데 그 결과가 그렇게 좋지는 않다. 하지만 계속 공부는 해야하기에.. 새롭게 간단한 프로젝트를 또 해보려고 한다. 첫 프로젝트는 사실 성공적으로 종료되지 못했다. 이것저것 신기술을 써보고싶은마음에 너무 중구난방으로 판을 벌리다보니 수습이 안된것이 패착인것같다. 그래서 이번엔 정말 필요한 기술로만 아주 간단한 기능을 만들어 보려고 한다. Spring Boot(3.0.5), Java(17.0.6) MariaDB(10.8.7), Mybatis JSP Docker Vue.js Git 정도가 되겠는데, Vue같은경우에는 공부를 하면서 시작해야해서 아마 글 작성은 잦지 않을것같다..