본문 바로가기
728x90

분류 전체보기138

webpack - devServer CORS 에러 설정 프론트 어플리케이션에 webpack devServer를 적용하고 다른 어플리케이션의 api를 호출하거나 외부 api를 호출하면 무조건 CORS 에러가 발생합니다. webpackconfig.js 설정 파일을 다음과 같이 수정해야합니다. // webpack.config.js const path = require("path"); const webpack = require("webpack"); const isProduction = process.env.NODE_ENV == "production"; ... const config = { ... devServer: { open: true, host: "localhost", hot: true, // 자바스크립트나 CSS 스타일시트를 변경하면 해당 모듈이 바로 업데이트.. 2022. 3. 25.
Vue - axios (Http 통신) axios란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. axios 설치 Using npm: $ npm install axios Using bower: $ bower install axios Using yarn: $ yarn add axios Using jsDelivr CDN: Axios는 ajax와 달리 Promise 객체를 리턴합니다. Promise 객체 내부에 response를 통해서 데이터를 받아오는 것이죠. Promise 객체를 받아오기 때문에 axios는 async, await 를 사용해서 비동기 처리를 할 수 있습니다. axios 비교 위와 같은 표를 보았을 때 axios는 별도의 설치가 필요하다는 단점이 있지만 그것을.. 2022. 3. 25.
Vue - Vuex Vuex란? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있습니다. 즉, Vuex를 통해서 어플리케이션 전체에서 사용할 수 있는 전역 변수들을 선언하고 관리, 호출, 재사용 등을 가능하게 합니다. Vuex는 컴포넌트에서 공유된 상태를 추출하고 이를 전역 싱글톤으로 관리합니다. 이를 통해 Vuex의 컴포넌트 트리는 커다란 Vue가 되며 모든 컴포넌트는 트리에 상관없이 상태에 액세스하거나 동작을 트리거 할 수 있습니다. Vuex 설치 npm i vuex Vuex state Vuex 기본 틀은 다음과 같습니다. import Vue from 'vue'; import V.. 2022. 3. 25.
JPA - 연관 관계 연관 관계의 주인 두 객체(A, B)가 양방향 관계, 다시 말해 단방향 관계 2개(A→B, B→A)를 맺을 때, 연관 관계의 주인을 지정해야 합니다. 연관 관계의 주인을 지정 하는 것은 두 단방향 관계(A→B, B→A)중, 제어의 권한(외래 키를 비롯한 테이블 레코드를 저장, 수정, 삭제 처리)을 갖는 실질적인 관계가 어떤 것인지 JPA에게 알려준다고 생각하면 됩니다. 연관 관계의 주인은 연관 관계를 갖는 두 객체 사이에서 조회, 저장, 수정, 삭제를 할 수 있지만, 연관 관계의 주인이 아니면 조회만 가능합니다. 연관 관계의 주인이 아닌 객체에서 mappedBy 속성을 사용해서 주인을 지정해줘야합니다. 일반적으로 외래 키가 있는 곳을 연관 관계의 주인으로 정합니다. 일반적인 프로그래머의 객체지향적 관점에.. 2022. 3. 25.
Vue에서 fontawesome 설치 및 적용 1. fontawesome 설치 npm i @fortawesome/fontawesome-svg-core npm i @fortawesome/vue-fontawesome npm i @fortawesome/free-solid-svg-icons npm i @fortawesome/free-regular-svg-icons npm i @fortawesome/free-brands-svg-icons 2. fortawesome 라이브러리 파일 생성 3. main.js 파일에 추가 https://uxgjs.tistory.com/205 Vue.js에서 fortawesome아이콘 라이브러리 사용하기 현재 가장 영향력 있는 무료 아이콘 제공처는 Fortawesome일 것입니다. Fortawesome은 초창기 유행하던 Font의 .. 2022. 2. 16.
Vue - 팝업 창에서 뒤로가기 구현 싱글 페이지 애플리케이션(Single Page Application, SPA) 에서 모바일 웹페이지를 만들 때 팝업에서 뒤로가기 기능을 어떻게 처리해야할까요? 일반적으로 모바일의 뒤로가기 버튼을 누르게 되면, 팝업 여부와 상관없이 이전 페이지로 이동되겠죠. 하지만 토스트 팝업이나 모달 팝업을 호출한 상태에서 뒤로가기 버튼을 누르면 이전 페이지를 이동하지 않고 해당 팝업만 닫히게 해야합니다. 해당 기능을 history.pushState, window.addEventListener 시스템 함수를 응용해서 구현해보았습니다. 모바일 뒤로가기 버튼 동작 시 팝업을 닫는 기능은 다음과 같습니다. 팝업 뒤로가기 예시 코드 ... 적용(닫기) ... created() 분석 created() 메소드는 해당 컴포넌트가 호.. 2022. 2. 7.
tailwindcss 설치 npm init -y npm i tailwindcss // tailwind.config.js 생성 npx tailwindcss init // tailwindcss 설정 모두 파일 출력 npx tailwindcss init --full ------------- 에러 혹시 프로젝트를 실행시킬 때 아래와 같은 에러가 발생한다면 참고하시기 바랍니다. PostCSS plugin tailwindcss requires PostCSS 8 해결 방법 postcss 8 -> 7 버전을 사용하는 방법으로 해결할 수 있습니다. 기존에 설치했던 모듈을 삭제해줍니다. npm uninstall tailwindcss postcss autoprefixer npm uninstall postcss-cli 특정 버전의 모듈로 설치를 진행합.. 2022. 2. 3.
javaScript - html의 event, this 활용하기 html 태그에서 해당 태그의 정보나 이벤트를 추출하여 js에서 사용할 수 있게 하려면, html에서 태그의 정보나 이벤트를 넘겨주어여합니다. input 태그의 이벤트와 태그 정보를 넘기기 위해 바인딩된 함수에 event와 this 키워드를 사용합니다. function testEvent($event, $element) { var strLength = $event.target.value.length; if(strLength > 40) { $event.target.value = $event.target.value.substring(0, 40); } if($event.keyCode == 13 || $event.code == "Enter") { ... } } event와 this를 각각 $even와 $this로.. 2021. 12. 13.
JPA - Entity의 기본 속성 @GeneratedValue 내부에 GenerationType이 존재합니다. IDENTITY 전략 @GeneratedValue는 primary key로 사용할 프로퍼티에 적용합니다. Mysql의 identity 속성과 같이 auto increment를 사용하여 unique한 키값을 만듭니다. 다만, 이로인해 transaction이 끝나기 전에 키값을 증가시켜, transaction이 정상적으로 끝나지 못한 경우 다음 transaction에서는 키 값이 하나 더 증가한 값이 반영됩니다. SEQUENCE 전략 transaction이 종료된 시점에서 insert 쿼리에 key값을 채워서 실행됩니다. TABLE 전략 db의 종류와 상관없이 id 값을 관리하는 별도의 테이블을 만들어주고 그 테이블에서 id 값을 .. 2021. 12. 3.
JPA - JPA 관련 용어 소개 JPA 관련 용어 소개 ORM(Object Relational Mapping) 어플리케이션과 데이터 베이스를 연결해 놓은 것이 ORM이라는 개념입니다. 객체와 데이터간의 관계를 연결시켜주는 것이 ORM이다. ORM을 통해서 우리가 정의한 객체를 사용하는 것만으로 데이터를 연결해서 사용할 수 있게 된다. 만약 ORM 없이 직접 데이터들을 핸들링해야한다면, select 쿼리로 일일이 매핑해서 사용해야 합니다. JPA(Java Persistence API)이란 자바 진영에서는 ORM을 표준 스펙으로 정의한 것이 JPA입니다. 자바에서 JPA를 데이터를 접근하기 위한 데이터의 규격으로 정의한 것입니다. ORM이 전체적인 개념이라면 JPA는 ORM을 구체적으로 그 기능을 정의한 스펙입니다. Hibernate JP.. 2021. 11. 30.
Spring Boot - Exception 구현 예제2 Exception 객체에서 getBindingResult() 메소드를 사용해서 BindingResult 데이터를 추출해서 에러 객체(ErrorResponse)를 만들어 준 점이 유용하다고 생각하여 기록용으로 글을 남깁니다. 에러가 복수건 이거나 에러 필드가 여러개 일 때 BindingResult를 이용해서 복수 에러 처리를 하면 될 것 같습니다. @ControllerAdvice @ResponseBody @Slf4j public class GlobalExceptionAdvice { @ExceptionHandler(Exception.class) @ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR) protected ErrorResponse handleInternalServ.. 2021. 11. 29.
Spring Boot - 정적 파일 경로 지정 스프링 부트로 어플리션 개발 중에 자바스크립트 로드 및 이미지 찾기 도중 ERR_ABORTED 404 에러가 발생할 때, 해결하는 방법으로 이와 같은 방법을 공유합니다. 스프링 부트 js, css와 같은 정적 파일 경로를 추가해주어야 인식 가능합니다. 기본으로 경로가 잡혀있긴합니다만, resources와 static 까지만 잡혀있습니다. 저는 static 아래 js, css, img 디렉토리를 추가하여 사용했기때문에 html에서 경로의 파일을 찾지 못하는 에러가 발생했습니다. package com.example.stockcrawling.config; import org.springframework.context.annotation.Configuration; import org.springframework.. 2021. 11. 5.
CORS 에러 프론트 어플리케이션과 백엔드 어플리케이션 간에 http 통신이 CORS 정책 위반으로 실패하는 경우가 있었습니다. CORS 에러를 해결하는 어떻게 해결했는지를 공유하기 위해 글을 남깁니다. https://evan-moon.github.io/2020/05/21/about-cors/ CORS는 왜 이렇게 우리를 힘들게 하는걸까? 이번 포스팅에서는 웹 개발자라면 한번쯤은 얻어맞아 봤을 법한 정책에 대한 이야기를 해보려고 한다. 사실 웹 개발을 하다보면 CORS 정책 위반으로 인해 에러가 발생하는 상황은 굉장히 흔해서 evan-moon.github.io import javax.servlet.*; import javax.servlet.http.HttpServletResponse; import java.io.IOE.. 2021. 10. 26.
jsconfig.json 파일 설정 타입스크립트를 사용하는 경우 tsconfig.json 파일에 jsconfig.json 설정 내용을 넣으셔야합니다. 하지만 타입스크립트를 사용하지 않는 경우, jsconfig.json 파일을 생성해서 설정해도 됩니다. file의 절대 경로로 찾기 쉽게 아래의 설정과 같이 변환할 수 있습니다. { "compilerOptions": { "baseUrl": ".", "paths": { "~/*": [ "./*" ], "@/*": [ "./src/*" ], } }, "exclude": [ "node_modules", "dist" ] } 위와 같은 절대 경로 설정을 하시면, import AppHeader from './components/common/AppHeader.vue'; 와 같은 상대 경로를 import A.. 2021. 10. 10.
Git 명령어 모음 git status git status -h (help) git status -s stage to unstage 명령어 staging area에서 working directory git rm --cached tracking 하고 싶지않는 파일을 gitignore 처리 .gitignore 파일 생성 echo .gitignore .gitignore 파일 열기 open .gitignore 특정 파일의 수정 이력 보기 git diff 아무런 옵션이 없을 시에는 working directory 에서의 변경 사항만 볼 수 있다. cat 파일 내부의 내용을 확인할 수 있다. staging area의 변경 사항을 보기 위해서는 git diff --staged --staged 옵션을 준다. 또는 git diff --ca.. 2021. 10. 10.
728x90

티스토리툴바