본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


전체 글674

[Vuejs] chartjs 오류(NS_ERROR_FAILURE, chart.js, vue-chartjs) 뷰 환경에서 무료 라이센스 차트의 최강자인 차트js를 설치 해 보았습니다. 물론 처음 개발을 하기에..가장 최신버전으로 설치를 하였습니다. * 23년도 4월 기준으로 아래 버전으로 설치 하였습니다. { "chart.js": "^4.2.1", "vue-chartjs": "^5.2.0" } 워낙 훌륭한 차트답게 사용법도 쉽고 레퍼런스가 많아서 적용하는 데 문제는 없었습니다. 바, 선형, 원형 등 기존의 chartjs에서 제공하는 모든 차트를 사용 가능 하였으며, 사용법과 옵션도 거의 비슷 했습니다. https://vue-chartjs.org/ 📈 vue-chartjs vue-chartjs.org 그런데 차트 1개를 컴포넌트에서 사용 할 때는 아무런 이상이 없었지만, 2개 이상의 차트를 화면에서 표출하는 경우.. 2023. 4. 5.
[Vuejs] router view 그리고 transition 적용 잘 안될 때 vuejs 3버전에서 RouterView와 Transition을 힘들게 적용하여 보았습니다. 라우터 뷰(router-view) 에서 이넘의 트랜지션(transition)을 적용하는게 생각보다 어려웠었습니다. 공식 사이트에서도 정말 간단하게 설명해서..참.. 아래는 개발 환경에 사용된 package.json 파일의 일부 내용 입니다. * 파일이름 : package.json { "dependencies": { "vue": "^3.2.47", "vue-router": "^4.1.6", "vuex": "^4.1.0" }, "devDependencies": { "@vitejs/plugin-vue": "^4.0.0", "vite": "^4.1.4" } } 그리고 아래 코드는 공식 사이트에 설명된 router에 tr.. 2023. 4. 4.
[Vuejs] vuex보다 편한 pinia에서의 세션 스토리지(sessionStorage) 적용 방법 vuex 환경에서 세선스토리지(sessionStorage)나 로컬스토리지(localStorage)를 사용하기 위해서는 아래와 같은 방법을 사용 하였습니다. 1. window 객체인 sessionStorage를 직접 적용하여 줍니다. 2. vuex-persistedstate 모듈을 추가 합니다(npm i vuex-persistedstate) 3. pinia-plugin-persistedstate 모듈을 추가 합니다(npm i pinia-plugin-persistedstate) 첫번째 방법은 일단 손도 많이가고 간단한 설정을 할 수 없기에 두번째 방법을 주로 사용하는데.. vuex-persistedstate 모듈(라이브러리)을 사용하기 위해 npm에 접속 해 보았더니.. 디프리케이티(deprecated)드 .. 2023. 4. 3.
[커리어리] 한국판 스택오버 플로우 커리어리(careerly) 개발자 커뮤니티하면 생각나는 것이 바로 스택오버 플로우(stackoverflow) 입니다. 각종 방대한 양의 자료와 내용으로 구성되어 있으며, 다양한 주제를 통하여 각종 정보를 제공 합니다. 개발관련하여 구글링하면 가장 먼저 나오는 커뮤니케이션 사이트라 할 수 있습니다. 그러면 이제 스택오버플로우에 아래 주제로 한번 검색을 해 봅니다. "취업 준비를 위해서는 무엇을 해야 하는가?" → "What should I do to prepare for a job?" 아래는 검색하여 나온 결과 입니다. 스택오버 플로우에서 검색해서 나온 "취업준비" 라는 개념이 한국에서 생각하는 개념과 맞을 수가 없습니다. 왜냐하면 국내IT 문화와 해외IT 문화는 엄연히 상이하기 때문 입니다. 또한 취업하는 절차도 다르겠지요.. 그.. 2023. 4. 2.
[Html css Flex] style flex 내용 압축 정리 #1. 부모에 적용하는 기능 1. 자식 노드를 정렬하는 방법 입니다. { display: flex; /* 가장 기본 of 기본 */ /* row는 1줄에 전부, column은 1개가 1줄 차지 */ flex-direction: row; flex-direction: column; flex-direction: row-reverse; flex-direction: column-reverse; } 2. 자식 노드 크기가 부모보다 클 경우 어떻게 표현할지 정하는 기능 입니다. { /* wrap은 넘어가면 다음 행으로, nowarp은 넘어가든 말든, reverse가 붙으면 역으로 표현 */ flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; } 3. 위 1번과.. 2023. 3. 30.
[Vuejs] 타입스크립트(Typescript) 적용, 모듈 또는 해당 형식 선언을 찾을 수 없습니다. * 개발도구 : vs코드(VSCode) * 운영체제 : 윈도우 뷰에서 타입스크립트(typescript)를 적용해 보았는데 아무 행위도 안했는데 만났던 오류 입니다. 난 그저 단지 설치하고 소스코드를 눌러서 보려고 했을 뿐 인데.. 뭐...라는거지 이해가 안되었습니다. 아무것도 안했는데 저러한 오류가나니...프로젝트를 다시 생성 해 보기도하고, 캐쉬클린까지 해 보았었습니다. 좀더 당황스러운 것은 저 상황에서도 빌드나 실행은 잘 되었습니다. 그래서 문뜩 든 생각이 "개발 도구 설정에 문제가 있겠다" 였습니다. 구글링을 하여보니 역시나 위 현상은 개발도구에서의 문제로 설명하고 있으며, 개발도구가 VS코드 인 경우 만날수 있다고 나와 있습니다. 이를 해결하기 위해서는 아래 단계를 따라가도록 합니다. 1. Ctr.. 2023. 3. 24.