본문 바로가기

Programing/TIL85

2024-07-26 커스텀 훅으로 컴포넌트와 state 반환해서 부모 컴포넌트에서 사용하기 퍼널 패턴과 같이 여러 컴포넌트와 페이지가 쏟아지는 경우, 그 컴포넌트들을 호출한 부모 컴포넌트에서는 하위 컴포넌트에서 생성된 state를 공유받을 수가 없다.이번 프로젝트를 진행하면서 재사용 가능한 컴포넌트는 중복 작업을 피하고 하나로만 만들어 프로젝트의 사이즈를 줄이고, 팀의 공수를 줄이는 데에 초점을 두고 진행하고 있다.그동안 팀프로젝트를 많이 진행했지만, 그동안 진행했던 것은 팀프로젝트가 아니라 개인 프로젝트 5개를 하나의 리포지토리에 모아 놓은 형태가 아니었나 하는 자조적인 반성도 해본다. 이러한 패턴이 익숙하지 않아 초반 작업 속도가 꽤 걸린다.그 중에서 아주 간단한 버튼을 커스텀 훅으로 만들어서 팀원들에게 사용법을 안내한 문서를 오늘의 TIL로 남겨 본다.이미지파일 위치src/hooks/us.. Programing/TIL 2024. 7. 26.
2024-07-24 SEO란? SEO란, Search Engine Optimiztion의 약자로, 검색 엔진 최적화를 의미한다. 구글이나 네이버와 같은 검색 엔진에서 내 웹 사이트가 상위 노출되는 것은 누구나 바랄 것이다. 그런데 검색 엔진은 내 사이트가 어떤 사이트인지 알지 못한다. 그래서 검색 엔진의 로봇이 내 사이트가 어떤 사이트인지 잘 알 수 있게 해주는 것이 중요하다. 검색 엔진은 크게 웹 페이지의 제목(title), 설명(description), 이미지의 alt 속성 등을 읽어서 이 사이트가 어떤 내용으로 구성되어 있는지 판단한다. 그리고 기능 상으로는 작동하지 않는 등의 시멘틱한 HTML 태그 등도 검색 엔진이 이 사이트가 어떻게 구성되었는지 판단할 수 있는 근거가 된다. 여기서 React.js와 Next.js의 큰 차.. Programing/TIL 2024. 7. 23.
2024-07-23 프론트엔드의 디자인, Funnel Pattern 사용법커스텀 훅 살펴보기// useState, useCallback과 같은 리액트 훅을 사용하기 때문에 클라이언트 컴포넌트로 설정합니다.'use client';import { useCallback, useState } from 'react';// useNextButton 커스텀 훅을 정의합니다. 이 커스텀 훅은 Funnel 패턴을 구현하기 위해 단계를 넘기는 기능을 합니다.// 인자를 3개 받습니다.const useNextButton = (// initialStep은 초기 시퀀스의 숫자입니다. 보통은 0부터 설정하시고 실제 사용하는 페이지에서도 그렇게 작성하시면 됩니다. initialStep: number,// 버튼에 렌더링 되는 텍스트입니다. 쓰는 곳이 전부 다르니 prop으로 받았습니다. .. Programing/TIL 2024. 7. 23.
2024-07-19 유저의 마이페이지 세그먼트를 어떻게 줄 것인가 supabase 회원가입 시 user unique key를 supabase 내장 uuid로 사용하는 것에 대한 고민1. 마이페이지에서 [id]로 segment를 갖게 되는데, 내장 uuid를 사용하면 23423weff-234jk.... 이런 식으로 설정되기에 도메인/[id]는 유저의 접근성이 떨어짐.다른 사이트는 어떻게 하고 있나? -> user의 로그인용 id를 받음.supabase signUp 메서드에서도 auth schema에서 email이 아닌 로그인용 id를 사용할 수 있나? -> 사용 불가그렇다면 정말 supabase auth를 사용하는 한 login_id를 받을 수 없나? Next.auth 같은 것을 사용해야 하나? -> 회원가입 시 email, password는 signUp 메서드의 필수사.. Programing/TIL 2024. 7. 21.
2024-07-18 검색기능 트러블 슈팅 트러블 슈팅나이 제한은 최초 생각했으나 그 나이를 사용자가 가입할 때 입력하는데 그것을 검증하려면 NICE 인증 등을 해야 하고, 인증 절차가 없으면 사용자가 입력한 나이가 진짜인지 아닌지 검증할 방법이 없어 의미없는 데이터라고 판단하여 삭제함.jsonb에서 특정 헤시 태그를 일일이 검사하는 것이 비용이 많이 발생한다고 함 -> 컬럼으로 나눠서 하는 것이 베스트인 것 같음 -> 그러나 jsonb로 관리하기로 결정 -> 그럼 text든 boolean이든 모든 컬럼에 인덱싱을 걸어 놓으면 유리한 것 아닌가? -> 맞지만 서버 컴퓨터의 리소스를 쓰기 때문에 불필요한데 걸어 놓으면 쓰기 능력 저하jsonb vs 단일 컬럼 장단점jsonb헤시태그 개수가 몇 개가 되든지 유연하게 늘릴 수 있음.인덱스 생성 및 유지.. Programing/TIL 2024. 7. 19.

티스토리툴바