스밋 - 회원가입, 로그인, 로그아웃 구현하기
supabase Docs를 많이 참고하자. 1. 검색하여 시도-- public.user에 function 추가create function public.handle_new_user()returns triggerlanguage plpgsqlsecurity definer set search_path = ''as $$begin insert into public.user (id, email, name) values (new.id, new.email, new.raw_user_meta_data ->> 'name'); return new;end;$$;-- auth.users에 trigger 추가create trigger on_auth_user_created after insert on auth.users fo..
최종 팀 과제 스밋 - 와이어프레임 수정, 기능 수정, erd짜기
주말 점심 즈음 잠깐 모여서 역할 분배를 하기로 했다. 회의를 시작하고, 디자인 팀에서 수정된 와이어프레임을 들고 와서 회의를 진행하고, 수정 사항을 조율했다. 1. 와이어프레임 수정, 세부 기능 수정 IA를 짜 오셔서 세세한 기능을 설명해 주셨다. 요구하는 기능들의 구현이 다 가능하다고 판단되어, 세부 기능을 수정했다. 기능이 구체적일수록 여러 경우의 수에 대한 의견이 오고갔다. 확실히 기획을 전문적으로 하는 디자이너들이랑 일하니까 기획을 대충 넘기지 않아서 편했다. 전 프로젝트 때는 만들다 보니 계속해서 세부 기능이 나와서 기획 때 세세하게 정해야겠다고 생각했었는데, 기획을 꼼꼼하게 짜니까 필요한 기능들이 막 쏟아져 나왔다. 개발 단계에서 나오지 않고 기획 단계에서 정하게 되어서 다행이라고 생각했다..
팀과제 가취뽀 - supabase 데이터 업데이트 안되는 문제 트러블 슈팅
1. 문제 발생포인트 지급 로직 구현을 위해 supabase 데이터를 업데이트 하는 과정에서 문제가 발생했다. 아무리 해도 supabase 데이터가 update가 되지 않는다. 2. 접근 - 문제 해결 2-1. 일단 console을 찍어 어디가 작동을 안하는지 알아봤다.//ssr 또는 csr'use client';import { createClient } from '../../utils/supabase/client';import { useEffect, useState } from 'react';const PointStorePage = () => { const supabase = createClient(); const [points, setPoints] = useState(0); useEffect((..
부트캠프 학원 3달째, 100명 학원생 앞에서 강의하다
매니저님께 제의가 왔다. 이번 발제 때 블로그에서도 소개했던 시리즈에 나왔던 1시간마다 보고하며 시간 관리하는 방법을 발제 때 수강생들에게 소개하는 것이 어떠냐고 하셨다. 나는(약간의 젭 포인트를 제시하고) 흔쾌히 받아들였다. 이제 발표하는 게 크게 긴장되지는 않는다. 하지만 준비하는 부분에서 튜터님들에게 설문조사를 돌렸는데, 이 공부법이 많이 활성화되면 튜터링에 지장이 갈 까봐 걱정하는 의견을 받아 그게 좀 부담스럽긴 했다. 많이 생각을 해 봤는데, 일단 나의 역할은 공부법을 소개하는 역할까지라는 것을 명확히 인지하고 사람이 몰리고 어쩌고 하는 상황은 생각하지 않기로 했다. 사실 거기까지 생각했는데 그건 매니저님들의 역할이지 내 역할은 아닌 것 같다. 발표는 성황리에 끝났다. 내 방식을 변형해서 차..
1. 문제 발생 코딩을 잘 하던 중 useSearchParams에 문제가 발생했다. ReadonlyURLSearchParams' 형식은 '--downlevelIteration' 플래그 또는 'es2015' 이상의 '--target'을 사용하는 경우에만 반복할 수 있습니다. 2. 해결 방안 고민 -. es2015 이상의 target이라는 것을 보니 version 문제 같다는 생각을 했다. - useSearchParams가 TypeScript에서 사용이 안 되나 싶어서 확인도 해 봤는데, 그건 아니었다. - 짧게 고민을 마치고 구글링으로. 3. 문제 해결 - 간단한 구글링을 통해 문제 해결 방안을 찾았다. - tsconfig.json에서 target을 ES2015 이상으로 설정한다.{ "compile..
오늘 스탠다드반 강의 직후, 튜터님이 질문을 내고 참여 사람들 중 핀볼을 돌려 랜덤으로 세 명이 대답한 후, 맞추면 상품을 주는 퀴즈 실습 세션 가 진행되었다. Next.js를 공부하면서 희미하게 알고 있던 점을 콕콕 집어주는 내용이 도움이 많이 되어서 블로그에 정리해 두려고 한다. *모범 답변은 수강생들의 답변을 총정리하여 재구성함. 1. 라이브러리와 프레임워크의 차이는 무엇이고 어떤 장단점이 있나요? 라이브러리(ex.리액트)는 제어권이 개발자에게 있고, 프레임워크(ex.넥스트)는 제어권을 프레임워크가 가지고 있다. 라이브러리는 개발자가 필요할 때 호출하여 사용하는 도구 모음집이고, 가볍다는 장점이 있지만 직접 (react-router-dom과 같은 것들) 가져와야 한다. 프레임워크는 따로 사용 시..
팀과제 - 가을축제 : 북마크 기능 구현하기
이번 팀 과제에서 제일 애를 먹였던 것은 단연컨대 북마크 기능이다. 튜터님들도 북마크라는 말을 들으면 기겁할 정도로 악명이 높은데, 처음 맡을 땐 그렇게 어려울 줄 몰랐다. 그런데 구현하다 보니 까다롭고, 내가 처음 써보는 데이터 불러오기 기능(axios, try-catch, json-server 다루기 등)들이 너무 많이 쓰였다. 어려운 것을 알고 맡았다면 덜 급했겠지만 모르고 맡았기 때문에 시간이 촉박했다. 튜터님들과 불같은 토론을 통해서 발전한 내 새끼(코드)를 여기에 기록해두려고 한다. 1. 북마크 기능 구현의 방향 로직 자체는 간단했다. 로그인 체크 + 유저정보 빼 오고 > 저장하기 누르면 저장하고 (axios post 써서 데이터 작성하고) > 취소하기 누르면 취소되고(axios delete ..
가을축제 팀과제 - uuid로 넣은 key값 리팩토링하기
1. 문제 발생Main에 축제 리스트 데이터를 넣으면서 map을 돌리게 되었는데, map에 key 값이 필요했다. 급한대로 uuid()를 써서 key값을 넣었는데, 멘토링을 진행하다 key값을 uuid로 넣게 되면 리렌더링이 될 때 마다 uuid 값이 변경된다는 것을 알게 되었다.2. 해결 방안따라서 리팩토링을 진행하였다. 생각한 방법은 Festival을 api로 불러왔으니, 거기 값에 id를 더 집어넣어서 festival 마다 고유한 id 값을 만드는 것이었다. festival마다 고유한 id가 있으면 여러모로 편하기도 하고 리렌더링 될 때 마다 uuid가 변경되는 문제도 해결할 수 있을 듯 했다. festival에 어떻게 고유한 id를 넣는가? 일단 festival data를 살펴보기로 했다. axi..