JavaScript/React.js 썸네일형 리스트형 Vercel에서 정적 파일 사용하기 React Setting을 CRA로 하면 이슈가 없지만, zero base로 셋팅했을 경우 이미지를 절대 경로로 접근 못하는 이슈가 있다. /assets/img/a.png assets 파일 이름을 static으로 변경하면 절대경로로 접근 가능하다. 1) assets > static 파일 네임 변경 2) webpack에서 에셋 파일 복사(webpack.config.prod.js) const path = require('path'); const webpack = require('webpack'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'.. webpack으로 구축한 React 프로젝트에서 환경 변수(.env) 사용하기 https://db2dev.tistory.com/entry/React-Webpack%EC%9C%BC%EB%A1%9C-%EA%B5%AC%EC%B6%95%ED%95%9C-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98env-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 [React] Webpack으로 구축한 React 프로젝트에서 환경 변수(.env) 사용하기 TL;DR Webpack을 통해 직접 구성한 리액트 프로젝트 .env 파일에 환경 변수를 선언할 때 REACT_APP_ 으로 시작하지 않아도 됨 dotenv 패키지: DefinePlugin 을 통해 수동으.. 구글 / 카카오 로그인, 회원가입 공통 Flow 로그인 1) 구글 로그인 클릭 2) onSuccess되면 response로 받은 id를 우리서버로 보냄 - 성공: response값(회원정보)을 store에 저장, returnUrl로 redirect - 회원가입이 안된 경우: 가입된 회원이 아닙니다.(alert), 회원가입 페이지로 리다이렉트 - 실패: 로그인에 실패했습니다.(alert) 회원가입 1) 구글 회원가입 클릭 2) onSuccess되면 response로 받은 id를 우리서버로 보냄 - 성공: response값(회원정보)을 store에 저장, returnUrl로 redirect - 기존에 있는 아이디일경우: 이미 가입되어있는 회원입니다. 로그인해주세요.(alert) - 실패: 회원 가입에 실패했습니다.(alert) 세션 관리 1.. SWR을 사용하는 이유 https://min9nim.vercel.app/2020-10-03-swr-intro1/ Redux 를 넘어 SWR 로(1) 이 글에서는 오랫동안 Redux 를 이용한 상태관리를 해오다가 최근 SWR을 만나고, 프로젝트에서 Redux 의존성 모듈을 완전히 제거하기 까지 이른 과정과 경험을 공유하고자 합니다. 이 글이 도움이 min9nim.vercel.app https://min9nim.vercel.app/2020-10-05-swr-intro2/ Redux 를 넘어 SWR 로(2) 앞서 첫번째 글에서는 Redux 를 사용할 때 일반적으로 경험할 수 있는 몇가지 문제들을 언급하였습니다. 이번 글에서는 SWR 은 무엇이고 SWR 이 어떻게 Redux 를 대체할 수 있는 지에 대해 설명해 보 min9nim.ve.. CRA에서 api server proxy 1) install http-proxy-middleware $ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware 2) src/setupProxy.js 생성 후 아래와 같이 작성 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:5000', changeOrigin: true, }) ); }; 3) dev server 껏켯 React에서 GSAP ScrollTrigger 사용법 포인트는 gsap.registerPlugin(ScrollTrigger)로 ScrollPlugin을 연결해주는 것! import React from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from "gsap/ScrollTrigger"; const Main: React.FC = () => { useEffect(() => { gsap.registerPlugin(ScrollTrigger); const targets = document.querySelectorAll('#scroll-trigger'); targets.forEach(el => { gsap.fromTo(el, { autoAlpha: 0, }, { duration: 1, autoA.. 우당탕탕 React에서 CKEditor5 적용기 애플리케이션 개발 중에 에디터가 필요했다. CKEditor를 사용한 이유는 크게 없고 다들 CKEditor를 쓰길래..(찾아보기 귀찮아) 기본 Setting 1. CKEditor랑 에디터 타입 설치 나는 DecoupledEditor(=Document) 를 사용했다. yarn add @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-decoupled-document --save --dev 첫번째 난관 봉착,, 에디터 타입(Document)는 typescript를 지원하지만 CKEditor는 typescript를 지원하지 않기 때문에 index.d.ts 에서 모듈선언을 해줘야한다. @types/index.d.ts declare module '@ckeditor/cke.. React 에 Google Analytics 적용 분석으로 무엇을 할 수 있습니까? 사용자가 살고 있는 지역에 대한 통찰력을 얻을 수 있습니다. 어떤 연령대가 귀하의 비즈니스에 더 관심이 있는지 이해할 수 있습니다. 평균적으로 얼마나 많은 시간을 소비하는지 추적 신규 사용자 획득률 추적 수익 추적 개발자로서 얻을 수 있는 이점 애플리케이션에 버그가 있는지 추적할 수 있습니다. 사용자 관심에 따라 최적화할 수 있습니다. 따라서 개발자 또는 비즈니스의 규모가 아무리 작아도 웹사이트에 Analytics를 통합해야 합니다. Analytics는 완전 무료이며 설정이 정말 쉽기 때문입니다. Step 1. Install Dependencies yarn add react-ga Step 2. Setup Analytics Inside Project App.js 파일에 다.. 이전 1 2 3 다음