전체 글

vite 기반 react + ts 프로젝트에서 emotion.js 설정하는 방법 🔶 emotion 관련 라이브러리 설치 yarn add @emotion/react @emotion/styled yarn add --dev @emotion/babel-plugin 🔶 vite.config.js 수정import { defineConfig } from "vite";import react from "@vitejs/plugin-react";import tsconfigPaths from "vite-tsconfig-paths";// https://vitejs.dev/config/export default defineConfig({ plugins: [ react({ jsxImportSource: "@em..

Vite를 이용해 React와 TypeScript를 기반으로 한 프로젝트 환경에서 path alias 설정하는 방법 🔶 vite-tsconfig-paths 설치 & 플러그인 추가yarn add -D vite-tsconfig-paths vite.config.ts 파일에 tsconfigPaths 플러그인 추가하기import { defineConfig } from "vite";import react from "@vitejs/plugin-react";import tsconfigPaths from "vite-tsconfig-paths";// https://vitejs.dev/config/export default defineConfig({ plugins: [react(), tsconfigPaths()],});..

'CopyToClipboard' cannot be used as a JSX component.Its instance type 'CopyToClipboard' is not a valid JSX element.Property 'refs' is missing in type 'PureComponent' but required in type 'ElementClass'.ts(2786) react-copy-to-clipboard를 사용하려고 하는데 위와 같은 오류가 발생... yarn add react-copy-to-clipboardyarn add -D @types/react-copy-to-clipboardtype문제인가 싶어서 types도 설치 해줬고 IDE에서 typescript 도 재시작 해줬는데 안된다... ..

.venv는 Python의 가상 환경(Virtual Environment)을 나타내는 디렉터리 이름이다.venv 모듈을 이용해 가상 환경 만들 때 생성되고, 특정 프로젝트만의 패키지와 의존성을 독립적으로 관리할 수 있도록 도와준다. 🔹 .venv의 역할의존성 격리프로젝트별로 필요한 패키지를 따로 설치할 수 있게 해준다 > 파이썬 환경을 오염시키지 않는다.프로젝트마다 .venv를 활용해 독립적인 환경을 구축할 수 있다.패키지 관리 용이pip freeze > requirements.txt # 패키지 기록pip install -r requirements.txt # 환경 복원Node.js의 yarn.lock 또는 package.json과 비슷한 역할?운영체제 및 Python 버전 간 일관성 유지같은..

HTML 테이블 생성기HTML 테이블 생성기 헤더 행 추가 헤더 열 추가 행 추가 열 추가 셀 병합 셀 분할 HTML 코드 생성 코드 복사yebang97.dothome.co.kr 추가 해야할 부분1. 접근성 고려하기2. Reset 기능3. 헤더 행 / 헤더 열 있을 때 1행 1열에 대각선 그어주는 기능참고https://htmlcss-docs.tistory.com/entry/a11y-tutorials-table

성능이 저하되면 사용자가 떠나고 매출이 감소한다. 페이지 표시 시간에 따른 이탈률페이지 표시 시간사용자 이탈률1초 -> 3초32% 증가1초 -> 5초90% 증가1초 -> 6초106% 증가1초 -> 10초123% 증가 이 통계는 사용자들이 웹 서비스의 성능에 얼마나 민감한지를 수치적으로 보여주고 있다.성능 최적화를 통해 빠르고 안정적인 서비스를 제공하면 사용자 만족도가 높아지고, 이는 가입률과 전환률 증가, 이탈률 감소로 이어져 결국 더 많은 수익 창출에 기여할 수 있다. 성능 최적화는 어떻게 이루어지는 것일까?웹 성능을 결정하는 요소는 2가지1. 로딩 성능서버에 있는 HTML, CSS 등 웹페이지에 필요한 리소스를 다운로드 할 때의 성능 ✅ 로딩 성능 개선방법👉 다운로드 해야할 리소스 수를 줄이거나 크..

회사 React 프로젝트 성능 최적화를 해보았다. 일단 처음 개발자 도구 Lighthouse를 이용해서 검사를 했다.일단 웹 접근성은 흐린눈하기로 했다... ㅠ 웹 접근성까지 챙기기는 시간이 없다... CRA 기반으로 만든 프로젝트라서 craco.config.js 파일에 Webpack 설정을 추가해주었다.Webpack Bundle Analyzer를 이용해서 눈으로 트리맵을 보면서 최적화가 잘되고 있는지 확인해보겠다.const CracoAlias = require("craco-alias");const TerserPlugin = require("terser-webpack-plugin");const CompressionPlugin = require("compression-webpack-plugin");cons..

카카오맵 설명 보고 JavaScript 연동하려고 하는데 403 에러가 계속 발생 !!!  앱키도 제대로 가져다 쓰고, div 구역도 잘만들어주고, 플랫폼에 Web에 사이트 도메인도 정확히 입력했다...  찾다보니 정책이 바꼈다고한다...아니 그럼 ㅠ 설명에도 좀 작성해주지... 카카오 맵 저 메뉴로 들어가서활성화 ON으로 해주면 된다....이걸로 한 30분 찾아봄 ㅠ

React 프로젝트에 ESLint와 Prettier 적용하기yarn berry 프로젝트 생성하기yarn berry를 사용하는 이유💡 yarn berry를 사용하는 이유에 대해서 알아보자! NPM을 안쓰는 이유?🙋 무겁고 복잡한 node_modules프로젝트의 node_modules 폴더의 용량이 20기가dpdnjs402.tistory.com 전 글에서 ESLint 를 적용하다가 에러가 나서 ESLint 버전을 8로 낮췄다.이유는 버전 9부터 .eslintrc.json 에서 설정을 셋팅하는게 아니라eslint.config.mjs 또는 eslint.config.js 등 js 파일에서 설정하는 것으로 바꼈다고 한다. yarn berry boilerplate (ESLint v9 적용한) 는 아래 소스 참고 ..