Vite React Kakao Map Vite React Daum Address Api 이번 글을 통해 배워갈 내용 개요 기초세팅 리액트 카카오맵 다음지도 연동 컴포넌트 리액트 카카오맵 리액트 다음지도 API 개요 해당 프로젝트는 리액트에 카카오맵과 다음 지도 연동 기능을 같이 추가한 다음 연동해서 활용하는 미니 프로젝트입니다| 주소를 선택하면 지도에 자동으로 선택되는 컴포넌트를 만들었습니다 기초세팅 (카카오 데브에서 가입, CORS 등에 세팅은 스킵합니다) 먼저 카카오 Developers를 방문해서 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API..
react-alert 대신 react-toastify 사용해서 알림 표시해 보기 이번 글을 통해 배워갈 내용 kimc가 react-alert 대신 react-toasty를 사용하는 이유 react-toasty 적용해 보기 react-toasty 쓰는 이유 react-alert의 경우 리액트 18 버전이상에서 설치하는 경우 아래와 같은 에러가 발생합니다 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: solesesteluquis@0.1.0 npm ERR! Found: react@18.0.0 npm ERR! node_modules/react npm ERR! re..
리액트에 리덕스 툴킷 사용해 보기 타입스크립트 바이트 이번 글을 통해 배워갈 내용 리덕스 소개 리덕스 설치 샘플 리덕스 적용 코드 리덕스 소개 Redux는 Javascript 기반 앱에 상태 관리 라이브러리입니다. 앱의 데이터를 하나의 저장소(Store)에 관리해서 앱의 상태를 관리하는데 도움을 줍니다. Redux Toolkit은 Redux의 보조 패키지로 Redux의 설정과 보일러 플레이트 코드를 최소화하는데 도움을 줍니다 리덕스 설치 필요시 아래와 같이 입력해서 샘플 프로젝트를 생성합니다 (npm 7+ 이상 버전에 최신버전 vite를 템플릿과 함께 react 타입스크립트로 생성) npm create vite@latest kimc-sample -- --template react-ts 리덕스와 리덕스 툴..
이번 글을 통해 배워갈 내용 리액트에 카카오 지도 넣는 방법 (vite) 1. 개발자 계정을 만들고 JavaScript 키를 발급받는다 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 발급받은 Javascript 키를 index.html 파일에 넣는다. SSR의 경우 dynamic import 등을 사용해서 해당되는 파일변경 3. 해당되는 컴포넌트 작성 필요시 커스텀 타입 정의 import { useEffect, useRef } from 'react'; const geoLocation =..
이번 글을 통해 배워갈 내용 리액트 이미지 업로드 리액트 이미지 필터 리액트 이미지 출력 일단 리액트 프로젝트를 만든 다음 npx create-react-app my-app cd my-app npm start 기본으로 생성되는 App.js, App.css 파일만 수정하였습니다 state 들과 canvas ref들입니다 const [rawImages, setRawImages] = useState([]) const [rawPreviews, setRawPreviews] = useState([]) const [filteredPreviews, setFilteredPreviews] = useState([]) const canvasRef = useRef(null) 전체 렌더는 아래와 같습니다 return ( ); 파..
이번 글을 통해 배워갈 내용 TypeScript와 함께 useReducer를 사용하는 방법 UseReducer 6가지 꿀 정보 1. useReducer Hook은 useState Hook과 비슷한 성질을 가집니다. 2. 필요시 initFunction 도 받아서 쓸 수 있습니다. const [state, dispatch] = useReducer(reducer, initialState) const [state, dispatch] = useReducer(reducer, initialState initFunction) 3. useReducer Hook은 reducer, initialState을 인자로 받습니다. reducer 함수는 state의 로직을 포함하고 initialState 말 그대로 초기 상태입니다...
리액트에서 여러 체크박스들을 하나의 컴포넌트로 재활용 해보기 Handle multiple checkbox components in React 이번 글을 통해 배워갈 내용 ( What you will learn) 여러 체크박스들을 하나의 컴포넌트로 재활용 해보기 ( Handle multiple checkbox components in React) 출력될 화면은 아래와 같습니다. (below screenshot will be shown if you git clone my project below) 아래의 시점이 해당 스터디에 시작지점입니다. below git shows checkbox before the start of study https://github.com/songk1992/react-examples..
이번 글을 통해 배워갈 내용 리액트 함수의 인자 값에 숫자 리액트에서 함수 인자 타입 확인하기 메시지를 보내는 함수가 있다고 합니다. sendMessage('kimc', 'hello@test.com', '2A@DAVBSE') 위와 같이 인자의 수가 3개 이상이고 메시지 보내는 것 같은데 직관적이지 않은 코드를 쓰는 건 다른 개발자들이 코드를 이해하는데 불편하게 되고 결국 유지보수가 힘들게 합니다. 반면 아래 코드는 어떨까요? sendMessage(user) 유저 정보 메시지를 보내는 함수라는 게 명확합니다. 따라서 김 씨는 인자를 하나 쓰는 것을 좋아합니다. 김 씨의 꿀팁을 대방출합니다. 김 씨는 유저 객체처럼 객체를 만드는 것을 좋아합니다. class User { constructor(userData)..
