React 이모저모

React.js로 to do list 만들기delete 기능 시 지워야하는 <li>를 지정하기 위해 data-이름 형태로 dataset을 DOM에 저장하여 onClick시 .currentTarget.dataset.이름 으로 타켓팅하여 delete 기능을 실행한다.

update 기능을 추가하기 위해 delete 기능과 마찬가지로 무엇을 수정할지 targeting 하고 list에서 input 화면으로 바뀌는 기능을 추가한다. 이 기능을 위해선 삼항 연산자를 통해 수정이 클릭되지 않았을시 updateTarget.id !== todo.

to do list에 css update 했다. 물론 디자인 감각이 전혀 없기에 검색하다 이쁜 디자인 가져왔다. 죄송하고 감사합니다....기존 기능에 Done list와 checkbox 에 check시 underline 기능을 추가했다.Done listCSS

데이터를 불러오는 작업을 드디어 해봤다. 처음엔 이해하기 어려웠지만 많이 적응했다. 파일은 Home, constant, hooks, moviedetail, movielist로 구성되어있다. HomeCSS

데이터를 불러오고 화면에 보여주는 작업에서 짚고 넘어가야 할 개념인 데이터 불러오기를 arabozaAPI라고 제목에 표시했지만 보통 open API를 사용한다. open API는 공공 기관이 이용자에게 정보를 재활용하거나 상업적, 비영리적으로 이용할 권리를 부여함으로써

핵심 기능인 MovieList, 영화 데이터를 불러오고 리스트로 나열한다.영화 제목을 받는 input, 영화 평점 option 평점은 대체로 낮아서 주로 선택하지 않고 검색하긴 한다.영화 검색 후 list 가 나열되고 옆으로 스크롤 가능하게 만들었다. useState와

List에 나온 영화들에서 포스터를 클릭하면 해당 영화의 detail 페이지로 넘어간다. 마찬가지로 API에서 오는 데이터의 형식을 확인해야한다. 또한 불러오는 조건도 다르기에 데이터를 불러올 때 유의해야한다. useParams 후크는 현재 URL에서 와 일치하는 동적

constant는 말 그대로 자주 쓰는 변수를 선언한 폴더를 만들어 export하고 다른 폴더에서 import 하는 기능을 위해 만든 것이다. constant > index.js이미지를 불러오기 위한 기본 URL과 데이터를 불러오기 위한 조건인 KEY 값을 선언한 폴더