공부일지/Project 썸네일형 리스트형 비전공자의 프로젝트 만들기) 스케줄 프로젝트 만들기 - part3 날짜 작업 스케줄 프로젝트 만들기 - part3 후.... 날짜기능과 UI작업하는데 왜 이렇게 오래 걸리는지.... 의지가 꺾일 뻔했지만 개 같이 부활 성공~~ 저번시간보다 작업된건 날짜 기능과 시간을 등록하는 부분이 추가되었다. 리듀서의 schedule파일에 isComplate를 만들어 완료 여부를 확인하는 키값을 만들었습니다. let keyId = 0 const currentSchedule = { scheduleList:[], } export const ADD = "ADD_SCHEDULE"; export const DELETE = "SCHEDULE/DELETE"; export const EDIT = "SCHEDULE/EDIT"; export const SUCCESS = "SCHEDULE/SUCCESS"; exp.. 더보기 비전공자의 프로젝트 만들기) 스케줄 프로젝트 만들기 - part2 오류 수정 후 오류 수정.... 스케줄 프로젝트 만들기 - part2 저번일지에서 리덕스 설치 후 오류 수정하러 간다고 했던 MIN입니다. 오류를 수정하고 다시 돌아왔습니다. 하지만 아시죠... 오류를 수정하면 또 다른 오류가 나온다는 거를............ 나름 인강을 듣고 리덕스 쪽에 이해를 했다고 생각했던 제가 너무 안일했던 거 같네요... 상태관리... 아직은 저 같은 주니어한테는 어렵네요. 그럼 저번시간에 생겼던 오류가 무엇이냐면... 바로 리액트 18버전에서는 랜더링 하는 방식이 다른데 제가 무지성으로 블로그에 있는 글을 막 들고 와서 작성을 하는 바람에 생겼던 오류였더라고요..... 당연히 그 문제는 아닐 거라 생각해서 진짜 한시간 넘게 오류 찾았어요.... 이번시간에도 리덕스 때문에 데이터가 안 받아지고 데이터 저장이.. 더보기 비전공자의 프로젝트 만들기) 스케줄 프로젝트 만들기 - part1 오류의 위기 ...... 스케줄 프로젝트 만들기 - part1 그동안 인강을 보여 공부하면서 배웠던 내용이 얼마나 내 것이 되었는지 확인하기 위해 혼자서 스케줄 프로젝트를 진행하였다. 일단 기획단에서 작업을 했는데 나는 기획을 배워본 적이 없어서 완벽한 기획은 아닐 것이다. vscode에서 drawio를 설치해 간단한 프로젝트 구상도를 기획했다. 이런 느낌의 구성으로 해야지 생각을 하고 이번엔 디자인 관련해서 서칭을 해보았다. 다양한 디자인을 서칭 하다 내가 원하는 느낌의 디자인을 찾게 되었다. https://dribbble.com/shots/15755836-Construction-Calendar Construction Calendar Happy Monday 😃 We continue to show you a part of our.. 더보기 비전공자의 프로젝트 만들기) 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로 해당 주소로 변경이 되었을 때 나와야 되는 화면을 출력해 준다. 그리.. 더보기 비전공자의 프로젝트 만들기) 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에 저장되어 있는 영화정보의 .. 더보기 비전공자의 프로젝트 만들기) 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 = .. 더보기 이전 1 2 3 다음
