이번 글을 통해 배워갈 내용 리액트에 카카오 지도 넣는 방법 (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 =..
이번 글을 통해 배워갈 내용 Netlify에서 500 혹은 404 에러가 발생 및 해결 리액트 코드 자체문제가 아닌 배포환경의 문제가 있는 경우가 있습니다. 로컬에서 개발자 모드로 돌릴 때는 문제가 없다가 배포 후에만 문제가 발생하면 당혹스러운 경우가 있는데요 500 에러의 경우 SSR 서버사이드에서 렌더 할 때 발생하는 경우가 있습니다 리액트 18 버전의 Nextjs에서 Dynamic Route를 중첩해서 사용하는 경우 App 라우터와 함께 병행해서 사용하는 경우에 많이 발생하는데요 대부분의 경우 에러가 발생하는 페이지에 SSR을 false로 변경하고 nextjs에 프로젝트 루트 디렉토리에 netlify.toml 파일을 생성한 다음 아래와 같이 설정해서 해결하였습니다 [build] command = "..
이번 글을 통해 배워갈 내용 Visual Studio Code에서 Prettier를 전역으로 적용하는 방법을 배워보겠습니다. Prettier는 코드 포맷터 도구로, 일관된 코드 스타일을 유지하고 가독성을 높이는 데 도움이 됩니다. 아래 명령어는 Prettier를 전역으로 적용하는 방법입니다:) npx prettier --write . 읽어주셔서 감사합니다 좋은 하루 보내세요~
이번 글을 통해 배워갈 내용 Tailwind CSS 사용 시 Next JS 다크모드 Next JS 라이트 모드 적용 꿀 방법 1. next-themes 라이브러리 추가 (35kb 정도 함) yarn add next-themes https://www.npmjs.com/package/next-themes next-themes An abstraction for themes in your Next.js app.. Latest version: 0.2.1, last published: 7 months ago. Start using next-themes in your project by running `npm i next-themes`. There are 141 other projects in the npm regi..
이번 글을 통해 배워갈 내용 Nextjs Tailwind CSS에 사용자 지정 글꼴 적용하기 23년 최신 방법 초간단 구글 Noto Sans Korean 폰트 적용해 보기 CDN으로 설정하면 브라우저에서 구글로 요청이 갑니다. 다운로드하여서 설정하려고 하니 귀찮습니다. 이제 Nextjs 13 버전부터는 그런 설정 걱정이 없습니다. 일단 프로젝트가 없으시면 Nextjs를 설치합니다 npx create-next-app@latest my-sample --typescript --eslint _app.tsx를 아래와 같이 설정합니다. import '@/styles/globals.css'; import type { AppProps } from 'next/app'; import { Noto_Sans_KR, Bai_J..
이번 글을 통해 배워갈 내용 nodejs 로깅에 시간추가하는 방법을 배우겠습니다 프로젝트에 npm 혹은 yarn으로 console-stamp를 추가합니다 yarn add console-stamp 프로젝트에 시작지점 index.js 혹은 app.js 파일에 consoleStamp를 추가해 줍니다 import consoleStamp from 'console-stamp'; consoleStamp(console, { format: ':date(yyyy/mm/dd HH:MM:ss.l) :label' }); 프로젝트 시작 시 아래와 같이 로깅이 잘되는 것을 확인할 수 있습니다 [2023/03/07 06:16:13.156] [LOG] listening on port 3000 읽어주셔서 감사합니다 좋은 하루 보내세요~..
이번 글을 통해 배워갈 내용 리액트 이미지 업로드 리액트 이미지 필터 리액트 이미지 출력 일단 리액트 프로젝트를 만든 다음 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 ( ); 파..
이번 글을 통해 배워갈 내용 ul li 기본 스타일 제거하는 한 가지 방법 CSS StyleSheet reset 하는 한 가지 방법 프로젝트 기본 세팅값입니다 전역 CSS 파일 (예 Global.css)에 아래와 같이 붙여 넣습니다 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp..
