1. prisma 설치
[Prisma] Prisma란? / 사용법 ( PostgreSQL 연결 , feat.GraphQL )
Prisma란? SQL 코드를 쓰지 않고, js코드(typescript도 가능)를 작성해 데이터베이스를 수정할 수 있도록 연결해주는 서비스 Prisma의 필요성 SQL 코드를 배울 필요가 없다 ㅋㅋ 기존의 SQL 코드보다, js코
defineall.tistory.com
2. postgresql 로 db만들기
[PostgreSQL] PostgreSQL, pgAdmin4 이란? / 명령어
PostgreSQL 이란? 오픈소스 객체-관계형 데이터 베이스 시스템 (ORDBMS) 다른 관계형 데이터베이스와 다르게, 연산자, 복합 자료형, 집게 함수, 자료형 변환자, 확장 기능등 다양한 데이터베이스 객체
defineall.tistory.com
3. prisma에 db 연동, 모델 만들기
4. prisma client로 db, js연결하기
[Prisma] Prisma Client란? / 사용법
Prisma Client란? js코드로, prisma를 통한 DB 수정작업을 할 수 있도록 해주는 도구 // prisma 프로젝트 생성시 자동으로 설치됨 ( node_modules/prisma/prisma-client 위치 ) Prisma Client 설치 npm install @p..
defineall.tistory.com
5. graphql로 db컨트롤 하기 위한 javascript 명령어 만들기
[Node.js] GraphQL, Apollo 란? / 사용법 ( GraphQL 서버 만들기 )
GraphQL 이란? ( GraphQL API ) Node.js를 이용해, 데이터베이스에 접근하는 나만의 명령어를 만들고 (Query, Mutation, TypeDefs, resolvers ) CRUD 요청, 응답을 더 효과적으로 처리할 수 있게 해주는 API ( 연..
defineall.tistory.com
- graphql편하게 사용하기 위한 apolloserver 설치
- 명령어 형식 만들기 (typeDefs)
- prisma 사용한 명령어 만들기 (resolver)
6. babel으로 es6 es7 최신코드 es5코드로 변경해 node.js 서버 실행하기
[Node.js] Babel (바벨) 이란? / 사용법
babel 이란? 최신 ES6, ES7 버전의 javascript코드를, ES5버전의 코드로 바꾸어주는 Node.js 패키지 babel의 필요성 / 쓰는 곳 자주변하는 javascript 최신 코드를 이해하지 못하는 웹 브라우저에서도 페이지에
defineall.tistory.com
7. nodemon으로 파일 변경시 babel 서버 실행하기
[Node.js] nodemon이란? / 사용법
nodemon이란? Node.js 서버가 실행 중일때 javascript코드가 변경을 감지해서, 변경시마다 명령어를 실행 수 있게 해주는 Node.js 패키지 nodemon의 필요성 js코드의 변경 결과를 바로바로 확인 할 수 있어,
defineall.tistory.com
[Node.js] nodemon, Babel 연동한 Node.js 서버 만들기
nodemon 이란? [Node.js] nodemon이란? / 사용법 nodemon이란? Node.js 서버가 실행 중일때 javascript코드가 변경을 감지해서, 그에 따른 결과를 바로 바로 반영해 주는 Node.js 패키지 nodemon의 필요성 코드의..
defineall.tistory.com
8.resolver, typeDefs 파일로 분리하기
[Node.js/GraphQL] GraphQL 코드 종류별로 정리하기
정리해야하는 이유 GraphQL에서 사용하는 Query, Mutation, typeDefs 을 전부다 한 파일에 작성하다보면, 파일 크기가 너무 커지고, 코드의 길이도 너무 길어져, 원하는 부분을 찾기가 힘들다 나중에 수
defineall.tistory.com
9. resolver, typeDefs, prisma 작성
10. react 프로젝트 생성 (프론트엔드)
[Node.js] React.js 란? / React 사용법 ( create-react-app )
React란? 웹 사이트 / 앱의 화면(UI)을 만들어주는 Node.js 패키지 (페북이 만듬) React 탄생 배경 요즘 웹사이트는, 규모가 커질때로 커지고, 사용자가 직접 컨트롤 할 수 있는 부분이 많아지고 있다.
defineall.tistory.com
11. styled-components 설치, 사용해 컴포넌트 만들기
[React] styled-components란? / 사용법 (js/ts)
styled-components란? React.js 안에서 스타일(CSS)을 바꿀 수 있게 해주는 Node.js 패키지 React란? [Node.js] React.js 란? / React 사용법 ( create-react-app ) React란? 웹/앱의 사용자 조작환경(UI)를 만들..
defineall.tistory.com
12. styled-components 사용해 모든 내용 스타일 만들기, 스타일 초기설정 하기
[Node.js] styled-reset 이란? / 사용법
styled-reset 이란? styled-components와 연결되어, 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지 normalize.css와 동일한 역할 styled-reset 설치하기 npm i styled-reset sty..
defineall.tistory.com
13. react-router 로 페이지 라우팅 하기
[Node.js] React Router란? / 사용법
라우터의 왕 React Router란? React에서 Router 기능을 편리하게 사용할 수 있게 해주는 Node.js 패키지 Router란? URI와 화면을 연결해주는 기능을 하는 프로그램 다시, React Router란? React에서 각각의 URI에..
defineall.tistory.com
14. hash 함수 이용해서 비밀번호 암호화하기
[Node.js] bcrypt 이용해서 암호화 하기 ( 해시함수 )
bcrypt란? hash 함수를 이용해 정보를 암호화 할 수 있도록 해주는 Node.js 패키지 bcrypt의 필요성 MD5 방식의 해시함수는 빠르기는 하나, 보안이 약해 해킹에 취약하다. SHA 방식의 해시함수는 안전하기
defineall.tistory.com
15. jsonwebtoken 이용해서 사용자 권한 설정하기
- 브라우저에 사용자 정보 저장하기 위해 토큰 만들기 (암호화)
- 일반 사용자는 토큰 정보를 알아볼 수 없어야 한다.
- 서버가 토큰 정보를 알아볼 수 있어야 한다.
[Node.js] 토큰(token) 이란? / 사용법 (jsonwebtoken)
토큰이란? 지금 서버에 접속한 유저가 누군지 정확히 구별할 수 있도록 하는 것 유저 구별이 가능해야, 유저의 권한에 맞는 정확한 기능을 응답할 수 있다. ( 다른 사람의 정보를 유출하기 어렵
defineall.tistory.com
16. React 폼 기능 구현하기
[React] react-hook-form이란? / 사용법
react-hook-form이란? React에서 폼, 양식을 만들때 사용하는 라이브러리 복잡한 폼을 만들때, 간결하고 쉬운 코드작성에 도움이된다! Home React hook for form validation without the hassle react-hook-form.c..
defineall.tistory.com
17. 프론트엔드에서 GraphQL 쿼리, 뮤테이션 사용하기 ( 프론트엔드 - 백엔드 연결 )
[React/GraphQL] React에서 GraphQL 명령어 사용해 정보 불러오기
React란? [Node.js] React.js 란? / React 사용법 ( create-react-app ) React란? 웹 사이트 / 앱의 화면(UI)을 만들어주는 Node.js 패키지 (페북이 만듬) React 탄생 배경 요즘 웹사이트는, 규모가 커질때로 커지..
defineall.tistory.com
18. 토큰 값 브라우저 로컬스토리지에 저장하기
- 토큰 값 변경시 렌더링 되도록 함
- 토큰 값 로컬 스토리지에 저장해, 브라우저 시작시 토큰 값 가져오기
( 토큰 값 있으면 권한에 따라 화면 표시 )
[React] Local State 사용하기 (Reactive Variables)
Local State란? LocalStorage에, state값을 저장해서 사용하는 것! Local State의 필요성 React상에서 어떤 컴포넌트에서든지 state를 변경할 수 있도록 해야할때, Local Storage를 이용하지 않고, props 형태로..
defineall.tistory.com
19. useHistory 이용해, 리다이렉팅 하기 ( react-router-dom )
- 리다이렉팅 : 다른 링크로 이동하기
[Node.js] React Router 지원 hooks 써보기 ( history, location )
1. useHistory / useNavigate // ver.5 const history = useHistory(); history.push("/") // ver.6 const navigate = useNavigate(); navigate("/") 특정 링크로 위치 이동할 수 있다. 2. useLocation { pathname..
defineall.tistory.com
20. 처음 사이트 접속시, local storage에 존재하는 토큰 불러오기
- 처음 사이트 접속시 : apollo 클라이언트 접속시
- 토큰 불러오기 : getItem, header에 전해주기
21. db 수정 후, 페이지에 데이터 반영하기
[ React/Apollo ] Apollo Client로, 페이지 실시간 업데이트 하기
GraphQL / Apollo Client란? [Node.js] GraphQL, Apollo 란? / 사용법 ( GraphQL 서버 만들기 ) GraphQL 이란? ( GraphQL API ) 브라우저와 서버가, Query, Mutation, TypeDefs, resolvers를 사용해 CRUD 요청, 응..
defineall.tistory.com
1. prisma 설치
[Prisma] Prisma란? / 사용법 ( PostgreSQL 연결 , feat.GraphQL )
Prisma란? SQL 코드를 쓰지 않고, js코드(typescript도 가능)를 작성해 데이터베이스를 수정할 수 있도록 연결해주는 서비스 Prisma의 필요성 SQL 코드를 배울 필요가 없다 ㅋㅋ 기존의 SQL 코드보다, js코
defineall.tistory.com
2. postgresql 로 db만들기
[PostgreSQL] PostgreSQL, pgAdmin4 이란? / 명령어
PostgreSQL 이란? 오픈소스 객체-관계형 데이터 베이스 시스템 (ORDBMS) 다른 관계형 데이터베이스와 다르게, 연산자, 복합 자료형, 집게 함수, 자료형 변환자, 확장 기능등 다양한 데이터베이스 객체
defineall.tistory.com
3. prisma에 db 연동, 모델 만들기
4. prisma client로 db, js연결하기
[Prisma] Prisma Client란? / 사용법
Prisma Client란? js코드로, prisma를 통한 DB 수정작업을 할 수 있도록 해주는 도구 // prisma 프로젝트 생성시 자동으로 설치됨 ( node_modules/prisma/prisma-client 위치 ) Prisma Client 설치 npm install @p..
defineall.tistory.com
5. graphql로 db컨트롤 하기 위한 javascript 명령어 만들기
[Node.js] GraphQL, Apollo 란? / 사용법 ( GraphQL 서버 만들기 )
GraphQL 이란? ( GraphQL API ) Node.js를 이용해, 데이터베이스에 접근하는 나만의 명령어를 만들고 (Query, Mutation, TypeDefs, resolvers ) CRUD 요청, 응답을 더 효과적으로 처리할 수 있게 해주는 API ( 연..
defineall.tistory.com
- graphql편하게 사용하기 위한 apolloserver 설치
- 명령어 형식 만들기 (typeDefs)
- prisma 사용한 명령어 만들기 (resolver)
6. babel으로 es6 es7 최신코드 es5코드로 변경해 node.js 서버 실행하기
[Node.js] Babel (바벨) 이란? / 사용법
babel 이란? 최신 ES6, ES7 버전의 javascript코드를, ES5버전의 코드로 바꾸어주는 Node.js 패키지 babel의 필요성 / 쓰는 곳 자주변하는 javascript 최신 코드를 이해하지 못하는 웹 브라우저에서도 페이지에
defineall.tistory.com
7. nodemon으로 파일 변경시 babel 서버 실행하기
[Node.js] nodemon이란? / 사용법
nodemon이란? Node.js 서버가 실행 중일때 javascript코드가 변경을 감지해서, 변경시마다 명령어를 실행 수 있게 해주는 Node.js 패키지 nodemon의 필요성 js코드의 변경 결과를 바로바로 확인 할 수 있어,
defineall.tistory.com
[Node.js] nodemon, Babel 연동한 Node.js 서버 만들기
nodemon 이란? [Node.js] nodemon이란? / 사용법 nodemon이란? Node.js 서버가 실행 중일때 javascript코드가 변경을 감지해서, 그에 따른 결과를 바로 바로 반영해 주는 Node.js 패키지 nodemon의 필요성 코드의..
defineall.tistory.com
8.resolver, typeDefs 파일로 분리하기
[Node.js/GraphQL] GraphQL 코드 종류별로 정리하기
정리해야하는 이유 GraphQL에서 사용하는 Query, Mutation, typeDefs 을 전부다 한 파일에 작성하다보면, 파일 크기가 너무 커지고, 코드의 길이도 너무 길어져, 원하는 부분을 찾기가 힘들다 나중에 수
defineall.tistory.com
9. resolver, typeDefs, prisma 작성
10. react 프로젝트 생성 (프론트엔드)
[Node.js] React.js 란? / React 사용법 ( create-react-app )
React란? 웹 사이트 / 앱의 화면(UI)을 만들어주는 Node.js 패키지 (페북이 만듬) React 탄생 배경 요즘 웹사이트는, 규모가 커질때로 커지고, 사용자가 직접 컨트롤 할 수 있는 부분이 많아지고 있다.
defineall.tistory.com
11. styled-components 설치, 사용해 컴포넌트 만들기
[React] styled-components란? / 사용법 (js/ts)
styled-components란? React.js 안에서 스타일(CSS)을 바꿀 수 있게 해주는 Node.js 패키지 React란? [Node.js] React.js 란? / React 사용법 ( create-react-app ) React란? 웹/앱의 사용자 조작환경(UI)를 만들..
defineall.tistory.com
12. styled-components 사용해 모든 내용 스타일 만들기, 스타일 초기설정 하기
[Node.js] styled-reset 이란? / 사용법
styled-reset 이란? styled-components와 연결되어, 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지 normalize.css와 동일한 역할 styled-reset 설치하기 npm i styled-reset sty..
defineall.tistory.com
13. react-router 로 페이지 라우팅 하기
[Node.js] React Router란? / 사용법
라우터의 왕 React Router란? React에서 Router 기능을 편리하게 사용할 수 있게 해주는 Node.js 패키지 Router란? URI와 화면을 연결해주는 기능을 하는 프로그램 다시, React Router란? React에서 각각의 URI에..
defineall.tistory.com
14. hash 함수 이용해서 비밀번호 암호화하기
[Node.js] bcrypt 이용해서 암호화 하기 ( 해시함수 )
bcrypt란? hash 함수를 이용해 정보를 암호화 할 수 있도록 해주는 Node.js 패키지 bcrypt의 필요성 MD5 방식의 해시함수는 빠르기는 하나, 보안이 약해 해킹에 취약하다. SHA 방식의 해시함수는 안전하기
defineall.tistory.com
15. jsonwebtoken 이용해서 사용자 권한 설정하기
- 브라우저에 사용자 정보 저장하기 위해 토큰 만들기 (암호화)
- 일반 사용자는 토큰 정보를 알아볼 수 없어야 한다.
- 서버가 토큰 정보를 알아볼 수 있어야 한다.
[Node.js] 토큰(token) 이란? / 사용법 (jsonwebtoken)
토큰이란? 지금 서버에 접속한 유저가 누군지 정확히 구별할 수 있도록 하는 것 유저 구별이 가능해야, 유저의 권한에 맞는 정확한 기능을 응답할 수 있다. ( 다른 사람의 정보를 유출하기 어렵
defineall.tistory.com
16. React 폼 기능 구현하기
[React] react-hook-form이란? / 사용법
react-hook-form이란? React에서 폼, 양식을 만들때 사용하는 라이브러리 복잡한 폼을 만들때, 간결하고 쉬운 코드작성에 도움이된다! Home React hook for form validation without the hassle react-hook-form.c..
defineall.tistory.com
17. 프론트엔드에서 GraphQL 쿼리, 뮤테이션 사용하기 ( 프론트엔드 - 백엔드 연결 )
[React/GraphQL] React에서 GraphQL 명령어 사용해 정보 불러오기
React란? [Node.js] React.js 란? / React 사용법 ( create-react-app ) React란? 웹 사이트 / 앱의 화면(UI)을 만들어주는 Node.js 패키지 (페북이 만듬) React 탄생 배경 요즘 웹사이트는, 규모가 커질때로 커지..
defineall.tistory.com
18. 토큰 값 브라우저 로컬스토리지에 저장하기
- 토큰 값 변경시 렌더링 되도록 함
- 토큰 값 로컬 스토리지에 저장해, 브라우저 시작시 토큰 값 가져오기
( 토큰 값 있으면 권한에 따라 화면 표시 )
[React] Local State 사용하기 (Reactive Variables)
Local State란? LocalStorage에, state값을 저장해서 사용하는 것! Local State의 필요성 React상에서 어떤 컴포넌트에서든지 state를 변경할 수 있도록 해야할때, Local Storage를 이용하지 않고, props 형태로..
defineall.tistory.com
19. useHistory 이용해, 리다이렉팅 하기 ( react-router-dom )
- 리다이렉팅 : 다른 링크로 이동하기
[Node.js] React Router 지원 hooks 써보기 ( history, location )
1. useHistory / useNavigate // ver.5 const history = useHistory(); history.push("/") // ver.6 const navigate = useNavigate(); navigate("/") 특정 링크로 위치 이동할 수 있다. 2. useLocation { pathname..
defineall.tistory.com
20. 처음 사이트 접속시, local storage에 존재하는 토큰 불러오기
- 처음 사이트 접속시 : apollo 클라이언트 접속시
- 토큰 불러오기 : getItem, header에 전해주기
21. db 수정 후, 페이지에 데이터 반영하기
[ React/Apollo ] Apollo Client로, 페이지 실시간 업데이트 하기
GraphQL / Apollo Client란? [Node.js] GraphQL, Apollo 란? / 사용법 ( GraphQL 서버 만들기 ) GraphQL 이란? ( GraphQL API ) 브라우저와 서버가, Query, Mutation, TypeDefs, resolvers를 사용해 CRUD 요청, 응..
defineall.tistory.com
