쓰기

vue-cli 라던가 웹팩의 설정은 역시 너무 어렵다... .vue 파일 안에 작성된 태그가 정상경로를 입력했음에도 불구하고 화면에 이미지가 나오지 않았다. 요소 검사를 해보니, src 속성값이 [object Module] 로 나오더라. 해결하고 나니 방법은 허무하리만치 간단했지만, 몇 시간을 고생했다. ㅠ vue-cli를 사용한다면 vue.config.js 파일에 아래와 같이 esModule: false 를 설정하면 말끔하게 해결된다. vue.config.js // vue.config.js module.exports = { /* 이미지 파일 (svg 제외) */ config.module.rule('images') //.test(/\.(png|jpe?g|gif)(\?.*)?$/) .use('url-loa..

vue 파일에 스타일시트를 적용하는 방법은 두 가지가 있다. 하나는 요소 안에 @import를 선언하는 것이고, 다른 하나는 똑같이 scss를 적용하는 방법이지만 동작 방식에는 차이가 있다. @import를 사용하면 vue를 빌드하고 실행할 때 내부적으로 sass-loader 모듈의 buggy url() handling을 사용한다. 반면에 src로 정의하면 파일 자체를 load한다. 문제는 다음과 같은 상황에서 발생한다. css 에서 url(이미지 경로) 속성으로 이미지를 불러올 때, @import 방식을 사용하면 위와 같은 상대경로는 오류가 발생한다. 만약 scss 파일에 url('../../images/background_test.jpg')라는 표현을 썼다면 다음과 같은 오류가 날 것이다. ./~/c..

WkWebView로 개발한 앱에서 App Store에 등록된 Pluse Secure 앱의 설치화면으로 이동하는 링크가 있다. itms-appss://apps.apple.com/app/pulse-secure/id945832041?l=en 웹뷰에서 http 스키마를 가지는 일반적인 URL로 이동할 때는 별도의 코드를 추가할 필요가 없다. 반면에 http 또는 https 외의 스키마를 처리하려면 decidePolicyFor 함수 내에서 UIApplication.shared.open()으로 실행해주어야 한다. func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escapin..

Mybatis 문법에서 의 결과 컬럼을 resultType 또는 resultMap 속성에 객체명 또는 매퍼 id를 정의하여 특정 DTO(Data Type Object)에 매핑한다. 예를 들어, SELECT a, b, c, d FROM table 쿼리를 실행할 때, DTO 객체에 a, b, c, d라는 필드가 있으면 알아서 매핑이 된다. 이때 a, b, c, d라는 각각의 컬럼 또는 필드가 서로 데이터 타입이 일치해야한다. 데이터 타입이 상이하고 오토캐스팅에 실패하면 오류가 발생한다. 그리고 기본적으로 int, boolean, double 등의 기본 자료형과 String, Integer 등과 같은 자료형 객체일 때 매핑이 된다. 하지만 모든 사용자 정의 객체(여기선 DTO)가 기본타입의 필드만 가지고 있는..

1. 터미널(Terminal.app) 실행 2. 명령어 입력 $ sudo vi /etc/hosts # 또는 $ sudo vi /private/etc/hosts 3. hosts 내용 수정 IP와 도메인을 입력하는데 중간에 공백은 스페이스가 아닌 탭으로 입력한다. 4. DNS 캐시 초기화 $ dscacheutil -flushcache

Property Binding (Normal) 스프링에서 빌드 환경에 따라 변경되는 상수값을 사용하기 위해 보편적으로 application.yml (또는 .property)에 문자열을 작성하고 소스코드에서 @Value 또는 @ConfigurationProperties 애노테이션을 사용해 변수에 바인딩 시킨다. 나는 주로 아웃바운드 API 주소를 개발환경과 운영환경에 달리 설정해주기 위해 사용한다. YML 설정파일 ### application-dev.yml api: calendar: http://alpha-api.calendar.example.com:5001/connect/schedules map: url: https://map-dev.example.com/api/v1/auth/room api-key: x..

# 오류 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.7.0:compile (default-compile) on project demoShop: Fatal error compiling: java.lang.ExceptionInInitializerError: com.sun.tools.javac.code.TypeTags -> [Help 1] # 원인 스프링부트 2.0.2, Lombok 버전을 1.16.x 사용 중이었다. 원인은 모르겠으나 Lombok 버전을 변경하니까 컴파일 성공했다. # 해결 org.projectlombok lombok 1.18.12 provided ※ 참고 vocado.tistory.com/1..

# 오류 톰캣 실행경로(/bin)에 setenv.sh 를 생성하고 JVM 옵션을 추가로 부여했다. (아래 CATALINA_OPTS) 톰캣을 실행하니 Unrecognized VM option 'PrintGCDateStamps' 가 발생한다. [irteam@dev-1784smartcontrol-ncl bin]$ ./catalina.sh run Using CATALINA_BASE: /home1/irteam/apps/tomcat Using CATALINA_HOME: /home1/irteam/apps/tomcat Using CATALINA_TMPDIR: /home1/irteam/apps/tomcat/temp Using JRE_HOME: /home1/irteam/apps/jdk Using CLASSPATH: /ho..

Groovy 문법 build.gradle task explodedWar(type: Copy) { into "$buildDir/exploded" with war } Kotlin DSL 문법 build.gradle.kts val explodedWar by tasks.register("explodedWar") { into("$buildDir/libs/exploded") with(tasks.war.get()) } tasks.war { finalizedBy(explodedWar) } gradle war 실행 프로젝트에서 사용하는 문법에 따라 위의 내용을 gradle 설정파일에 추가하고 war 작업을 실행한다. gradle war [options]... [프로젝트 경로]/build/exploded 또는 [프로젝트 ..

Vue 프로젝트가 아닌 html에서 CDN 방식으로 사용할 때 종종 this.데이터 또는 this.메소드가 동작하지 않을 때가 있다. this가 vue가 아닌 전역 글로벌 객체인 window를 가르킬 때 이다. 특히 자주 쓰이는 axios 비동기 호출을 한 후 콜백처리할 때 this를 사용해도 vue가 동작하지 않는 것이 대표적이다. 아래 샘플코드처럼 getMyList 메소드 내에서 this는 vue를 가르키지만, axios.then() 콜백함수의 this는 window를 가르킨다. new Vue({ el: '#container', data: { mylist: [] }, methods: { getMyList() { this.mylist = Array()// this -> vue axios.get("/v1..