김평범's OrdinaryCode

Nuxt 프로젝트 중에 nuxt-link 등 을 이용해서 페이지가 이동될 때 특정 페이지에서 이벤트를 발생해야되는 경우가 있다. 이런 경우는 watch 속성에서 $route를 바라보게 해서 이벤트를 발생시킬 수 있다. 🤔vue watch란? watch는 특정 데이터의 변화를 감지되면 특정 로직을 실행할 수 있다. $route watch 샘플코드 ... 위 코드를 이용하면, $route 즉 페이지가 이동될 때마다 해당 로직이 실행된다. to의 경우에는 현재 진입한 페이지의 속성이 나오며, from을 찍어보면 과거에 나온 페이지를 확인할 수 있다. 결과화면 콘솔 로그의 결과를 보면 지금 진입한 페이지인 index 페이지의 속성과 과거에 넘어온 페이지인 detail 페이지의 route 속성 값을 확인할 수 있..

객체가 빈 객체 상태를 체크할 경우가 있다. let emptyObject = {}; 위에처럼 빈 객체를 만들었다면, 이제 해당 객체가 빈객체인지 확인해보는 방법이다. Object.keys(newObject).length === 0 ⭐Object.keys란? Object.keys() 메소드는 해당 객체가의 속성을 배열 형태로 반환해줍니다. 결국 반환된 배열의 length가 0일 경우 해당 객체가 비었다고 판단할 수 있다. Object.keys() 샘플코드 위 코드를 실행했을 때 결과 화면이다.

노션에서 가장 잘 이용하는 속성이라고 하면 바로 데이터베이스! 프로젝트를 정리하거나 일정 정리할 때 노션 데이터 베이스는 필수인데, 이번 12월 15일 노션에서 새로운 업데이트로 데이터베이스에 하위 항목이 추가되었다. ⭐노션 데이터베이스 하위 항목 추가 노션 데이터베이스는 원래 한줄한줄이 하나의 데이터였는데 이번 하위 항목이 추가되면서 하나의 데이터에 속하는 하위 항목까지 깔끔하게 정리가 가능하게 되었다. 💚노션 데이터베이스 하위 항목 추가하기 먼저 윈도에서 노션을 쓰는 분들이라면 노션 최신 버전을 업데이트를 먼저 받아준다. 1️⃣노션 데이터베이스의 오른쪽 상단의 점 3개 버튼을 클릭한다. 2️⃣하위 항목을 클릭해서 설정을 진행한다. 하위 항목이 생성되면 자동으로 관계형 칼럼이 추가된다. 3️⃣하위 항목..

오늘 개발하다가 발견한 특별한 상황 백앤드 개발자 분이 첫 페이지 로딩이 느린 것 같다는 말을 보니까 mounted 될 때 호출하는 function이 두 번씩 되는 것을 발견했다. 검색해보니 나와 같이 비슷한 상황이 나오는 사람들이 있는 듯했다. 원인은 찾지 못하고 급하게 처리하는 방식을 찾아서 공유해보려고 한다. 📌Nuxt mounted가 두 번씩 호출되는 원인 문제는 nuxt 레이아웃에서 무슨 원인인지 모르겠는데 레이아웃에 import 한 컴포넌트들이 모두 2개씩 들어가 있다.🤔 위 내용을 확인한 건 크롬 확장 프로그램인 vue.js devtools이다. 만약 이용하고 아래 프로그램을 크롬에 추가해보자. https://chrome.google.com/webstore/detail/vuejs-devtoo..

💗vue $ref란? vue코드에서 DOM요소에 접근하기 위해서 사용하는 속성 HTML 예시 코드 Vue 접근 예시 코드 this.$refs.target; script 코드 측에서 html에 지정한 ref를 접근하는 방법은 위와 같다. 📒$refs접근 시 변수로 접근하기 refs의 경우 ID처럼 고유한 하나의 유닛을 접근해야 될 때가 있다. 만약 for문으로 10개의 refs를 생성한다면 이때는 변수를 이용해줘야 한다. {{i}} 위 코드로 10개의 div를 생성해주면, 각각 다른 ref속성을 갖는 DOM이 생성된다. vue 접근 예시 코드 selectRefs(i) { let targetRef = `target-${i}`; vm.$refs[targetRef][0]; } 그냥 텍스트로 접근할 때와 다른 점..

