본문 바로가기

전체 글

코딩앙마 React공부 (마치며) 네트워크 환경 느릴때 처리개발자도구 > 네트워크 > 저속 4G로 놓고 테스트 초기값이 [] 이므로, 배열 length가 0일때 Loading… 을 출력해보자단어 추가시 통신중일때는 저장버튼 클릭하지 못하도록isLoading 상태 생성isLoading이 false일때(로딩중 아닐때) 단어 출력단어 출력전에는 로딩중이므로 setIsLoading(true)해줌단어 출력후에는 로딩완료이므로 setIsLoading(false)해줌버튼은 로딩중일때는 Saving... 이라고 투명도 준 버튼으로 출력되도록 수정함 더보기
코딩앙마 Reac공부 (PUT, DELETE, POST, useHistory) CRUD중 Update를 활용해서 단어 수정Create : POSTRead : GETUpdate : PUTDelete : DELETE아는 단어인지 체크/미체크 하는 부분은 상태저장 필요data.json에서 isDone 필드 업데이트해 수정해야함 Word.js - toggleDone함수 수정 fetch 두번째 인자 객체에는 요청의 옵션들을 입력해줌.method는 PUTContent-Type은 보내는 리소스의 타입을 의미 -> 여기서는 json형태로 보낸 것단순히 데이터를 가져오는 GET과 다르게, PUT은 수정을 위한 정보를 실어서 보내줘야함 -> body안에 입력 -> 기존 데이터 ...word에 isDone을 바꿔서 넣어줌 (이때 JSON 형변환 해줘야함)마지막으로 리턴된 Promise객체 응답이 OK.. 더보기
코딩앙마 React공부 (Custom Hooks) src폴더 아래에 hooks 폴더를 생성, useFetch.js파일 생성(우리가 만들 커스텀 훅)  - data라는 상태 값이 있고- API주소를 넘겨받아서 fetch하고, 응답받은 데이터를 setData해줌- data 리턴 더보기
코딩앙마 React공부(useEffect, fetch()로 API 호출) 이제 API도 있으니 더미데이터로 작업했던 부분들을 하나씩 바꿔주겠습니다. DayList.js에서 dummy를 지우고 days라는 state 생성처음에는 빈배열을 만들고 API에서 리스트를 가져와서 바꿔주는 방식으로 진행 (데이터가 바뀌면 그대로 렌더링)  이제 API호출 전에 useEffect에 대해서 알아보자useEffect란? 어떠한 상태 값이 바뀌었을때 동작하는 함수를 작성할 수 있다. 이제 클릭이벤트를 만들고 클릭할때마다 state를 바꿔보자결과를 보면  근데 이렇게만 해주면 매번 변경이 일어날때마다 불필요하게 함수가 호출 될수 있다. 예를 들어, 버튼을 하나 더 만들고 다른상태값이 day를 연결시켜보자 결과를 보면 추가가 되지만 Count Chage는 계속 찍힌다. Count는 변하지 않았는데.. 더보기
코딩앙마 React공부(json-server, REST API) 영어 뜻밖에 없는데 뜻보기, 숨기기, 삭제, 체크박스를 만들어 보자 이렇게 체크박스를 하나 만들어 주고버튼도 만들어준 뒤에 클래스를 넣어준다. 버튼 이벤트처리를 만들어보겠습니다. 별도의 컴포넌트를 만들어서 하겠습니다. (컴포넌트별로 state를 가지고 있기 때문에 뜻이 나타났다 없어졌다 하는 건 이 단어에만 해당하는거기 때문에 따로 컴포넌트를 생성해서 하는것입니다.) Word.js 컴포넌트 생성단어를 의미하는 부분을 Day.js에서 잘라서 붙여넣어준다.   방금 만든 word컴포넌트를 반복해서 찍어준다.그다음 props로 word를 전달해주면 된다. (key는 word.id가 고유한 값이기에 그 값을 넣어준다)   word에서는 key값이 필요없기에 지워준다.  해결방법 = import가 안되어서 못찾는.. 더보기
코딩앙마 React공부 (라우터 구현) 이번에는 라우터 구현을 할건데 그전에 설치해야 할 것이 있다.터미널에 npm install react-router-dom을 실행해 설치해준다.   그 후 App.js에 가서 { BrowserRouter, Route, Swtich }를 import해준다. 우선, app전체를 BrowserRouter로 감싸준다.  그 다음 Header는 모든 페이지에 다 나와야 하니깐 Header 다음 부분을 Switch로 감싸준다. 이렇게 하면 Switch 내부는 url에 따라 각각 다른 페이지들을 보여줄 것이다. Switch의 외부는 모든 페이지에 공통으로 노출될 것이다.(만약, footer가 필요하다면 Switch바깥쪽에 작성해주면 된다.)  이제 Route를 사용해보자   결과를 테스트 해보면 Error가 난다. 그.. 더보기
카페추천 웹사이트 프로젝트 개발 시작인데 (React와, Node.js를 곁들인) 프로젝트 주제 선정 배경- 모든 사람들이 주말을 이용해 카페에 가는 것을 즐겨하는 것 같다. (필자도 마찬가지)- 각 지역별로 카페를 추천해주는 사이트를 만들고자 한다. (세상에는 숨겨진 카페가 많이 있는데 알려지지 않은곳이 많다.) 저는 일단 디자인은 자신없기에 깔끔하게만 하는 것을 목표로 하겠습니다~!!  개발 환경React, Node.js, MySQL를 사용  먼저, 파일 생성 및 개발 환경 구축을 하고 글을 마무리 하겠습니다. 폴더이름은 cafe라고 생성한다 (npx create-react-app cafe)github 연결 후 다음에 계속.... 더보기
코딩앙마 React공부 (더미 데이터 구현, map() 반복문) 본격적인 페이지 만들기 Header부터 만들기    API가 없으므로 더미데이터 파일 생성  DayList.js 컴포넌트 생성 및 더미데이터 불러오기  App.js에 import및 배치  map은 배열을 받아서 또 다른 배열을 반환해준다. 이때 반환되는 배열의 요소는 JSX로 작성해주면 된다. Day는 표현이 잘된다는 것을 확인할 수 있다.단, 개발자도구에서 콘솔을 보면 이런 오류가 뜬다. key는 반복되는 요소에  고유한 값을 넣어줘야 한다.  다음은, Day컴포넌트 생성 특정날짜를 선택해서 들어갔을때 단어들이 나오는 페이지 (더미데이터 사용)   Day1을 누르면 1일치에 해당하는 단어가 나와야하는데 다 나오는것이 문제import dummy from "../db/data.json";export def.. 더보기

티스토리툴바