코딩연습장

SnapRoad 서비스는 어떤 서비스인가?SnapRoad는 private 그룹을 통해 개인, 그룹의 여행 기록과 사진, 텍스트를 그룹원들만 볼 수 있도록 안전하게 공유하는 서비스입니다. supabase의 private storage와 signed url은 snaproad의 특징인 프라이빗 그룹을 위한 개인정보 보호와 보안성을 구현하는데 핵심 역할을 한다. 왜 Signed Url을 사용했나?Supabase의 storage는 기본적으로 public, private 버킷을 제공하며, private 버킷은 인증된 요청만 접근할 수 있다. 하지만 하기 이유로 signed url을 사용한다.프라이빗 스토리지의 안전성 유지버킷의 파일을 노출시키지 않고, 지정된 유효시간 동안 특정 url으로만 접근을 허용한다.사용자 ..

최종 프로젝트 중 그룹 리스트페이지에서 랜덤한 이미지를 보여줘야할 필요가 있었다. 우리 프로젝트의 erd였는데내가 원하는 기능은 이것이었다.1. 로그인한 유저의 id로 user_group에서 유저가 속한 그룹 랜덤하게 가져오기2. 가져온 그룹 id를 통해 post테이블에서 해당 그룹에서 생성된 게시글의 대표 이미지 파일명 가져오기3. 가져온 대표 이미지 파일명을 createSignedUrl을 통해 프라이빗한 이미지 url생성하기4. 그걸 특정 시간마다 재실행하여 이미지를 계속 변경시키기근데 supabase-js에는 랜덤하게 하나만 가질 수 있는 기능은 제공되지 않고 있었다....그래서 일단 차선책으로 아래와 같이 구현해보았다.1. 로그인한 유저의 id로 user_group에서 유저가 속한 그룹 10개 가..

1. 문제발생OAuth관련 설정 후 소셜로그인 하여도 에러가 발생하는 문제  2. 원인추론깃허브와 supabase관련 데이터 입력이 잘못되었나?Auth를 팔 때마다 깃허브 OAuth Apps의 키를 새로 발급받아야 하나?3. 해결방안두 추론 모두 해결되지 않아서 네트워크 탭의 에러코드와 메시지를 파악함확인해보니 에러코드가 500번해당 에러는 데이터베이스 로그를 식별해보라하여 DB의 Log를 확인해봄{"component":"api","error":"failed to close prepared statement: ERROR: current transaction is aborted, commands ignored until end of transaction block (SQLSTATE 25P02): ERROR..

Zod라이브러리는 간단한 구조부터 복잡한 구조까지 타입검증을 도와주는 라이브러리이다.https://zod.dev/ GitHub - colinhacks/zod: TypeScript-first schema validation with static type inferenceTypeScript-first schema validation with static type inference - colinhacks/zodgithub.com npm i zodyarn/pnpm add zod import { z } from "zod";z를 가지고 schema를 만든다.const signInSchema = z.object({ email: z.string().email({ message: "invalid email" }),..

"use client";import { useState } from "react";const SignInForm = () => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); return ( { e.preventDefault(); }} className="flex flex-col gap-4 p-5 items-center w-full m-auto" > Email setEmail(e.target.value)} placeholder="Email" className="text-black"..

팀프로젝트에서 전체 페이지에 적용되는 사이드바에 이런식으로 텍스트를 새로로 작성하고 싶었다.모르니까 바로 검색을 해보았다.모두들 writing-mode: vertical-lr 을 사용하면 텍스트를 글자의 왼쪽에서 오른쪽 순서로 방향은 위에서 아래로 세로로 표현해준다는 것이다. 그런데 우리의 엄청난 tailwind는 해당 속성을 지원해주지 않고있다.그래서 텍스트 태그의 width를 폰트크기보다 아주 조금 크게하고, width를 넘어가는 텍스트를 아래로 보낼까 했지만이게 맞나? 싶었다.그래서 tailwind에서 제공해주지 않는 속성을 사용할 방법을 찾아보았다.뭐 어쩌구 저쩌구 뭐라뭐라 썼는데 결국 tailwind.config.js파일의 theme안에 추가를 하면 되는 것이다. theme: { exte..

!!eduArray.length && eduArray.forEach(async (edu) => { const eduFormData = { post_id: postId, user_uuid: userId, ...edu }; const { data: eduPostDtat, error: eduPostError } = await browserClient .from('post_detail_education') .insert([eduFormData]); }); !!expArray.length && expArray.forEach(async (exp) => { ..

문제상황오늘 팀 프로젝트의 mockview와 state들을 만들면서 이러한 오류가 있었다.학력의 오른쪽 + 버튼을 누르면 아래 3가지 입력창이 계속 생기는 기능을 만들고 있었다.{eduArray.map((edu, idx) => { return ( handleEduArray(idx, 'graduated_at', e)} /> );})}이렇게 key에 crypto.randomUUID()를 넣어주어 유니크한 키 값을 가지도록 하였다.인풋값을 입력할때마다 focus가 풀렸다. 이유가 뭘까??발생 이유리액트 내부 리스트 매핑에서의 key는 결국 리액트가 해당 컴포넌트를 식별하기 위함이다.컴포넌트 또한 배열로 관리하여 key값으로 비교하게 되는데, 내가 작성..

리그오브레전드 정보 페이지 바로가기LIP는 무료로 로그인 없이 사용할 수 있는 리그오브레전드 정보 제공 서비스입니다.Next와 React, TypeScript를 사용하여 개발하였으며원하는 챔피언이나 아이템의 정보를 확인하고이상형월드컵을 통해 인기 챔피언을 알아볼 수 있습니다!목차리그오브레전드 정보 페이지 바로가기LIP 서비스는 이런걸 할 수 있어요!개인과제에서 이런걸 했어요LIP에선 이런 기술을 사용했어요LIP의 서비스 요청 흐름도피드백LIP 서비스는 이런걸 할 수 있어요!개인과제에서 이런걸 했어요NextJS를 사용하며 발생한 여러 문제들컴포넌트 분리 후 스타일이 적용되지 않는 문제 - 전상국useSuspenseQuery와 hydration 문제LIP에선 이런 기술을 사용했어요LIP의 서비스 요청 흐름도..

{ "todoList": [ { "id": "adsf", "title": "titleTest", "desc": "DescTest", "isCompleted": false, "createdAt": 123 }, { "id": "adsd", "title": "titleTest", "desc": "DescTest", "isCompleted": false, "createdAt": 123 } ]}json-server를 이용하여 간단한 투두리스트를 만들었다.내가 ..