본문 바로가기

Programing375

2024-08-14 브라우저의 렌더링 과정 이해하기 웹 페이지 요청 -> HTML Parsing(DOM 생성) -> CSS Parsing(CSSOM 생성) -> 렌더 트리 생성(DOM 트리 + CSSOM 트리 결합) -> JavaScript 실행 -> 레이아웃 계산 -> Paingting -> Compositing -> 사용자와 인터렉션 외계어로 쓰인 것 같지만 이해하면 쉽다. 웹 프론트엔드 엔지니어라면, 우리가 만드는 웹 페이지가 브라우저에서 어떤 순서로 렌더링되는지 이해하는 것이 중요하다.(아는 게 중요한 이유) 각 단계 설명웹 페이지 요청사용자가 브라우저에 url 주소를 입력하면 브라우저는 서버에 웹 페이지를 요청한다.그리고 이 요청을 받은 서버는 이 요청이 유효하다고 판단하면 HTML, CSS, JavaScript 등의 파일을 클라이언트의 브라우.. Programing/TIL 2024. 8. 14.
2024-08-13 Cookie, Session, Web Storage 쿠키, 세션, 웹 스토리지의 공통점은 모두 웹 사이트가 어떠한 정보를 기억할 수 있도록 도와주는 장치라는 점이다.사용자가 웹 사이트를 다시 방문했을 때 기존에 입력했던 내용을 기억하거나 로그인 상태를 유지할 수 있게 도와준다. 그러나 각각의 차이는 아래와 같이 존재한다. 1. 쿠키(Cookie)쿠키는 웹 사이트가 컴퓨터에 저장하는 아주 작은 파일.로그인한 상태를 유지시키거나 이전에 장바구니에 담아 둔 물건을 기억하는 데 주로 사용됨.쿠키는 보통 만료 날짜가 있어서 그 시간이 지나면 자동으로 삭제됨.다른 웹 사이트에서도 사용자의 쿠키를 볼 수 있는 경우가 있어서 사용자의 활동을 추적할 수 있음.2. 세션(Session)세션은 웹 사이트가 사용자가 접속해 있는 동안만 정보를 저장하는 방법.예를 들어 쇼핑몰에.. Programing/TIL 2024. 8. 13.
JSON.stringify :: JSON serialization (직렬화) 자바스크립트로 프로그래밍을 하다 보면 JSON이라는 데이터 형식에 익숙할 것이다. 풀 네임은 JavaScript Object Notation인데, 이름 그대로 자바스크립트 객체를 말한다. const jsObject = { name: "John", age: 30, city: "New York"}; 위와 같은 형태가 JavaScript 객체인데, 이것은 프로그래밍을 위해 사용되는 데이터 구조이다.자바스크립트 코드 내에서 사용되는 데이터 구조라는 의미이다. 그런데 우리가 데이터를 서버와 주고 받을 때 사용하는 JSON은 이와 약간 차이가 있다. { "name": "John", "age": 30, "city": "New York"} 위의 데이터 형태가 JSON 문자열인데, key.. Programing/JavaScript 2024. 8. 12.
Next.js 서버/클라이언트 환경에서 TanStack Query 사용하기 TanStack Query, devtools 설치yarn add @tanstack/react-query @tanstack/react-query-devtoolsQueryProvider 설정QueryProvider 컴포넌트를 정의하여 앱의 최상위 컴포넌트에 TanStack Query를 제공하는 설정을 한다.TanStack Query는 리액트에서 데이터 패칭, 캐싱, 동기화를 도와주는 라이브러리이다.devtools는 개발 도구로 현재 데이터의 상태를 웹 브라우저 우측 하단 플로팅 아이콘을 통해 보여주는 라이브러리이다.// src/utils/QueryProvider.tsx'use client';import { QueryClient, QueryClientProvider,} from '@tanstack/reac.. Programing/Next.js 2024. 8. 9.
Next.js API Route로 supabase 통신하기 API Route 정의import { createClient } from '@/utils/supabase/server';import { NextRequest, NextResponse } from 'next/server';export async function POST(req: NextRequest) { try { const supabase = createClient(); const tripData = await req.json(); const { data: trip, error } = await supabase .from('trips') .insert(tripData) .select(); /.. Programing/Next.js 2024. 8. 8.

티스토리툴바