sohyeon kim

💡 D3.js 란? (Data-Driven Documents)웹에서 데이터를 시각화하는 데 사용되는 자바스크립트 라이브러리주로 동적인 데이터 기반의 그래픽을 만들 때 사용SVG, HTML, CSS 등을 활용해 데이터를 시각적으로 표현할 수 있게 도와줌클라이언트 측에서만 동작하는 라이브러리이므로 Next.js 의 서버사이드에서 사용하지 않도록 설정 필요기본 개념DOM 조작 : D3.js 는 HTML, SVG 요소들을 조작해 데이터를 시각화한다.select, append, attr, style 등의 메서드를 사용해 DOM 요소를 동적으로 생성하고 스타일을 변경할 수 있다.데이터 바인딩 : 가장 중요한 특징 중 하나로 데이터와 DOM 요소를 바인딩할 수 있다.data() 메서드를 사용해 데이터를 바인딩 하고..

💡 Next.js 공식문서 정리 - 데이터 가져오기 Data Fetching1. 데이터 가져오기 Data Fetching데이터 가져오기는 모든 애플리케이션의 핵심 부분이다. 선호하는 방법을 사용해 데이터를 가져오는 모범 사례를 살펴보자. 데이터를 서버에서 가져올까, 클라이언트에서 가져올까?이는 구축 중인 UI 의 유형에 따라 다르다. 실시간 데이터(e.g. 폴링)가 필요하지 않은 경우, 서버 컴포넌트를 사용해 서버에서 데이터를 가져올 수 있다. 이렇게 하면 몇 가지 이점이 있다.단일 서버 라운드 트립으로 데이터를 가져올 수 있어 네트워크 요청 수와 클라이언트-서버 워터폴을 줄일 수 있다.클아이언트에 노출되면 안되는 민감한 정보(e.g. 액세스 토큰 및 API 키)를 보할 수 있다.애플리케이션 코드와 D..

💡 Next.js 공식문서 정리 - 라우팅 Routing1. 시작하기Next.js란?풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크사용자 인터페이스를 만들기 위해 React 컴포넌트를 사용하고, 추가 기능 & 최적화를 위해 Next.js 를 사용한다.내부적으로 Next.js 는 번들링, 컴파일링 등 React 에 필요한 도구를 추상화하고 자동으로 구성한다.➡️ 이를 통해 설정에 시간들이지 않고 애플리케이션 구축에 집중할 수 있다.Next.js 의 주요 기능라우팅 : 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 컴포넌트 기반의 파일 시스템 라우터렌더링 : 클라이언트 및 서버 컴포넌트를 사용한 렌더링, 정적 및 동적 렌더링으로 서버에서 추가 최적화, Edge 및 Node..

💡 리액트 폭죽 효과를 넣어보자! yarn add react-canvas-confetti or npm install react-canvas-confetti  🎉 전체 코드page.tsx - confetti 실행 버튼을 넣은 위치import confetti, { Options as ConfettiOptions } from 'canvas-confetti';import tailwindColors from '../../../../tailwind.config'; const handleConfetti = () => { const duration = 3000; const animationEnd = Date.now() + duration; // 지금 시간부터 5초동안 폭죽 효과 // tailwind..

💡 폰트 최적화를 해보자!  Next.js 에서 제공되는 구글 폰트를 쓰고 있었는데.. 가끔 dev 나 build 시에 터미널에 위와 같은 문구가 뜨고 로딩이 백 년이 걸릴 때가 있었다. 찾아보니.. next 버전을 바꾸꺼나.. 직접 다운로드한 폰트를 넣거나.. 많은 방법이 있었는데다운로드한 폰트로 css 에 적용을 해보려 한다!  👀 FOIT? FOUT?Flash Of Invisible Text폰트 다운로드 전까지 아무 글자도 안보임다운 완료 되면 폰트 적용된 글자 보여줌Flash Of Unstyled Text폰트 다운로드 전까지 기본 폰트 글자 보여줌다운 완료 되면 폰트 적용된 글자 보여줌 👀  font - display 속성    swap웹폰트 중요 ❌, 빠른 글자 노출 중요 ⭕️기본 폰트 보..

💡 Image 컴포넌트에서 만난 오류.. db.json "companyInfo": { "name": "aotoyae's todo-list", "desctiption": "Next-todo-list Project Copyright 2024. aotoyae all rights reserved.", "image": "https://i.namu.wiki/i/d1A_wD4kuLHmOOFqJdVlOXVt1TWA9NfNt_HA0CS0Y_N0zayUAX8olMuv7odG2FiDLDQZIRBqbPQwBSArXfEJlQ.webp" }, AboutPage.json import Image from 'next/image'; const AboutPage = async () => { const response = await fet..

💡 Next.js 에서 리액트 쿼리 사용하기! 리액트에서와 별반 다르지 않다! 우선 프로젝트를 만든 후에 ~ yarn add @tanstack/react-query app/provider.tsx 생성 'use client'; // ** 필수! 클라이언트 컴포넌트에서만 사용 가능하다! import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const QueryProvider = ({ children }: React.PropsWithChildren) => { const queryClient = new QueryClient(); return ( {children} ); }; export default QueryProvider; 🚨 l..

💡 Next.js 를 배워봅시다 🥹 : 웹 개발을 위한 React 프레임워크! 개발에 필요한 다양한 기능과 구조를 제공한다.다양한 렌더링 기법 : CSR, SSR, SSG(Next.js 기본), ISR라우팅 : 파일(폴더) 기반 라우팅Route Handler : 백엔드 가능스타일링 : CSS, Sass, CSS-in-JS최적화, 번들링 : 코드 스플리팅, 이미지 최적화(img 태그가 아닌 Image 컴포넌트), 웹팩 설정 등 👀 라이브러리? 프레임워크?라이브러리: 개발자가 필요할 때 마다 설치, 혹은 호출함으로써 개발자가 능동적으로 사용하게 됨프레임워크: 프로그램이 필요한것을 개발자에게 알려줌으로써 제어권을 역전 😲 코드 스플리팅 ? 코드 분할!번들링된 파일을 잘라내 웹페이지 로딩 시간을 줄이는 ..