본문 바로가기

분류 전체보기

웹 프론트엔드 간단한 성능 검사(Chrome Task Manager) Chrome Task Manager를 활용한 간단한 프론트엔드 성능검사 특정 화면에서 브라우저가 느려지는 상황 원인 파악을 위해서 사용했다. Chrome Task Manager 크롬의 작업 관리자로 Memory footprint, Cpu, Network, ProcessID를 통해서 현재 페이지에서 브라우저에 어느정도 부하가 걸리는지 확인 할 수 있다. memory footprint : 현재 탭에서 사용하는 메모리 Javascript memory : 자바스크립트에서 사용하고 있는 메모리 CPU : 해당 탭의 현재 cpu사용량 아무것도 하지 않는 상태 = 0.0 특정 액션이 발생하면 cpu 사용량 수치가 올라가는데 보통 20 ~ 30 정도의 수치를 유지 하는 것이 좋은것 같다. 페이지를 이동할때는 60~70..
WebStorm ESLint 설정 및 Prettier 설정하기 ESLint 설정 Setting 메뉴 열기 Flie > Setting 또는 Ctrl + Alt + S elint로 검색 아래와 같이 체크하고 ok Prettier 설정 Prettier 패키지 설치 //특정 프로젝트에서만 사용하려면 --save-dev(데브설치) //모든 프로젝트에서 다 사용하려면 -g(글로벌설치) npm install --save-dev eslint-config-prettier Setting 메뉴 열기 Flie > Setting 또는 Ctrl + Alt + S Prettier로 검색 Prettier package에 아까 설치한 패키지 위치 패스를 잡아준다 원하는 옵션 선택하고 저장.
ESLint Basic, ESLint 파일 기본 설정 Install, 설치 npm install eslint --save-dev Create Setting File, 설정파일 만들기 eslintrc.js 파일을 생성 Basic Structure, 기본 구조 module.exports = { "rules": { "semi": ["error", "always"], "quotes": ["error", "double"] } }; Error Level, 에러 단계 off "semi": ["error", "always"], 규칙을 끈다. warn "semi": ["warn", "always"], 규칙을 위반하면 경고를 표시한다. 코드는 정상 실행 error(권장 - recommended) "semi": ["error", "always"], 규칙을 위반하면 프로그램이 ..
[Git] LF will be replaced by CRLF 경고 해결 git config --global core.autocrlf true git config --global core.autocrlf input
윈도우 nvm 설치 후 npm 버전 확인시 오류 해결하기 npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. 윈도우 PC에 npm 사용하기전에 npm -v 실행후 위와 같은 메시지가 출력. npm-windows-upgrade 패키지 설치가 필요 PowerShell [관리자 권한] 실행 후 Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force 실행 npm install --global --production npm-windows-upgrade 실행 npm-windows-upgrade 실행 npm -v로 확인 참고 https://github.com/npm/cli/issues/4980
윈도우에서 nvm을 통한 node 설치 에러 nvm install 12 1. 위와 같은 명령어로 nvm에서 노드를 설치 하게되면 자동으로 특정 12.xx.xx 버전의 노드가 설치된다. 2. 이후에 use 명령어를 사용하면 인스톨 되지 않았다고 출력 해결 방안 1. 기존에 설치한 node를 nvm uninstall로 삭제 2. 특정 버전 전체를 입력해서 설치(ex: nvm install 12.22.8) 3. 이후에 use 명령어에서도 버전 전체를 입력해준다.
[React] 리액트로 사이트 제작하기_1 (AWS S3, Cloudfront, Route53) 사이트 제작하기 최근 프로젝트를 진행하면서 주로 사용하고 있는 기술들을 리마인드 해보기 위해서 간단한 포트폴리오 웹 사이트를 제작 해보려고 합니다. 사용하는 기술 배포 및 호스팅 = S3(Repository / Static Host), Cloud front(CDN), Route53(DNS) 버전관리 = github 배포자동화 = CICD pipeline FrontEnd = Next.js + Typescript + ReduxToolkit STEP 1) AWS S3 셋업 -S3는 스토리지 서비스이고 이 곳에 정적 배포 파일을 올리고, 정적 호스팅 기능으로 호스팅 해보도록 하겠다. AWS 가입해서 대시보드에서 s3라고 검색하고 들어가기 버킷 만들기를 클릭 버킷 이름 지정, 리전 선택후 생성하면 아래처럼 리스트..
[npm] Gitlab Package Registry에 npm 모듈 배포하기 (1. js 모듈) 1. 깃랩 가입하고 레포지토리를 준비 2. npm 패키지 작성 npm init package name Package Registry로 들어간다 아래와 같이 등록 되어 있으면 성공 6. 패키지 받아보기 npm i

티스토리툴바