[웹] 웹 과정 ( postgreSQL, prisma, GraphQL, React )

1. prisma 설치

[Prisma] Prisma란? / 사용법 ( PostgreSQL 연결 , feat.GraphQL )

 

2. postgresql 로 db만들기

[PostgreSQL] PostgreSQL, pgAdmin4 이란? / 명령어

 

3. prisma에 db 연동, 모델 만들기

 

4. prisma client로 db, js연결하기

[Prisma] Prisma Client란? / 사용법

 

5. graphql로 db컨트롤 하기 위한 javascript 명령어 만들기

[Node.js] GraphQL, Apollo 란? / 사용법 ( GraphQL 서버 만들기 )

- graphql편하게 사용하기 위한 apolloserver 설치

- 명령어 형식 만들기 (typeDefs)

- prisma 사용한 명령어 만들기 (resolver)

 

6. babel으로 es6 es7 최신코드 es5코드로 변경해 node.js 서버 실행하기

[Node.js] Babel (바벨) 이란? / 사용법

 

7. nodemon으로 파일 변경시 babel 서버 실행하기

[Node.js] nodemon이란? / 사용법

 

[Node.js] nodemon, Babel 연동한 Node.js 서버 만들기

 

8.resolver, typeDefs 파일로 분리하기

[Node.js/GraphQL] GraphQL 코드 종류별로 정리하기

 

9. resolver, typeDefs, prisma 작성

 

10. react 프로젝트 생성 (프론트엔드)

[Node.js] React.js 란? / React 사용법 ( create-react-app )

 

11. styled-components 설치, 사용해 컴포넌트 만들기

[React] styled-components란? / 사용법 (js/ts)

 

12.  styled-components 사용해 모든 내용 스타일 만들기, 스타일 초기설정 하기

[Node.js] styled-reset 이란? / 사용법

 

13. react-router 로 페이지 라우팅 하기

[Node.js] React Router란? / 사용법

 

14. hash 함수 이용해서 비밀번호 암호화하기

[Node.js] bcrypt 이용해서 암호화 하기 ( 해시함수 )

 

15. jsonwebtoken 이용해서 사용자 권한 설정하기

- 브라우저에 사용자 정보 저장하기 위해 토큰 만들기 (암호화)

- 일반 사용자는 토큰 정보를 알아볼 수 없어야 한다.

- 서버가 토큰 정보를 알아볼 수 있어야 한다.

[Node.js] 토큰(token) 이란? / 사용법 (jsonwebtoken)

 

16. React 폼 기능 구현하기

[React] react-hook-form이란? / 사용법

 

17. 프론트엔드에서 GraphQL 쿼리, 뮤테이션 사용하기  ( 프론트엔드 - 백엔드 연결 )

[React/GraphQL] React에서 GraphQL 명령어 사용해 정보 불러오기

 

18. 토큰 값 브라우저 로컬스토리지에 저장하기

- 토큰 값 변경시 렌더링 되도록 함

- 토큰 값 로컬 스토리지에 저장해, 브라우저 시작시 토큰 값 가져오기

( 토큰 값 있으면 권한에 따라 화면 표시 )

[React] Local State 사용하기 (Reactive Variables)

 

19. useHistory 이용해, 리다이렉팅 하기 ( react-router-dom )

- 리다이렉팅 : 다른 링크로 이동하기

[Node.js] React Router 지원 hooks 써보기 ( history, location )

 

20. 처음 사이트 접속시, local storage에 존재하는 토큰 불러오기

- 처음 사이트 접속시 : apollo 클라이언트 접속시

- 토큰 불러오기 : getItem, header에 전해주기

 

 

21. db 수정 후, 페이지에 데이터 반영하기

[ React/Apollo ] Apollo Client로, 페이지 실시간 업데이트 하기