[CSS] RequestAnimationFrame

브라우저 프레임초당 프레임(fps)는 1초에 몇 개의 프레임이 보여지는 가를 나타낸다.스크롤을 하거나 애니메이션 같은 것들이 화면에서 부드럽게 보이기 위해서는 60fps가 필요하다.1000ms/60 = 16.666ms 간격으로 프레임을 생성해야 된다.즉, 사용자에게 부드러운 애니메이션 느낌을 보여주기 위해서는 16.6ms마다 코드를 호출해야 하는 것이다.16.6ms보다 더 오래 걸리게 되면, 화면에서 끊김 현상이 발생한다.RequestAnimationFrame최적화를 해서 애니메이션을 효율적으로 실행해주는 함수이다.requestAnimationFrame은 브라우저가 애니메이션을 업데이트할 준비가 되면 호출된다.실제 화면이 갱신되는 주기에 맞춰서 콜백을 호출해주기 때문에 화면 끊김 현상을 방지한다. re..

• format_list_bulleted HTML,CSS,JS
• · 2024. 10. 8.
• textsms

[WEB] 웹 캐시 전략

웹 캐시란?캐시란 데이터에 빠르게 접근하기 위해 자주 사용되는 데이터나 값을 미리 복사해 놓는 임시 장소를 의미한다.웹 캐시란 브라우저가 서버에서 받아온 리소스를 특정 위치에 저장해 놓는 것이다.이후 요청을 하면, 해당 리소스가 있는지 확인하고 재사용하는 방법이다. 캐시는 Http 헤더의 Cache-Control로 설정할 수 있다. ⭐️ Cache-Control 옵션no-store : 캐시에 리소스를 저장하지 않는다.no-cache : 캐시 만료기간을 신경쓰지 않고 항상 서버에 리소스 재검사를 요청한다.must-revalidate : 캐시 만료기간이 지났을 때만 서버에 리소스 재검사를 요청한다.public : 해당 리소스를 캐시에 저장한다.private : 해당 리소스를 캐시에 저장하지 않는다. 개인정보..

• format_list_bulleted WEB
• · 2024. 10. 7.
• textsms

[WEB] Web View

웹뷰(Web View)란?프레임워크에 내장된 웹 브라우저 컴포넌트로 앱 내에서 웹 브라우저를 띄우는 것이다.앱을 벗어나지 않고 웹 브라우저를 띄운다는게 핵심이다.=> 앱에 내장되어 있는 브라우저 카카오톡으로 받은 링크에 접속하면 카카오톡 자체 브라우저를 통해 접근하는데, 이게 웹뷰를 사용한 것이다!앱 개발 방법- 웹앱HTML, CSS, JS로 개발앱과 유사한 경험을 제공하면서 웹 브라우저를 통해 접속하는 웹 페이지설치하는 방식 X - 네이티브 앱특정 플랫폼에 맞게 개발된 앱운영체제와 하드웨어의 기능을 모두 활용할 수 있음앱 스토어에서 설치해야 됨 - 하이브리드 앱웹앱과 네이티브 앱의 장점만 합친 기술앱의 화면이나 기능은 웹 기반으로 제작하고 겉모습은 네이티브 앱으로 패키징앱 스토어에서 설치해야 됨 웹뷰 ..

• format_list_bulleted WEB
• · 2024. 10. 1.
• textsms

[WEB] SWC(Speedy Web Compiler)

SWC(Speedy Web Compiler)란?Rust라는 언어로 제작되었고 컴파일과 번들링을 수행하는 빌드 툴이다.매우 빠른 JS 컴파일러로 기존 babel이 하던 일을 대체하였고,SWC는 컴파일러이지만 웹팩과 같은 JS 번들러의 기능도 제공한다.SWC는 단일 스레드에서는 Babel보다 20배 빠르고 , 4개 코어에서는 70배 빠르다. 컴파일 - 한 언어로 작성된 코드를 다른 언어의 코드로 변환(타입스크립트 파일을 자바스크립트 파일로 변환)트랜스파일 - 컴파일의 하위분류. 유사한 두 언어 사이에서 변환(JS 최신 문법을 구형 문법으로 변환)번들러 - 분리된 모듈을 하나의 모듈로 묶어줌(웹팩)Next.js의 SWC 도입Next.js에 SWC를 도입함으로써 Babel과 Terser를 대체하였다.Babel과..

• format_list_bulleted WEB
• · 2024. 9. 30.
• textsms

[FESTINO] 한국공학대학교 축제 웹사이트 개발 회고록

🫧 FESTINO?한국공학대학교 축제 정보를 제공한 웹사이트이다.2024년 6월 ~ 2024년 9월 13일(약 두달 반)동안 기획, 개발, 배포까지 ✨성공적으로 마무리한 프로젝트✨이다.9/11 ~ 9/13 3일 동안 3천명의 사용자와 8만회의 조회수를 달성했다.🫧 팀원 모집 개발 소모임인 DEV-TINO(https://github.com/DEV-TINO) 팀장님에게 프로젝트 아이디어를 듣고재학생으로써 학교 학생들을 위한 웹 사이트를 만들고자 프론트엔드 팀장으로 참여하게 되었다.팀원은 디자이너 3 + 프론트엔드 4 + 백엔드 5 => 총 12명의 인원으로 팀이 구성되었고 모두 한국공학대학교 학생들(졸업생 포함)이다. 지금까지는 4-5명 정도의 인원으로 프로젝트를 해왔었는데12명이라는 많은 인원과 디자이..

• format_list_bulleted 이것저것
• · 2024. 9. 24.
• textsms

[개발] 프론트엔드에서 테스트

❗️ 테스트란?프로그램을 실행하여 오류와 결함을 검출하고 애플리케이션이 요구사항에 맞게 동작하는지 검증하는 절차이다.즉, 개발자의 의도대로 코드가 동작하는가를 확인해보는 작업이다. 테스트는 두가지 종류로 나누어지는데자동화 테스트 - 코드를 작성하고 반복적으로 테스트수동 테스트 -  브라우저에서 직접 사용해보는 테스트실제 사용자가 사용한다고 생각하고 직접 테스트를 해볼 수도 있지만(수동 테스트)코드가 수정될 때마다 다시 테스트를 해야 하고, 실수를 할 가능성이 있기 때문에 테스트 코드를 작성하여 자동화를 한다.❗️ 프론트엔드에서 테스트프론트엔드에서 테스트 코드를 통해 테스트 코드를 자동화는 사례는 많지 않다고 한다.프론트엔드에는 UI가 존재하는데, UI가 자주 변경되기 때문이라고 추측할 수 있다. 최근에는..

• format_list_bulleted 개발
• · 2024. 9. 22.
• textsms