Vite React Kakao Map Vite React Daum Address Api 이번 글을 통해 배워갈 내용 개요 기초세팅 리액트 카카오맵 다음지도 연동 컴포넌트 리액트 카카오맵 리액트 다음지도 API 개요 해당 프로젝트는 리액트에 카카오맵과 다음 지도 연동 기능을 같이 추가한 다음 연동해서 활용하는 미니 프로젝트입니다| 주소를 선택하면 지도에 자동으로 선택되는 컴포넌트를 만들었습니다 기초세팅 (카카오 데브에서 가입, CORS 등에 세팅은 스킵합니다) 먼저 카카오 Developers를 방문해서 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API..
이번 글을 통해 배워갈 내용 Next JS Tailwind css Font 설정 1. nextjs 설치 먼저 nextjs를 설치합니다 npx create-next-app@latest 2. NotoSans Font 다운로드 Noto Sans Korean Font를 다운로드합니다 https://github.com/bswsw/noto-sans-korean-webfont GitHub - bswsw/noto-sans-korean-webfont: Noto Sans Korean Webfont for Web Developer Noto Sans Korean Webfont for Web Developer. Contribute to bswsw/noto-sans-korean-webfont development by creat..
Typescript 기반 React에서 scroll animation 직접 구현하는 방법 이번 글을 통해 배워갈 내용 React에서 직접 isVisible 기반 스크롤 애니메이션 구현해 보기 개요 마치 스프링에 롬복처럼 aos는 편리하나 라이브러리를 설치해야 된다는 단점이 있습니다 Nextjs 13으로 업데이트하면서 aos 가 실행이 안 되는 버그가 발생해서 해결책은 찾았으나 https://stackoverflow.com/questions/75379440/the-aosanimation-on-scroll-is-not-working-in-next-13 The AOS(Animation on scroll) is not working in next 13 I Use next 13 , I wanna add AOS l..
이번 글을 통해 배워갈 내용 윈도우에서 Node 버전 최신으로 관리하는 한 가지 방법 소개 이글에서는 윈도우에서 node의 최신 버전을 효과적으로 관리하는 방법인 nvm을 설명하겠습니다 1. nvm 다운로드 먼저 Windows용 Node Version Manager (nvm)를 다운로드하고 설치해야 합니다. 공식 GitHub 릴리스 페이지에서 다운을 받습니다 https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github...
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 리덕스와 리덕스 툴..
이번 글을 통해 배워갈 내용 Chrome settings for silent printing 1. chrome.exe 바로가기 생성 후에 경로 마지막에 아래와 같이 추가 --kiosk-printing 2. 크롬을 모두 닫고 (필요시 작업관리자에서 크롬 모두 닫기) 3. 바로가기 실행 후에 프린트 읽어주셔서 감사합니다 좋은 하루 보내세요~ Chrome settings for silent printing 참조 및 인용 https://stackoverflow.com/questions/36265503/silent-print-from-browser Silent Print From Browser I have researched so much in the last few days and have given my en..
이번 글을 통해 배워갈 내용 리액트에 카카오 지도 넣는 방법 (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 =..
