거북이개발자

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/ 에 들..

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. 목표 리액트를 활용하는 공부. 특히 create update delete 을 중점적으로 본다. 2. 결과 위의 사진처럼 create : 새로운 제목과 내용을 삽입한다. update: 기존의 내용을 수정한다. delete : 선택된 값을 삭제한다. 이렇게 3가지를 구현할 것 이다. 3-1. 깨달은 점(Create) 1.

1. 목표 리액트를 활용하는 공부. 특히 컴포넌트 제작 state 이벤트 활용 을 중점적으로 본다. 2. 결과 각각의 WEB, HTML, CSS, JS를 클릭하면 위의 사진처럼 밑에 그에 해당하는 글을 표시할 것이다.' 3-1. 깨달은 점(컴포넌트 제작) 1. class App extends Component{ render(){ return( Web ); } } App.js이다. 위처럼 return에 바로 태그를 입력하여서 Web 을 출력할 수 있다. 그렇지만 이런 식으로 하면 의 태그가 커질 수 록 감당하기 힘들고 정리가 안된다. 그래서 컴포넌트 제작을 해야 한다. 2. 컴포넌트 제작 import React, { Component } from 'react'; class Subject extends Co..