What I Learnd/TIL (50) 썸네일형 리스트형 TIL - useSearchParams 사용하기 Problem api를 따로 분리해주려는데 컴포넌트 파일이 아니다보니 useSessionStore로 불러오는 user_id 값이 api파일에서는 연결되지않는다. Solve useSearchParams를 사용해서 필요한 페이지에서 매개변수를 만들어 넘겨주자 // UserProfile.tsx import { useSearchParams } from 'next/navigation'; import { getUserProfile } from '@/app/api/getUserProfileApi'; // ... export default function UserProfile() { const searchParams = useSearchParams(); // useSearchParams 사용 const userIdFr.. TIL - 데이터 로딩 속도(의존성 순서 확인) 데이터 A 의 a 값과 B의 b 값이 현재 페이지에서 불러오는 C의 a, b 값과 일치할 경우와 그렇지 않은 경우로 화면을 다르게 그려주고 있다. Problem A(mainChallenge) 데이터를 불러오고 A의 a 값과 B의 b 값으로 필터링한 C(joinChallenge) 데이터를 받아와야하는데 안들어온다. Solve C 데이터를 호출하는 함수에서 조건을 잘못걸어줬다. A값과 비교하기 위해 A값을 받은 후 맞는 데이터만 불러오는 로직인데 의존성을 잘못 넣었다. 같은 데이터를 불러오더라도 언제 어디에서 어떻게 불러올지 잘 생각하자~~~ // 페이지 로딩하면서 불러오고 있음 useEffect(() => { const fetchData = async () => { await userJoinChalleng.. TIL - supabase 외래키로 연결된 데이터 불러오기 Challenge 데이터에 있는 값들을 불러오되 유저가 신청한 챌린지 데이터만 가져와야한다. Challenge 데이터 테이블이 있고 users 데이터 테이블이 있다고 하자. Challenge는 여러사람들이 참여하는 형식으로 한 데이터 당 한 user가 정해진 것이 아니다. 그러므로 새롭게 joinChallenge 테이블을 생성하고 그 테이블을 통해 필요한 데이터를 불러오기로 했다. joinCallenge 테이블에 user 테이블의 id와 challenge 테이블의 id를 외래키로 연결했다. const loadUserChallenges = async () => { let { data: challenges } = await supabase.from('joinChallenge').select(`*, mainC.. TIL - map 함수는 배열에서만 사용 가능하다! Problem map 함수 사용 불가 Property 'map' does not exist on type 'UserChallenges'.ts(2339) → 오류의 원인은 userChallenges의 초기값 설정! 타입스크립트로 프로젝트를 진행하면서 무의식 중에 타입을 지정하고 초기값을 아래와 같이 설정하여 데이터를 불러왔는데 이게 문제였다. 기본을 잊지말자.... const [userChallenges, setUserChallenges] = useState({ id: '', title: '', startDate: 0, endDate: 0, isCompleted: false, }); return ( {userChallenges?.map((item, index) => ( {index + 1} {item.ti.. TIL - Next.js Image Component 이미지 로딩이 안된다. import profileDefaultImg from '../../assets/profileDefaultImg.png'; const Profile = () => { return ( ) } 해결 import Image from 'next/image'; import profileDefaultImg from '../../assets/profileDefaultImg.png'; const Profile = () => { return ( ) } Next.js의 Image 컴포넌트의 특징은 정적으로 임포트 된 이미지에 대해서는 width, height, blurDataURL 정보가 자동으로 생성 페이지가 100% 로드되지 않았을 때 이미지의 위치가 변하는 현상 즉, Cummulative Lay.. TIL - 특정파일 커밋 히스토리 삭제하기 [git] 실수로 .env 파일을 푸시해버렸다. gitignore를 확인하고 .env.local로 네이밍 했어야했는데, .env로 네이밍했고 그대로 key값이 노출되어버렸다. 그냥 새로 레파지토리를 만들면 되지않을까 하는 생각을 했지만 해당 프로젝트는 개인이 하는 것이 아닌 팀으로 하는 프로젝트이고, 쌓아온 히스토리 파악이 중요하므로 다른 방법을 찾아보기로 했다. 커밋히스토리들을 지키면서 .env 파일과 관련 히스토리까지 삭제하는 법을 찾았다. git filter-branch -f --index-filter 'git rm --cached --ignore-unmatch 삭제할 파일명' --prune-empty -- --all 생각보다 꽤 긴 시간이 걸린다. 끝날 때까지 차분히 기다리자. git push --force.. TIL - supabase 이메일 로그인 이메일로그인 verification 설정 authentication 을 세팅하면 기본으로 Confirm email과 Secure email change가 활성화 된 상태. 개발을 하는 환경에서는 기능 확인을 위해 일일히 인가해주는 과정없이 가입이 필요하다. Auth Providers에서 아래와 같이 Enable Email provider를 제외한 나머지를 비활성화해주면 인가없이 바로 가입이 가능하다. Database 각 테이블 정책(Policy) 설정 DB명세에 따라 테이블을 생성한 후 각 테이블마다 새롭게 정책을 설정해주어야 한다. Authentication - Configuraton - Policies 탭으로 가면 생성된 테이블마다 New Policy 설정이 가능하며 필요에 맞게 설정해줄 수 있다. .. TIL - Next.js 설치 및 기능 알아보기 1 1. 설치 npx create-next-react 원하는 옵션 선택, 나의 경우 route 기능만 공부해볼거라 전부 No로 선택 설치해줌 dev - next dev 개발 모드로 프로젝트를 실행 Hot reloading 등 개발 환경에 유용한 기능들 제공 build - next build 제품 배포 용도로 프로젝트를 빌드 start - next start build를 통해 만들어진 프로젝트를 실행하는 명령어. 실제 운영 서버에서 배포되는 환경과 동일. 로컬호스트 실행 yarn run dev https://nextjs.org/docs/getting-started/installation Getting Started: Installation | Next.js We recommend starting a new N.. 이전 1 2 3 4 ··· 7 다음
