뚝딱뚝딱 코딩 기록_

[Github Packages 배포하기] 여러 프로젝트를 개발하면서 같은 기능을 사용하는 경우가 많았다. 서로 다른 repository를 사용하기 때문에 같은 기능의 함수를 복사해서 가져와 사용하는 일이 많아졌고, 수정사항이 생기면 모든 repository에서 변경해야하는 상황도 종종 생겼다. 이런 중복되는 일을 줄이기 위해 프론트엔드 개발자인 팀원분과 고민하던 중 github packages에 대해 알게 되었다. 그래서 github packages와 npm의 차이점과 typescript, github packages로 패키지, 모듈을 배포하는 과정에 대해 공부해보려고 한다. ❓ Github Packages 소프트웨어 패키지를 private 또는 public으로 호스트하고 프로젝트의 종속성으로 사용할 ..

[redux-toolkit] 리액트로 진행한 프로젝트에서 리덕스를 공부한 적이 있는데 리덕스의 보일러 플레이트 코드를 간소화하기 위해 리덕스 툴킷 (redux-toolkit, rtk)를 사용한 적이 있다. 공부하면서 노션에 정리해놓은 것을 다시 복기할 겸 정리하려고 한다. 상태 관리 라이브러리 (state management library) → redux, modox, recoil 등 state가 상위 component로 올라갈수록 관리하기 복잡해지는 현상 해결 Redux toolkit (RTK) Redux 로직을 작성하고 저장소를 설정하는 프로세스(redux 작업)를 단순화 redux 저장소 구성의 복잡성, 많은 패키지 추가, 상용구 코드 해결 위해 사용하는 도구 API configureStore() ..

[Toy Project_ To Do List] 📜 토이 프로젝트 소개 📃 목적 : Typescript 연습 + React 기본 기술 복습 📃 기능 할일 추가, 삭제 완료 목록 체크 다크 모드 / 라이트 모드 항목 상태 별로 보여주기 (All, Active, Completed) 📃 사용 기술 : Typescript, React, PostCSS 📃 결과물 Typescript를 연습하면서 React도 기초부터 복습할 겸 To Do List를 만들어 보았다. Event Type을 지정하는 것과, ContextAPI를 이용하여 다크모드를 구현하는 과정에서 타입을 지정하는 부분에서 조금 시간이 걸렸다. Typescript를 조금 더 능숙하게 사용할 수 있도록 공부해야겠다. 👉To Do List 코드 전체보기👈 Gi..

[Project_HNTECH Hompage Dev] 🚒 프로젝트 소개 🧯 목적 : HNTECH 회사 홈페이지 제작(개발) 🧯기능 제품 정보 확인 (제품 소개 게시판) 자료 업로드 / 다운로드 (사진, 문서) 게시글 업로드 / 댓글 작성 관리자 페이지 - 로그인, 회사 정보 수정 등 PDF 프리뷰어 (미리보기) 반응형 모바일 웹 화면 🧯개발 기간 : 2022.08 - 2022.10 🚒 사용 기술 🧯 front Language : TypeScript, HTML, CSS Library : React, Redux, Material-UI, react-dnd, react-pdf Tool : Redux Toolkit, Vite API : axios 🧯 back Spring Boot (Kotlin), MySQL, Sp..

[React_ react-pdf] 리액트로 PDF 프리뷰어 만드는 방법에 대해 알아보자 1. react-pdf 설치 npm install react-pdf 2. 필요한 컴포넌트 임포트 + pdf.worker.js 활성화 import { Document, Page, pdfjs } from 'react-pdf'; // pdf.worker.js 활성화 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; 📜 pdf.worker.js를 활성화하지 않으면 pdf 파일이 보이지 않으니 유의해 주세요! 3. 코드 추가 import React from 'react'; imp..

[React+Vite_proxy] React + Vite 에서 proxy 설정하는 방법에 대해 알아보자 🐾 proxy 설정 // vite.config.ts import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], server: { // 추가하기 proxy: { '/api': { target: 'url', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') }, } } }) - vite.config.ts 파일에 server 부분을 추가해 주면 된다 🐾 axios axios...

리액트로 게시판을 구현하던 중 내용을 작성하는 부분에 CKEditor를 적용해 보았다. 1. CKEditor 설치 npm install --save @ckeditor/ckeditor5-react npm install --save @ckeditor/ckeditor5-build-classic or npm install --save @ckeditor/ckeditor5-build-inline or npm install --save @ckeditor/ckeditor5-build-balloon or npm install --save @ckeditor/ckeditor5-build-balloon-block or npm install --save @ckeditor/ckeditor5-build-decoupled-docum..