[FE 성능측정] LightHouse, 그것이 알고싶다

[FE 성능측정] LightHouse, 그것이 알고싶다

안녕하세요!오늘은 편하게 웹성능을 평가할 수 있는Lighthouse에 대해서 알아보려고 합니다. ⛵ Lighthouse 그게 뭔가요?Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more. 개발자 설명에 따르면 웹 페이지의 품질을 향상시키기 위한 오픈 소스 자동화 도구로,모든 페이지에 대해 실행할 수 있으며, 성능, 접근성, PWA, S..

  • format_list_bulleted 교육/SSAFYcial
  • · 2024. 5. 2.
  • textsms
[React] VitePWA 를 이용해 Vite기반 React프로젝트에 PWA적용하기

[React] VitePWA 를 이용해 Vite기반 React프로젝트에 PWA적용하기

이번 프로젝트에서는 알림 기능이 중요하기 때문에PWA를 이용해서 프로젝트를 진행하기로 했다. 그래서 본격적인 프로젝트를 시작하기 전에,VitePWA 플러그인을 이용해서 적용해보고 Vercel을 이용해서 간단하게 배포 후 잘되나 확인해보려고 한다.고고 1. Vite기반 React프로젝트 만들기사실 react가 아니어도 크게 상관없을 것 같다.vite만 기반으로 된다면 괜찮음 npm create vite@latest 프로젝트명명령어를 통해 프로젝트를 만들어주고  2. Vite PWA 설치 및 설정https://vite-pwa-org.netlify.app/ Vite Plugin PWAZero-config PWA Framework-agnostic Plugin for Vite and Integrationsvite..

  • format_list_bulleted FrontEnd/React
  • · 2024. 4. 17.
  • textsms

[React] r3f를 이용해 glb파일을 lazy loading 해보자

보호되어 있는 글입니다.

  • format_list_bulleted FrontEnd/React
  • · 2024. 4. 11.

[React + Firebase] 리액트와 firebase를 이용해서 알림기능을 구현해보자

보호되어 있는 글입니다.

  • format_list_bulleted FrontEnd/React
  • · 2024. 4. 11.
[3D] Three.js, 그것이 알고싶다

[3D] Three.js, 그것이 알고싶다

안녕하세요! 싸피 10기는 현재 특화 프로젝트를 마무리하고 있습니다.특화 프로젝트에서는 다들 새로운 기술들을 많이 도입해서 프로젝트를 진행하는 것 같더라고요!저희 조도 MSA, YOLO 등 다양한 기술을 새로 배우면서 진행 중입니다! 그중 저는 Three.js라는 것을 새로 접해서 사용해보고 있는데요,왕기초지만! 함께 뭔지 알아볼까요?   🔎 Three.js 그게 뭔데?Three.js는 웹페이지에 3D인 객체를 쉽게 랜더링 할 수 있도록 도와주는 자바스크립트 라이브러리입니다.Three.js를 검색하다 보면 같이 나오는 WebGL이라는 것도 있는데,Web Graphics Library의 약자로 점, 선, 삼각형 등을 그리는 단순한 시스템이기 때문에 WebGL만으로 원하는 모델을 만들기는 힘듭니다. 그래서..

  • format_list_bulleted 교육/SSAFYcial
  • · 2024. 4. 1.
  • textsms

[TypeScript] 타입을 한 곳에 모아보자~~

배경 consult라는 type이 상당히 긴데, 자주쓰임 아이고 불편해…그래서 따로 빼서 import 하려고 함 해 보 자 고 src/types/DataTypes.ts 라는 파일을 만들어 주고, // DataTypes.ts // 고민 타입 export type consultType = { consultId : number, memberId : number, title : string, content : string, categoryId : number } 이런식으로 export를 바로 하면서 넣어주자 만약 여러개가 되어도 // DataTypes.ts // 고민 타입 export type consultType = { consultId : number, memberId : number, title : str..

  • format_list_bulleted FrontEnd/TypeScript
  • · 2024. 3. 22.
  • textsms