본문 바로가기

Programing371

2024-08-16 미인증 사용자에게는 블러 처리된 오버레이 모달 렌더링하기 스크린샷 구현의도복잡할 것 없는 간단한 기능이지만, 프로젝트를 기획하면서 팀에 conditional route를 제안했었다. 제안했던 이유는 크게 아래와 같다. 1) 보다 안전한 사용을 위한 회원가입을 유도 -> 회원 정보를 입력하기 위해선 가입이 필요2) 회원 정보를 입력한 사용자의 개인정보를 최소한으로 보호 우리 서비스는 마치 소개팅 앱처럼 사용자들이 입력한 정보를 토대로 안전한 매칭을 해주는 서비스이다.이에 따라 사용자가 직접 사용자의 정보를 보고 판단할 수 있도록 여러가지 소셜 기능을 기획했다. 버디즈 지수는 사용자의 사이트 이용 정도를 알고리즘에 의해 평가한다.사용자는 우리의 알고리즘을 신뢰할 수 있다고 판단하면 이 지수를 보고 자신과 매칭되는 사용자의 안전성을 평가할 수 있다. 팔로잉, 팔로워.. Programing/TIL 2024. 8. 16.
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.

티스토리툴바