김평범's OrdinaryCode

주소 검색해서 입력하는 사이트에서 자주 보는 카카오 우편번호 서비스가 이번 프로젝트에 필요해서 연동해보기로 했다. 🔎카카오 우편번호 서비스 카카오우편번호 서비스는 키를 발급할 필요도 없고 사용량 제한도 없고 기업도 무료료 사용할 수 있다.👍 🔑카카오 우편번호 서비스 스크립트 연동하기 카카오 우편서비스는 사용법도 너무 간단하다! 제공되는 자바스크립트 파일을 추가한 다음 바로 실행이 가능하다. 우편번호 서비스 연동 자바스크립트 샘플 코드 // 버튼 클릭 시 주소검색 팝업 띄우기 주소검색 onComplete data 형태 주소를 선택 한 다음 들어오는 결과 화면이다. address 에서 주소를 이용할 수 있고 addressEnglish에는 영어 주소도 들어와 있다. zonecode는 우편번호이다.

moment.js를 걷어내고 day.js를 메인 날짜 라이브러리로 사용 중이다. https://ordinary-code.tistory.com/60 [javascript/Vue] moment.js 지원 중단으로 dayjs로 변경하기 🙅‍♀️moment.js 나의 프로젝트의 날짜 시간 계산을 하는 라이브러리는 moment.js를 사용했다. 오늘 기준 다운로드 수가 18,204,885 많은 개발자들에게 사랑받은 라이브러리였다. 나 역시 프로젝트마 ordinary-code.tistory.com 👩‍🏫dayjs에서 요일 표시하기 기본 날짜 포맷의 경우 영어든 한국어든 상관없이 사용하고 있었는데 dayjs를 이용해서 요일을 표시하게 되었는데, dayjs에서 요일을 표시하면 기본적으로는 영어 약어로 표시가 된다. 만..

📌최근 발생한 문제점 $ref undefined mounted()에서 $ref에 접근을 해서 무언가를 적용을 하려고 해 봤는데, $ref에 접근이 안되고 undefined가 뜨는 오류가 발생했다. 무엇이 문제인지 찾아본 결과 안에 있는 $ref에 접근을 할 때, 초반에 undefined가 발생할 수 있다는 점을 찾아냈다. 이러한 상황은 왜 발생하는걸까? 먼저 이 문제를 알기 위해서는 를 왜 사용하는지를 알아야 했고, SSR과 CSR의 차이를 먼저 이해해야 되어서 오늘은 이 부분을 정리해보기로 했다! ⚙️SSR이란? Server Side Rendering이라고 해서 Server에서 렌더링이 된 HTML 화면을 만들어서 보내주는 방식을 말한다. SSR로 처리가 된다고 하면 모든 리소스를 서버에서 랜더링 한 ..

📌masonry Layout masonry는 건물의 벽, 돌벽 등으로 벽돌을 쌓는 공사를 말한다. 보통 이런 레이아웃은 핀터레스트 스타일이라고 해서 높이가 다른 각자의 카드들을 높이에 맞춰 딱딱 들어맞는 형식의 레이아웃이다. 👩‍💻vue프로젝트에서 masonry 레이아웃 이용하기 실제로 만들려면, npm 중에 vue-masonry-css를 이용하면 손쉽게 적용할 수 있다. vue-masnory-css vue에서 masnory 레이아웃을 만들어줄 npm이 존재한다. 사용방법은 그냥 npm install만 해주면 된다. npm i vue-masonry-css --save plugins/client.js import Vue from 'vue' import VueMasonry from 'vue-masonry-c..

Vue.js 공부할 때 이미지 경로를 하드코딩하지 않고 변수로 연결했던 방법을 공유했었다. https://ordinary-code.tistory.com/85 [Vue.js] 이미지 경로를 변수, data 값, URL로 이미지 연결하는 방법 (require이용) vue.js에서 img 태그 내에 이미지를 특정 분기를 이용해서 해당 값에 맞는 이미지를 바꿔가면서 보여주고 싶을 때가 있다. 혹은 data에 선언한 변수명으로 img 이름으로 대체해서 보여주고 싶을 때 ordinary-code.tistory.com 오늘은 이미지 경로를 가져오다가 에러가 발생할 경우 default 이미지를 호출하는 코드를 공유해보려고한다. 😎img 태그 @error 활용하기 @error의 경우 원본 이미지가 깨지거나, 로드되지 않..

