stay greedy

[Next.js] App Router에서 "use client"란

Next.js 13 이후 App Router 환경에서는 컴포넌트의 기본 동작이 이전과 달라졌다. 핵심은 Server Component가 기본값이라는 점이다. 그래서 "use client"의 의미를 이해하려면 먼저 이 기본 동작을 알아야 한다.App Router 기본 동작: 모든 컴포넌트는 Server ComponentApp Router에서는 별도 선언이 없으면 모든 컴포넌트가 Server Component로 동작한다. Server Component의 특징:서버에서만 실행됨브라우저로 JavaScript 번들이 내려가지 않음서버 렌더링 중심 구조 이 구조 때문에 다음 기능을 사용할 수 없다.useStateuseEffectuseRef이벤트 핸들러 (onClick, onChange 등)window, doc..

멋사 블로그 메인 페이지의 ShareSection, FAQSection, 그리고 Header 컴포넌트에 Tailwind Media Query를 적용하여 모바일 뷰를 구성했다. 우선 ShareSection에 반응형 디자인을 적용했다.import { Button } from 'components/button';import { SectionLayout } from './section-layout';export const ShareSection = () => { const shareCardInfo = [ { title: 'STEP 1', description: '오늘의 운세를 확인하세요', img: '/images/capture1.png', }, { titl..

오늘은 멋사 세미나 과제를 수행하기 위해 다음의 세 가지 키워드로 글을 써보고자 한다.- HTTP 프로토콜과 WebSocket 프로토콜의 특징 및 차이점- Django ‘Channels’ 라이브러리 구조- React ‘useWebSocket’ Hook 사용법HTTP 프로토콜과 WebSocket 프로토콜의 특징 및 차이점HTTP와 WebSocket은 공통적으로 웹 애플리케이션에서 정보를 주고받기 위해 사용되는 통신 프로토콜이지만, 그 방식과 목적에 약간의 차이가 있다.HTTP와 WebSocket의 기본 개념HTTP는 웹 개발자라면 누구나 익숙할 프로토콜이다. 클라이언트가 서버에 요청을 보내고 서버가 응답을 돌려주는 방식이다. 주로 페이지를 새로고침할 때마다 정보가 갱신된다. 이런 요청-응답 방식을 통해 데..

1. Payment GatewayPayment Gateway는 결제를 위한 관문이란 뜻으로, 전자결제 지급대행사라고도 한다. PG는 온라인 플랫폼에서 다양한 결제 방식을 사용할 수 있게 연결해주는 역할을 한다. PG사는 카드 결제, 간편 결제, 계좌이체, 가상계좌(무통장입금), 상품권 결제, 휴대폰 결제 등 다양한 결제 방식을 사용할 수 있게 연결해준다. 고객이 온라인 환경에서 결제를 하면 상점에서 PG사로 결제 요청을 보낸다. PG사는 받은 결제 요청을 카드사 또는 은행과 같은 결제 기관으로 보내 승인받고 그 결과를 상점에 전달한다. 상점에서 금액이 지불되었음을 확인하면 고객에게 물건을 전달한다. 고객은 구매 금액을 결제기관에 지불하고, 결제기관은 PG사에게 정산해주고 PG사가 상점에게 정산해주는 형..