네.. 코로나에 걸렸습니다. 새로운 프로젝트 시작일에 양성이 나와 일정이 일주일 밀렸습니다. 야근으로 채워야합니다 👻 테이블 라이브러리 중에 Ag-Grid라는 훌륭한 라이브러리가 있는데요. Excel 내보내기 기능은 유료버전에서만 사용할 수 있어 따로 만들어봤습니다. xlsx 라이브러리를 사용하면 JSON 형식의 데이터를 xlsx 확장자로 변환해 다운로드 기능을 구현할 수 있습니다. 다른 테이블 라이브러리를 사용하거나 객체 배열의 데이터를 xlsx 형식으로 변환시킬 수 있습니다. 셀 스타일이나 셀 병합 등 까다로운 작업이 필요하다면 sheet.js가 아닌 excel.js를 사용하는 편이 좋습니다. 1. 설치 npm i xlsx 2. 전체코드 Excel Download 3. 내보내기 코드 const get..
2022.04.16
Vue Composition API를 사용해서 Vuex로 전역관리 방법에 대해 기록해봅니다. Vuex는 리액트에서는 리덕스와 비슷한 개념이였고 다르다면, 리덕스에서는 하나의 스토어만 가진다는 약속이 있던 반면 Vuex는 여러개의 스토어를 가질 수 있었습니다. Composition API는 리액트와 비슷한 느낌이 있어 Vuex를 사용하는데 큰 어려움은 없었습니다. 1. Vuex 설치 npm install vuex@next --save 2. store.js 생성 import { createStore } from "vuex" import createPersistedState from "vuex-persistedstate"; const store = createStore({ state : { count : 0 ..
2022.04.11
리액트를 어느 정도 공부하고 뷰를 공부하는데, 정확히 어떤 부분을 알아야 하고 학습해야 하는지 대략적인 그림이 그려졌습니다. 라우터 다음은 인스턴스 라이프사이클, 그 다음으로 상태관리인 Vuex를 공부하려고 합니다. Vue.js 인스턴스 라이프사이클 리액트에서는 useEffect 훅을 사용했습니다. 뷰에서는 컴포넌트가 마운트/업데이트/언마운트 될 때, 아래에서 제공하는 라이프사이클 훅을 사용하면 특정 코드를 실행할 수 있습니다. - beforeCreated 인스턴스가 초기화된 직후, 데이터 관찰 및 이벤트/감시자(watcher) 설정 전에 동기적으로 호출된다고 한다. export default { name: 'App', beforeCreate(){ console.log('Before Created'); ..
2022.04.03
리액트를 저버리고 Vue.js를 공부해야 합니다. 이유는 간단하죠. 일 때문입니다. 새로운 프레임워크를 배워야 하기 때문에 기대가 되는데요. 이전에 Composition API 이전의 방식을 잠깐 맛만 봤었습니다. 이제 기억속에서 주섬주섬 꺼내 복습을 해보고, Composition API 방식을 새롭게 배울 겁니다. 오늘 학습한 내용인 뷰에서 라우팅 처리를 하는 방법에 대해 알아보겠습니다. 1. vue-router 설치 > npm i vue-router 다른 글에서는 라우터를 설치하면 src 폴더에 router 폴더가 생긴다는데, 저는 안 생겨서 하나 만들었습니다. 2. ./src/router/index.js import { createRouter, createWebHistory } from "vue-r..
2022.04.02
프론트앤드 개발자 신입으로 입사 후 한달이 지났습니다. 리액트를 사용해 백엔드 개발자들과 협업하며 백오피스를 개발하던 와중.. 4월 중순 SI 프로젝트에 투입하게 되었습니다.. 무슨 백오피스랑 인연이 있는건지, 이 번에는 리액트가 아닌 뷰를 사용해야 한다는 조건이며, 2명의 프론트엔드 개발자가 투입된다고 하네요. 규모가 어느정도길래.. 2명 씩이나 들어가는지 두렵습니다 😱 이제는 사용자 단 페이지를 개발하고 싶습니다.. 뷰는 2.0 버전으로 살짝 맛만 본 상태라 처음부터 공부해야하고, 리액트에 너무 적응된 나머지 뷰 문법을 보면 너무 혼란스럽네요. 회사는 어느정도 적응이 됐고, 경력과 스킬 업에만 집중해야겠습니다. 첫 월급도 아직 못 받았는데 기대됩니다.. ㅎㅎ
2022.03.31 4
2020년도 맛보기로만 경험했던 Vue.js를 다시 공부해보려 합니다. 벌써 Vue3 버전까지 업데이트 되었고 아마 이전 버전에서 CDN으로만 스크립트를 추가해 배웠던 기억이 나는데요. 새로 추가된 기능도 있고 알아보니 3.0 버전이라고 이 버전만 배우면 되는게 아니더라구요. 2.0 부터 다시 처음부터 다시 배워야합니다. 아마 학원에서는 Todo List를 맛보기로 구현해보고 저는 바로 리액트로 갈아탔습니다. 로고 때문인지, 처음 느껴보는 라이브러리 때문인지는 모르겠지만 Vue.js도 나름 독특한 매력이 느껴졌습니다. 지금 뷰3의 경우 공식문서 한글화가 안되어 있어 조금은 불편하지만 2.0 부터 다시 시작하면서 진행해보겠습니다. 1. Vue-CLI 설치 > sudo su > password 입력 > n..
2022.02.27
컴포넌트와 이벤트 버스를 이용한 TodoList [Vue.js] Vue로 구현한 TodoList.app 예제 Vue로 구현한 TodoList.app 예제 See the Pen [Vue.js] TodoList.app by junheeleeme (@junheeleeme) on CodePen. Vue.js를 공부하면서 개인적으로 메모앱을 만들려고 일단 포스팅을 했지만.. 아직 완성하지도 못.. juni-official.tistory.com 이전에 구현했던 TodoList 예제를 컴포넌트화 + 이벤트 버스를 이용하여 'list-component'와 'input-component' 사이에 정보를 교환할 수 있도록 다시 코드를 작성 1. 이벤트 버스 객체 생성 2. list-component 와 template 작..
2020.11.12
뷰 인스턴스 라이프 사이클 뷰 인스턴스(instance)는 화면개발을 하기 위해서 필수로 생성해야하는 기본단위이다. 1. beforeCreate 가장 처음에 실행되는 단계로 인스턴스가 생성되었지만 아직 속성이 정의되지 않아 돔(DOM)에 접근할 수 없다. 2. Created 인스턴스의 data 속성과 methods 속성값에 접근이 가능한 단계로 아직까지 template 속성에는 접근할 수 없다. 3. beforeMount template 속성의 마크업 속성을 render function으로 변환. 인스턴스가 돔(DOM)에 부착되기 전 단계 4. Mounted 인스턴스 el 속성에서 지정한 돔(DOM)에 인스턴스를 부착하고 바로 호출되는 단계로 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면요소가 최종..
2020.11.12
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev