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..

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()],});..

카카오맵 설명 보고 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 적용한) 는 아래 소스 참고 ..

yarn berry 프로젝트 생성하기yarn berry를 사용하는 이유💡 yarn berry를 사용하는 이유에 대해서 알아보자! NPM을 안쓰는 이유?🙋 무겁고 복잡한 node_modules프로젝트의 node_modules 폴더의 용량이 20기가나 차지하는 매직을 볼 수 있dpdnjs402.tistory.com yarn berry로 프로젝트를 생성해보았다.이제 ESLint와 Prettier를 적용해보겠다. 플러그인 설치VSCode 플러그인을 설치해준다. ESLint 설정하기yarn add -D eslint@8.57.0 prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-react eslint-config-react-app패키지들을..

yarn berry를 사용하는 이유💡 yarn berry를 사용하는 이유에 대해서 알아보자! NPM을 안쓰는 이유?🙋 무겁고 복잡한 node_modules프로젝트의 node_modules 폴더의 용량이 20기가나 차지하는 매직을 볼 수 있다...회사 컴퓨터의 용량dpdnjs402.tistory.comyarn berry를 사용하는 이유에 대해 알아봤으니yarn berry를 이용해 프로젝트를 생성해보자. yarn을 global로 설치해준다npm install -g yarn CRA 기반 프로젝트를 생성해준다.yarn create react-app --template typescriptCRA(보일러 플레이트)기반 타입스크립트 프로젝트를 생성한다.node_modules 폴더는 필요가 없으니 삭제해주도록한다...

💡 yarn berry를 사용하는 이유에 대해서 알아보자! NPM을 안쓰는 이유?🙋 무겁고 복잡한 node_modules프로젝트의 node_modules 폴더의 용량이 20기가나 차지하는 매직을 볼 수 있다...회사 컴퓨터의 용량이 256기가여서 매번 용량이 부족하면 node_modules를 지워줘야한다. 😱 🙋 비효율적인 의존성 검색 & 비효율적인 설치 npm은 여러 패키지들이 동일한 라이브러리의 의존성을 가지고 있다.그 라이브러리들이 각각 다른 버전을 사용한다고 했을 때 npm은 중복된 라이브러리를 설치한다.이는 디스크 공간을 많이 차지하게 되고, 설치나 업데이트에 많은 시간이 들게 한다.  🙋 유령의존성npm은 중복된 패키지 의존성을 최소화하여 공간을 절약하고 패키지 설치시간을 줄이기 위해..

http가 뭘까? http는 통신 프로토콜 => 즉 규약이다 (약속이라는 말)브라우저와 서버가 통신을 할 때 보안문제가 발생 하면 화면과 동작에도 영향이 있어 정보 유출 등의 사고가 생길 수 있다. 브라우저는 HTTP라고 하는 통신 프로토콜에 따라 서버와 통신해서 리소스(HTML,CSS, 이미지 등)를 가져오거나 데이터를 생성 또는 업데이트, 삭제 한다.여러 통신을 하면서 데이터를 주고 받고, 업데이트하는 것을 개발자도구 Network 탭에서 확인해 볼 수 있다. 브라우저의 통신흐름HTTP 요청 & 응답 개발자도구에서 응답과 요청에 대한 정보를 확인할 수 있다.요청라인, 헤더, 바디 등을 확인해 볼 수 있다. HTTP 메서드HTTP 메서드에는 GET, HEAD, POST, PUT, DELETE, CONN..

뭔가 프론트엔드 개발을 하면서 보안에 대해 크게 걱정해본 적이 없는데... 이번 회사에서 ISMS 심사를 하느라 보안에 대해 다시 생각해보는 계기가 된 것 같다. 분명 보안은 백엔드에서 훨씬 많이 신경써야하는게 많지만... 생각보다 프론트엔드에서 놓치고 있는 점도 많았다.  1. 통신구간 암호화일단 요즘 최대 고민은 client에서 reqeust을 보낼 때 그 요청값들을 어떻게 암호화 할지다....원래는 AES 암호화 방식을 사용했는데 AES 암호화를 crypto.js 라이브러리를 사용했는데 iv랑 key에 값을 .env에 넣어놓고 썼다.나는 process.env -> 즉 .env 파일에 key값을 넣어놓고 꺼내서 쓰면 개발자도구에서 노출이 안되는 줄 알았다...아니였다. 개발자도구에 key값이 다 노출..