โฌ๏ธ Main Note
https://docs.google.com/document/d/1oMku0twdgRbrT4l17wijbS0L54FrdvlTYgJjw2lYaJw/edit
: cross origin resource sharing
โฌ๏ธ Creating my own API
import { createConnection } from "typeorm";
import { ApolloServer, gql } from "apollo-server";
//graphql ์ค์นํด์ค์ผํจ
import { Board } from "./Board.postgres";
const typeDefs = gql`
type Board {
number: Int
writer: String
title: String
age: Int
}
input CreateBoardInput {
writer: String!
title: String!
age: Int!
# type์ return์ผ๋ก ๋ฐ๋ ๋ถ๋ถ๋ง ๊ฐ๋ฅํจ ๊ทธ๋์ input ์ด๋ผ๊ณ ๋ฐ๊ฟ์ค์ผํจ
# type ๊ณผ input type์ ์ฐจ์ด์
}
type Query {
fetchBoards: [Board]
}
type Mutation {
createBoard(createBoardInput: CreateBoardInput): String
deleteBoard(number: Int!): String
# //ID๋ number type, ๋ฆฌํด ๋ฉ์์ง๋ string
# string์ด๋ ๋ฆฌํด์ด ๋์ด
# String! => ! ๋ฐ๋์ ์์ด์ผํ๋ค (๋๋ํฑ)
# ๋๋ํ๊ฐ ์์ผ๋ฉด ์์์๋ก ์์ ํด์ง์ง๋ง ์ ์ฝ์ด ๋ง์ด ๊ฑธ๋ฆฌ๋๊ฑฐ์
}
`;
const resolvers = {
Query: {
fetchBoards: async () => {
//DB์ ์ฐ๊ฒฐ (๊บผ๋ด์ ์ค๊ธฐ)
const result = await Board.find({
//find : ์ด๋ฆ ์ฒ ์ ์ธ ์ ๋ค ๊ฐ์ ธ์ค์
10๊ฐ๋ฉด 10๊ฐ ๋ค ๊ฐ์ ธ์
//๋ค ์ฐพ์์ฌ ์๋ ์๊ณ --()--์ฌ์ฉ // ์กฐ๊ฑด์ ๊ฑธ ์๋ ์์ : where ์ฌ์ฉ
where: { writer: "์ฒ ์", deletedAt: null },
//์ด๋ฆ์ด ์ฒ ์์ด๋ฉฐ deletedAt ์ํ๊ฐ null ์ธ๊ฒ๋ค์
});
console.log(result);
return result;
//string์ด๋ result๋ ๋ค๋ฆ. ์ ์ด์ ๋ถํฐ Board type์ด ๋์ด์ผํจ
},
},
Mutation: {
createBoard: async (_: any, args: any) => {
//args: ์ค์ ์ธ์ (์ธ์๋ฅผ ๋ฐ์์์ ๋๊ฒจ์ค์ผํ๊ธฐ๋๋ฌธ์ ์ฌ์ฉ)
//parent๋ ์์ง ์์ฐ๊ธฐ๋๋ฌธ์ _์ฒ๋ฆฌ
//DB์ ์ฐ๊ฒฐ (์ ์ฅํ๊ณ ์ ์ฅํ ๊ฒฐ๊ณผ๋ฅผ ๋ฆฌํด)
// await Board.insert({
// writer: "์ฒ ์",
// title: "์ ๋ชฉ์
๋๋ค",
// age: 12,
// });
//-->์ด๋ฌ๋๊ฑธ ์๋์ฒ๋ผ ํด์ ์ง์ ์ธ์๋ฅผ ๋ฐ์์ฌ ์ ์๊ฒ๋ ๋ง๋๋๊ฒ โฌ
await Board.insert({
// ...args.createBoardInput (--> ์ด๊ฑฐ ์ฐ๊ฑฐ๋ ์๋ 3์ค ์ฐ๊ฑฐ๋)
//spread์ฐ์ฐ์ ์ฌ์ฉํ๋ฉด ๋ ์ถ์ฝํ ์ ์์
writer: args.createBoardInput.writer,
title: args.createBoardInput.title,
age: args.createBoardInput.age,
});
return "createBoard๋ฅผ ์์ฒญํ์
จ์ต๋๋ค";
},
deleteBoard: async (_: any, args: any) => {
//์ด๋ฌ๋ฉด args์ ์ฌ์ ์์ฒญํ ID๊ฐ ๋ค์ด์ค๊ฒ ๋จ
args.boardID;
await Board.update({ number: args.number }, { deletedAt: new Date() });
//{์กฐ๊ฑด}, {๋ฐ๊ฟ ๋ด์ฉ}
// Board.delete({writer: "์ฒ ์", isDeleted: false})
//writer๊ฐ ์ฒ ์ ์ธ ์ ๋ค ์ ๋ถ ๋ค ์ง์๋ฒ๋ฆฌ๋๊ฒ
//isDeleted ๋ก ์ญ์ ๋๊ฑฐ์ฒ๋ผ ๋ณด์ฌ์ ์กฐํ๋ง ์๋ ๋ฟ ๋ฐ์ดํฐ๋ ์์ (์ค์ ๋ก ๋ง ์ง์ฐ์ง ์์)
//์ด๋ฐ ์ญ์ ๋ฅผ soft delete๋ผ๊ณ ํจ
return "์ญ์ ๊ฐ ์๋ฃ๋์์ต๋๋ค";
// --> soft delete
},
},
};
//server๋ ๊ทธ๋ฅ ์ด๋ฆ์ด์ฌ์ aaa๋ก const ํด์ค๋ ์๊ด์์
const server = new ApolloServer({
typeDefs,
//type ๋ฃ๊ณ
resolvers,
//api ๋ฃ๊ณ
cors: true,
//cors ๋ฌธ์ ํด๊ฒฐ
// corse:{
// origin: "http/mysite.com"
// }
//--> ์ด๋ ๊ฒ ํ๋ฉด mysite๋ง true๋ก ํ๊ณ ๋๋จธ์ง๋ ๋ค False
});
console.log("hello typescript");
//๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ฐ๊ฒฐํด์ฃผ๋ ์ฝ๋๋ฅผ ์จ์ค์ผํจ
createConnection({
type: "postgres",
database: "postgres",
username: "postgres",
password: "postgres2021",
port: 5021, //๋ด ๊ฐ์ธ ํฌํธ๋ฒํธ
host: "34.64.187.209",
entities: ["./*.postgres.ts"],
logging: true,
synchronize: true,
})
.then(() => {
//์ฐ๊ฒฐ ์ฑ๊ณต์ ์คํ
console.log("์ ์์๋ฃ");
server.listen({ port: "4000" });
// ์๋ฒ ์ ์ ์๋ฃ ํ๋ฉด --> 4000 ๋ฒ ํฌํธ๋ก 24์๊ฐ ๊ธฐ๋ค๋ฆฌ๋๊ฒ (listen)์ ๊ธฐ๋ฅ
// ๊ทธ๋ผ 4000๋ฒ์ ๊ธฐ์ค์ผ๋ก ๋ค์ํ API๊ฐ ์กด์ฌํ๋๋ฐ ๊ทธ ์ค fetchBoards๋ createBoard๋ฅผ ๋ง๋ ๊ฒ
})
.catch((error) => {
//์ฐ๊ฒฐ ์คํจ์ ์คํ
console.log(error);
});
โฌ๏ธ Practice
import {
getFirestore,
collection,
addDoc,
getDocs,
} from "firebase/firestore/lite";
import { firebaseApp } from "../_app";
export default function FirebasePage() {
const onClickSubmit = async () => {
//firebase์ ํ์ค ๋ฑ๋กํ๊ธฐ
const board = collection(getFirestore(firebaseApp), "board");
//์ ์์ ๋ณด, ์ปฌ๋ ์
์ด๋ฆ
await addDoc(board, {
writer: "์ฒ ์",
title: "์ ๋ชฉ์
๋๋ค",
contents: "๋ด์ฉ์
๋๋ค",
});
};
const onClickFetch = async () => {
//firebase์์ ๋ฐ์ดํฐ ๊บผ๋ด์ค๊ธฐ
const board = collection(getFirestore(firebaseApp), "board");
const result = await getDocs(board);
const docs = result.docs.map((el) => el.data());
console.log(docs);
};
return (
<div>
<h1>ํ์ด์ด๋ฒ ์ด์ค ์ฐ์ต ํ์ด์ง์
๋๋ค</h1>
<button onClick={onClickSubmit}>๋ฑ๋กํ๊ธฐ</button>
<button onClick={onClickFetch}>์กฐํํ๊ธฐ</button>
</div>
);
}
Then, this can be seen in firebase Page as: