분류 전체보기142 React - Typescript + Hook(마무리) 기존에 있는 data에 data 추가를 했다.(데이터 안에 id에 또 한번 추가 하려고 하니 번거로움이 있어서 일단은 빼고 구현...ㄷㄷ) 그리고 수정 기능이나 삭제기능은 기존에 있는 데이터를 필터만 해줄뿐이여서 여기서 마무리... App.tsx 파일에 추가한 내용은 addData 함수와 Main component에 함수를 내려주는 것. *기존에 있는 data를 list에 받아오기 때문에 list에 있는 기존 data에 concat 메소드를 이용해서 합친다. Main.tsx *App.tsx에서 받아오는 함수를 받아오기 위해 interface에 함수 type과 인자로 들어오는 type 설정 *handleRegister 함수에서 input 값을 들어온 것을 받아와서 가공한다. *handleClick에서 in.. 2020. 11. 18. Server - express 직접 server를 만들고, 기본적으로 지원해주는 http 모듈을 이용해서 만들었다. express 라는 프레임워크를 사용하지 않고 server를 만들 수 있지만, 그러면 분기(endpoint)를 나눠주고 어떤 요청에 따라서 router를 시켜줘야한다. 이것을 편하게 하기 위해서는 express라는 프레임 워크를 많이 사용한다. 만약 express 없이 server를 직접 작성하면 분기를 해주고 거기에 따라 받아오는 buffer를 개발자가 볼 수 있도록 parse 보낼때는 stringify 같은 기능을 넣어주어야한다. 작성하면서 buffer를 보면 숫자로만 된 엄청 긴 배열을 보게된다.(HTTP 트랜잭션 해부 참고) express의 장점 1. 미들웨어가 쉽다. 2. 자체 router 기능을 제공 (장점은.. 2020. 11. 14. React - Typescript + Hook (4) 검색기능을 추가했다. 글자를 입력하면 바로바로 검색되는 기능으로 구현. App.tsx 파일에 기능들을 추가했다. 그리고 Main.tsx에 handleSearch 함수를 내려주고 input값을 다시 받아와서 PhoneList.tsx에 다시 내려주는 방식을 채택했다. App.tsx import React, { useState, useEffect } from "react"; import Main from "./Main"; import PhoneList from "./PhoneList"; import data from "./data"; interface EmptyArray { nickname: string; } function App() { const [list, get_list] = useState(data).. 2020. 10. 29. React - TypeScript + Hook(3) 이전에 계획 했던 대로 CSS를 적용했다. CSS를 하기 위해 많은 라이브러리가 있지만, Styled-components를 활용했다. 닫기 같은 Icon은 Bootstrap을 활용했고, 이미지들은 unsplash.com에서 받아와서 활용했다. *Styled-components 설치방법 npm install @types/syled-components *bootstrap 설치방법 npm install @types/bootstrap 대략적인 구도는 이렇게 적용하였다. Main.tsx(윗부분이 react+typescript code / 아랫부분이 styled componets code) import React from "react"; import logo from "./image/logo.jpg"; import.. 2020. 10. 28. 이전 1 ··· 13 14 15 16 17 18 19 ··· 36 다음 반응형
