본문 바로가기

Programing/TIL85

2024-06-21 Supabase를 통한 회원 인증/인가 관리 기능 구현 회고 파일구조src components SignUp.jsx Login.jsx Introduction.jsx signInWithKakako.js checkSignIn.js api api.js supabaseClient.js hooks usePlaces.js useLogout.js store store.js구현모습 상단 헤더에서 회원 인증/인가 상태에 따라 조건부 렌더링서버로부터 인증된 사용자는 로그인 버튼 X, 찜목록과 로그아웃 버튼이 렌더링 되도록 설정로컬에서 토큰을 활용한 인증 방식은 보안 취약 요소가 있을 것으로 생각되어 JWT 세션을 서버로부터 인증받아 사이트에서 서비스 사용을 조건부로 사용 가능하도록 모든 컴포넌트에서 일부 서비스 보호마우스 .. Programing/TIL 2024. 6. 22.
2024-06-20 리액트 심화 팀 프로젝트 회고 (회원 인증/인가 파트) 과정 정보리액트 심화 : 아웃소싱 프로젝트기간 : 2024-06-17 (월) ~ 2024-06-19 (금)조 : A10주제 : 행사 정보 사이트맡은 역할supabase 셋업user authentication/authorization회원가입 / 소셜 로그인자체 평가팀 프로젝트 : 10 / 10 점점수 부여 이유 : 남겨 둔 버그도 없이 깔끔하게 진행됨.개인 / 팀 평가팀잘한 점서로가 작성한 코드를 이해할 수 있을 정도의 수준으로 작성하여 컴포넌트 간 코드 재사용이나 리팩토링이 용이하였음.팀원 간 실력 격차나 견해의 차이를 활발한 소통으로 좁힐 수 있었고, 나만의 언어가 아닌 팀 전체의 언어로 소통하여 최상의 퍼포먼스를 낼 수 있었음.아쉬운 점팀 프로젝트에서 아쉬운 점은 없었고 과제 기간만 길었다면 코드 최.. Programing/TIL 2024. 6. 21.
2024-06-18 유저 관리 기능에 대한 회고 Supabase를 이용한 회원가입, 로그인, 로그아웃 기능 구현 이번 팀 프로젝트에서 Supabase를 이용한 회원가입, 로그인, 로그아웃 기능을 맡아서 진행했다. 이를 통해 여러 가지를 배울 수 있었다. 먼저, Supabase는 Firebase와 유사한 BaaS(Backend as a Service) 플랫폼이라는 것을 알게 되었다. 특히, Supabase는 PostgreSQL을 기반으로 하고 있어서 SQL 쿼리를 직접 사용할 수 있었다. 이 점 덕분에 데이터베이스 작업이 더욱 직관적이고 유연하게 느껴졌다. 회원가입 기능을 구현할 때는 auth.signUp 메서드를 사용했다. 이 메서드를 통해 간단하게 이메일과 비밀번호를 기반으로 사용자를 등록할 수 있었다. 처음에는 API 사용법이 조금 생소했지만, 공.. Programing/TIL 2024. 6. 18.
2024-06-16 (나의 생각) AI 시대와 개발자 AI의 무서운 발전 속도AI의 발전 속도가 무섭다. 인공지능 sora 등 출시되는 족족 세상을 놀라게 하는 인공지능 모델들이 연이어 발표되고 있고, 심지어 악용 우려까지 있을 정도로 기술의 완성도가 높다 보니 상용화 하지 않는 기술도 많이 있다.그런데 놀랍게도 난 개발 공부를 하기 이전, 전혀 다른 직군에서 일을 해 왔는데 그 때는 AI의 발전에 대한 소식을 간간히 접하긴 했어도 이렇게 빠를 것인 줄은 체감할 수 없었다.컴퓨터와 관련이 크게 있지 않은 직업군에서는 AI의 발전이 나의 일을 대체하기에는 당장은 시기상조라고 생각하는 사람들이 대부분일 것이다. 개발을 공부 하며 ChatGPT를 누구보다 많이 하고 있다. 만약 인공지능 챗봇이 탄생하기 전이었다면 튜터님들께 계속 방문하며 막히는 점을 물어봐야 했.. Programing/TIL 2024. 6. 16.
2024-06-15 TanStack Query로 서버 상태 관리하기 기존의 내 프로젝트는 axios를 통해 json server에서 데이터를 불러오고 있었다. 그리고 이를 통해 CRUD를 구현하고 있었는데, 이것을 TanStack으로 관리해보고자 한다. 참고로 CRUD에서 R은 useQuery를, CUD는 useMutation을 이용한다. TanStack과 Axios로 json-server에 GET 요청 보내기 (useQuery)기존 코드는 아래와 같다.function App() { const [expenses, setExpenses] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { con.. Programing/TIL 2024. 6. 16.

티스토리툴바