전체 글
-
#2.0 프리즈마 소개인스타그램 클론 코딩/#2 Prisma 소개 및 설정 2019. 12. 16. 16:02
prisma이란? prisma는 ORM 이다. (Object-relational mapping(객체 관계 연결) 왜 prisma가 필요할까? prisma는 데이터베이스 관련한 어려운 문제들을 해결해줌 prisma 외에 typeorm이나, django orm, sequelize같은 다른 ORM도 존재. 서버설정 프리즈마 사이트 접속, 로그인, 새로운 서버 만들기 (기존 서버가있다면 제거했음) npm 아래에있는 npx 코드 복사후 vscode에서 붙여넣기,prisma init 입력 genreated폴더 및 datamodel.prisma파일 생성됨 .gitignore에 generated 입력 prisma deploy를 터미널에 입력하여 datamodel.prisma 파일에있는 모델을 (사진 참고) prisma..
-
#1.2 전문가처럼 서버 설정인스타그램 클론 코딩/#1 설정 2019. 12. 15. 22:32
yarn add morgan logger(로깅 전용 모듈)임 GraphQLServer 엔 express 서버가 내장되어있는데,아래와 같이 express 미들웨어를 설정해줄수있다. logger괄호안의 dev는 옵션임 require("dotenv").config(); import { GraphQLServer } from "graphql-yoga"; import logger from "morgan"; const server = new GraphQLServer({ typeDefs, resolvers }); server.express.use(logger("dev")); src>api 폴더를 만든후 폴더 안에 schema.js파일 및 resolver.js (여기선 .js파일)파일을 만듦 yarn add graphq..
-
# 1.1 GraphQL 서버 생성인스타그램 클론 코딩/#1 설정 2019. 12. 15. 21:37
yarn add dotenv - dtenv 모듈은 .env 파일을 읽음 src .env 파일을 만듦 (PORT = 4000 작성) server.js require("dotenv").config(); import { GraphQLServer } from "graphql-yoga"; const PORT = process.env.PORT || 4000; const typeDefs = ` type Query{ hello:String! } `; const resolvers = { Query: { hello: () => "Hi" } }; const server = new GraphQLServer({ typeDefs, resolvers }); server.start({ port: PORT }, () => consol..
-
#1.0 프로젝트 설정인스타그램 클론 코딩/#1 설정 2019. 12. 15. 20:10
cmd github에서 프로젝트생성(README.md 파일도 같이 생성해줬음) git clone [깃허브 레퍼지토리 주소] cd prismagram yarn init (쭈루룩 나오는거 작성..) yarn add graphql-yoga code . yarn add nodemon -D yarn add babel-cli -D yarn add babel-node(혹시 버전 관리 오류가 뜨면 yarn remove babel-cli를 해보자) yarn add @babel/node , yarn add @babel/preset-env yarn add @babel/core src .babelrc파일 생성
-
useEffect 2부React Hooks 2019. 12. 12. 09:14
useScrool 유저가 스크롤해서 뭔가를 지나쳤을때 색상을 바꾸거나 무엇이든지 할 필요가있을때 사용 import React, { useState, useEffect, useRef } from "react"; import ReactDOM from "react-dom"; const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = event => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); window.removeEventListe..
-
useEffectReact Hooks 2019. 12. 12. 08:38
useEffect useEffect는 componentDidmount, componentWillUnMount, componentDidUpdate 이다. 2개의 인자를 받는데, 첫번째는 function으로써의 effect고, 두번째에 넣은 인자 상태가 바뀌면 첫번째 인자가 다시 실행된다. useEffect(sayHello, []); // 2번째인자값을 이런식으로 비우면 한번만 실행됨 useTitle // 5초후 브라우저의 제목이 Home로 바뀜 import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; const useTitle = initialTitle => { const [title, setTitle] = u..
-
useStateReact Hooks 2019. 12. 10. 23:43
더는 클래스형 컴포넌트를 안만들어도됨! state를 함수형 컴포넌트에서 사용가능!! useState import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const App = () => { const [item, setItem] = useState(1); // 항상 두개의 value를 갖고 array로 리턴함 useState()안의 값이 item이 됨 // item 하나만 갖고싶을경우 => const item = useState(1)[0] const incrementItem = () => setItem(item + 1); const decrementItem = () => setItem..