네.. 코로나에 걸렸습니다. 새로운 프로젝트 시작일에 양성이 나와 일정이 일주일 밀렸습니다. 야근으로 채워야합니다 👻 테이블 라이브러리 중에 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
로딩 스켈레톤 UI(Skeleton UI) HTML과 CSS로 간단하게 구현해본 스켈레톤 UI 입니다. 로딩 화면에서 보여줄 수 있는 대표적인 UI로는 스피너나 프로그래스바 등이 있는데, 개인적으로 저는 스켈레톤 UI가 좋습니다. See the Pen Untitled by junheeleeme (@junheeleeme) on CodePen. 게시글 목록의 레이아웃으로 만들어봤고, 글 상세페이지나 다른 페이지의 레이아웃에 따라 만들어야하는 단점이 있습니다. 로딩 시간에 따라 keyframe 속도를 조절하면 좋습니다.
2022.04.05 3
리액트를 어느 정도 공부하고 뷰를 공부하는데, 정확히 어떤 부분을 알아야 하고 학습해야 하는지 대략적인 그림이 그려졌습니다. 라우터 다음은 인스턴스 라이프사이클, 그 다음으로 상태관리인 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
쿼리 스트링(Query String) 쿼리 스트링이란, 사용자가 입력한 데이터를 전달하는 방법 중 하나로 미리 정해진 규칙으로 URL주소에 담아 넘겨주는 방식이다. 쿼리 스트링의 3가지 규칙만 알고 있으면 문제없이 사용할 수 있다. 쿼리 스트링 형식 http://host:port/path?name=꾸생&age=secret 쿼리 스트링 규칙 1. '?' 물음표는 쿼리 스트링의 시작을 의미한다. 2. 파라미터는 key=value의 형식을 같으며, '=' 문자열로 한 쌍을 이룬다. 3. 파라미터 개수가 여러개일 경우 '&' 문자열로 이어붙여 작성할 수 있다.
2022.03.27
Context API Context API는 리액트 프로젝트 내 전역 상태 관리에 사용되는 리액트 훅입니다. 전역 상태 관리를 위해 Redux, MobX, Recoil 등의 라이브러리가 있지만, 리액트 자체에서 지원하는 Context API를 사용하면 러닝 커브도 줄이면서 쉽게 전역 관리를 할 수 있는 장점이 있습니다. 전역 상태를 관리하지 않으면 컴포넌트마다 State를 하위로 분배해야 하는 프롭스 드릴링(Props Drilling)이 필수라, 프로젝트 관리에 어려움이 생깁니다. Context 생성 // ./src/Context/StoreContext.js import { createContext } from "react" export const store = createContext(null); sr..
2022.03.13
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev