y.developer

2024.01.23 화 간편한 라우팅 시스템을 제공하는 Next.js를 어떻게 하면 유연하게 사용할 수 있을까 고민했다. 마침 push된 주소에서 동적으로 params를 가져와서 활용해야하는 상황이 생겼다. 14버전에서는 더욱 효율적으로 params를 다룰 수 있게 되었다. 폴더를 만들고, 주소를 push하고, 받아서 활용하는 방법을 적어보자. params parameters(파라미터)의 축약어로 사용되는 용어이다. 함수나 메소드에 전달되는 값들을 가리키며, Next.js에서는 동적 라우팅에서 사용되는 경로의 일부를 나타내는 데에도 사용된다. 동적 라우팅 설정 먼저, 동적 파라미터를 사용하려면 페이지 파일을 정해진 형식으로 작성해야 한다. app폴더 안에 "[폴더이름]"로 폴더를 만들어준다. 해당 폴더이..

2024.01.22 월 중간 검점 및 회고 최종 프로젝트가 절반을 지나가고 있다. 오늘 중간발표를 진행하였고, 지금까지 달려온 길과 앞으로 달려야할 길에 대해서 생각해보았다. 한템포 쉬어가며 그동안 코드에만 집중하여 좁아졌던 시야의 폭을 다시 넓히고 프로젝트의 전체 흐름을 점검하였다. 기능 구현만 생각했던 부분을 내려놓고 프로젝트의 가장 궁극적인 목표인 좋은 코드를 작성하는 것에 대해서 깊게 생각해보게 되었다. 웹 개발에서 코드의 품질을 높이고 유지보수성을 향상시키기 위해 여러가지 중요한 개념들이 존재한다. 웹 컴포넌트, 관심사 분리, 코드 확장성 및 재사용성에 중점을 두고 이러한 개념들을 활용하여 어떻게 동적하고 효과적인 코드 작성할 수 있는지 적어보자. 1. 웹 컴포넌트 독립적이고 재사용 가능한 코드..

2024.01.19 금 주제 : 받은 요청함 구현 기술적 의사 결정 1 받은 요청(flirting)이 있을 때 그에 해당하는 내용을 띄워야 함 자기 자신. receiver 입장에서의 데이터만 띄우면 됨 상태가 UNREAD인 요청을 받은요청함에 랜딩할 때 READ로 변경 상태가 ACCEPT, DECLINE인 요청 제외 요청 데이터를 다루는 flirting_list의 모든 데이터를 가져온 후 클라이언트단에서 필터링 장점 데이터를 가져오는 함수를 작성할 때 크게 고민을 하지 않아도 됨 통신시 예외처리 하는 함수를 따로 공부하지 않아도 됨. 러닝커브가 낮음 단점 클라이언트단에서 모든 데이터의 필터링이 들어가기 때문에 코드가 길어짐 상태를 관리하기 어려움 필요 없는 데이터가 한번 찍힌 후 필터링 되어서 원하는 현..

2024.01.18 목 추가 로직 깔금하게 정리 후 기재 +설명 supabase.auth.onAuthStateChange // AuthenticationLayer.tsx 'use client'; import { useEffect, useState } from 'react'; import { supabase } from '@/lib/supabase-config'; import { useRecoilState } from 'recoil'; import { userState } from '@/recoil/user'; import { usePathname } from 'next/navigation'; import { Props } from '@/types/childrenPropsType'; import { Reg..

2024.01.17 수 자세한 방법 작성 로직과 더불어 결정 과정 서술 spotufy 이메일 인증 절차 생략 방법 Google v Kakao v Spotify v Naver x Apple x Azure (Microsoft) x // SocialLogin.tsx import KakaoLoginBtn from './kakao/KakaoLoginBtn'; import GoogleLoginBtn from './google/GoogleLoginBtn'; import SpotifyLoginBtn from './spotify/SpotifyLoginBtn'; import StartIn3Seconds from './StartIn3Seconds'; function SocialLogin() { return ( ); } ex..

2024.01.16 화 문제 상황 개인별로 브랜치를 형성할 때 보통 기능에 따라 이름을 붙인다. 예를 들면 feature/main, feature/login 하지만 이렇게 작성할 때 해당 기능에 두명 이상 작업하게 된다면 브랜치를 분리할 때 문제가 생긴다. 한 depth(뎁스)를 더 깊이 들어가서 세분화를 하고 싶어도 할 수가 없다. 오류 코드 fatal: cannot lock ref 'refs/heads/feature/chatList/algorithms': 'refs/heads/feature/chatList' exists; cannot create 'refs/heads/feature/chatList/algorithms' 코드 분석 feature/chatList가 존재하기 때문에 그보다 깊은 featur..

2024.01.15 월 Crosswalk : 소울메이트 매칭 서비스 소울메이트 매칭 서비스를 제작하고 있다. 프로젝트의 핵심 기능 중 하나가 실시간 채팅이다. A와 B 두사람이 매칭되고, 서로 제한된 정보만을 가지고 실시간 채팅을 통해서 서로에 대해서 알아간다. 채팅이 이어짐에 따라서 호감도가 점점 올라가고, 100%에 도달 했을 때 모든 정보가 오픈되고 최종 매칭에 성공하게 된다. 호감도가 올라가는 조건 큰 구조는 잡혔다. 이제 호감도를 어떤 조건으로 올리게 만들건지 정해야한다. 제한된 정보가 주어지며 서로 대화를 통해서 알아가야 한다. 이 취지에 맞추자면 핵심은 두 사람간의 티.키.타.카 서로 이야기를 계속해서 주고 받으며 대화가 활성화되도록 유도해야 한다. 따라서 호감도의 핵심 요소는 채팅 메시지 ..

2024.01.12 금 문제 상황 기능적인 면에서는 문제 없이 잘 작동을 한다. 하지만 콘솔창에 오류인듯 경고가 뜨는 상황이다. 경고인 부분에서 큰 오류는 아닌 것 같지만, 의도한 바는 아니기에 해결하려고 한다. 오류 코드 Warning: Each child in a list should have a unique "key" prop. 오류 분석 해당 오류는 map을 돌릴 때 최외곽 태그에 key가 없어서 발생하는 것으로 보인다. map을 활용할 때는 꼭 개별적인 key를 부여해줘야 정확하게 인식을 하나보다. 이 사실을 알고 있어서 컴포넌트에 key를 넣어줬지만 계속해서 오류가 떠있는 모습이다. 사실 이전에도 해당 오류를 본 적이 있다. 그때도 똑같이 기능적으로는 문제가 없었고, key도 잘 부여를 해줬었..