072DATA

Throttling을 알아보다가 렉시컬 환경과 클로저에 대한 이야기가 나와서꼭 이 부분을 학습해야 편할 것 같아 이래저래 찾아보고 열심히 학습해보았다 렉시컬 환경(Lexical Environment) -> 어휘적 환경?코드가 작성된 그 문맥의 환경을 의미 -> 약간 범위를 나타내는 말로 유추가 됨변수나 함수가 선언된 위치에 따라 해당 변수나 함수가 접근할 수 있는 범위가 결정됨 -> 참 말이 어려움ㅋㅋㅋㅋfunction outer() { let x = 10; // 렉시컬 환경의 일부 function inner() { console.log(x); // inner 함수는 outer의 렉시컬 환경에 접근 가능 }} 코드로 보면 조금이나마 이해가 되는데 그렇다면 함수안에 있는내부 함수들은 자신..

Throttling은 성능 최적화를 위한 프로그래밍 기법이며이벤트나 함수 호출의 횟수를 제어하는데 사용됨 비슷한 기법으로 debouncing이 있음(내일 써야지 ㅎㅋ) Throttling (쓰로틀링)일정 시간 동안 함수가 한 번만 실행되도록 제한하는 기법특징마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 함정해진 시간 간격으로 함수를 실행사용 예시: 스크롤 이벤트, 무한 스크롤, 실시간 데이터 갱신, API 요청 제한export function throttle any>( func: T, delay: number): (...args: Parameters) => void { let isThrottled = false; return (...args: Parameters) => {..

Next.js를 사용한 프로젝트에서 글 작성 페이지 구현하기 이번 포스트에서는 Next.js와 Zustand를 사용해 글 작성 페이지를 구현하는 방법을 기록하겠습니다물론 이 페이지의 경우 클라이언트 사이드 렌더링을 사용하기 때문에 리액트와 다를 건 없습니다...ㅎㅎ 참고로 글 작성 기능은 이미지 업로드, 상태 관리, 폼 데이터 처리 등의 요소를 포함하고 있습니다. 1. Zustand로 상태 관리하기 먼저, 작성 페이지에서는 사용자 정보와 날씨 정보를 포함한 상태를 Zustand를 통해 관리합니다여기서는 세 가지 상태를 사용해요useUserStore: 사용자 정보를 관리.useWeatherStore: 날씨 데이터를 관리.useWriteStore: 작성 폼에 필요한 데이터를 관리.const { user } ..

이미지 업로드  supabase를 사용하여 스토리지 기능으로 이미지를 업로드하는 방법 파일 업로드 창 안 보이게 하기우선 파일 업로드 창이 못 생겼으니 숨기고 나서 지정한 영역을 클릭하면 파일 업로더가 표시되도록 구현 파일 업로드 버튼을 테일윈드를 사용하여  hidden 속성으로 보이지 않게 하고,사용자가 이미지를 클릭하면 파일 선택 창이 열리도록 구현하였음이를 위해 useRef를 사용해서 클릭 이벤트로 파일 선택 창을 열 수 있게 함.const fileInputRef = useRef(null);// 미리보기 창 선택 시 이미지 업로더 선택const handlePreviewClick = () => { if (fileInputRef.current) { fileInputRef.current.click..

프로젝트를 진행하면서 간단하게 모달창을 구현해 보았다 라이브러리를 설치하여 모달 창을 만드는 방법도 있었지만 직접 만들어 보고 싶었다! 모달 컴포넌트import { ModalTypeC } from "@/types/modal";import React from "react";import styled from "styled-components";const Modal: React.FC = ({ isModalOpen, closeModal, children }) => { if (!isModalOpen) return null; return ( e.stopPropagation()}> {children} );};export default Modal; 먼저 Modal ..

Metadata 설정 Metadata는 Next.js에서 페이지의 메타데이터를 설정하는 객체이며사용자 경험을 개선하는 데 중요하고  SEO와 각 페이지의 고유한 정보를 설정할 수 있음// 전체 layout.tsxexport const metadata: Metadata = { title: "LoL", description: "롤 정보 페이지", icons: { icon: "/images/fav2.png", },};title: 브라우저 탭에 표시되는 페이지 제목 description: 페이지 설명으로, 주로 검색 엔진에서 사용됨icons: 브라우저의 탭에 표시될 아이콘의 경로 설정 근데 이제 icons의 경우 public/images 폴더 안에 이미지를 넣어서 사용했는데 public/images..

4가지 렌더링  CSR(Client Side Rendering) 특징브라우저에서 JavaScript를 이용해 동적으로 페이지를 렌더링렌더링의 주체가 클라이언트임장점최초 로드를 완료한 뒤 상호작용이 빠르고 부드러움서버에게 추가적인 요청을 보낼 필요가 없기 때문에, 사용자 경험이 좋음.서버 부하가 적음단점첫 페이지 로딩 시간(Time To View)이 길 수 있음JavaScript가 로딩 되고 실행될 때까지 페이지가 비어있어 검색 엔진 최적화(SEO)에 불리함 "use client" // useEffect, useState와 같은 훅을 사용시 꼭 작성해줘야 함import ProductList from '@/components/ProductList';import { Product } from '@/types'..

Next.js에서 라우팅Next.js에서 페이지 이동을 하는 방법은 파일(폴더) 기반 라우팅임먼저 구조와 요소에 대해서 알아야 함구조와 요소Tree계층 구조를 시각적으로 보기 위한 규칙 (위 -> 아래)임DOM Tree도 같은 구조를 가짐, 큰 틀SubTreetree의 한 부분임. root부터 시작하고 leaf들에 이르기까지의 범위Roottree 또는 subtree의 첫 번째 부분임. root layout처럼 가장 첫 번째 노드, 요소Leafchildren이 없는 마지막 노드, 요소URL 관련 용어 정리URL은 크게 도메인과 Path 부분으로 나뉨URL Segment슬래시로 분류된 URL path의 한 부분임URL Path, Pathname앞에 있는 도메인을 제외한 뒷 부분에 있는 전체임File Syst..

Next.js: High-Quality 웹 애플리케이션High-Quality란?성능SSR(서버 사이드 렌더링) 및 SSG(정적 사이트 생성)를 통해 초기 로드 시간 단축코드 스플리팅과 이미지 최적화로 런타임 성능 향상코드 스플리팅 예시*import React, { Suspense, lazy } from 'react';const LazyComponent = lazy(() => import('./LazyComponent'));function App() { return ( Loading...}> ); } export default App;SEO ->  Search Engine Optimization (웹..

오늘은 TypeScript를 학습하는 과정에서 TodoList를 만들었으며 그 과정을 기록해도록 하겠습니다. 프로젝트 세팅 TypeSript 프로젝트 생성은 생략하며, 먼저 API 요청을 하기위해서 JSON 서버를 Install 합니다npm install json-server  설치를 완료한 뒤 root 경로에 db.json 파일을 추가하여 키와 값을 입력합니다, 형식은 아래와 같습니다!{ "todos": [ { "id": "1", "text": "할 일 1", "completed": false } ]}  또 원할한 프로젝트 구현을 위하여 json-server 명령어를 .pakage.json의 scripts에 추가합니다 "scripts": { //... ..