react 썸네일형 리스트형 비전공자의 프로젝트 만들기) 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 한 데이터가 오고 갈 수 있다. .. 더보기 비전공자의 프로젝트 만들기) TicTacToe App (Class Type) TicTacToeApp React 공식 사이트에 있는 틱택톡 예제를 만들었다. 프로젝트에는 css내용은 웬만해서 적지 않을 예정이다. npx create-react-app tictactoe_app 우선 틱택톡 앱을 만들기 위해서 리액트 프로젝트를 만들어 주었다. 기본틀부터 작업하였다. App.js import './App.css'; function App() { return ( ); } export default App; 이제 컴포넌트를 생성해 app.js에 출력되게 만들 예정이다. src하위 폴더에 컴포넌트폴더를 생성 후 Board와 Square를 만들어준다. Square.js import React, { Component } from 'react' export default class Square e.. 더보기 비전공자의 공부일지 - NextJS NextJS란 React의 SSR(server side rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크이다. 리액트로 개발할 때 SPA(single page application)을 이용하며 CSR(client Side Rendering)을 하기 때문에 좋은 점도 있지만 단점도 있는데 그 부분이 바로 검색엔진 최적화(SEO)인데 CSR을 하면 첫 페이지에서 빈 html을 가져와 JS해석하여 화면을 구상하기 때문에 포털사이트에서 거의 노출되지 않는다. 하지만 NextJS에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링 하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 된다. 리액트에서도 SSR을 지원하지만 구현하기에 괸.. 더보기 비전공자의 공부일지 - Recoil TodoList, 패스트캠퍼스 TodoList 만들기 일정을 등록하고 수정하고 삭제, 완료 기능 있는 todoList를 만들 계획이다. 이번에는 App.js에 atom을 만들지 않고 todoAtom.js 파일을 만들었다. todoAtom.js import { atom } from "recoil"; export const todoListState = atom({ key:'todoListState', default:[] }) 그리고 components 폴더에 TodoItemCreator.js를 만들어서 작업하였다. TodoItemCreator.js import React, { useState } from 'react' import { useSetRecoilState } from 'recoil'; import { todoListState .. 더보기 이전 1 2 3 4 5 다음
