@keyup.enter를 사용하면 새로고침이 된다. .prevent를 뒤에 붙여봐도 소용이 없다. 그럴 때는 keydown.enter.prevent를 사용해보자. 새로고침 없이 잘 된다.

Vite는 Vue 3 를 기반으로 작동합니다. 그러므로 Vue 3를 사용하면 별다른 설정 없이 사용할 수 있습니다만... Vue 2는 설정을 좀 만져줘야 합니다. 저와 같이 Vue 2에서 Vite를 사용하고 싶은 분들을 위해 이 글을 바칩니다... Vite 프로젝트를 생성해보신분들은 프로젝트 생성 부분은 건너뛰시면 됩니다. Vite 프로젝트 생성 방법 방법은 아주 간단합니다. 일단 Vite 설치부터 진행하겠습니다. 프로젝트 폴더를 만들 경로에서 아래 명령어를 입력하면 됩니다. ex) abc 라는 폴더 내부에 프로젝트 폴더를 생성할 경우 abc 폴더에서 아래 명령어를 실행하면 됩니다. npm npm init vite@latest Yarn yarn create vite 이후에는 프롬프트 창에 출력된 메시지를..

이 글은 Flutter를 기준으로 작성되었습니다. 2022-03-23 기준으로 플러터 공식 문서에 맞춰 글을 리뉴얼하였습니다. 1. Mapping new ns to old ns 2. This app is using a deprecated version of the Android embedding. 이렇게 생긴 두가지 warning을 본 사람들이 많을 것이다. 위에 접어놓은 글은 gradle 버전을 올림으로써 일시적으로 warning을 막아주지만 근본적인 해결책이 되지는 못한다. 그래서 flutter 공식문서를 참고하여 글을 리뉴얼한다. 문서를 살펴보니 가장 좋은 방법은 deprecated된 라이브러리들을 걷어내면 된다. 지금부터 살펴보자. 1. android/app/src/main/java/패키지명/Ma..

이번 과제를 진행하면서 배운 것들을 기록하려 한다. Express는 Node를 위한 웹 프레임워크이다. (라이브러리가 아니다. 주의!) node가 설치되어 있다는 가정하에 진행하겠다. 1. package.json 파일 생성 npm init or npm init -y 위의 명령어들 중 하나를 Terminal에 작성해주면 package.json이 생성된다. -y 를 붙여주면 자동으로 package.json을 작성해준다. package.json는 프로젝트의 패키지 목록을 관리하고 추가 스크립트를 작성하는 파일이다. package.json를 다루려면 내용이 너무 길어지므로 일단 생략하겠다. (해당 프로젝트에 사용하는 설정, 플러그인 등이 무엇인지 기록해두는 곳이라고 보면 된다.) 2. express 설치 npm..

text-overflow : 텍스트가 영역을 넘어가면 어떻게 할지 결정해줌 [display : -webkit-box] => 아래 속성들을 사용하기 위해 작성해줌 -webkit-line-clamp : 영역 내의 최대 라인 수를 결정한다. -webkit-box-orient : 영역 박스 내의 정렬 방향을 정해줌 div { overflow: hidden; /* 영역 밖으로 나간 컨텐츠를 안보이게 숨겨줌 */ text-overflow: ellipsis /* 영역 밖의 텍스트를 말줄임으로 표시해줌 */ display: -webkit-box -webkit-line-clamp : 3; /* 3줄만 나타냄 */ -webkit-box-orient : veritcal /* 정렬을 수직으로 해줌 */ }

요즘 자바스크립트로 Component를 직접 구현하고 있다. 구글링으로 다들 어떻게 했는지 찾아보는데 다들 addEventListener를 사용할 때 querySelector를 사용하더라. "getElementById나 getElementsByClass는 왜 사용안하지...?" 라는 생각이 들어서 직접 사용해보았다. Uncaught TypeError: this.target.getElementById is not a function at Template.setEvent (Template.js:16) at new Component (Components.js:8) at Template._createSuperInternal (app.js:28) at new Template (Template.js:3) at in..

