dev_in 개발 블로그

Flex와 Grid Flexbox와 Grid는 페이지에서 레이아웃을 구성할 때 자주 사용되는 CSS 속성입니다. 두 속성 모두 화면 요소를 배치하고 정렬하는 데에 사용되지만 몇가지 차이점이 존재합니다. 첫번째로 Flexbox는 1차원 레이아웃이지만, Grid는 2차원 레이아웃입니다.Flexbox는 1차원 레이아웃 속성으로, row 또는 column 중 하나를 기준으로 요소를 정렬하고 배치하는 데 최적화되어 있습니다. 주로 행이나 열 중 하나의 방향으로 정렬해야 할 때 유용하며, 복잡한 행과 열을 모두 포함하는 레이아웃에서는 다소 한계가 있습니다.반면 Grid는 2차원 레이아웃 속성으로, 행과 열을 모두 사용해 요소를 배치할 수 있습니다. 따라서 복잡한 레이아웃을 구성하거나, 웹페이지의 전체적인 구조를 ..

웹 접근성 웹 접근성은 장애인과 고령자 등 신체적 제약이 있는 사용자를 포함해, 모든 사용자가 웹 페이지를 동등하게 이용할 수 있도록 보장하는 개념입니다. 마치 공공건물에 휠체어 경사로를 설치해 이동이 불편한 사람도 이용할 수 있게 하는 것처럼, 웹 페이지 역시 디지털 경사로를 마련해 누구나 접근할 수 있어야 합니다. 다만 접근성은 단순히 장애인만을 위한 것이 아닙니다. 네트워크 속도가 느리거나 밝은 햇빛 아래 화면을 보는 등 일상적인 제약 상황에서도, 모든 사용자가 제약 없이 웹을 사용할 수 있도록 하는 것이 웹 접근성의 궁극적인 목표입니다. 웹 접근성 개선에는 다양한 방법이 있습니다. 우선, 단순하고 명확한 HTML 구조와 시맨틱 태그가 필요합니다. 여기서, 시맨틱 태그는 웹 페이지의 구조와 의미를 ..

앞으로 해당 카테고리를 통해 개인 프로젝트 MenuMate를 준비하고 진행한 과정을 정리하고자 합니다. 프로젝트의 목적식사 메뉴를 랜덤으로 추천해주는 기능, 특정 재료를 토대로 메뉴를 추천해주는 기능을 가지고 있는 웹을 만듬으로써 사용자들의 일상 속 메뉴 선정에 도움을 주고자 합니다. 기술 스택더보기언어: TypeScript, HTML, tailwind CSS프레임 워크: Next.js 16코드에디터: VS Code포메터: ESLint, Prettier소스코드 관리: Git 코드 컨벤션 네이밍 컨벤션더보기컴포넌트: PascalCase함수: camelCase상수: UPPER_SNAKE_CASE폴더: camelCase이미지명: PascalCase 커밋 컨벤션더보기chore: (파일명 변경 등 기능적 변경점 ..

디바운스(debounce) 와 쓰로틀(throttle) 은 이벤트 핸들러가 너무 자주 실행되지 않도록 조절하는 기법입니다. 이 두 가지 방법은 비슷해 보이지만, 동작 방식에 차이가 있습니다. 디바운스는 이벤트가 연속적으로 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 지나야 이벤트 핸들러가 실행되는 방식입니다. 이를 통해 불필요하게 많은 이벤트 호출을 방지할 수 있습니다. 예를 들어, 검색창에 사용자가 키를 입력할 때마다 검색 요청을 보내면 부하가 지나치게 커지기 때문에, 사용자가 입력을 멈춘 후 일정 시간이 지나면 검색 요청을 보내는 방식으로 디바운스를 적용할 수 있습니다. 쓰로틀은 일정 시간 간격 동안 발생한 이벤트 중 첫 번째 또는 마지막 이벤트만 처리하는 방식입니다. 즉, 이벤트가 계속해서 ..

웹 애플리케이션 성능 최적화에는 여러 가지 방법이 있습니다. 우선, 코드 스플리팅을 통해 자바스크립트 파일을 필요한 부분만 나누어 로드할 수 있습니다. 이렇게 하면 모든 코드를 한꺼번에 불러오는 대신, 사용자가 즉시 필요한 부분만 먼저 로드하여 페이지 로딩 속도를 개선할 수 있습니다.또한, 레이지 로딩 기법을 사용하여, 페이지에 있는 이미지나 비디오 같은 무거운 리소스를 사용자가 실제로 볼 때만 로드하는 방식을 적용할 수 있습니다. 예를 들어, 사용자가 페이지를 스크롤할 때 하단의 이미지가 필요해지면 그때 비로소 이미지를 불러오는 것입니다. 이렇게 하면 불필요한 리소스 로딩을 줄여 성능을 높일 수 있습니다. 이미지에 대해서는 파일의 물리적인 크기를 알맞게 줄이거나 WebP와 같은 가벼운 포맷으로 변환하는..

자바스크립트 함수에는 여러가지 특징들이 있습니다. 1. 자바스크립트 함수는 일급 객체자바스크립트에서 함수는 값처럼 취급될 수 있으며, 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있습니다.const sayHello = function() { return 'Hello'; };console.log(sayHello()); // 'Hello'const executeFunction = function(fn) { return fn();};console.log(executeFunction(sayHello)); // 'Hello'이를 통해 매우 유연하게 코드를 작성할 수 있으며, 고차 함수를 포함한 다양한 패턴을 구현할 수 있습니다. 2. 익명 함수와 함수 표현식 자바스크립트에서는..

자바스크립트의 배열(Array)은 순서가 있는 리스트형 객체로, 여러 값을 하나의 자료구조에 저장할 수 있습니다.배열은 제로 인덱스 기반으로, 배열의 각 값은 인덱스를 통해 접근할 수 있습니다. 배열의 선언은 간단하며, 다양한 데이터 타입을 함께 저장할 수 있습니다.const array = [1, 'apple', true, { key: 'value' }]; 이 배열은 숫자, 문자열, 불리언, 객체 등 다양한 타입을 저장할 수 있으며, 배열의 첫 번째 요소는 array[0]으로, 두 번째 요소는 array[1]과 같이 접근할 수 있습니다.자바스크립트 배열의 중요한 특징 중 하나는 동적 배열이라는 점입니다. 이는 배열의 크기를 미리 지정하지 않아도 되고, 요소를 추가할 때마다 배열의 크기가 자동으로 조정됩..

브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정을 브라우저 렌더링 파이프라인이라고 합니다. 이 과정은 크게 6단계로 나눌 수 있습니다. 1단계 - DOM 생성브라우저가 HTML 파일을 받으면, 이 파일을 바이트(byte) 단위로 읽기 시작합니다. 브라우저의 HTML 파서(Parser)는 이 바이트들을 문자(character)로 변환하고, 이 문자들을 다시 HTML 토큰으로 변환합니다. 이 HTML 토큰들은 각각의 태그와 그 안에 포함된 텍스트, 속성 등을 의미하게 됩니다.HTML 토큰이 생성되면, 브라우저는 이를 기반으로 DOM 트리를 생성합니다. DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한 것으로, 각 태그가 노드(node)가 되어 부모-자식 관계를 형성합니다. 예를 들어, 태..