본문 바로가기

Web Study124

웹 최적화 - 불필요한 CSS 제거, PurgeCSS Reduce unused CSS 해결 개발자 도구의 Coverage(범위) 패널을 이용하여 페이지에서 사용되는 파일의 리소스에서 실제로 실행되는 코드가 얼마나 되는지 알려주며 비율을 확인할 수 있다. 자바스크립트 파일에서의 Coverage 는 if문의 조건 분기 때문일 가능성이 있으므로 어느정도 감안해야 하지만 CSS 파일에서 Coverage 는 정리해줄 필요가 있다. Coverage 항목을 누르면 위에 Source 가 뜨고, 파란 막대는 사용하는 코드이며 빨간 막대는 사용하지 않는 코드를 의미한다. Tailwind CSS 라이브러리 등의 CSS 에서 사용되지 않는 클래스인 경우 더욱 많은 불필요한 CSS가 발생한다. PurgeCSS 파일에 들어있는 모든 키워드를 추출하여 해당 키워드를 이름으로 갖는 C.. 2023. 8. 14.
PostgreSQL 과 Node.js 회사에서 PostgreSQL 을 쓴다고 한다. 지금껏 MySQL 만 사용해서 친숙한 돌고래를 보내고 ... 코끼리를 마주하니 막막했다. 그래도 쿼리문 작성 자체는 Postgre 가 편한거 같기도.. 조금씩 다르긴 하지만 일단 큰 줄기는 같으니까. 하지만 역시 SQL 보다 NoSQL 이 사용하기 용이한 느낌은 버릴 수가 없다. 그립다 ... MongoDB PostgreSQL 을 사용하기 위한 pg 설치 yarn add pg Controller 작성 pg 에서 데려온 Client 로 정보를 넣어주고, 연동시켜준다. 나머지는 간단하게 connect() 해주면 된다! const { Client } = require('pg'); const client = new Client({ user: process.env.P.. 2023. 8. 10.
Webpack 프론트엔드 개발환경 세팅 https://www.youtube.com/watch?v=zal9HVgrMaQ npm init nodejs 기반의 패키지를 만들어줄 때 입력해준다. 그러면 package.json 이 생기게 된다. npm install webpack webpack-cli --save-dev 웹팩 설치, webpack-cli 는 웹팩을 커맨드라인으로 설정해줄 수 있는 패키지이다. 기본 웹팩 설정 + js 설정 webpack.config.js 웹팩 설정 관련 파일, 웹팩을 실행했을 때 이 파일 안의 내용을 실행해준다. const path = require("path"); module.exports = { entry: "./src/index.js", output: { filename: "main.js", path: path.r.. 2023. 8. 2.
웹 최적화 기법 - 캐시 최적화 Serve static assets with an efficient cache policy => 네트워크를 통해 다운로드하는 리소스에 캐시를 적용하라는 의미 캐시 자주 사용하는 데이터나 값을 미리 복사해둔 임시 저장 공간 또는 저장하는 동작 웹에서 서비스에서 사용하는 이미지나 자바스크립트 파일을 매번 네트워크를 통해 불러오지 않고 최초에만 다운로드하여 캐시에 저장해두고 그 이후 요청 시 저장해둔 파일을 사용한다. 웹에서 사용하는 캐시의 종류 메모리 캐시 메모리에 저장하는 방식 RAM 디스크 캐시 파일 형태로 디스크에 저장하는 방식 어떤 캐시를 사용하는지 직접 제어가 불가하며 브라우저가 사용 빈도나 파일 크기에 따라 특정 알고리즘에 의해 알아서 처리된다. 단순 새로고침을 한 후 확인한다면 메모리 캐시가 많.. 2023. 8. 1.

티스토리툴바