728x90 Web Frontend27 DOM과 BOM 차이 바로 알기 DOM과 BOM웹 개발을 시작하면서 JavaScript를 배우다 보면 "DOM"과 "BOM"이라는 용어를 자주 접하게 된다. 처음 접하는 사람들에게는 이 용어들이 다소 생소하게 느껴지는데 이번 포스팅에서 깔끔하게 DOM과 BOM이 무엇인지, 둘의 차이와 역할에 대해 간단히 알아보자.DOM이란?DOM(Document Object Model)은 웹 페이지의 구조와 내용을 표현하는 계층적 모델이다. 브라우저 안에는 웹 문서를 해석할 수 있는 렌더링 엔진(Chrome의 Blink, Safari의 WebKit, Firefox의 Gecko 등)이 있는데 이 렌더링 엔진이 HTML로 작성된 문서를 하나하나 해석한 후, JavaScript로 접근할 수 있도록 문서를 객체화한다. 이렇게 웹 문서를 객체화한 것을 Docu.. 2025. 1. 4. 맥 터미널에서 VScode 실행하기(feat. zsh: command not found: code 에러까지) 벨로그에서 옮겨오는 중 터미널에서 실행하고 싶은 프로젝트 폴더로 이동한 후에 code . 명령어를 이용하여 VS code를 실행할 수 있다.세팅해서 안되길래 게시글을 찾아본 경우만약 이미 code . 명령어 설정을 했는데 실행이 안되는 경우zsh: command not found: code먼저 응용프로그램에 VS code가 설치가 잘 되어있는지 확인해본다. i cloud 사용자라면 그냥 다운로드 폴더 안에 VS code가 설치 되어 있을 수 있기때문에 아무리 세팅을 반복해도 컴퓨터를 껏다키면 적용되지 않는다.처음 세팅하는 경우터미널에서 cmd + shift + p 명령어로 설정 탭을 켠후PATH에 code 명령 설치 또는 Shell Command: Install 'code' command in PATH를.. 2025. 1. 2. 맥북 아키텍처(Intel, M1, M2) 확인하는 방법 맥북 아키텍처(Intel, M1, M2) 확인하는 방법애플은 2020년부터 자체 설계한 Apple Silicon 칩(M1, M2 등)을 탑재한 맥북을 출시하기 시작했다. 하지만 아직도 많은 사람들이 Intel 기반 맥북을 사용하고 있거나, 중고로 구매한 경우 어떤 아키텍처인지 헷갈릴 수 있다. 맥북의 아키텍처를 확인하는 방법을 단계별로 알고, 관련된 개념을 이해해보자. 1. 맥북 아키텍처 확인 방법터미널로 빠르게 확인하려면 아래 명령어를 입력한다.sysctl machdep.cpu.brand_string(1) ‘About This Mac’에서 확인하기화면 왼쪽 상단의 애플 로고(\U0001f34e)를 클릭한다."About This Mac(이 Mac에 관하여)"을 선택한다."Overview(개요)" 탭에서 .. 2024. 12. 11. 랜딩 페이지 최적화는 어떤 것이 있을까? ( 디바운스, 인터셉션옵저버 활용하기 ) 반응형 랜딩 페이지에서 가장 렌더링 계산이 의외로 많이 들어가는 것은 무엇일까?디바이스별로 width와 height를 계산하는 것에 많이 들어간다. 리플로우, 리페인드라고 하는데 CSS렌더링 시 랜딩 페이지 최적화: 디바운스(Debounce)와 인터섹션 옵저버(Intersection Observer) 활용하기 랜딩 페이지는 사용자가 웹사이트에 처음 방문했을 때 접하게 되는 중요한 지점이다. 사용자가 랜딩 페이지에서 느끼는 첫인상이 곧 이탈률 감소와 전환율 증대로 이어지기 때문에, 랜딩 페이지의 최적화는 디지털 마케팅에서 필수적인 요소이다. 본 포스팅에서는 디바운스(Debounce)와 인터섹션 옵저버(Intersection Observer)를 활용하여 랜딩 페이지를 최적화하는 방법을 개념, 예제, 그리고.. 2024. 11. 20. GraphQL 맛보기 GraphQL 맛보기해당 포스팅은 책 GraphQLr과 타입스크립트로 개발하는 웹 서비스 - 강희수 저자의 1장 일부를 정리한 내용입니다.GraphQL은 클라이언트 애플리케이션을 위한 쿼리 언어.페이스북이 기능이 복잡해짐에따라 발생하는 충돌과 성능 저하를 감당하기 위해 본인들의 서비스에 맞는 GraphQL을 시작함.모바일 애플리케이션을 위한 Model과 View를 새롭게 구축하기 시작이 과정에서 RESTful API서버를 통해 받아온 데이터 형태와 애플리케이션 화면상에서 필요한 데이터 형태에 많은 차이가 있음을 발견함.API 요청을 통해 받아온 데이터를 실제 화면상에서 필요한 데이터의 형태로 구성하기 위해 API서버와 프런트엔드 클라이언트 양쪽에 걸쳐 데이터를 가공하는 상당한 양의 코드를 작성해야했음.데.. 2024. 10. 2. JavaScript Math.trunc()메서드와 틸트(tilt) 연산자 숫자를 다루는 연산을 할 때, 소수점을 버릴 경우 Math.trunc()연산자를 사용한다. 비트 연산에서는 주로 쓰이는 틸트 연산자 중 이중 틸트 연산자의 경우 숫자의 소수점을 버리는 방법으로 알고리즘 문제를 풀이를 할 시 간단하게 사용할 수 있다.1️⃣ ~ (비트 반전 연산자)~ 는 비트 반전 연산자(bitwise NOT)라고 부른다. ~ 연산자는 숫자의 모든 비트를 반전시킨다.0은 1로, 1은 0으로 바뀐다.예를 들어, 8비트로 표현된 숫자 5가 있다고 하면, 이진수로는 00000101이다. ~5를 연산하면 각 비트가 반전되어 11111010이 된다. 11111010을 십진수로 표현하면 -6이다.~5 = -62️⃣ ~~ (이중 틸트 연산자)~는 비트 반전 연산자인 ~를 두 번 적용한 것이다.숫자의 소.. 2024. 8. 23. 이전 1 2 3 4 5 다음 728x90
