프론트엔드
-
Flutter 시작 오류 - Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.프론트엔드/Flutter 2021. 3. 26. 00:47
MacOs catalina 에서 플러터 깔고 안드로이드 스튜디오로 안드로이드 폰 usb 연결해서 빌드 시키면 실행이 안된다. 아이폰 시뮬레이터는 실행되고 안드로이드만 동작하지 않는다. 에러문구는 아래와 같다. FAILURE: Build failed with an exception. * What went wrong: Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'. > Failed to install the following Android SDK packages as some licences have not been accepted. ~~~~~ 라이센스가 없다는 의미로 터미널로 입력하면 된다. $ flutter do..
-
[vue] prop data 사용하기 - Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders - 비동기상황에서 props 데이터 사용하기프론트엔드/Vuejs 2020. 11. 18. 00:59
vue prop data 를 사용하다가 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders 이 오류를 본 적이 있다. 이 오류가 난 경우는 props data 를 받고 이 props 데이터를 변경해주었더니 생긴 오류다. 이 props 데이터를 위로 올리고 이 올린 데이터를 또 props 로 내려서 하위 자식에서 쓰려했더니 생긴 오류다. props 에 대한 vue 의 공식 문서 설명이다. 일반적으로 prop을 변경시키고 싶은 유혹을 불러 일으킬 수있는 두 가지 경우가 있습니다. 1. 이 prop는 초기 값을 전달 하는데만 사용되며 하위 컴포넌트는 이후에 이를 로컬 데..
-
mac os gyp: No Xcode or CLT version detected! 오류 (맥 npm 패키지 설치 오류)프론트엔드/Vuejs 2020. 9. 18. 17:23
맥에서 npm 패키지를 설치하다가 오류가 난적이 있습니다. 해당오류는 gyp: No Xcode or CLT version detected! 과 같이 나옵니다. 저의 경우에는 nuxt 신규 프로젝트 하려고 명령어를 치다 다음과 같은 오류를 발견했습니다. npx create-nuxt-app frontend 이 명령어를 치니 패키지를 가져오는 부분에서 오류가 생겼습니다. No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'. No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'. No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'..
-
[vue] vue nuxt 시작하기프론트엔드/Vuejs 2020. 8. 17. 17:59
서버사이드 렌더링이 가능한 nuxt 를 하려고 한다. nuxt 장점으로는 서버사이드 렌더링이 가능하다는 점과, vue 에서 각각 해줘야 하는 일들을 한번에 처리 가능하다는 점이다. Nuxt.js 설치 create-nuxt-app을 npx를 통해서 설치하면된다. npx는 NPM 5.2.0 버전 이후 기본적으로 제공되기 때문에 별도로 설치할 필요는 없다. $ npx create-nuxt-app 이미 npm 을 설치했다면, npx 를 따로 설치할 필요가 없다. 나는 해당 폴더를 생성하고, 프로젝트 명을 frontend 라고 했다. npx create-nuxt-app frontend 입력하면 다음과 같이 프로젝트가 생성된다. 나는 vuetify 를 기본 ui 로 설정, eslint 및 jest 를 선택했다. 제..
-
[webpack] webpack의 entry 사용법프론트엔드 2020. 7. 31. 00:42
“entry” — String Vs Array Vs Object 웹펙에는 entry 라는게 있다. entry 라는게 제일 시작점이다. “entry”는 root 모듈 또는 시작 지점이 무엇인지 Webpack에게 알려준다. “entry”는 String, Array, Object 형태로 될 수 있다. 이것이 바로 혼란스러운 점인데 다른 타입은 결국 다른 목적에 사용된다고 생각하면 된다. 만약 당신이 시작지점이 1개라면 다음과 같은 output format을 사용할 수 있다. 다른 형식이지만 결국 같은 output entry - Array 만약 당신이 서로간 의존성이 없는 여러개의 파일을 사용하고 싶다면 Array 형식으로 사용하면 된다. 예를 들어 HTML에 “googleAnalystic.js” 가 필요 할수..
-
[CSS] 클릭 이벤트 허용 여부 (pointer-events)프론트엔드/CSS 2020. 7. 30. 21:32
화면구성상 앞에 절대 위치로 텍스트를 놓는 경우 앞에 텍스트가 뒤를 가려서 클릭이 안되는 경우 가 있다. 텍스트가 앞에 위치해 있어도 뒤가 클릭되게 하려면 pointer-events 속성을 이용해서 뒷 배경을 정상적으로 클릭할 수 있게 할 수 있다. pointer-events: 클릭 이벤트 허용 여부 pointer-events: none 을 사용하면 앞에 내용이 클릭이 안되고 뒤부터 클릭이 된다. 참고문헌 https://ahnheejong.name/articles/less-famous-css-properties/ [잘 알려지지 않은 유용한 CSS 속성들]
-
[CSS] 마우스 커서 모양 포인터로 바꾸기(cursor)프론트엔드/CSS 2020. 7. 30. 21:23
해당 지점위에 마우스 커서를 손모양으로 바꾸고 싶을때가 있습니다. 이 때 사용하는 CSS 속성이 cursor 입니다. 개요 cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있습니다. auto: 자동 default: 기본값 (화살표) pointer: 손가락 모양 (클릭 가능한 버튼) wait: 로딩 사용법 .btn-wait { cursor: pointer } Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize Text Wait Help 결과물 Auto Crosshair Default Pointer Move e-resize n..
-
[vue] vue skeleton 사용하기프론트엔드/Vuejs 2020. 7. 13. 22:34
프론트에서 개발하다보면 api 중에 시간소요가 1초 이상 소요되어 화면에 랜더링 되기 전에 어떤 구성된 화면이 나왔으면 하는 순간이 있습니다. 왜냐하면 api 로 데이터를 받아올 때 까지 로딩되는 화면에는 아무런 리스트 화면도 보여주지 않으면, 사용자 입장에서 어색한 느낌이 있습니다. 이럴때 쓰는 로딩 방식보고 skeleton 로딩이라고 합니다. vue 에 라이브러리가 있나 찾아보았는데, 라이브러리 보다 css 만으로도 처리가 가능한 리소스를 찾아 내용 정리합니다. 1. vue skeletonBox 소스 2. 사용예시 import SkeletonBox from '@/components/common/SkeletonBox' export default { name: 'ModalAttribute', compon..