🏷️Vue ref란? Vue에서 특정 컴포넌트나 HTML에 접근을 하고 싶을 때는 ref속성을 이용해서 접근이 가능하다. 먼저 아래의 코드로 예시를 보자. /page/ref.vue 상위컴포넌트 입니다. 하위 컴포넌트 클릭 이벤트 호출 /components/refComponent.vue 하위 컴포넌트 입니다. 상위컴포넌트 클릭 Count : {{count}} ref.vue에서 refComponent에 접근해서 하위 컴포넌트의 function을 실행하는 코드이다. 이럴 경우 하위 컴포넌트에 ref를 이용해서 컴포넌트 명에 접근한다 그다음 해당 컴포넌트에 methods에 등록된 clickCount를 호출해서 숫자를 올리는 코드이다. 이렇듯 ref를 이용하면 해당 컴포넌트에 손쉽게 접근할 수 있다. 🚩ref 사..

📃paginate란? paginate를 이용하면 DB에 등록되어있는 행을 페이징 처리를 해서 보여주는 게 가능하다. 만약 데이터양이 많다고하면 paginate를 이용해서 데이터를 나눠서 보여주는 게 가독성 상 좋다. 보통 게시판형태의 UI를 개발할 때 많이 사용하게 될 것이다. 💡vuejs-paginate vue.js에서 쉽게 페이징 처리를 할 수 있게 제공해주는 npm 라이브러리이다. 간단하게 css로 디자인 커스터마이징도 가능해서 사용해보기로 했다. vuejs-paginate 설치하기 https://www.npmjs.com/package/vuejs-paginate vuejs-paginate A simple pagination component for Vue.js www.npmjs.com 먼저 해당 사..

자바스크립트에서 천 자리마다 콤마를 찍어줘야 하는 경우가 많다. 숫자에다가 천 자리마다 콤마를 찍기 위해서는 정규식을 이용해야 한다. Vue에서는 Filter를 이용해서 숫자 3 자리 마자 콤마를 찍는 게 가능하다. example.vue {{price | numberFormat(2)}} 예시 코드이다. vue filter를 이용해서 numberFormat이라는 filter를 만들어준다. 두 번째 인자로 toFixed를 이용해서 소수점을 잘라준다. 나의 경우 2를 넣어서 소수점을 2자리까지 표시해준다. price에 들어간 342345.10923이라는 숫자가 vue filter를 통해서 소수점이 2자리까지 잘리고 그 이후 정규식을 이용해서 3자리마다 콤마를 찍어주게 된다. 이처럼 간단하게 vue filter..

😶 Nuxt에서 A태그 이용하기 Nuxt에서 페이지를 이동하려면 를 이용한다. 사용방법은 아래와 같다. 해당 페이지 이름으로 이동 해당 페이지로 이동하면서 URL 파라미터를 던짐 동적라우터로 이동합니다. nuxt-link를 위에처럼 작성해줄 경우 HTML로 랜더링을 확인해보자. 그럼 각각 페이지별로 어떻게 파라미터를 받을지 확인해보도록 하겠다. 😁Query 파라미터 받기 page/index.vue Query 파라미터 값은? : {{query}} query파라미터로 보낸 내용은 this$route.query로 받으면 된다. 나의 경우 쿼리 파라미터를 id로 보내서 id값을 받아서 화면에 표시해줬다. 결과 화면 query변수에 담긴 파라미터 값이 제대로 나오는 것을 확인할 수 있다. 😎동적 라우터 확인하기 ..

개발을 하다 보면, 특정 조건에 따라서 Css를 변경해야 되는 상황이 있다. 이럴 경우 주로 Class를 변경시켜서 적용이 가능하다. Vue에서 클래스를 조건에따라서 설정할 수 있다. 👩‍💻Vue 조건부 Class 예시 만약 버튼을 클릭하면, 화면이 다크 모드와 라이트 모드로 변경되는 기능을 구현한다고 생각해보자. 라이트 버전일 경우 배경화면이 하얀색으로 보여야하고, 다크 모드일 경우 배경화면을 검은색으로 보여야 한다. 이럴 경우 조건별 Class를 주면 해당 기능 구현이 가능하자. 아래 코드를 보자 {{thema}} div class중 body를 가지고 있는 div를 thema-button을 클릭했을 때 다크 모드로 바꿔준다고 해보자. 1️⃣vue Class if 조건에 따라 바꿔주기 vue에서 조건에..