본문으로 건너뛰기

Less than perfect is sometimes perfect

홈
개발

이벤트 루프

자바스크립트 동시성 모델: 이벤트 루프(Event Loop)의 구성 요소와 동작 원리자바스크립트는 싱글 스레드(Single Thread) 언어이지만, 웹 브라우저 런타임 환경의 지원을 받아 비동기 작업을 논-블로킹(Non-Blocking) 방식으로 처리합니다. 이 메커니즘은 콜 스택, Web API, 태스크 큐, 그리고 이벤트 루프라는 네 가지 요소의 유기적인 협력을 통해 구현됩니다.1. 콜 스택 (Call Stack)콜 스택은 자바스크립트 엔진 내부에 위치하며, 프로그램의 동기적(Synchronous) 실행 흐름을 관리하는 LIFO(Last-In, First-Out) 구조이다.기능: 현재 실행 중인 코드의 **실행 컨텍스트(Execution Context)**를 저장하고 추적한다. 함수가 호출될 때 스..

2025. 12. 10.
이벤트 루프
개발

Shadow DOM이란? 스타일 캡슐화부터 slot, 이벤트까지 한 번에

🎯 Shadow DOM이란? 스타일 캡슐화부터 slot, 이벤트까지 한 번에웹 컴포넌트를 제대로 이해하려면 꼭 알아야 할 핵심 개념웹 컴포넌트(Web Components)를 공부하다 보면 반드시 마주치는 개념이 있습니다.바로 Shadow DOM(쉐도우 돔) 입니다.“캡슐화된 DOM?”“스타일이 격리된다고?”“slot은 또 뭐야?”처음 접하면 다소 낯설지만, 한 번 이해해두면 UI 컴포넌트 개발이 훨씬 쉬워집니다.📌 목차Shadow DOM이란?왜 Shadow DOM이 필요한가?기본 문법: attachShadow()와 Shadow Root예제 1 – 전역 스타일이 영향을 주지 않는 버튼 컴포넌트예제 2 – 을 활용한 카드 컴포넌트예제 3 – open vs closed Shadow DOM예제 4 – Sha..

2025. 11. 19.
Shadow DOM이란? 스타일 캡슐화부터 slot, 이벤트까지 한 번에
책

신경끄기의 기술

이번엔 유명한 블로거 마크 맨슨이 쓴 신경끄기의 기술이라는 책 리뷰입니다. 이 책은 프롤로그부터 말합니다. 나는 원하는 바를 성취하는 법을 알려줄 생각이 없다. 대신 포기하고 내려놓는 법에 대해 말할 것이다. 가장 중요한 것만 남기고 다 지워버리는 방법, 눈을 감고 뒤로 넘어져도 괜찮다라는 것, 신경을 덜 쓰는 기술, 하지 않는 법을 알려주겠다.자기 계발의 진실자기계발과 성공은 종종 같이 붙어 다니는 말이다. 하지만 그렇다고 두 단어가 같은 의미는 아니다. 오늘날의 세상은 사람들이 앞날을 터무니없이 긍정적으로 바라보도록 몰아간다. 더 행복하게, 더 건강하게, 모두를 뛰어넘어 최고가 되라. 더 똑똑하게. 더 빠르게. 더 풍족하게. 더 섹시하게. 더 인기 있고, 더 생산적이며, 더 부러움을 사고, 더 존경받..

2024. 5. 8.
개발

페이지 성능개선 후기 (4)

페이지 성능 개선하기 4 (with. Lighthouse)드디어 마지막 챕터, SEO 관련이다.SEOSEO는 과연 무엇일까?SEO는 검색자 (검색 유저)의 의도를 이해하고 이에 충실히 맞춰 웹 페이지의 콘텐츠를 제작하는 과정입니다.또한 웹 페이지가 검색 결과 페이지에서 잘 노출 되도록 페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘리는 방법론으로도 정의할 수 있습니다.SEO는 왜 중요할까?SEO는 고객이 원하는 순간에 고객의 질문에 적합한 콘텐츠를 제공해 주는 작업입니다.이를 단순히 검색 결과 페이지 상단에 웹사이트를 노출 시키는 테크닉으로 간과해서는 안됩니다.SEO는 마케터에게 매우 중요한 전략적 의미를 갖고 있습니다.고객 의도에 적합한 콘텐츠를 고객이 원할 때 즉각 제공하는 과정에서 전체..

2024. 4. 16.
페이지 성능개선 후기 (4)
개발

페이지 성능 개선 후기 (3)