코틀린을 배워보며 안드로이드 앱을 만드는 와중에 기본으로 제공했었다는 kotlin-android-extensions 라는 플러그인이 더 이상 기본 제공이 되지 않는다고 한다. 그래서인지 자동으로 작동되지가 않더라. (처음에 이유를 몰라서 삽질 좀 함....) 구글링해보니 편하긴 하지만 좋은 플러그인이 아니라고 한다. (왜..?) 여튼... 안드로이드 4.1 버전부터는 'kotlin-android-extensions'가 기본적으로 제공되지 않는다고 한다. 왜 더 이상 사용하지 않을까? kotlin-android-extensions은 findViewById의 반복적인 작업을 제거하려고 만들어졌고, 내부적인 캐시를 통해 재사용성을 높인다고 한다. 하지만 RecyclerView의 ViewHolder에서는 그렇지..

카카오맵 API를 호출하면 아래와 같은 에러들이 뜬다. 구글링을 해본 결과 안드로이드P (api 28) 부터는 보안정책이 강화되어 HTTP 트래픽을 차단한다고 한다. 우리는 항상 에러 내용을 구글링하지만, 구글링하기 전에 에러 내용부터 파악할 필요가 있다. (요즘 특히 느낀다... 읽어보면 대강 파악이 됨) Cleartext HTTP traffic to ot1.maps.daum-img.net not permitted 음... Cleartext HTTP traffic이 허가되지 않았다고 한다. 그럼 뭐 허용해주면 될텐데, 찾아보니 이런 방법이 있다고 한다. 1. android:usesCleartextTraffic="true" AndroidManifest.xml의 에 android:usesCleartextT..

Cookie란? 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청시에 저장된 데이터를 함께 전송한다. 쿠키는 두 요청이 동일한 브라우저에서 들어와는지를 판단할 때 주로 사용하는데, 이를 이용하여 로그인 상태를 유지할 수 있다. 쿠키를 사용하는 목적 세션 관리 (Session Management) : 서버에 저장해야 할 로그인, 장바구니 등의 정보 관리 개인화 (Personalization) : 사용자 선호, 테마 등의 세팅 트래킹 (Tracking) : 사용자의 행동을 기록하고 분석하는 용도 과거엔 클라이언트 측에 정보를 저장할 때 쿠키를 주로 사용하였다. 하지만 지금은 Modern Storage APIs를 사용하여 정보..

카카오 지도 API 호출 에러 안드로이드 앱 개발중에 카카오 지도 API를 호출하였는데 앱이 자꾸 종료되었다. 밑에서부터 주석처리하며 찾아보니 지도를 가져오기 위해서 MapView를 인스턴스화 시켜줘야하는데 여기서 실행이 중단되고 있었다. 근데 빌드를 봐도 아무 문제가 없다. 너무 잘 돌아가서 탈이다.... 뭐가 문제일까 싶었다가 해쉬값 찾을때 사용했던 Logcat을 한번 보았다. Logcat을 사용하자마자 바로 에러의 정체를 알았다... 요런 에러가 뜨는데 4번째 줄에 있는 UnsatisfiedLinkError를 구글링 해보니까 원인을 바로 찾았다. 결론 가상 에뮬레이터에서는 카카오지도 API가 호출되지 않는 것이었다. (...) 이거 하나 때문에 밤샜는데...ㅂㄷㅂㄷ 즉, AVD는 x86이므로... ..

Springboot를 공부 중에 테스트코드를 돌리는데 에러가 떴다. 당연히 deprecated 된 코드를 사용했으니 에러가 뜨는것이다 ㅎㅎ... 스프링부트 2.2.*부터 MediaType의 UTF인코딩 상수는 depracated 됐다고 한다. MediaType.APPLICATION_JSON_UTF8을 MediaType.APPLICATION_JSON으로 바꿔주면 된다.

테스트 코드를 작성하고 실행 시키는데 자꾸 한글이 깨지는 현상이 발생했다. 구글링하여 해결하였다. 맥이든 윈도우든 shift를 두번 누르면 검색창이 뜨는데 vm을 검색하면 아래와 같이 나온다. Edit Custom VM Options를 누르면 idea64.exe.vmoptions 라는 파일이 나오는데 맨 아래에 -Dfile.encoding=UTF-8 을 작성해주고 저장한다. 그리고 인텔리제이를 재실행하고 코드를 돌려보면 output에서 한글이 제대로 출력되는것을 확인할 수 있다.