개발자 퉁이리

웹 사이트와 애플리케이션에서 이미지는 사용자 경험(UX)에 큰 영향을 미칩니다. 이미지와 원활한 로딩 속도는 사용자의 만족도를 높이고, 결과적으로 전환율과 사용자 참여도를 향상시킵니다. 최근 초고속 인터넷 시대에 접어들면서 사용자는 더 좋은 화질을 원하고 자연스럽게 이미지 크기는 점점 더 커지고 있습니다. 하지만, 고화질 이미지는 용량이 크고 로딩 속도가 느려질 수 있으며, 이는 사용자 경험에 부정적인 영향을 줄 수 있습니다. 따라서 이미지 최적화는 프론트엔드 성능 향상에 핵심적인 역할을 합니다. 이미지 파일은 웹 사이트에서 가장 많은 용량을 차지하는 콘텐츠이기도 합니다. 2022년 HTTP 아카이브 연구에 따르면, 페이지 용량에 가장 큰 영향을 주는 리소스 콘텐츠 유형의 중앙값을 확인했을 때, 이미지가..

캐시는 프로세서와 메모리 사이의 속도 차이를 해결하기 위해 사용되는 작고 빠른 메모리입니다. 주로 프로세서가 빠른 반응 속도를 위해 자주 사용하는 데이터를 캐시에 저장하여 전체 시스템 속도를 높입니다. 캐시는 지역성 원리(Principle of Locality)를 따르며, 시간 지역성(Temporal locality)과 공간 지역성(Spatial locality)으로 구분됩니다. 지역성 원리를 이해하기 위해 구체적인 예시를 들어볼게요! 예를 들어, 컴퓨터에서 어떤 프로그램을 실행한다고 가정해 봅시다. 이 프로그램은 배열(Array)에 저장된 데이터를 반복적으로 읽고 쓰는 작업을 수행합니다. 배열의 크기는 1,000,000이고, 프로그램은 다음과 같은 순서로 데이터에 접근합니다. 1. 0번 인덱스부터 99..

이 글에서는 웹 페이지 로딩 과정에서 발생하는 FOUC(Flash of Unstyled Content)와 FOUT(Flash of Unstyled Text) 현상에 대해 알아보고, 브라우저 렌더링 원리를 이해하고 이를 극복하는 최적화 전략을 소개합니다. FOUC(Flash of Unstyled Content)와 FOUT(Flash of Unstyled Text) FOUC와 FOUT은 웹 페이지 로딩 과정에서 일시적으로 스타일이 적용되지 않은 콘텐츠와 텍스트를 사용자에게 보여주는 현상입니다. 두 현상 모두 스타일 로드 및 적용 시점과 브라우저 렌더링 시점 간의 차이 때문에 발생합니다. FOUC는 일반적인 콘텐츠에, FOUT은 웹 폰트에 대한 스타일 적용 지연 때문에 발생합니다. FOUC - 일반적인 콘텐츠..

서론 현대 웹 애플리케이션 개발은 복잡한 과정으로, 개발자들은 다양한 문제들을 해결하며 프로젝트를 진행해야 합니다. 이러한 문제들을 해결해 주는 SaaS(Software as a Service) 툴들은 개발자들에게 효율적인 개발 환경을 제공합니다. 이 글에서는 Vercel이라는 SaaS 툴이 웹 애플리케이션 개발에서 어떤 이점을 제공하며, SaaS 없이(without vercel) 웹 애플리케이션을 배포하고 관리하려면 어떻게 해야 했는지에 대해 서술해보려합니다. SaaS SaaS는 "Software as a Service"의 약자로, 소프트웨어를 서비스 형태로 제공하는 것을 의미합니다. SaaS는 클라우드 컴퓨팅의 한 형태로, 사용자가 웹 브라우저를 통해 인터넷에 접속하여 소프트웨어를 사용할 수 있게 합..