현재 상황은 프로젝트 파일에서 frontend 서버는 localhost:3000 이용하며, backend 서버는 localhost:3001 이용 중이다. 이럴 경우 frontend 서버에서 axios에서 호출을 할 경우 CROS error가 발생했다. frontend는 nuxt.js 이용 중인 상황일 때 해결 방법이다. 📌Nuxt Proxy 이용하기 1️⃣설치하기 nuxt에서 간편하게 프록시를 설정을 할 때 이용하는 라이브러리를 먼저 설치해주자 https://www.npmjs.com/package/@nuxtjs/proxy @nuxtjs/proxy proxy support for nuxt server. Latest version: 2.1.0, last published: 2 years ago. Start ..

javascript 데이터 형태 중에서 객체 배열 형태를 많이 이용하다 보니 해당 Array에서 특정 값을 갖고 있는 객체를 찾아야 되는 업무가 많았다. 오늘은 javascript의 필터 기능을 이용해서 특정 key에 특정 value를 가진 객체를 찾아내 보도록 하겠다. 🤔Array.filter란? Array filter를 이용하면 해당 조건에 만족하는 요소를 모두 찾아서 반환시켜준다. 예시 코드 위의 코드를 보자. 1~5까지 숫자를 가진 배열에서 3보다 큰 수를 찾으라고 하면 4,5라는 새로운 배열을 만들어서 return 해준다. filter기능을 이용하면 이처럼 배열에서 내가 원하는 조건을 가진 요소를 가지고 새로운 배열을 만들 수 있다. 🍒객체 배열 내에서 특정 value 값을 가지는 객체 반환하기..

input에서 사용자는 수정을 못하게 하려면 readonly라는 옵션을 이용하면 된다. 최근 프로젝트에서 input check box도 readonly를 시키려고 아래 코드를 넣었으나, 동작하지 않았다. 📌input type checkbox readonly 오류 코드 readonly="true"로 변경을 해봤지만 그 부분도 적용이 안되고, disable="true"는 작동이 되고 뭐일까 하고 찾아봤다. 🍒input type checkbox readonly 성공 코드 확인해보니, checkbox의 readonly는 먹지 않아서 위처럼 onClick 이벤트에서 return false를 걸어주면 된다고 한다. 실제로 적용해보니 잘 작동한다.

nuxt에서. env 파일을 배포 환경과 개발환경마다 다르게 쓸 경우가 있다. 오늘은 @nuxtjs/dotenv를 이용해서 배포 환경마다 .env파일을 변경해보도록 하겠다. 1. @nuxtjs/dotenv와 cross-env를 설치를 해준다. npm install @nuxtjs/dotenv --save npm install cross-env --save 2. package.json 설정 cross-env를 이용해서 환경변수를 설정해줄 수 있다. package script에서 실행할 때 NODE_ENV 값을 설정해준다. "scripts": { "dev": "cross-env NODE_ENV=development nuxt", "start": "cross-env NODE_ENV=production nuxt s..

윈도우에서 내가 설치한 폰트가 어떤 것들이 있는지 체크를 하거나 혹은 내가 설치된 폰트 파일을 복사해서 다른 곳에 쓸 일이 있을 때 현재 내 PC에 어디에 폰트가 저장되어있는지를 확인해줘야한다. 📂Window10 폰트 경로 C:\Windows\Fonts 내가 설치한 폰트는 C드라이브에 windows/fonts 폴더에 들어가면 확인할 수 있다. 해당 경로에서 내가 필요한 폰트 파일을 찾아서 복사하면 내가 원하는 위치에도 붙여넣기가 가능하다 :)