페이지 성능 개선하기 3 (with. Lighthouse)이번엔 접근성, 권장사항 파트이다.접근성대체로 사이트에 액세스할 수 있다는 것은 말 그대로 누구나 사이트의 콘텐츠를 사용할 수 있고 해당 기능을 운영할 수 있음을 의미 합니다. 접근성은 "일반적인" 사용자의 좁은 범위 밖에 있을 수 있는 사용자의 경험을 의미하며, 사용자는 예상과 다르게 액세스하거나 상호 작용할 수 있습니다.웹 접근성 콘텐츠 지침Perceivable (인지 가능) : 사용자가 콘텐츠를 인지할 수 있습니까? 이는 시각과 같은 한 가지 감각으로 무언가를 인지할 수 있다고 해서 모든 사용자가 인지할 수 있는 것은 아니라는 점을 염두에 두는 데 도움이 됩니다.(적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있..

2024. 3. 23.
페이지 성능 개선 후기 (3)
개발

페이지 성능개선 후기 (2)

페이지 성능 개선하기 2 (with. Lighthouse)지난번에 이어서 성능개선 후기외부 스크립트의 상호작용 시점 변경next의 경우 next/script 사용, afterInteractive 옵션 추가beforeInteractive : 페이지가 상호작용되기 전에 로드 됩니다.afterInteractive : 페이지가 상호작용이 가능해진 직후에 즉시 로드됩니다.lazyOnload: idle time 동안에 로드 됩니다.react의 경우 defer와 async 옵션 사용외부 리소스 미리 연결 혹은 로드여기서 &display=swap 쿼리를 사용하면 웹폰트 로드 중 기본 폰트 노출 할 수 있습니다.번들 트리 쉐이킹lodash의 경우 Full import 하면 69.6K 이지만 실제 사용하는 함수만 impo..

2024. 3. 16.
페이지 성능개선 후기 (2)
개발

페이지 성능 개선 후기 (1)

페이지 성능 개선하기 (with. Lighthouse)플랫폼 메인에 노출되는 페이지 작업 후에 자체적으로 성능 개선을 시작해보았다.참고할 수치와 지표는 Pagespeed Insights와 Lighthouse를 참고하여 진행했고, Pagespeed Insights가 점수가 더 낮게 나와서 낮은 점수를 더 끌어올려보자! 해서 Speed Insights를 주로 참고했다.Pagespeed Insights vs Lighthouse차이점은 크게 없습니다.다만, Pagespeed Insights는 Lighthouse에서 측정한 값을 토대로 모아서 사이트 성능에 대한 보고서를 제공한다고 합니다. (왜 점수가 그렇게 차이나는지는 아직도 의문)작업 전 점수페이지는 서비스별로 1개씩 총 2개를 측정하였다.)만족할만한 점수는..

2024. 2. 19.
페이지 성능 개선 후기 (1)
개발

Nextjs(typescript) 에서 Web worker 사용하기

Next js Web worker api웹툰 번역 툴을 개발하던 중에 psd, psb 파일을 읽어 들이는 시간이 굉장히 오래 걸려서 브라우저가 멈추는 경우가 너무 많았다. 기본적으로 psd, psb 파일은 100MB가 넘는 경우가 많고, 500MB 정도의 크기를 가진 파일도 많았다. 파일을 읽는 동안 메인스레드는 차단되기 때문에, 브라우저가 멈추고 렉이 걸린 것처럼 느껴지는 현상이 있었다. 이 파일 읽기 시간을 어떻게 줄일까 고민을 많이 했고, Web worker를 찾았다. Web worker API ( https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API ) Web worker API는 싱글 쓰레드로 동작하는 자바스크립트의 한계를 좀 넓혀주는데,..

2024. 2. 1.
개발

Recoil 사용해서 Modal 여러개 띄우기

Modal 여러개 띄우기AS IS기존 모달 사용 방식은 Context안에 children을 보내서 createPortal로 띄우는 방식이었다. 그런데 이 방식은 모달이 하나 뜨면 다른 모달이 꺼져버린다는 것이 문제가 되었다. 모달 위에 확인 모달을 띄워야 할 때가 있는데 이 경우에는 dom 구조 바깥에 뜨는 modal의 z-index를 조정한다고 해결이 되지 않아서 변경하기로 마음을 먹었다.//ModalProvider.jsexport default function ModalProvider({ children, selector }: Props) { const ref = useRef(null) const [mounted, setMounted] = useState(false) const [modal, s..

2024. 1. 30.
개발

Input type이 number일 때 maxLength 지정안될 때

Input type이 number일 때 maxLength가 지정이 안돼요AS ISreact hook form 의 Controller에서 인풋과 드랍다운등을 컨트롤 하고 있는데, 이 때 발생한 문제가 인풋에 숫자와 특수기호만 받아야 하고, 최대 길이는 10글자까지 가능해야 하는데, type을 number로 선택해두면 maxLength 옵션이 적용되지 않는 문제였다. ( )}/> TO BEMui TextField에서 maxLength를 적용하려면 InputProps 안쪽에 정의를 해주어야 한다.type이 text일 때는 inputProps 안쪽에 정의된 maxLength가 잘 적용되지만 type이 number일 경우엔 이 maxLength 옵션이 적용되지 않습니다. 숫자 타입의 경우 문자..

2024. 1. 30.
1 2

Categories

  • 분류 전체보기 (11)
    • Nextjs (0)
    • 개발 (10)
    • 책 (1)
    • 일상 (0)
소개 · 개인정보처리방침 · RSS

© Less than perfect is sometimes perfect

티스토리툴바