본문 바로가기

개발

(176)
숫자 천 단위 마다 콤마 찍어주세요 (1,000) 소수점 숫자도 나와야해요. RegExr, toLocaleString (정규 표현식_Lookahead/Lookbehind_사파리 lookbehind 오류에 대해서..) 기존 작업자가 작업해 둔 코드가 있었고, 요구 조건에 따라 이슈가 전달되어왔다. 기존 코드 function addComma(value) { return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } 요구 조건은 아래와 같았고.. 1. 숫자 천 단위마다 콤마 추가 2. 소수점에서는 콤마 추가하지 않아야 함 기존 코드에서는 소수점에서도 콤마가 추가되고 있었다. function addComma(value) { return value.toString().replace(/\B(? 잘되는 듯 했지만, 크로스브라우징 이슈가 있었다. safari에서 흰페이지로 뜨는 것이었다. 두둥.. 그리고 SyntaxError: Invalid regular expression..
[Vue3/Typescript] 할일 목록을 만들면서 Vue3 배워보자 - 03 할일 목록을 만들면서 Vue3 배워보자 - 01 할일 목록을 만들면서 Vue3 배워보자 - 02 > 할일 목록을 만들면서 Vue3 배워보자 - 03 이번에는 Store를 통해 작업을 진행해보겠습니다. 기존에는 vuex를 사용해서 작업을 했었는데, vue3에서는 공식적으로 pinia 라이브러리를 사용하기를 권고하고 있습니다. Pinia - Vuex를 대체할 새로운 Store! 사실 Pinia 는 Vue의 코어팀에서 활동하는 Eduardo 가 Vuex 5 의 RFC 에 따라 Vuex 5 의 구현체로 Pinia 를 작성한 것이다. 공식문서에 따르면 Vue 의 철학을 충실하게 따르면서 Pinia 를 개발중이며, 추후에 Pinia 와 Vuex 5 두 프로젝트를 하나로 합치거나 아주 쉽게 이동할 수 있도록 지원할 ..
[Vue3/Typescript] 할일 목록을 만들면서 Vue3 배워보자 - 02 할일 목록을 만들면서 Vue3 배워보자 - 01 > 할일 목록을 만들면서 Vue3 배워보자 - 02 할일 목록을 만들면서 Vue3 배워보자 - 03 먼저 Store 없이, emits을 통해서 데이터 통신하는 방식으로 개발해보겠습니다. Style 영역은 01과 달라진 부분이 없으므로 코드에 나타내지 않겠습니다. 기능 개발 - 01 등록하기 views/App.vue 데이터 정의는 ref를 사용합니다. 1. App.vue가 가장 최상위 파일이므로 todoList 데이터를 만들어줍니다. TodoItem에 대한 interface도 작성해줍니다. 이때, status는 string으로 해도되지만 'active'와 'clear'만 사용할 것이므로 문자열로 적어줍니다. (vue에서 props받을 때, validator ..
[Vue3/Typescript] 할일 목록을 만들면서 Vue3 배워보자 - 01 전체 적인 설정부분 node버전 16으로 변경하여 다시 진행해보도록하겠습니다. (시간이 날때 ㅠㅠ) 해당 글들에서 lint 내용 제외해서 보시는 것을 추천합니다.(린트 설정이 제대로 안된 듯 함) > 할일 목록을 만들면서 Vue3 배워보자 - 01 할일 목록을 만들면서 Vue3 배워보자 - 02 할일 목록을 만들면서 Vue3 배워보자 - 03 Vue3와 Typescript를 사용해서 간단한 할일 목록을 만들어보겠습니다. 저도 학습하고나서 기억하기 위해 작성하는 포스트입니다. 그리고 해당 학습에서 중요하게 생각한 부분 외에는(lint, style 등) 거슬리지 않는한 신경쓰지 않고 진행하였고, UI는 bootstrap을 사용하였습니다. 기본 스펙 공유 (기존에 설치하고나서 업그레이드를 하지 않은 상태인데,..
[Nuxtjs 프로젝트] stylelint 설정(.stylelintrc.js) Nuxtjs + Typescript 프로젝트를 진행하고 있는데, 초반 설정부터 많은 문제가 생겼다. 이전에 작업할 때는 내가 린트 설정한 적이 없어서 생기는 문제인지, (내 머리탓) 아니면 버전(현재 v2.15.8)이 달라져서 혹은 Typescript 설정으로 생기는 문제인지 모르겠으나. 결론은 골치아픈 린트 설정 문제였다. 그래서 이렇게 골치아픈 김에 이것저것 검색해보고 설정하는데 꽤나 시간을 들이고 있다. (eslint, prettier, stylelint....) 덕분에 설정에만 시간을 엄청 쏟고 있다. 뻘짓에 대한 기록글과 해결한 방법 (은 하단에!) 과정에 대한 글 .stylelintrc.js - 실패 이렇게 더러운걸 커밋했다고? ㅎㅎㅎㅋㅋㅋㅋ module.exports = { customSyn..
(work-break="keep-all") 골치 아픈 이슈 발견해서 기록상 작성 뒤에 필수표시(*)를 적용 시키려고 하다가 발견한 이슈로... word-break="keep-all"이 아닌 경우에는 붙이기가 굉장히 쉬웠다. 그냥 position: absolute해서 우측에 가져다가 붙이면 되니까. 여기서 이제 모바일에서 단어 기준으로 끊으려고 하다 발견. 떨어지는 공백 '자차'의 크기만큼 영역이 유지되고 있다. 따라서 떨어지는 글자수의 값이 다르면 필수표시(*)의 위치 값도 달라진다. 중요한 이슈가 아니다보니, 그냥 줄 바꿈 처리를 위해서 문자열 끝에 붙이기로 했다.
(force-update) gnb 같은 페이지에서 새로고침 비슷하게 reload 시키기 this.$router.push(동일path)일 경우 에러가 나고 새로 고침을 하자니 SPA페이지에서 낭비인 것 같기도 해서 어떤 방식을 써야하나? 고민을 하다가 찾은 방식. (기록을 위한 작성) 검색하다가 알게된 블로그에서 3가지 방식을 알려주고 있었다. v-if 방식, forceUpdate 방식, 그리고 key를 통한 방식. 가장 추천하는 방식으로 (vue가 원하는..?) 진행했다. 레이아웃 단계에서 진행. base-header 컴포넌트에 gnb가 있으며 nuxt 컴포넌트는 페이지이다. // BaseLayout.vue // base-header.vue {{nav.name}} // .... * 출처: 3가지 방식을 안내해줌 https://michaelnthiessen.com/force-re-render/
(lodash) 값 타입에 따라 isUndefined, isEmpty 뭐를 써야할까? isUndefined와 isEmpty 비교 console.log('빈 배열', `isUndefined: ${isUndefined([])} / isEmpty: ${isEmpty([])}`); console.log('빈 오브젝트', `isUndefined: ${isUndefined({})} / isEmpty: ${isEmpty({})}`); console.log('빈 문자열', `isUndefined: ${isUndefined('')} / isEmpty: ${isEmpty('')}`); console.log('null', `isUndefined: ${isUndefined(null)} / isEmpty: ${isEmpty(null)}`); console.log('undefined', `isUndefined: ..