일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- webpack
- sass
- input
- Wecode
- 쉬운설명
- HOC
- 리액트
- Vue
- 자바스크립트
- 자료구조
- react
- express
- Vue.js
- vuex
- 댓글달기
- TypeScript
- mapGetters
- ES6
- MySQL
- CSS
- App.vue
- Vue transition
- nodejs
- v-html
- storybook
- State
- jsx
- event
- JavaScript
- scss
- Today
- Total
목록코딩일기/TIL (112)
익명의 개발노트
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:'좋아요',..
이메일 형식을 입력하면 버튼이 파란색으로 활성화 되고, 수정하여 이메일 형식이 아니면 버튼이 회색으로 바뀌는 기능 구현 중 리랜더링이 안되는 현상에 대해 적어본다. 우선 input 값을 입력하면, 해당 입력값은 Vuex 로 저장이 되며, 부모 컴포넌트에서 Vuex에 있는 값을 불러와서 사용한다. 버튼이 파란색까지는 변하는데, 그 후 Input 창의 내용을 수정하면 버튼이 회색으로 돌아오지 않았다. Vuex까지는 데이터가 들어가는데, 부모컴포넌트에서 리랜더링이 되지 않았다. 라이프싸이클도 확인해 본 결과, 파란색 버튼이 된 경우까지만 작동하고, input창의 내용을 수정하면 라이프싸이클도 작동하지 않았다. 콘솔에는 nextTick 에러만 뜨고... 우선 Vuex내에 state 값을 객체형식으로 구현했는데,..
위와 같이 통상 하단부 네이게이션 바를 특정 컴포넌트에서 안보이게 하고 싶을 때 처리하는 방법. 글로벌로 보이게 처리하려면 app.vue에서 등록을 해주면 어떤 라우터를 타고 들어가든 해당 컴포넌트를 볼 수 가 있다. 특정 컴포넌트에서 안보이게 처리는 어떻게 할까? //app.vue App.vue 컴포넌트에서 특정 url일때, 해당 컴포넌트를 안보여주면 된다. 위 소스 코드 처럼, 라이프싸이클 부분에서 url을 파싱하여, 해당 url일때 v-if를 통한 분기처리를 해주면 해결된다.
분명히 백틱을 사용해서 두 줄로 보냈는데, 화면에서는 아래와 같이 한 줄로만 나온다. 이런 경우 보내는 쪽에 을 넣어주고 받는 쪽에서 v-html로 바인딩시켜주면 해결 할 수 있다. //데이터 보내는 쪽 { title: '수정하기', message: `수정은 최초 1회만 가능합니다. 수정하시겠습니까?`, checkBtnName: '확인', flag:'modify', }, //데이터 받는 쪽 {{modalMessage}} 위의 내용을 아래와 같이 변경 //데이터 보내는 쪽 { title: '수정하기', message: `수정은 최초 1회만 가능합니다. 수정하시겠습니까?`, checkBtnName: '확인', flag:'modify', }, //데이터 받는 쪽 v-html은 XSS취약점으로 쉽게 이어질 수 ..
자바스크립트에서 0은 false의 의미를 가진다. 그러므로 배열의 0번째 색인값을 통해 찾으려고하면 값이 존재함에도 false가 된다. const sections = ['ddd'] function show(sections){ if(sections.indexOf('ddd')){ return true; } return false; } show(sections); // false 위와 같은 코드는 아래와 같이 존재하지 않을 경우 -1인 값을 비교함으로써 값을 판별할 수 있고, const val = ['ddd'] function show(val){ return val.indexOf('ddd') > -1 } show(val); // true 아래와 같이 ES6 문법인 includes를 통해 판별 할수도 있다. c..