본문 바로가기

전체 글402

2024-08-21 광클을 방지하기 위한 노력 상황하트를 누르면 팔로우가 되는 버튼을 만들었다. 보기엔 간단해보여도자신에게 팔로우 요청을 보내는 것인지,이미 팔로우가 되어 있진 않은지,팔로우를 하려는 건지, 언팔로우를 하려는 건지로그인이 되어 있는지,상대방이 탈퇴한 회원은 아닌지 등굉장히 많은 비용이 발생하는 버튼이다. 그런데 기능 구현을 하고 나니, 뿌듯한 마음에 네트워크 탭을 열고계속 눌렀다 떼었다를 반복했다. 그러면서 문득 든 생각."사용자도 멍 때리면서 계속 누르기 딱 좋게 생겼는데?" 나의 서버비를 아끼기 위해 광클을 막아야겠다고 결심한 순간이다.한계나의 구현 방식에는 한계가 있다.카드 하나의 버튼을 광클하지 못하게 하는 것이고, 저런 카드가 수백장 있다고 했을 때매크로가 카드 엘리먼트를 찾아서 계속 클릭하는 것은 이 로직으로 막지 못한다... Programing/TIL 2024. 8. 21.
2024-08-20 이벤트 전파(event bubbling) 문제 상황사용자의 프로필 카드를 만들었다.그리고 그 프로필 카드 우측 상단에 하트를 만들었고, 하트를 클릭하면 팔로우가 되도록 하였다.follow API route가 다른 곳에서도 재사용되고 있는데 optimistic하게 보여줄 수 없는 페이지도 있어서optimistic update는 아니고,  기대하는 상황은 하트를 누르면 사용자의 프로필로 넘어가는 것이 아니라 (프로필은 카드 자체를 누르면 넘어가게 링크되어 있다.)팔로우 기능만 작동하기를 바란다. 그런데 팔로우 기능만 작동하는 것이 아니라 팔로우 버튼이 눌림과 동시에 카드 자체도 눌려진다. 버튼 위에 버튼이 있는 형상이다. 즉 자식 요소의 클릭 이벤트가 부모 요소의 클릭 이벤트까지 전파가 되었다는 것을 의미하고,이를 이벤트 버블링이라 한다. 마치 거.. Programing/TIL 2024. 8. 20.
2024-08-19 [Next.js, Supabase] 여러 테이블을 참조하는 DELETE 메서드 작성하기 구현하고자 하는 기능 파티를 삭제하면 다른 테이블에 참조되어 외래 키로 연결된 테이블의 정보까지 모두 삭제하고자 함. 현재 상황 파티를 모집하고 있다. 파티 자체는 trips라는 테이블에서 관리하고 있다. 그리고 trips에 참가하는 인원이 생기면 contract라는 테이블에 차곡차곡 기록이 된다. 테이블 구성과 구현한 로직은 이렇다. 사용자가 파티를 개설하면 trips 테이블에서 trip_id가 자동으로 생성되며 여러 데이터가 쭉 컬럼에 입력되며 하나의 레코드를 만들어 낸다.그리고 contract라는 테이블에 contract_id가 자동으로 생성되며 trips_trip_id에 아까 만들어진 trips 테이블의 trip_id와 외래 키로 묶이고, 이는 자바스크립트로 입력된다.그리고 파티를 만든 사람은 리.. Programing/TIL 2024. 8. 19.
아이 Hobby/Guitar 2024. 8. 18.
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.
아무것도 상관없어 Hobby/Guitar 2024. 8. 12.
빛나는 별은 내 것이 아니었음을 Hobby/Guitar 2024. 8. 12.

티스토리툴바