멀티페이지 애플리케이션에서는 사용자가 다른페이지로 이동할때마다 새로운 html을 받아오고, 페이지를 로딩할때마다
서버에서 CSS,JS, 이미지 파일등의 리소스를 전달받아 브라우저의 화면에 보여주었다.
각페이지마다 다른 html 파일을 만들어서 제공을 하거나, 데이터에 따라 유동적인 html을 생성해주는 템플릿 엔진을 사용하기도했다.
페이지마다 그에맞는 html 로딩
사용자 인터랙션이 별로 없는 정적인 페이지들은 기존의 방식이 적합하지만,
사용자 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 애플리케이션은 이 방식이 적합하지 않는다.
새로운 페이지를 보여줘야 할 때마다 서버측에서 모든 준비를 한다면 그만큼 서버의 자원을 사용하는것이고, 트래픽도 더 많이 나오게된다.
그래서 리액트 같은 라이브러리를 사용해서 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 웹 애플리케이션을 브라우저에 불러와
실행시킨 다음 사용자와의 인터랙션이 발생하면 필요한부분만 자바스크립트를 사용하여 업데이트하는 방식을 사용하게 되었다.
만약 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용 할 수있게 되었다.
이렇게 html은 한번만 받아와서 웹 애플리케이션을 실행시킨 후, 이후에는 필요한 데이터만 받아와서 화면에 업데이트하는 것이 싱글 페이지 애플리케이션이다.
html한번로딩후 필요할때마다 javascript로 upDate
리액트 라우터같은 라우팅 시스템은 사용자의 브라우저 주소창의 경로에 따라 알맞은 페이지를 보여주는데, 이후 링크를 눌러서 다른 페이지로 이동할 때 서버에 다른 페이지의 html을 새로 요청하는 것이 아니라, 브라우저의 History API를 사용하여 브라우저의 주소창의 값만 변경하고 기존에 페이지에 띄었던 웹 애플리케이션을 그대로 유지하면서 라우팅 설정에 따라 또 다른 페이지를 보여주게 된다.
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
firstName String
lastName String?
userName String @unique
email String @unique
password String
}
2. users 폴더, mutation, queries, typeDefs 파일들을 만든다.
3. typeDefs의 타입과 위에서 설정해준 model과 일치시킨다.
4. 한번더 migrate시킨다.
* prisma schema 를 update 할경우에는
항상 migrate 를 시켜줘야한다.
4. 계정생성과, 프로필보기위한 mutation, query 설정
import { gql } from "apollo-server";
export default gql`
type User {
id: String!
firstName: String!
lastName: String
username: String!
email: String!
createAt: String!
updatedAt: String!
}
type Mutation {
createAccount(
firstName: String!
lastName: String
username: String!
email: String!
password: String!
): User
}
type Query {
seeProfile(username: String): User
}
`;
2.. Mutation 설정하기
import client from "../client";
export default {
Mutation: {
createAccount: async (
_,
{ firstName, lastName, userName, email, password }
) => {
// check if username or email are already on DB.
const existingUser = await client.user.findFirst({
where: {
OR: [
{
userName,
},
{
email,
},
],
},
});
console.log(existingUser); //체크용
// hash password
// save and return the user
},
},
};
여기서주의해야할점은
첫번째 생성할 user가 userName과 email이 반드시 중복되면안되고
두번째 await 와 async 를 같이사용해서 비동기적으로 처리해 ( 실패에대한 처리를해야햔다.)