Keys React는 효율성을 높이기 위해 key 속성을 지원한다. key를 통해 기존 트리와 비교하여 업데이트 이후 트리의 자식들과의 일치 여부를 확인하고 변경한다. 간단한 list를 map함수를 사용하여 예제를 들어보자! const Tooo1 = () => { const m = [1, 2, 3, 4]; return ( {m.map((v, i) => ( {v} ))} ); }; export default Tooo1; 위 코드를 실행하면 다음 결과가 나온다. 너무 당연한 결과다. 정상적으로 코드가 실행되었다!! 그렇지만 브라우저에서는 경고를 보내고 있다. 경고의 원인은 map함수에 key 값을 안 넣어서 그렇다. Key 값을 왜 넣어야 할까? 우선 key는 React가 어떤 항목을 변경, 추가 또는 삭제..

※대학생이 공부하면서 작성한 글입니다※ ※이 글은 CRA로 만들었을 시 기준입니다※ env env는 API key, port, DB 등 민감한 정보를 환경변수에 담아 관리하는 방법이다. 🛑 env 주의사항 🔴 root 폴더에 생성해야 한다. root 폴더에 env 파일이 위치하지 않으면 정상적으로 작동하지 않는다. 🔴 변수명은 반드시 'REACT_APP_'으로 시작해야 한다. 'REACT_APP_변수명' 형식이 아닐 시, React가 인식하지 못하여 정상적으로 작동하지 않는다. *process.env.REACT＿APP＿는 예약어다. 🔴 .gitignore에 env를 등록해야 한다. .gitignore에 등록해주어야 git에 등록할 때, 파일이 올라가지 않는다. *기본으로 세팅이 되어있지만 확인해주도록 하..

Redux-Persist React의 Redux-Persist를 사용하면 새로고침을 해도 데이터가 지속적으로 유지된다. 이 글에선 Redux-Persist를 Redux-Toolkit과 함께 사용하여 알아볼 예정이다. 먼저 프로젝트를 설치하자 CRA 설치 # Redux + Plain JS template npx create-react-app my-app --template redux 기존 # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit 파일 구조 ├── README.md ├── node_modules ├── package.json ├── public └── src 새로고침을 해도 데이터를 유지하는 것을 적용하기 전에 먼저 현재 상태를..

V-Calendar V-Calendar는 vue.js에서 간단한 속성 달력을 표시하기 위한 플러그인이다. 🚨주의사항 vue.js 버전이 2.5 이상이어야 한다. 설치 npm install v-calendar 불러오기 import Calendar from 'v-calendar/lib/components/calendar.umd' import DatePicker from 'v-calendar/lib/components/date-picker.umd' // Register components in your 'main.js' Vue.component('calendar', Calendar) Vue.component('date-picker', DatePicker) // Or just use in separate com..

뷰 인스턴스 뷰를 사용하여 개발하기 위해서 필수적으로 생성해야 하는 기본 단위이다. 뷰 인스턴스 사용법 new Vue(); //인스턴스 생성 위 코드와 같이 인스턴스를 생성할 수 있다. 그리고 var vm안에 Vue 인스턴스를 담아보자 var vm = new Vue(); *vm은 뷰 모델의 약자이다 전체 코드를 한번 확인해보자 (아래 코드는 뒤 포스팅에서도 계속해서 사용할 예정이다) {{message}} 위 전체 코드에서 보면 var vm = new Vue(); 인스턴스 안에 여러개의 옵션이 들어있는 것을 확인할 수 있다. 이것들이 뷰 인스턴스의 속성이다. 뷰 인스턴스의 속성 new Vue({ el: , data: , methods: , }); 우리는 이 속성들을 재정의하여 옵션을 선택할 수 있다. 우선..

Vue 정의 Vue란 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크 다른 말로는 UI를 빠르게 개발하기 위해서 만들어진 자바스크립트 프레임워크 Vue 장점 - 배우기 쉽다 - 빠르다 - 다른 라이브러리, 프로젝트와 같이 사용하기 수월하다 - 한글화가 잘되어 있다 Vue 특징 1. MVVM 패턴 사용 Mode - View - ViewModel의 줄임말로 로직과 UI의 분리를 위해 설계된 패턴 2. 가상 돔 사용 돔과 비슷한 구조로 자바스크립트를 만들어 실제 돔보다 매우 빠른 성능을 자랑한다. 3. 재사용 유용 재사용이 가능한 컴포넌트를 사용하여 재활용에 유용하다. 좋아요는 로그인하지 않아도 누를 수 있습니다!