예방이의 개발일기

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 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값이 다 노출..