팀프로젝트시작
트러블슈팅-
은 딱히없고 오늘 서로 피그마를 통해 얘기를나누며 서로 레이아웃을정하고 주제를 정하고 그러다가 시간이 전부 흘러갔다. 내일부터 제대로 시작일것같다. 모두모두 파이티이잉!!!!!
문제은행 풀면서-
나는 스프레드오퍼레이터를 사용하면 깊은복사가 되는줄알았다. 하지만 얕은복사라네.. 이런이런
깊은복사하는방법은 간단하다
JSON.stiringify 랑 JSON.parse를 사용해주면 된다.
먼저 이 두가지는 localstorage에서 할때 getitem과 setitem할때 썼었다.
저장할때인 setitem은 문자열로 해주고
jsx에서 사용하려고할때는 객체형태인 getitem으로 parse로 사용해줬다 .이처럼 obj 이란 객체가있다면
function deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
} 이런식으로 작성해주면 깊은복사가 될수있다.
-------------------------------
-supabase관련-
슈퍼베이스와 로컬호스트(내컴퓨터)는 독립적이다.
이 두가지를 동기화하기위해서는 setstate를해줘야한다??
`````````````````````````
베이직반강의 9회차
기차로예로들어 경로를정해주는레버가 Router이다.
ex) react-router
Outlet 은 Route의 children 이다!! 감싸줘서 레이아웃고정할때쓰임!!
SPA(react)는 페이지이동시에 새로고침이 없어야한다!
외부 api에서 가져와서 홈페이지에 뿌린다
외부 api 를 가져올지 아니면 그냥 직접작성하는지?
-> 외부 api
어떤 api를 가져올지 ?
로그인된사람만 작성가능하고,
`````````````````````````````` 다른팀 첫날 팀프로젝트 계획-
Note.
프로젝트 셋업 관련
라우팅 세팅 / 기본 페이지 생성 / rtk or context 등 provider 세팅완료 한 후, 프로젝트 공유
역할분배
가장 개발속도 빠른 분이 로그인 기능 선개발
(로그인이 가능해야 다른 기능이 작동할 수 있는 케이스가 있으므로)
Git
깃 전략 - main / dev <= dev브랜치로 PR하는 구조(?)
feat 기능단위 너무 작은걸로 만들어버리면 브랜치가 너무많으니까, 조금 큰 단위로 묶어 가져가라!
````````````````````````````
출석체크, TIL 올리기!
SUPABASE특강---
벡엔드 + DB(데이터베이스) = supabase Baas서버 로 대체
supabase홈페이지
-깃허브로 로그인-
그럼 Dashboard 나옴
-new project 누르기
엑셀-
가로-열 row
세로 -행 column
SDK 소프트웨어디벨롭먼트키트
슈퍼베이스-
yarn add @supabase/supabase-js
supabase에서 setting 에서 data API에서 url, api key 를볼수있음
vscode에서
const supabase = createClient( url, key );
useEffect( ( ) => {
//1.데이터를 가져오는 함수만들고
const getTodos = async ( ) => {
const a = await supabase.from("todos").select("*") // todos (슈퍼베이스에 내가table에 저장한 이름)
}
console.log(a); // object가나오고 키여러개중 status가있는데 200 -> 정상, 400 -> 내잘못 500 -> 수퍼베이스클라이언트
//2.실행
getTodos( );
}, [ ] )
return(
다시 슈퍼베이스홈페이지 들어가서
사이드바에 auth어쩌구들어가서 policies들어가서 create policy 눌러서 select눌르면 위에 console.log(a)에 키값중 data에 슈퍼베이스의 데이터가 들어가게됌!
원장님로직- api 바꾸기 내껄로
import { createClient } from "@supabase/supabase-js";
import React, { useEffect, useState } from "react";
const supabase = createClient( url, api key );
const App = () => {
const [todos, setTodos] = useState([]);
useEffect(() => {
const getTodos = async () => {
try {
const { data, error } = await supabase.from("todos").select("*");
if (error) throw error;
setTodos(data);
} catch (error) {
console.log(error);
}
};
getTodos();
}, []);
return (
<div>
<h1>Todo</h1>
{todos.map((todo, index) => (
<div key={todo.id}>
{index + 1}. {todo.todo}
</div>
))}
</div>
);
};
export default App;
.env 파일 만들어서 url과 api key를 가져와서 붙여넣는다.
VITE_APP_SUPABASE_URL="내 url"
VITE_APP_SUPABASE_ANON_KEY="내 key"
export안해도 import로 가져와서가능하니 넣어준다 부모컴포넌트에다가
import { createClient } from "@supabase/supabase-js";
import React, { useEffect, useState } from "react";
const supabase = createClient(
import.meta.env.VITE_APP_SUPABASE_URL,
import.meta.env.VITE_APP_SUPABASE_ANON_KEY
);
const App = () => {
const [todos, setTodos] = useState([]);
const [todo, setTodo] = useState("");
useEffect(() => {
const getTodos = async () => {
try {
const { data, error } = await supabase.from("todos").select("*");
if (error) throw error;
setTodos(data);
} catch (error) {
console.log(error);
}
};
getTodos();
}, []);
const handleAddTodo = async (e) => {
e.preventDefault();
await supabase.from("todos").insert({ todo });
};
return (
<div>
<h1>Todo</h1>
<form onSubmit={handleAddTodo}>
<input
type="text"
placeholder="할일을 입력하세요"
value={todo}
onChange={(e) => setTodo(e.target.value)}
/>
<button>추가</button>
</form>
{todos.map((todo) => (
<div key={todo.id}>{todo.todo}</div>
))}
</div>
);
};
export default App;
````````````````````````````
import { createClient } from "@supabase/supabase-js";
import React, { useEffect, useState } from "react";
const supabase = createClient(
import.meta.env.VITE_APP_SUPABASE_URL,
import.meta.env.VITE_APP_SUPABASE_ANON_KEY
);
const App = () => {
const [todos, setTodos] = useState([]);
const [todo, setTodo] = useState("");
useEffect(() => {
const getTodos = async () => {
try {
const { data, error } = await supabase.from("todos").select("*");
if (error) throw error;
setTodos(data);
} catch (error) {
console.log(error);
}
};
getTodos();
}, []);
const handleAddTodo = async (e) => {
e.preventDefault();
await supabase.from("todos").insert({ todo });
};
return (
<div>
<h1>Todo</h1>
<form onSubmit={handleAddTodo}>
<input
type="text"
placeholder="할일을 입력하세요"
value={todo}
onChange={(e) => setTodo(e.target.value)}
/>
<button>추가</button>
</form>
{todos.map((todo) => (
<div key={todo.id}>{todo.todo}</div>
))}
</div>
);
};
export default App;해주고 파일만든거에 바꿔준다
import { createClient } from "@supabase/supabase-js";
const supabase = createClient(
import.meta.env.VITE_APP_SUPABASE_URL,
import.meta.env.VITE_APP_SUPABASE_ANON_KEY
);
export default supabase;
```````````````````
App.파일
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Login from "./pages/Login";
import Signup from "./pages/Signup";
const App = () => {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
</Routes>
</Router>
);
};
export default App;
`````
env
VITE_APP_SUPABASE_URL="https://<project>.supabase.co"
VITE_APP_SUPABASE_ANON_KEY="<your-anon-key>"
````````````
src > supbase > client
import { createClient } from "@supabase/supabase-js";
const supabase = createClient(
import.meta.env.VITE_APP_SUPABASE_URL,
import.meta.env.VITE_APP_SUPABASE_ANON_KEY
);
export default supabase;
```
Home
import React, { useEffect, useState } from "react";
import supabase from "./supabase/client";
const Home = () => {
const [todos, setTodos] = useState([]);
const [todo, setTodo] = useState("");
useEffect(() => {
const getTodos = async () => {
try {
const { data, error } = await supabase.from("todos").select("*");
if (error) throw error;
setTodos(data);
} catch (error) {
console.log(error);
}
};
getTodos();
}, []);
const handleAddTodo = async (e) => {
e.preventDefault();
await supabase.from("todos").insert({ todo });
};
return (
<div>
<h1>Todo</h1>
<form onSubmit={handleAddTodo}>
<input
type="text"
placeholder="할일을 입력하세요"
value={todo}
onChange={(e) => setTodo(e.target.value)}
/>
<button>추가</button>
</form>
{todos.map((todo) => (
<div key={todo.id}>{todo.todo}</div>
))}
</div>
);
};
export default Home;
supabase홈페이지가서
auth에서 sign in / up 들어가서