Frontend

🔧 nvm이란?nvm은 Node Version Manager, Node.js의 버전을 관리하는 도구 😫 왜 필요할까?Node.js는 버전마다 지원하는 기능이나 문법이 다를 수 있다. 근데 Node.js를 한 버전만 설치할 수 있어서 생기는 문제점을 NVM이 해결해준다. 🪄 nvm을 쓰면?여러 Node.js 버전을 설치해 놓고, 필요할 때마다 전환할 수 있다.프로젝트마다 다른 Node.js 버전으로 맞춰 쓸 수 있다.기본(default) 버전도 지정할 수 있다. ❗주의사항 (특히 맥북에서는!)nvm은 그냥 설치해도 안 작동할 수 있어서 아래처럼 .zshrc에 꼭 추가해줘야된다.export NVM_DIR="$HOME/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nv..

어쩌다 보니 프론트엔드에서도 백엔드와 동일한 방식으로 암호화를 적용해야 하는 상황이 생겼다.백엔드가 C#이라서 C# 코드를 JS 코드로 변환하다가 PasswordDeriveBytes 클래스 때문에 진짜 애먹어서 글 남긴다. 일단 제일 중요한 참고 사이트!!(chatgpt보다 오히려 참고사이트에서 힌트를 많이 얻었다)왜인지 몰라도 암호화 언어 바꿔서 작성해달라고 하면 chatgpt가 항상 틀리는거같다... Using node.js to decrypt data encrypted using c#I'm facing a issue now which need you guys help. I use c# to do some encryption. Then need to use node.js to decry-pt it. ..

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 도 재시작 해줬는데 안된다... ..

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분 찾아봄 ㅠ