개발자 퉁이리

캐시는 프로세서와 메모리 사이의 속도 차이를 해결하기 위해 사용되는 작고 빠른 메모리입니다. 주로 프로세서가 빠른 반응 속도를 위해 자주 사용하는 데이터를 캐시에 저장하여 전체 시스템 속도를 높입니다. 캐시는 지역성 원리(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 - 일반적인 콘텐츠..

ViteJS vite는 빠르고 간결한 빌드 도구다. 웹 프로젝트 규모가 계속해서 커짐에 따라 빌드를 하는 시간도 그만큼 길어지고 있다. vite는 이러한 문제를 해결할 수 있는 능력을 가지고 있다. 프랑스어로 빠름을 의미하는 vite는 그 이름에 걸맞게 엄청나게 빠른 빌드 속도를 자랑한다. 지금부터 CRA의 대항마인 vite를 사용하여 React 프로젝트를 생성해보자 Vite는 원래 Vue용으로 개발되었지만 React, Svelte 등 거의 모든 웹 프레임워크를 지원하고 있다. Vite가 현재 지원하는 템플릿 JavaScript TypeScript vanilla vanilla-ts vue vue-ts react react-ts preact preact-ts lit lit-ts svelte svelte-t..

inputmode inputmode 속성을 이용하면 input에 대한 요소, 가상 키보드를 지정하여 사용할 수 있다. inputmode 속성 none text (기본값) decimal numeric tel search email url 1️⃣ none 가상 키보드를 사용하지 않는다. 페이지가 자체 키보드나 입력 컨트롤일 때 사용한다. 2️⃣ text 사용자의 표준 입력 키보드가 나타난다. 3️⃣ decimal 소수점( , or . )을 지원하는 숫자형 키보드를 제공한다. 장치에 따라 음의 부호( - )의 제공 여부는 다르다. 4️⃣ numeric 숫자형 가상 키보드를 제공한다. (소숫점은 없다) 5️⃣ tel 전화번호 키보드를 제공한다. 숫자 0~9, 별표(*), 해시(#) 키를 포함한다. 6️⃣ sea..

FLUX FLUX는 FaceBook에서 고안한 단반향 데이터 흐름의 디자인 패턴이다. FLUX 패턴은 REACT Redux의 디자인 패턴으로 사용되고 있다. MVC 모델을 사용하고 있던 FaceBook에서 데이터가 많아지고, 복잡해지자 예상치 못한 오류들을 FaceBook에게 안겨주었다. 위 그림처럼 복잡해졌고, FaceBook은 이를 해결하기 위해 FLUX 패턴을 고안해낸다. FLUX 패턴 FLUX 패턴은 데이터를 보다 명확하게 구분하기 위해, MVC 복잡성을 해결하기 위해 데이터의 방향이 한쪽으로만 이동한다. FLUX 요소 Action Dispatcher Store View 🔥 Action Action은 데이터 상태 변경을 도와준다. Action 생성자는 type과 payload를 묶어 Dispatc..

CI/CD CI/CD는 CI와 CD를 합친 용어로, 지속적인 통합과 지속적인 배포를 뜻한다. CI (Continuous Integration) CI는 Continuous Integration의 약자로 지속적인 통합이라는 의미를 가진다. 개발이 진행됨에 따라 소스 코드에 대해 업데이트가 생기면 지속적으로 통합을 해준다. 지속적으로 코드를 왜 통합하나요? 해당 프로젝트에 개발자가 여러 명 일시 코드 충돌이 일어날 수도 있다. CI를 진행하게 되면 이러한 문제점을 해결할 수 있다. CD (Continuous Deployment) CD는 Continuous Deployment의 약자로 지속적인 배포라는 의미를 가진다. CI 빌드를 통과한 소스 코드에 대해 서버 배포가 가능하다면 진행된다. 지속적으로 배포를 왜 ..

WEBPACK 웹팩은 모듈 번들러다. 모듈(module)이란? 모듈은 특정 기능을 가지는 작은 코드 단위를 말한다. const sum = (a,b) => a+b; 번들러(bundler)란? 기술의 발전으로 복잡한 코드도 많이 개발되어 자연스럽게 코드 줄은 기하급수적으로 늘기 시작했다. 코드가 길어짐에 따라 여러 문제가 발생하였다. 코드 양이 많아 로딩이 느려짐 중복되는 코드 이름 (에러 발생) 스코프 문제 번들러는 여러 개의 파일을 하나로 묶어주는 역할을 수행함으로써 위 문제들을 해결해준다. 여러 개의 번들러가 존재하고 그중 하나가 웹팩(webpack)이다. 다시 한번 정리하자면 웹팩은 모듈 번들러다. 🤨 모듈 번들러인 웹팩은 장점만 존재할까? 웹팩(webpack)의 단점으로는 러닝 커브가 높다. 또한 ..

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

크로스 브라우징 크로스 브라우징은 표준 웹 기술을 사용하여 다양한 브라우저에서 작동 가능한지를 말한다. Chrome부터 시작해서 Edge, Firefox, IE Safari 등 브라우저는 굉장히 다양하다. 브라우저가 다양한만큼 렌더링 엔진도 그만큼 다양하다. 브라우저마다 렌더링 엔진이 다르기 때문이다. 🤨 렌더링 엔진 렌더링 엔진은 브라우저의 핵심이 되는 소프트웨어 구성 요소로, 요청한 데이터를 시각적으로 변환시켜준다. 📗 다양한 브라우저에서 해당 기술이 작동되는지 확인하는 방법 모질라(MDN) https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies ..

XML XML은 eXtensible Markup Language의 약자로 HTML과 매우 유사한 마크업 언어다. 🤔 어느 부분에서 HTML과 유사한가요? 같은 Markup Language이다. Markup Language는 사람과 기계가 동시에 읽기 편한 구조로 되어 있다. XML은 데이터를 저장하고 전송하도록 설계되었다. 기존 HTML의 한계를 극복하기 위해 탄생되었다. HTML은 데이터를 어떻게 보여주는지에 포커스가 맞추어져 있다면, XML은 데이터가 무엇인지가 포커스다. XML 특징 1️⃣ 정해진 태그를 사용하지 않아도 된다 XML 언어는 미리 정의된 태그가 전혀 존재하지 않는다. 따라서 새로운 태그를 만들어서 의미 있는 데이터를 계속해서 확장할 수 있다. 2️⃣ 웹 국제표준 W3C의 권장 사항이다..