본문 바로가기

분류 전체보기

Vue/vue 활용하기 2020. 4. 12. vue image preview(vue 이미지 미리보기) 컴포넌트 만들기 https://codepen.io/loy124/pen/ZEbGQaW vue image preview ... codepen.io codepen에도 업로드 해두었다.(테스트 가능) 프로젝트를 진행중에 파일을 업로드하기전 파일 업로드시 이미지 미리보기 를 나타내주는 컴포넌트가 필요해서 제작하게 되었다. 사진 등록 사진은 가로로 찍은 사진을 권장합니다. (가로 사이즈 최소 800px) 사진 용량은 사진 한 장당 10MB 까지 등록이 가능합니다. 이미지 실사진 최소 3장 이상 등록하셔야 하며, 가로사진을 권장합니다. 로고를 제외한 불필요한 정보(워터마크,상호,전화번호 등)가 있는 매물은 비공개처리됩니다 일반 사진 등록 x 추가 사진 등록 js 파일 files.file 에는 실제 file의 데이터가 담겨있고 fil..
JavaScript/Ajax, Axios(비동기 통신) 2020. 3. 21. axios 모듈화하기 axios 뿐만 아니라 다른 라이브러리를 사용할때는 라이브러리에 의존적이지 않게 따로 모듈화를 진행하는것이 좋다고 한다.. import axios from "axios"; import router from "../router"; const DOMAIN = "http://localhsot:3000"; const UNAUTHORIZED = 401; const onUnauthorized = () => { //다른 url로 이동 router.push("/login"); }; const request = (method, url, data) => { return axios({ method, url: DOMAIN + url, data }) .then(result => result.data) .catch(result ..
JavaScript/Ajax, Axios(비동기 통신) 2020. 3. 21. XMLHttpsRequest, axios 로 백엔드 서버에 요청 보내 보기 vue 파일 Board list: Loading... APi result : {{ apiRes }} Board 1 Board 2 fetchData() { this.loading = true; //요청하기 const req = new XMLHttpRequest(); req.open("GET", "http://localhost:3000/health"); //클라이언트에서 백엔드서버로 요청을 보낸다 req.send(); //로딩이 완료되면 req.addEventListener("load", () => { this.loading = false; this.apiRes = { status: req.status, statusText: req.statusText, response: JSON.parse(req.respo..
Vue/vue 기초 공부하기 2020. 3. 21. vue-router API 이해해보기 Vue router 라이브러리를 사용하기 전에 Vue router가 어떤것인지에 대한 개념에 대한 공부가되었다. import Vue from "vue"; import App from "./App.vue"; const Login = { template: "Login Page" }; const routes = { "/": App, "/login": Login }; new Vue({ el: "#app", computed: { VueComponent() { return ( routes[window.location.pathname] || { //url 경로를 반환 template: "Page not found " } ); //path경로에 해당하는것을 routes에서 찾고 반환 } }, render(h) { re..
AWS 2020. 3. 19. 아마존 AWS EC2 Mysql 서버 구축하기 (2) - mysql 설치 먼저 1에 이어서 쓰는 글이다. https://loy124.tistory.com/198 아마존 AWS EC2 Mysql 서버 구축하기 (1) - 회원가입및 EC2 구축 필요한것 : 해외결제 가능한 카드(체크카드도 된다, 실제로 결제하지는 않지만 필요하다), putty(ubuntu 접속) 회원가입 및 카드를 등록한다 EC2 를 선택해준다 EC2 방식은 ubuntu등 가상서버에 직접 db를 설치.. loy124.tistory.com login as 부분에 ubuntu라고 작성해주면 접속이 가능하다. 해당 서버는 리눅스 명령어로 작동하기 때문에 리눅스 명령어를 사용해줘야한다 sudo su (관리자 권한으로 실행) 그다음은 apt-get update를 실행해준다 (리눅스 파일 관리 시스템) apt-get upd..
AWS 2020. 3. 19. 아마존 AWS EC2 Mysql 서버 구축하기 (1) - 회원가입및 EC2 구축 프로젝트에서 공유할 db가 필요해서 호스팅 서비스 업체를 사용할까하다(Cafe24등) 아마존 AWS를 사용해보기로 하였다. 회원가입 및 카드를 등록한다 EC2 를 선택해준다 EC2 방식은 ubuntu등 가상서버에 직접 db를 설치해서 운용하는 방식이다. 가상 서버를 고르는란 Ubuntu Server 18.04 LTS를 선택했다. 프리티어옵션을 사용 스토리지 옵션은 크기 30으로 지정해준다( 프리티어 옵션기준 최대 30) 옵션에 HTTP, HTTPS, MYSQL/AUROR 옵션 세가지 규칙을 추가해준다 (허용범위 추가) 검토 -> 시작하기 클릭 키페어 다운로드를 해준다(잘 보관해 둘 것 !!!) [putty작업] 다음은 putty를 다운받아준다. https://www.putty.org/ Download P..
Java/jpa 2020. 3. 15. Jpa query method 사용하기 package com.example.study.repository; import java.util.Optional; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.stereotype.Repository; import com.example.study.model.entity.User; //Repository를 사용하면 따로쿼리문을 작성하지 않아도 기본적인 CRUD가 실행이 된다 @Repository public interface UserRepository extends JpaRepository /*첫번째는 dto, 두번째는 기본키의 타입 */ { // select * from user where ..
Java/Spring-boot 2020. 3. 15. 이클립스(스프링 sts)에서 Spring-boot, Jpa 사용 하기 (2) https://github.com/loy124/spring-boot-jpa loy124/spring-boot-jpa spring boot jpa 기초 CRUD 해보기. Contribute to loy124/spring-boot-jpa development by creating an account on GitHub. github.com src/test/java 에서 test code를 작성해볼 예정이다 Test Code는 버그를 줄이고 좋은 코드 퀄리티를 높이기위해 작성하며 스프링부트는 mehtod단위로 테스트를 쉽게 할수 있게 되어있다 스프링부트 프로젝트를 생성하면 기본적으로 test폴더가 존재하는데 패키지 안에 있는 java 파일을 먼저 public으로 변경해준다 (해당 class를 상속받아서 test..

티스토리툴바