본문 바로가기

Programing/TIL85

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.
2024-07-30 Funnel Pattern + CRUD 에서의 커스텀 훅 사용 패턴 상황페이지 컴포넌트에서 자식 컴포넌트를 호출해서 시퀀스의 이동에 따라 페이지를 이동시키는 듯한 효과를 보여주는 Funnel Pattern으로 디자인하였다.글쓰기 페이지이기 때문에 자식 컴포넌트들에서 사용자와의 인터렉션이 계속 발생하는 컴포넌트들이고, 사용자에게 입력 받은 값을 마지막 step에서 값을 서버에 전송해야 하는 로직으로 작성되어 있다.자식 컴포넌트에서 입력한 값을 부모 컴포넌트가 참조하는 방법으로 전역 상태로 관리하는 방법이 가장 먼저 떠오르지만, 이건 개인 프로젝트가 아니라 팀 프로젝트이기 때문에 대부분의 컴포넌트가 재사용이 가능하도록 작성하였고, 실제로 검색 페이지에서 이 컴포넌트들을 사용하고 있다.그렇다면 글쓰기 페이지에서 이 컴포넌트를 사용해서 사용자에게 값을 입력 받고 이어서 글쓰기 .. Programing/TIL 2024. 7. 30.
2024-07-29 넥스트.JS의 폴더 구조 Next.js를 배운 지 한 달이 넘어 가는 이 시점에서 Next.js의 폴더 구조를 다시 공부한다는 것이 이상하게 보일 수 있지만,폴더 구조는 팀 프로젝트를 할 때마다 컨벤션에 약간의 차이가 발생해서 이번 프로젝트에서는 왜 이렇게 폴더구조를 설정하였는지까지 하나 하나 기술적 의사 결정 사유를 놓고 토론하느라 꽤 많은 시간이 흘렀다. 지금까지의 팀프로젝트에서 이런 경험은 없었다. 그리고 이런 것을 프로젝트의 아키텍쳐를 구성하는 과정임을 알게 되었다. 기본적인 Next.js의 폴더구조와 지금 우리 프로젝트의 현재의 아키텍쳐를 보면서 살펴보도록 하겠다. Next.js로 프로젝트를 생성하면 기본적으로 위처럼 폴더 구조가 생성이 된다.자바스크립트, 타입스크립트 사용 유무에 따라서 확장자는 달라진다. .├─ .n.. Programing/TIL 2024. 7. 29.

티스토리툴바