본문 바로가기
728x90
반응형

Todo83

HTML파일에서 JS파일을 효과적으로 가져오는 법 프론트엔드 개발자로서 성능 최적화는 중요한 과제입니다. HTML 문서에서 JavaScript 파일을 가져올 때, script 태그의 기본 동작과 함께 HTML5에 추가된 defer 및 async 속성을 활용하면 로딩 속도를 개선하고 성능을 최적화할 수 있습니다. 이번 포스팅에서는 각각의 개념과 올바른 사용 예시를 간단하게 알아봅시다.🔖 HTML 코드는 위에서부터 아래로 파싱됩니다.script 태그의 기본 동작HTML로 파일을 작성할 때 script태그를 사용해 JS 파일을 불러올 수 있습니다. 브라우저가 HTML 파일을 위에서부터 아래로 순차적으로 파싱하면서 🔧 script 태그의 문제점 알기script 태그를 head 태그에 위치하거나 body 태그 최상단에 넣을 경우 HTML이 다 파싱되기 전에 .. 2025. 1. 4.
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.
AWS CloudFront를 사용하는 이유 AWS CloudFront 를 사용하는 이유에 대해 알려면 CDN을 먼저 이해해야한다.1. CDN(Content Delivery Network)이란?CDN은 전 세계에 분산된 서버 네트워크를 활용하여 사용자에게 더 빠르고 안정적으로 콘텐츠를 전달하기 위한 기술이다.기본 원리 - 사용자의 지리적 위치에 가장 가까운 서버에서 콘텐츠를 제공하여 전송 속도를 개선하고 지연(latency)을 최소화한다.장점웹사이트/애플리케이션의 로딩 속도 향상대규모 트래픽을 효율적으로 처리서버 부하 감소DDoS(Distributed Denial of Service) 공격 방어2. AWS CloudFront를 알아보자AWS CloudFront는 AWS에서 제공하는 관리형 CDN 서비스로, 정적(static) 및 동적(dynamic.. 2025. 1. 2.
AI 영단어 학습 플랫폼, Wordy 2024. 12. 31.
맥북 아키텍처(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.
728x90
반응형

티스토리툴바