블로그 이름을 입력해주세요

https://ui.aceternity.com/ Aceternity UIBeautiful Tailwind CSS and Framer Motion Components, built with Next.js and TypeScript.ui.aceternity.comAceternity UI는 Next.js와 Tailwind CSS, Framer Motion, TypeScript를 기반으로 한 오픈소스 UI 컴포넌트 라이브러리입니다. 이 라이브러리는 "웹사이트를 10배 멋지게 만들어라"라는 슬로건 아래, 동적이고 시각적으로 매력적인 웹 페이지를 쉽고 빠르게 개발할 수 있도록 다양한 고급 UI 컴포넌트와 템플릿을 제공합니다주요 특징Next.js와의 뛰어난 호환성Aceternity UI는 Next.js 프로젝트에 바로..

JS를 사용하는 프론트 개발자들이 한번 쯤 들어봤을 유명한 차트 라이브러리인 echarts를 회사 요구사항에 맞춰 사용해 보았다 그 중 line chart를 만들어 보았다 다양한 차트의 종류는 공식 doc를 통해 확인 할 수 있다 https://echarts.apache.org/examples/en/index.html Examples - Apache ECharts echarts.apache.org Javascript Reactinstallnpm install echarts echarts-for-react LineChart.js// LineChart.jsimport React from 'react';import ReactECharts from 'echarts-for-react';c..

들어가면서"검색엔진의 검색은 페이지의 콘텐츠를 파악하기 위해 노력하고 있습니다 페이지에 구조화된 데이터를 포함하면 페이지 의미에 관한 확실한 단서를 제공하여 내용을 파악하는데 도움이 됩니다구조화된 데이터는 페이지에 관한 정보를 제공하고 페이지 콘텐츠를 분류하기 위한 표준화된 형식으로 예를 들어 레시피 페이지의 경우 재료, 조리 시간, 온도, 칼로리 등이 여기에 해당합니다" - 구글의 구조화된 데이터에 관한 설명 중 -왜 페이지에 구조화된 데이터를 추가하나?구조화된 데이터를 추가하면 사용자에게 더욱 눈길을 끄는 검색결과를 제공하여 웹사이트와 더 많이 상호작용하도록 유도할 수 있으며, 이를 리치 결과라고 한다 사이트에 구조화된 데이터를 구현한 웹사이트의 우수사례를 살펴보면 다음과 같다.Rotten Tomat..

💡 시작하면서회사에서 요청사항이 들어왔습니다 회사 사이트를 검색해도 다른 사이트들이 나오거나 결과가 나오지 않는다는 것이었습니다 확인해본 결과 구글에서 사이트를 검색할 때, 정확한 검색어를 입력했음에도 불구하고, 사이트 이름 외에는 다른 페이지들이 우선순위에서 밀리고 있었습니다 SSR 작업을 진행하며 SEO 최적화를 어느 정도 했다고 생각했지만, 중요한 부분을 놓치고 있었습니다 바로 시맨틱 마크업입니다 시멘틱 마크업은 왜 중요한가?SEO(검색엔진 최적화)가 중요해지면서 더 많은 노출 수와 트래픽을 유도하여 광고 효과를 극대화할 수 있는 방법들이 많아지고 있습니다시맨틱이란 의미 자체가 의미, 의미론적인 이란 뜻을 가지고 있는데 지금 우리는 개발을 할 때 너무 많은 를 사용하고 있지 않나요?쉽게 말하면 ..

Tanstack Query의 두 번째 포스트입니다 Tanstack Query로 받아온 데이터를 변경할 때 조금 더 효과적으로 처리할 수 없을까요?그 답은 Mutations에 있습니다 💡 Mutations을 사용하는 이유비동기적인 데이터 변경 관리Mutations는 데이터를 변경하는 비동기 작업을 다룰 때 사용됩니다. 예를 들어, 서버에 데이터를 POST, PUT, DELETE 하는 요청을 보낼 때 사용됩니다. 이를 통해 클라이언트에서 데이터를 변경하고 서버와 동기화할 수 있습니다자동적인 캐시 업데이트자동 캐시 업데이트는 Tanstack Query의 주요 특징 중 하나입니다. mutation 후 서버로부터 받은 응답 데이터를 자동으로 캐시에 반영하여, 이후의 조회 요청이 최신 상태의 데이터를 제공할 수 ..

들어가면서코드를 설명하기 전  SSR(Server-Side Rendering)이 중요한 이유를 알아야 한다리액트는 CSR방식을 채택함으로써 웹을 앱처럼 별도의 새로고침 과정이 없이 데이터를 동적으로 핸들링할 수 있게 하여 사용자는 깜빡이는 현상을 느끼지 않고 웹을 경험할 수 있게 만들었다하지만 시간이 지날수록 다시 SEO가 중요해졌고 CSR은 페이지에서 보이는 데이터의 양이 많을수록 느리다는 단점이 있어 이를 보완하고자 나온 게 Next.js라고 할 수 있다리액트로 개발을 즐겨했던 개발자라면 대부분 알고 있는 리액트와 리액트 쿼리(구)를 사용 했을텐데 Next.js에서 리액트 쿼리를 쓸 필요가 있나 하는 의견들도 간혹 있었지만 현재 Tanstack Query (구) react-query는 Next.js에..

https://zustand-demo.pmnd.rs/ Zustand zustand-demo.pmnd.rs 프론트엔드에서 자주사용 하는 전역상태를 관리하는 라이브러리가 몇 개 있다 대표적으로 Redux, recoil, zustand 세 가지가 있는데 그중 현재 내가 자주 사용하고 있는 zustand의 사용법이다 먼저 zustand는 store란 개념이 있는데 쉽게말해 store에 내가 사용하는 상태와 상태를 조작할 수 있는 함수를 넣고 필요한 컴포넌트에서 사용하는 방식이다 zustand의 장점을 말해보자면 1. 불필요한 상태변화에 따른 렌더링을 최소화 한다 (속도 개선) 2. 쉽다!! root 경로여도 되고 next.js라면 page경로여도 상관없다 Store set을 관리할 store 폴더를 만들어주고 ..

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다. 출처란? 웹 콘텐츠의 출처(origin)는 접근할 때 사용하는 URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의 됩니다. 두 객체의 스킴, 호스트, 포트가 모두 일치하는 경우 같은 출처를 가졌다고 말합니다. 일부 작업은 동일 출처 콘텐츠로 제한되나, CORS를 통해 제한을 해제할 수 있습니다. CORS 정책은 우리가 가져오는 리소..