본문 바로가기

728x90
반응형

프로젝트

스케줄 프로젝트 만들기 - part5 스케줄 수정, 삭제 작업 오늘은 스케줄프로젝트 수정, 삭제 부분을 작업하였다. 이제는 기반을 다 만들어 놓은 프로젝트여서 디자인을 수정하거나 하지 않는 이상 심각한 에러가 나거나 하진 않았다. 다른 페이지는 수정된 내용은 없고 ModalPop페이지 위주로 작업을 하였다. 수정하기 버튼을 눌렸는지 눌리지 않았는지 체크하는 state를 만들고 수정하기 버튼을 누르면 수정할 수 있게 input들의 readOnly를 제거해 준다. 수정버튼 누리기 전의 디자인 수정버튼 눌렀을 때의 디자인 그리고 취소 버튼을 눌렀을 때는 팝업창이 사라지지 않고 내용도 원복 돼야 되기 때문에 const editCencle = () => { setEditMode(false); setScheduleTitle(editData.title) setCrrentDate.. 더보기
비전공자의 프로젝트 만들기) 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에 저장되어 있는 영화정보의 .. 더보기
비전공자의 프로젝트 만들기) 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.. 더보기

728x90
반응형