거북이개발자

React에 카카오 지도(KakaoMap)API 적용하기 0. 준비 apis.map.kakao.com/web/guide/ developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com apis.map.kakao.com/ -우선 kakao Developers에서 회원가입 후 맵 API발급에 들어가 준다. 애플리케이션을 추가한 후 javaScript 키는 나중에 쓰이므로 확인해 둔 뒤. 플랫폼에서 자신이 실행한 웹의 사이트 도메인을 등록해준다. 1. API 가져오기 apis.map.kakao.com/web/guide/ 에 들..

1. 목표 -ReactHooks와 firebase를 이용한 가족 SNS를 만들었다. - 트위터처럼 자신의 기분과, 사진을 올리고 가족끼리 보는 가족 전용 SNS이다. 2. 결과 (1) 로그인 이메일과 패스워드로 회원가입이 가능하고 혹은 google을 이용해서도 가능하다. 회원 가입한 정보는 firebase의 Authentication에 저장된다. (2) Home -입력한 텍스트는 Firebase Cloud firestore에 들어간다. -첨부한 사진은 Firebase Storage에 들어간다. -Delete, Update 기능이 있다. -첨부한 사진을 미리 보여주는 기능도 있다. -작성자를 올려주며, 시간순으로 입력한 메시지를 보여준다. (3) Profile -프로필의 이름을 변경 가능하고 -로그아웃 가..

1. 배경 위와 같이 파일을 첨부했을시 다시 초기화 하고 싶을때가 있다. 2. 배경 const fileInput=useRef(); const onClearAttachment=()=>{ fileInput.current.value = ""; }; 위의 코드처럼 useRef를사용해준다. 그후 fileInput.current.value=""을 이용해 초기화 해줄 수 있다. 중요한점음 input 태그에서 어트리뷰트로 ref를 넣어줘야 한다.

const onFileChange=(event)=>{ const {target : {files}}=event; const theFile=files[0]; const reader=new FileReader(); reader.onloadend=(finishedEvent)=>{ }; reader.readAsDataURL(theFile); }; 1. new FileReader(); -데이터를 읽기 위하여 파일을 가리키는 File객체를 이용해 파일의 내요을 일고 컴퓨터에 저장하는 것을 가능하게 해준다. 2. .onloadend -이벤트 핸들러로 이 이벤트는 읽기 동장이 끝났을때마다 발생. 3. .readAsDataURL() -업로드된 결괏값을 URL로 표시

1. Spread Operator (1)사용 배경 es6에 추가된 문법으로 ...을 사용해서 배열의 값을 받아고서나, 확장할 수 있다. (2) 배열 합치기 const singerOne = [1, 2, 3] const singerTwo = [7, 8, 9] const combinedTwo = [...singerOne, ...singerTwo]; const combinedOne = [...singerOne, 5, 6, ...singerTwo]; 위의 예제처럼 합쳐서 배열을 만들 수 있고, 중간에 다른 값들도 넣을 수 있다. (3) 배열 받아오기 const singerOne = [1, 2, 3] const cloneOne = [...singerOne]; 위처럼 스프레드 연산자를 통해서 배열을 쉽게 갖고 올 수..

1.배경 매끈한 라우팅을 제공하는 기능을 한다. 터미널에 npm install react-router-dom 입력해준다. 2. BrowserRouter import { BrowserRouter as Router } from "react-router-dom" 우선 위처럼 import를 해줘야한다. BrowserRouter은 react-route-dom을 적용하고 싶은 컴포넌트의 최상위에 덮어주면 사용가능하게 해준다. ReactDom.render( , document.getElementById('root')); 3. Route import { Route as Router } from "react-router-dom" (1) Url에 따라 달라지는 컴포넌트를 구현하려면, Route로 감싸준다. 속성으로 pat..

1. lifecycle React의 class는 위의 사진처럼 lifecycle을 갖는다. reder가 실행되고 그후 componentDidMount()가 실행된다. 단 그후 같은 setState로는 rerender가 일어날시 componentDidMount()는 일어나지 않는다. componentWillUnmount 는 컴포넌트가 제거되기 직전일어난다. 2. useEffect 함수형은 위의 lifecycle를 이용하지 못한다. 그래서 대신 이용하는것이 useEffect이다. useEffect( ()=>{ //componentDidMount, componentDidUpdate 역할(1대1 대응은 아님) return () =>{ //componentWillUnmount 역할 } },[]); 위의 형식으로 ..

1. useRef useRef는 2가지 쓰임이 있다. dom에 직접 접근할때 hooks에서 this의 속성들을 ref로 한다. -state는 return이 다시 실행되지만 ref는 다시 실행안된다. -즉 값이 바껴도 렌더링을 다시 하고싶지 않은부분은 ref로 처리해준다. const timeout=useRef(null); const startTime=useRef(); const endTime=useRef(); startTime.current=new Date(); clearTimeout(timeout.current); 이런식으로 사용해준다. 단 current를 써줘야 한다. 2. Time 함수 setTimeout let timerId = setTimeout(func|code, [delay], [arg1], ..