익명의 개발노트

1. 스토리 북이란? Storybook 은 UI 컴포넌트를 직접 보면서 개발을 할 수 있는 환경을 제공하는 툴이다. 실제 프로젝트 내에서 실행 되는 것이 아니라 독립된 환경으로 실행한다. 순전히 UI 개발에 집중할 수 있게 해주며,기획,디자인,개발자와의 협업 구조에서 원활하게 커뮤케이션이 가능하며 개발 생산성을 향상 시킬 수 있다. UI 개발을 하다 보면 빈번하게 일어나는 디자인 스펙 오류, 기획 프로세스 오류 등을 빠르게 확인 하여 수정 할 수 있으며, 개발자는 컴포넌트를 더욱 유연하고, 재사용 가능한 컴포넌트 개발을 할 수 있도록 도와준다. Storybook 의 경우 현재 많은 회사에서 사용 하고 있으며, Airbnb, Slack, Coursera 등과 많은 리액트 오픈소스 프로젝트에서 사용 되고 있..

dragula를 이용한 드래그 앤 드랍 구현하기. 1. 라이브러리 설치 npm i dragula 2. 템플릿 작성 Element 1 Element 2 Element 3 Display Vue.js에서 DOM에 직접 접근하기 위하여 ref를 사용한다. 3. 스크립트 코드작성 dragula를 import하고, dragula의 첫번째 인자값은 어디에서 어디로 옮길 것인지, 그것에 대한 DOM을 넣어주면 되고, 두번째 인자값은 옵션이다. .on은 드랍했을때 이벤트 처리를 나타낸다. 없어도 무관하다. 4. 스타일 코어기능은 이러하고, 여기서 응용해서 제작하면 될 듯 싶다.

npm 패키지에는 kakaomap 쓸만한 것도, 인기있는 것도 생각보다 없다. 기존에 카카오맵 가이드를 보면 api key 부분을 헤더나, 스크립트에 넣어서 코드가 실행되기 전에 먼저 실행을 시켜주어야 한다. 아래 코드는 맵 불러오는 코드가 불러오기 전에 api키를 html 헤더에 넣고, 맵을 불러오게 한다. 입력해야하는 api키는 https://developers.kakao.com/접속 후 어플리케이션 하나 생성하면 메인화면에 아래와 같은 정보가 뜨는데 앱정보를 누르면 각종 api키를 확인할 수 있다. 여기서 자바스크립트 키를 입력하면 된다. initMap과 addScript에 콘솔을 찍어보면 addScript -> initMap 순으로 찍힘을 알 수 있다. Vue 타입스크립트 kakaomap에 대한..

개발 중에 footer navigator를 특정 페이지에는 안보이게 처리를 해야하는 일이 생겼다. 우선 개발했을때 아래와 같이 2가지 방법 밖에 생각이 안났다. 1. 각각의 페이지에서 footer navigator bar를 import해서 불러오는 방법 2. 최상위 app.vue 파일에 footer navigator bar를 import해서 사용하는 방법 따라서, 2번 사항으로 개발을 진행했고, beforeUpdate 함수에서 document.location.pathname 를 이용하여 해당페이지에 접근하면 안보이게 처리했었다. 아래와 같이.. //App.vue beforeUpdate(): void { switch(document.location.pathname){ case '/email-check': ..

emoji를 필터링하는 정규식 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g;

input 태그를 이용하여 입력된 값 바인딩하는 경우 영어는 문제가 없는데, 한글이나, 중국어, 일본어의 경우에는 바인딩이 늦게 된다. 일반적으로 Vue에서는 v-model을 이용하여 바인딩을 시키는데, input 안에서 모델을 이용하여 바인딩 시킬 경우 아래 그림과 같이 CJK는 한템포 늦게 반영이 된다. 이와 같은 사항을 보완하기 위해서는 input태그에서 @input or v-on:input을 이용하여 바인딩하면 실시간으로 입력값에 대해서 바인딩 받을 수 있다. 아래와 같은 코드로 바인딩하여 사용한다.

Vue에서 router 주소를 /login/type 등등으로 이어서 사용하고자 할때가 있다. 그럴때는 nested router 를 사용한다. nested router는 router 기능 중 children을 사용하는 것으로 써, 주소로 표현하고자 하는 최상단 컴포넌트는 반드시 를 가지고 있어야 보여줄 수 있다. index는 최대한 간단하게 만 써주는 게 좋다.(다른 코드있으면, 그 코드까지 랜더링된다) Index.vue router.js에서 아래와 같이 작성을 한다. //router.js { path: '/login', name: '', component: () => import(/* webpackChunkName: "" */ '../components/views/Index.vue'), //최상위 컴포넌..

토글 버튼이나, 탭기능 구현을 함에 있어서 코드를 최대한 적게 쓰고 싶어서. for문을 이용하여 리스트를 만들고 탭 이름을 뿌려줬다. 클릭하면 html에서 클릭한 부분만 클래스 네임이 하나 더 추가되서 이벤트효과를 따로 부여했다. {{item.title}} 위 코드에서 클래스 추가하는 부분에 클릭하면 active 이름이 추가로 붙는다. (item.id 값이랑 선택한 것이랑 일치하면 클래스 명이 추가되도록 했음) tabMenuList는 아래와 같이 이루어져 있으며, 부모컴포넌트로부터 Prop으로 넘겨받는다. 별도의 파일로 만들어져 빼서 사용했다. //util/tabList.js export const storageBox = [ {title:'내 테마', id:'my_theme'}, {title:'좋아요',..

요약 1. Optional Chaining(?.) 2. Nullish coalescing Operator(??) 3. globalThis 4. Dynamic import 5. BigInt 6. String.prototype.matchAll 7. Promise.allSettled 1. Optional Chaining(?.) ?. 연산자는 왼쪽 연산자 값이 null이나 , undefined 일 경우 실행을 멈추고 undefined를 return하는 연산자이다. 장점으로는 존재하지 않을 수도 있는 값에 대하여 예외처리를 손쉽게 할 수 있다. const data = { user: { name: 'foo', getName() { return this.name } } } const user1 = data?.user..

이메일 형식을 입력하면 버튼이 파란색으로 활성화 되고, 수정하여 이메일 형식이 아니면 버튼이 회색으로 바뀌는 기능 구현 중 리랜더링이 안되는 현상에 대해 적어본다. 우선 input 값을 입력하면, 해당 입력값은 Vuex 로 저장이 되며, 부모 컴포넌트에서 Vuex에 있는 값을 불러와서 사용한다. 버튼이 파란색까지는 변하는데, 그 후 Input 창의 내용을 수정하면 버튼이 회색으로 돌아오지 않았다. Vuex까지는 데이터가 들어가는데, 부모컴포넌트에서 리랜더링이 되지 않았다. 라이프싸이클도 확인해 본 결과, 파란색 버튼이 된 경우까지만 작동하고, input창의 내용을 수정하면 라이프싸이클도 작동하지 않았다. 콘솔에는 nextTick 에러만 뜨고... 우선 Vuex내에 state 값을 객체형식으로 구현했는데,..