개발자 퉁이리

캐시는 프로세서와 메모리 사이의 속도 차이를 해결하기 위해 사용되는 작고 빠른 메모리입니다. 주로 프로세서가 빠른 반응 속도를 위해 자주 사용하는 데이터를 캐시에 저장하여 전체 시스템 속도를 높입니다. 캐시는 지역성 원리(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는 클라우드 컴퓨팅의 한 형태로, 사용자가 웹 브라우저를 통해 인터넷에 접속하여 소프트웨어를 사용할 수 있게 합..

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

BABEL BABEL은 ES6+ 코드를 이전 JavaScript 엔진에서 실행할 수 있게 도와주는 컴파일러다. ❓ BABEL이 필요한 이유 현재 JavaScript는 브라우저에서 돌아가는데 너무 빠르게 바뀌고 있다. 그래서 최신 브라우저가 그 속도를 못 따라가는 경우가 종종 발생한다. babel은 이러한 문제를 해결해준다. 최신 JavaScript 언어를 해석하여 이전 버전을 가진 브라우저에서도 돌아갈 수 있게 문법을 변경해준다. 🔧 BABEL 빌드 진행 과정 파싱 (Parsing) 변환 (Transforming) 출력 (Printing) 파싱 -> 변환 -> 출력 과정을 거쳐 BABEL 빌드가 이루어진다. BABEL 빌드에서 가장 중요한 부분은 변환 과정이다. 변환은 플러그인을 통해 이루어진다. 🎈 플..