Project 썸네일형 리스트형 React Project ) Slack Clone, 메인페이지, Header, 프로필 변경, 로그아웃 작업 안녕하세요. 저번시간에 이어서 Slack Clone 코딩 두번째 이야기!! 프론트 공부하고 있는 비전공자 에디터 M입니다. 저는 원래 퍼블리싱을 하였는데 개발쪽 공부를 하려고 하니 예전에 jsp와 php 배웠을때가 기억이 나네요. 하면 할 수록 이게 맞나 싶고 포기하고 싶기도 한데 그래도 버티고 공부하면 프론트쪽 업무가 편해지는 날이 오겠죠?? 그런데 찾아보니 There.js라고 웹에 그래픽 작업을 할 수 있는게 있더라구요. 그걸 보고 아... 내가 IT쪽으로 온 이유가 생각나더라구요. 디자인을 하며 다양한 효과를 눈으로 보여주며 변화하는게 재밌고 신기해서 했다는걸 굳이 React나 Vue를 배우거나 하지 않고 There.js쪽으로 가도 괜찮겠다. 그러기 위해선 WebGL쪽을 공부해야 되겠더라구요. 원리.. 더보기 비전공자의 프로젝트 만들기) Git Hub API를 활용한 유저 검색 서비스 Git Hub API를 활용한 유저 검색 서비스 오늘은 패스트캠퍼스 인강 중에 Github API를 사용해서 유저 검색 서비스를 작업하였습니다. 먼저 완성된 이미지들을 보여드릴께요. 서치박스에 유저를 검색하고 해당 유저의 정보에 검색하는 내용과 동일한 내용이 있는 유저들을 출력하고 info를 눌렀을 때 해당 유저의 정보와 저장소의 리스트들이 출력되는 프로젝트입니다. 코드 리뷰에 앞서 이번 프로젝트에서 사용했던 라이브러리 리스트입니다. mui/material, mui/styled, mui/icons-material axios dayjs zustand react-router-dom 그럼 이제 작업했던 코드를 리뷰해 볼게요. indexjs import React from 'react'; import React.. 더보기 비전공자의 프로젝트 만들기) 검색API를 이용한 검색 프로젝트 만들기 검색API를 이용한 검색 프로젝트 만들기 이번에는 Rapidapi의 api를 사용해서 구글 검색기능의 프로젝트를 만들어 보려고 한다. 작업에 앞서 먼저 이번 프로젝트에서 사용할 라이브러리는 아래의 목록과 같다. react-loader-spinner axios react-paginate react-query react-router-dom autoperfixer postcss tailwind 먼저 프로젝트에 components 폴더를 만들어서 컴포넌트들을 만든다. NavigationBar.jsx : 검색의 각 탭을 나타낸다. SearchInput.jsx : 검색어를 입력 후 엔터를 누르면 파라미터로 해당 검색어를 전송한다. SearchTermRequired.jsx : 검색어가 입력되지 않았을 때 표출 될 '.. 더보기 스케줄 프로젝트 만들기 - part5 스케줄 수정, 삭제 작업 오늘은 스케줄프로젝트 수정, 삭제 부분을 작업하였다. 이제는 기반을 다 만들어 놓은 프로젝트여서 디자인을 수정하거나 하지 않는 이상 심각한 에러가 나거나 하진 않았다. 다른 페이지는 수정된 내용은 없고 ModalPop페이지 위주로 작업을 하였다. 수정하기 버튼을 눌렸는지 눌리지 않았는지 체크하는 state를 만들고 수정하기 버튼을 누르면 수정할 수 있게 input들의 readOnly를 제거해 준다. 수정버튼 누리기 전의 디자인 수정버튼 눌렀을 때의 디자인 그리고 취소 버튼을 눌렀을 때는 팝업창이 사라지지 않고 내용도 원복 돼야 되기 때문에 const editCencle = () => { setEditMode(false); setScheduleTitle(editData.title) setCrrentDate.. 더보기 비전공자의 프로젝트 만들기) 스케줄 프로젝트 만들기 - 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 만들기 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에 저장되어 있는 영화정보의 .. 더보기 비전공자의 프로젝트 만들기) 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 다음
