반응형 Study34 [Next] Next.js 핵심 기능 정리(Page Router 기준) [Next] Next.js 핵심 기능 정리(Page Router 기준) Next.js 설치 방법 npx create-next-app@latest // 최신 버전 설치 npx create-next-app@12 // 12.3.4가 설치 된다. Next.js 핵심 기능 정리 1. pages 파일 기반 라우팅(File Base Dynamic Routing) Next.js는 File System 기반 라우팅을 제공한다. 파일 기반 라우팅 VS 코드 기반 라우팅 파일 기반 라우팅(File-base) 보일러 코드가 필요하지 않다. 직관적이다. 파일과 폴더의 구조가 라우팅에 영향을 미친다 코드 기반 라우팅(Code-base) 보일러 코드가 필요하다.(, … ) 라우팅의 개념에 대해 새롭게 배워야 한다. 파일과 폴더 구.. 2023. 12. 15. [번역] 프론트엔드 렌더링: SSG vs ISG vs SSR vs CSR - 언제 어떤 것을 사용해야 할까요? 외국의 좋은 아티클을 발견해서 오늘은 회사 이슈가 없는 김에 chatGPT의 힘을 빌려 발번역을 하였다. Next.js 공부하는데 SSG, SSR, ISG, CSR 모르면 큰일 나니까 개념을 숙지하고 개발하자! 원문 링크: https://tapajyoti-bose.medium.com/frontend-rendering-ssg-vs-isg-vs-ssr-vs-csr-when-to-use-which-1bf9f39ff07c Frontend Rendering: SSG vs ISG vs SSR vs CSR — When to use which?Want to learn about the frontend rendering strategies? You have come to the right place. After read.. 2023. 7. 7. [JS] toLocaleString() 날짜와 숫자의 현지화(천단위 콤마) [JS] toLocaleString() 날짜와 숫자의 현지화(천단위 콤마) 자바스크립트 날짜와 숫자의 현지화 ( = 숫자 천단위 콤마 찍기) 숫자타입의 변수에만 콤마(,)를 찍는다. 문자열타입의 숫자는 콤마를 찍지 않으니 참고! // 날짜 데이터 현지화 const date = new Date(); console.log(date) // Thu Jul 06 2023 14:27:17 GMT+0900 (한국 표준시) const localDate = date.toLocaleString(); console.log(localDate) // '2023. 7. 6 오후 2:27:17' // 숫자 타입 현지화(천단위 콤마) const number = 1000 const string_number = '1000' // 숫자타.. 2023. 7. 6. [Node] Node.js의 버전을 변경해보자.(nvm) [Node] Node.js의 버전을 변경해보자.(nvm) nvm을 왜 써야하지?회사 개발 환경과 나의 개인 PC의 개발 환경이 상이하여 프로젝트가 실행이 안될 수 있기 때문에, nvm(node version manager)을 사용하면 node.js를 버전을 스위칭할 수 있다. 쉽게 말하면, nvm은 내가 원하는 node.js의 버전을 쉽게 오가는 매니지먼트 시스템인 것이다. NVM 설치 및 사용법(윈도우) [윈도우]https://github.com/coreybutler/nvm-windows GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.A node.js ve.. 2023. 7. 4. [라이브러리] 정말 쉽고 간결한 리액트 상태관리 라이브러리 Zustand! Zustand란? 리액트 상태관리 라이브러리이다. context 사용시의 중첩 Provider 지옥을 벗어날 수 있고 hook처럼 사용 가능하다. 코드가 매우 간결! 상태 변경시에만 컴포넌트를 렌더링하는 메모이제이션도 가능하다. 1. Zustand 설치 방법 npm install zustand # or yarn add zustand 2. Zustand 사용법 // store.js // Devtool 연동 없이 store 생성 방법 import create from "zustand"; // create로 zustand를 불러옵니다. const useBearStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bear.. 2023. 7. 4. [Error] 윈도우 맥 포트 죽이기(Error: listen EADDRINUSE: address already in use) [Error] 윈도우 맥 포트 죽이기(Error: listen EADDRINUSE: address already in use) 눈누난나 이슈 처리하려고 npm run dev 돌렸더니 Error: listen EADDRINUSE: address already in use :::8082 이런 에러가 나왔다. 컨트롤 + C 해서 종료 해봤지만 여전히 포트가 살아있는 상태여서 발생한 문제이니 강제로 포트를 죽이자. 윈도우 포트 죽이는 방법 1. 커맨드 창 열기(관리자 권한) 2. netstat -a -o 명령어 입력 // 명령어 입력 netstat -a -o 2. 찾고자 하는 포드번호 리스트 찾기(나의 경우 8082) 3. 8082 리스트의 PID 번호 기억하기(나의 경우 21448) 4. taskkill /f.. 2023. 6. 29. [Figma] 피그마 개발자 모드 업데이트 및 VSCode 플러그인(Figma Dev mode with Figma for VS Code) [Figma] 피그마 개발자 모드 업데이트 및 VSCode 플러그인 (Figma Dev mode with Figma for VS Code) 후후 어도비 이놈들 피그마를 완전 유료화(?) 시킬 빅픽쳐를 그리는 것인가 엄청난 것을 업데이트 했군.. 후후후 개발자 모드라니!! 심지어 VScode 플러그인 까지 출시 하다니! 피그마의 개발자모드 출시(2023.06.22) 얼마전 한국 시간으로 6월 22일 오전 1시 피그마 컨퍼런스 2023(config 2023)에서 엄청난 것을 선보였습니다. 피그마에 개발 지향적 업데이트가 이루어졌는데요. 바로 개발자모드(Dev mode)를 공개한 것입니다. 전체적으로 패널이 변경 되어서 마치 크롬 개발자 모드 창을 오픈한 것과 같은 느낌으로 변했습니다. 컴포넌트의 값과 반응형.. 2023. 6. 28. [라이브러리] exceljs를 활용하여 JS데이터를 엑셀 파일로 추출해 보자. [라이브러리] exceljs를 활용하여 JS데이터를 엑셀 파일로 추출해 보자. 서론 사내에서 React 환경에서 CMS 개발 파트 담당하다보니, 드디어 테이블 데이터를 추출하여 엑셀 파일로 다운로드 받을 수 있는 기능을 구현하게 되었다. 넘넘 신나고 재밌서..! 😎 exceljs란? exceljs란 javascript에서 데이터를 엑셀로 추출 및 조작할 수 있는 node 환경 라이브러리로, 특정 셀의 스타일을 커스텀하고 합칠 수 있는 장점이 있는 라이브러리이다. 공식문서 링크 npm exceljs 링크 https://www.npmjs.com/package/exceljs exceljs Excel Workbook Manager - Read and Write xlsx and csv Files.. Latest .. 2023. 6. 28. [React] 리액트 차트 라이브러리 Recharts.js 적용기(React chart library Recharts.js) [React] 리액트 차트 라이브러리 Recharts.js 적용기(React chart libray Recharts.js) Recharts.js란?Recharts.js란 리액트 기반 차트 라이브러리이다. 어쩌다보니 다니는 회사마다 CMS나 어드민 페이지만 주구장창 개발하게 되어서 그런지 그전에는 Chart.js를 사용했었는데 이번 회사에서는 Recharts.js를 사용하게 되었다. 공식문서 링크https://recharts.org/en-US 설치방법$ npm install recharts 적용예제 나의 경우 기간 설정에 따라 차트 데이터가 동적으로 Fetching 되어야 하고, 범례를 클릭할 때마다 차트가 전시/비전시 처리가 되어야 했다. 그리고 X / Y 축, 범례, 툴팁, 그리드 등을 ‘모.두’ 커스.. 2023. 6. 27. 이전 1 2 3 4 다음 반응형
