본문 바로가기
728x90
반응형

분류 전체보기

비전공자의 프로젝트 만들기) Disneyplus App 만들기 part4 Disneyplus App 만들기 part4 firebase로 서비스 배포해보려고 한다. 프로젝트 제작할 때 프론트개발하면서 백엔드 서버까지 개발하기 위해서는 시간이 오래 걸리는데 그 부분을 해결해 주는 게 firebase이다 firebase가 전부 완벽하게 해결해 줄 순 없지만 인증, 데이터베이스, 스토리지, 푸시, 등등 꽤 많은걸 지원해준다. firebase의 연동과 관련한 자세한 내용은 구글에 검색하면 자세히 나온다. UI/UX가 잘되어 있어서 회원가입하고 버튼 몇 번 누르고 설명대로 작업하면 프로젝트와 연결된다. https://firebase.google.com/?hl=ko Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플.. 더보기
비전공자의 프로젝트 만들기) Disneyplus App 만들기 part3 Disneyplus App 만들기 part3 이번파트는 우선 터미널에서 react-router-dom을 설치한다. react-router-dom이 무엇이냐면 간단히 설명하자면 유저가 원하는 페이지를 보여주는 기능을 하는 거라 생각하면 된다. root.render( ); root.render( ); 설치하면 루트경로에 index.js파일을 보면 React.StrictMode로 App가 감싸져 있는데 그 부분을 BrowserRouter로 변경해 준다. 그리고 App.js에 가서 const Layout = () => { return( ) } function App() { return ( ); } 아래와 같이 Routes로 감싸주고 path로 해당 주소로 변경이 되었을 때 나와야 되는 화면을 출력해 준다. 그리.. 더보기
비전공자의 공부일지 - GraphQL 세번째 이야기 GraphQL 세번째 이야기 Resolver 데이터를 전달받을때 api의 데이터 전체를 가져오는게 아니라 데이터의 특정 정보만을 가져오고 싶을때, 즉 필터링이 필요할때 사용한다. 예를들어 저번일지에서 posts의 내용중에 module.exports = [ { id: 'post1', title:'It is a first post', description:'It is a first post description', comments:[{ id:'comment1', text:'It is a first comment', likes: 1 }] }, { id: 'post2', title:'It is a second post', description:'It is a second post description', com.. 더보기
비전공자의 프로젝트 만들기) disneyplus App 만들기 part2 Disneyplus App 만들기 part2 오늘은 지난 시간에 만들던 디즈니플러스 클론코딩 배너 부분부터 작업을 진행했다. const [movie, setMovie] = useState([]); const truncate = (str, n) => { return str?.length > n ? str.substring(0, n-1) + "..." : str } {movie.title||movie.name||movie.original_nam} {movie?.videos?.results[0]?.key && play } {truncate(movie?.overview, 100)} 지난 시간에 setMovie에 영화의 정보를 저장까지 진행했는데 배너를 불러오기 위해선 setMovie에 저장되어 있는 영화정보의 .. 더보기
비전공자의 공부일지 - GraphQL 두번째 이야기 GraphQL 두번째이야기 저번 일지에 이어서 이번에도 GraphQL을 공부할 것이다. 저번에 작성했던 server.js에서 이번에는 Query에 다른 코드들을 작성해 볼 예정이다. const express = require('express'); const { graphqlHTTP } = require('express-graphql'); const {buildSchema} = require('graphql') const app = express(); const port = 4000; const schema = buildSchema(` type Query{ posts:[Post], comments: [Comment], } type Post{ id: ID!, title: String!, description.. 더보기
비전공자의 프로젝트 만들기) disneyplus App 만들기 part1 - 구조만들기 DisneyPlus App 만들기 패스트캠퍼스에 디즈니 서비스 앱 만들기 프로젝트를 하였다. 프로젝트 진행 전 the movie db를 사용해서 영화 정보를 받아와 작업해야 되기에 api를 발급받아야 된다. 발급방법은 구글에 검색하면 자세한 설명이 있는 글들이 많은 거 같다. https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 먼저 이번에는 api통신을 fetch가 아니라 axios를 사용해서 작업한다. fetch와 axios의 차이점을 상세히 알진 못하지만 axios가 사용하기 좀 더 편하고 .. 더보기
비전공자의 프로젝트 만들기) TicTacToeApp (Function Type) TicTacToe 만들기 2탄 어제 만들었던 TicTacToe App을 class문법이 아닌 function 문법으로 변경 작업을 진행했다. 단 이번에는 굳이 CRA 해서 로컬에서 만들지 않고 CodeSandBox를 이용해서 진행한다. 리액트 16 버전부터 생긴 ReactHook을 사용해 변경 작업을 진행한다. 먼저 Board부터 변경하였다. import React, { useState } from "react"; import Square from "./Square"; const Board = () => { const [squares, setSquares] = useState(Array(9).fill(null)); const handleClick = (i) => { const squaresClone = .. 더보기
비전공자의 공부일지 - GraphQL GraphQL이란?? GraphQL은 API용 쿼리 언어이다. GraphQL은 API의 데이터에 대한 이해하기 쉬운 설명을 제공하고, 클랑이 언트가 필요한 것을 정확하게 요청할 수 있다. 페이스북에서 2012년도에 개발되었다. GraphQL의 장점으로는 프론트개발중 백엔드 개발자가 RESP API처럼 개발을 마칠 때까지 기다리지 않아도 된다. Overfetching과 Underfetching을 막아준다. REST를 이용할 때 필요한 데이터를 만들기 위해서 여러 번 요청을 보내야 할 때 GraphQL은 한 번의 요청으로 데이터를 가져올 수 있다. Schema를 작성하기 때문에 데이터가 어떻게 이루어져 있는지 알 수 있다. Type을 작성하기 때문에 요청과 응답에 Vaild 한 데이터가 오고 갈 수 있다. .. 더보기
728x90
반응형

티스토리툴바