본문 바로가기

Coding127

firebase - setting firebase는 server를 따로 구축하지 않고 자동으로 server와 database를 생성을 해준다. 만약 테스트를 해보고 싶은 서비스가 있으면 client와 firebase를 연결하여 데모 테스트를 해보고, 서비스가 반응이 좋고 출시를 해야겠다고 할 때, server를 구축하면 된다. firebase는 구글에서 먹은 회사이다. database를 배포를 해보면 알겠지만, 접속자가 많고 처리할 database가 많아지면 비용을 지불해야한다. firebase도 일정 수준까진 무료로 제공한다. 설치 및 이용 방법 우선 firebase 홈페이지에 접속을 하고, 아이디로 로그인 한다. 구글아이디로 로그인이 가능하다. 사진과 같이 화면이 있으면 Get started를 눌러서 시작을 한다. Get starte.. 2020. 12. 8.
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.
반응형

티스토리툴바