틈

처음 지도 API를 접하는 신입들에게는 어마무시하고 접근하기 힘든 무엇이 되었는데요. 저에게도 한동안 카카오맵 API는 공포의 대상이었습니다. 그 이유는 - 코드가 너무 길다 - 비슷한 변수가 연달아서 나와 어디서 적용하는지 확인하기 어렵다 - 함수가 심하게 많다 - 카카오맵 생성자의 이해도가 낮다. 차차 기능이 적은 카카오맵 API는 사용할 수 있게 되었으나, 긴 코드는 진입장벽이 있었습니다. 코드에 대한 리펙토링을 계속 생각하게 되었고, 약간의 해결책을 찾은 것 같아 공유해봅니다. 카카오맵으로 마커 표출을 해야 할 때에 이전에는 지도 위에 마커를 생성하고 그 마커를 변수에 저장해서 없애고, 다시 날리고 하는 식으로 작업을 했습니다. 상당한 노가다의 연속이었습니다. 카카오맵을 작업하다 보면 화면상의 마..

1. node.js 설치(+npm 설치) https://nodejs.org/ko/ 2. [선택] yarn npm install -g yarn 3. vue 설치 yarn global add @vue/cli 4. [선택] bootstrapVue 설치(예제로 빠르게 진행하기 위해..) yarn add vue bootstrap bootstrap-vue import Vue from 'vue' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' // Import Bootstrap an BootstrapVue CSS files (order is important) import 'bootstrap/dist/css/bootstrap.css' import 'bootstr..

See the Pen BaWOYXO by myeonghwa Shin (@fine-today) on CodePen. 640이하일 때 이미지의 오른쪽 하단에 확대보기를 할 수 있는 링크를 넣는 스크립트입니다. 많이 쓰는 태그라 마크업 단축효과가 큰 듯 합니다. 또한, ie에서 inline-block 속성 안에 inline-block 이 들어가면 이미지가 영역을 뚫고 나가는 현상을 해결할 수 있어서 좋은 경험이었습니다. 작은 팁들이 쌓이고, 다음 프로젝트에 추가로 적용할 수 있어 계속 기록하려고 합니다.

See the Pen graph by myeonghwa Shin (@fine-today) on CodePen. .result_item에 [data-count]속성에 각 표수를 입력하면 합산해서 들어갑니다.(퍼센테이지 자동계산, 전체 카운트 자동계산)

See the Pen RwpQRWr by myeonghwa Shin (@fine-today) on CodePen. input의 글자수를 체크해서 화면에 보이도록 하는 예제입니다.

목표 1. JSON으로 데이터를 불러와서 더보기 버튼을 누를 때마다 6개씩 표출 2. 한 html 페이지로 2가지 형식의 리스트를 표출하기 요즘 업무가 줄기도 했고, 관심있는 분야라서 처리해 보았습니다. 1. 데이터가 들어갈 템플릿 마크업을 만들고 그 마크업을 복사해서 데이터를 넣은 다음 .append() 시키는 방식을 사용했습니다. 2. 한 html로 2가지 리스트를 표출하는 것은 탭으로도 가능하겠지만, 이번에는 주소에 파라미터를 넣는 방식으로 구성해보았습니다. 주소 뒤에 ?box, ?list 가 있으면 상단 클래스를 변경해줘서 전체 스타일이 영향을 받을 수 있도록 했습니다.