쓰기

npm ERR! code 1 npm ERR! path /Users/user/Documents/GitHub/nesp/nesp-web-vue/node_modules/chromedriver npm ERR! command failed npm ERR! command sh -c node install.js npm ERR! Only Mac 64 bits supported. 업무기기를 맥북프로 M1 장비로 변경하고나서 호환되지 않는 프로그램들이 꽤 있다. vue 프로젝트를 실행하기 위해 node install --save 실행하였더니 위와 같이 chromedriver 는 맥 인텔 장비에서만 지원한다는 메세지와 함께 모듈 설치에 실패했다. 해결방법은 연관된 모듈들을 최신버전으로 올려주거나, m1 버전의 chromecri..

배경 애플은 자신들의 하드웨어(아이폰, 맥, 워치 등)에서 자신들이 인증을 한 소프트웨어(앱, 실행파일 등)만 실행될 수 있도록 강제한다. 무엇을 인증하냐면, 소프트웨어(이하 앱)를 만든 개발자가 신뢰할 수 있는 "놈"이 만든 "앱"인지를 확인하고 그렇다고 인증(인정)한다. 그래서 앱을 실행할 때마다 애플로부터 인증받은 앱인지 반드시 확인하며, 이 때 인증서가 사용된다. 앱을 설치하면 안에 인증서가 들어 있어서 실행할 때마다 "이 앱은 신뢰할 수 있는 놈이 만든 앱이니까 실행해도 된다"고 알려주는 거다. 그럼 만약 기간이 만료된 인증서가 포함된 앱을 실행하면? 당연히 앱을 실행할 수 없다. 인증서는 어떻게 앱에 들어있을까? 앱을 배포할 때 인증서를 포함시키기 때문이다. iOS 앱을 개발해서 앱스토어든, ..

문제상황 ios 단말기에서 Safari 브라우저든 웹뷰든(내장 브라우저가 사파리인건 동일하니까) 한글 입력이 이상하게 되는 현상이 있다. 같은 한글 문자를 입력했을 때 안드로이드는 괜찮고 ios에서만 발생하며, 영어는 문제가 없다. 예를 들어, 이지선을 찾기 위해 입력창에서 @이지 를 입력한 뒤 검색결과목록에서 이지선을 선택한다. 그러면 @이지선 이라는 단어가 textarea에 입력될거고 그 뒤로 입력하고자 하는 내용을 입력하면 된다. 이게 상식적인데... iOS는 상식 밖으로 동작한다. @이지 입력 후 @이지선을 완성한 다음에 'ㅇ'을 입력하면 기존에 입력하고 있던 '지'에 'ㅇ' 받침이 붙어서 @이지선징이 입력된다. 반면에 멀쩡한 경우도 있다. 목록에서 선택하기 전까지 입력 중이던 글자와 다음 글자를..

아이폰은 입력할 때 키보드 영역이 화면 위에 뜨는 형태여서 화면의 아래 부분을 가리게 된다. 만약 웹뷰 화면에 하단 툴바가 있다면, 툴바 역시 가려지게 된다. 키보드 영역만큼 화면을 올려주기 위해서 NotificationCenter로 키보드가 나오고 사라지는 이벤트를 이용한다. NotificationCenter Observer 생성 / 제거 /* --------------------------------------------------- * Keyboard 노출 감지하는 NotificationCenter Observer 추가 * ---------------------------------------------------- */ func addKeyboardNotifications(){ // 키보드가 나타..

# 오류 Spring Boot에서 WebClient 사용하여 API 호출하는 로직에서 다음 에러가 발생했다. org.springframework.web.reactive.function.client.WebClientResponseException: 200 OK from GET http://API_URL; nested exception is org.springframework.core.io.buffer.DataBufferLimitException: Exceeded limit on max bytes to buffer : 262144 응답이 200 OK 인걸 보면 요청까지는 성공했는데 아무래도 응답사이즈가 커서 오류가 발생한 것 같다. # 원인 2.x 스프링 버전 올라오면서 버퍼 사이즈가 262114 Bytes..

SQL 질의를 실행하여 특정 테이블에 저장된 용량을 확인할 수 있다. SELECT table_name, -- 테이블 명 table_rows, -- 전체 row 수 data_length, -- 저장된 데이터 크기 (Bytes) index_length, -- 저장된 인덱스 크기 (Bytes) ROUND(data_length/table_rows) AS 'row_size (byte)', -- row 평균 크기 (Bytes) ROUND(data_length/(1024*1024),2) AS 'data_size (mb)', -- 저장된 데이터 크기 (MB) ROUND(index_length/(1024*1024),2) AS 'index_size (mb)' -- 저장된 인덱스 크기 (MB) FROM information..

div로 슬라이더 구현했다가 input type=range로 바꾸면서 안 쓰게 되됨 근데 이거 자바스크립트로 슬라이더 직접 구현하는거 너무 개고생해가지고 고생이 아까워서 남겨놓음 HTML {sliderValue} % CSS .control_light .light_line { position: relative; width: 100%; height: 2px; background-color: #e7eff0; } .control_light .line_indicator { position: absolute; top: 0; bottom: 0; left: 0; min-width: 24px; max-width: 100%; background-color: #177efb; } .control_light .line_indi..

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