우사미 코딩

- 이번에 할 일 우리의 로컬앱은 db를 사용하지 않기 때문에 서버를 껏켰하면 불러올 데이터가 없다 이때 사용하면 좋은 api가 json server 앱을 개발할 때 json object의 파일을 db처럼 사용하는 json-server 기존에는 editBookById를 하면 바로 state를 변경했지만 이제는 api server에 삭제하란 요청을 보내고 결과에 대한 응답을 받도록 수정할 것이당 1. json server 설치 터미널 하나 더 켜고 프로젝트 디렉토리에 가서 json server설치하기 npm install json-server 2. document root에 db.json파일 생성하고 초기값 넣어주기 3. package.json에 debug-server 추가하기 (17행) 위에 17행을 추..

1. src의 주소를 curly braces로 감싼다 2. double quotes(")는 back tick(`)으로 바꿔준다 3. 변수를 사용할 때 앞에 dollar sign ($) 붙인다

https://state-updates.vercel.app/ State Updates state-updates.vercel.app 참고 페이지 1. Array 1) 특정 index에 새로운 데이터 추가하기 2) 배열에서 특정값 제거하기 - filter함수 사용 2. Object Array 1) 특정 object의 value 변경하기 - map함수 사용 2) object에서 key제거하기 (...rest) 3) object에서 key추가하기

1. 앱 컨셉 add a book에서 title을 입력하고 submit 하면 reading list에 추가된다 책 리스트에서 연필을 클릭하면 title을 수정할 수 있고 저장하는 버튼이 나온다 우리는 이 요소들을 저런 이름으로 설정했고 이러한 계층구조를 가진다 전체적인 순서는 아래와 같음 우리는 1번부터 조져보도록 한다 우리는 책을 이렇게 object로 표현할거고 object를 담는 array를 만들거얌 책 정보가 바뀔때 화면을 다시 업데이트 해야겠찌? 그럼 모다? state사용해야한다 그럼 books정보가 필요한 건 누구일까? 모두 다 books정보 알아야한다. 출력해야하니까 그럼 공통 부모인 App이 state로 가지고 있으면 되겠군 title 텍스트 인풋에 책 이름을 적고 submit하면 books..

mapping하고 순서를 적용하려면 key를 설정해주어야한다 key는 유일값이여야 함 1. ImageList.js import ImageShow from "./ImageShow"; import './ImageList.css'; function ImageList({images}){ const renderImages = images.map((image) => { return }); return {renderImages}; } export default ImageList; 여기서 ImageShow 태그에 key를 추가해주었습니당 사진을 가로 최대 6개까지 나오게 하기 위해서 css도 추가함 2. ImageList.css .image-list{ columns: 6 100px; column-gap: 10px; }..

일단 우리의 앱은 위와 같은 계층구조를 가지고 있다 App이라는 Main contoroller (라고 부르겠음; 이게 기억하기 쉬우니께)가 페이지에 보여줄 요소들을 자식으로 가지고 있음. App의 자식으로는 SearchBar, ImageList가 있고 SearchBar, ImageList는 형제간인데 얘네들끼리는 직접적인 소통은 불가함 하지만 자식-부모간에는 props와 callback function으로 소통하는게 가능한거임 그럼 SearchBar에서 text value를 "app"으로 넘겨주고 그럼 그 앱이 api로 이미지를 요청한 다음 응답받아서 ImageList에 이미지 주소들을 넘겨주면 됨 ㅇㅇ 1. SearchBar.js import { useState } from "react"; functi..

Axios는 Ajax같은 자바스크립트 라이브러리임 우리는 axios는 terminal에서 설치하면된다 프로젝트 경로로 들어가서 터미널에서 명령어 입력 npm install axios 설치하면 node_module 폴더에 추가되고 어쩌고저쩌고 warning 메세지가 뜨는데 앱은 실행됨 Unsplash API를 사용할건데 이건 파라미터로 단어 넘기면 이미지를 리턴해주는 라이브러리임 https://unsplash.com/documentation#location https://unsplash.com/documentation#search-photos Unsplash API Documentation | Free HD Photo API | Unsplash Getting started This document desc..

후.. 드디어왔다 css css는 잘 몰라서 좀 길게 씀 1. src에 css파일을 생성한다 css파일은 하나에 다 정의해두어도 되지만 그러면.. 나중에 디버깅.. 네.. 그렇기 때문에 파일을 나누겠습니다 1. App에 스타일주기 1) App.js import './App.css'; import AnimalShow from "./AnimapShow"; import { useState } from "react"; function getRandomAnimal(){ const animals = ['bird','cat','cow','dog','gator', 'horse']; return animals[Math.floor(Math.random() * animals.length)]; } function App(){..