프론트엔드 썸네일형 리스트형 [Next.js14] Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.(feat. react-query) Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported. 문제의 코드tanstack/react-query 사용 중 에러가 발생했다.import { QueryClient, QueryClientProvider } from "@tanstack/react-query";import ProtectedRoute from "@/components/ProtectedRoute";import Sidebar from "./components/Sidebar";export default function Dashbo.. 더보기 [네트워크] OSI 7계층 (OSI 7 Layer) OSI 7계층OSI 7계층이 생긴 이유1980년대 초 개인용 컴퓨터가 보급되기 시작하면서 인터넷을 사용하는 사람이 크게 늘자 다른 기종의 컴퓨터끼리 네트워크를 형성할 수 있게 각 단계를 구분하고 이를 표준화하려는 움직임이 생겼습니다.그 결과 국제표준화기구(ISO)에서 통신이 일어나는 과정을 크게 7단계로 구분하고 단계별 표준을 정의한 것이 바로 OSI 계층입니다. OSI의 뜻은 개방 시스템 상호 연결(Open Systems Interconnection)인데, 간단하게 말하자면 서로 다른 시스템이 잘 연결(호환)될 수 있게 하는 표준안이라 이해할 수 있습니다. OSI 7계층이 생기면서 달리진 점OSI 7계층은 역할에 따라 각 계층을 나누고 계층별로 통일된 규칙을 정의했습니다. 이렇게 네트워크 구성 요소를.. 더보기 [Web] 쿠키 사용법과 예시 (feat. 하루동안 보지 않기) 쿠키를 사용하는 이유HTTP 프로토콜의 무상태성(stateless) 때문입니다. HTTP 프로토콜은 서버가 각각의 요청을 독립적으로 처리하며, 이전 요청의 상태를 기억하지 않습니다. 쿠키는 클라이언트(사용자)의 상태 정보를 브라우저에 저장하여, 이후 요청 시 서버에 자동으로 전송되도록 합니다. 이를 통해 사용자의 로그인 정보, 장바구니 상태, 사이트 설정 등을 유지할 수 있습니다. 1. 쿠키① HTTP 프로토콜로 요청이 왔을 때, 서버는 쿠키로 구체적인 클라이언트를 알 수 있습니다. a. HTTP 프로토콜은 무상태성(stateless)으로 정보가 저장되지 않습니다! (로그인, 쇼핑몰 히스토리 등) b. 서버가 받은 각 요청은 서로 독립적이며 이전 요청과 연결되지 않습니다.② 쿠키는 key-value로.. 더보기 [Library] React와 NextUI를 활용한 커스텀 셀렉터 컴포넌트 구현 가이드 (feat. TailwindCSS) 사용 기술 스택: `@nextui-org/react`, `React`, `TailwindCSS` 1. 프로젝트 설정먼저, 이 프로젝트에 필요한 라이브러리를 설치합니다.$ npm install @nextui-org/react 2. 데모 예시 3. 커스텀 셀렉터 컴포넌트 구현이 컴포넌트는 @nextui-org/react에서 제공하는 Select와 SelectItem 컴포넌트를 사용합니다. "use client";import { Select, SelectItem } from "@nextui-org/react";import React, { useState } from "react";const items = { ALL: "모든 타입", LEGACY: "Legacy", V1: "Version 1", V2:.. 더보기 [Library] react-intersection-observer 사용법과 예시 (feat. react95) 사용 기술 스택: `react-intersection-observer`, `React`, CSSModule`1. 프로젝트 설정$ npm install react-intersection-observer --save 2. 데모 예시3. 사용 코드Text, Windows 컴포넌트는 `react-intersection-observer` 라이브러리를 사용하여 스크롤할 때 요소가 화면에 들어오면 애니메이션이나 스타일을 적용할 수 있는 기반을 제공합니다. 1) 화면에 글자 보여주기/* Text.module.css */.text { transition: all 0.3s ease-in-out;}.opacity100 { opacity: 100; transform: translateY(0);}.opacity0 { .. 더보기 [코드잇 스프린트] 프론트엔드 단기심화 3기 - 프리 코스 후기 최근, Next.js와 TypeScript를 사용한 프로젝트를 준비하면서 프리코스를 통해 학습한 내용을 정리하고자 합니다. 이번 과정은 프론트엔드 단기 심화과정으로, Next.js와 TypeScript 스택을 사용하는 데 있어서 프리 코스 덕분에 자신감을 얻는 데 큰 도움이 되었습니다.👏 코드잇 스프린트 프론트엔드 단기 심화 프리코스 : Next.js와 TypeScript의 조합 Next.js와 TypeScript는 요즘 프론트엔드 개발에서 가장 인기 있는 스택이다. 많은 기업들이 이 조합을 기본으로 사용하고 있으며, 특히 신입 개발자에게 이러한 기술 스택을 필수적인 역량으로 요구하는 경우가 늘어나고 있다. 이러한 트렌드를 반영하여, 프리코스를 통해 Next.js와 TypeScript를 집중적으로 복습.. 더보기 [React] 컨텍스트(context API) 1. useState로 상태관리 코드 구현import { useState } from "react";import Home from "./components/Home";import Navbar from "./components/Navbar";export default function App() { const [count, setCount] = useState(0); return ( );}export default function Home({ count }: { count: number }) { return ( Home Component {count} );}import Banner from "./Banner";export type Count.. 더보기 [Next.js14] 구글 로그인 버튼 한글 (google sign in button) 구글 로그인 브랜드 가이드라인 1. 시작은 디테일을 살려주고 싶다는 생각에서 부터ㅡ* Pages | NextAuth.jsNextAuth.js automatically creates simple, unbranded authentication pages for handling Sign in, Sign out, Email Verification and displaying error messages.next-auth.js.orgCSS 관련 아티클을 작성할 생각은 없었지만, 구글, 네이버 어디에서도 찾을 수가 없어서 내가 작성해야겠다 마음먹었다. (아마?🤔)공식 문서 보고 Next.js14 버전으로 GoogleProvider 설정은 다 했는데, 문서와 같이 Sign in with provider가 아닌 ① 한글.. 더보기 이전 1 2 3 다음
