Web Front End

[카카오프로젝트100] 하루에 한 개,기술 아티클 읽기를 시작합니다.

[카카오프로젝트100] 하루에 한 개,기술 아티클 읽기를 시작합니다. 카카오 프로젝트 100은 100일동안 매일 특정 주제에 대해 실행하고 인증하며 습관을 기르게 해 주는 프로젝트입니다. 프로젝트 소개글 링크: https://project100.kakao.com/project/4623/introduce 참여 계기 카카오 프로젝트 100을 알게 된 것은 링크를 보고 나서부터였습니다. 참여하고 싶다는 생각이 막연히 있었는데, 마침 우연한 기회에 9월 6일에 모집이 마감된다는 것을 보고 빠르게 신청하게 되었습니다. 참여 방법 아래와 같이 기술 아티클 링크와 자기만의 요약을 올려서 인증할 수 있습니다. 좋은 점은, 공개적으로 올리게 되면 아티클을 다른 참여자 분들과 공유하고 소통할 수 있어서 더 자세하게 다른 ..

[React] Infinite Scroll과 Skeleton Loading 만들기

[React] Infinite Scroll과 Skeleton Loading 만들기 아무리 빠른 인터넷 환경이라고 해도 수백 개, 1,000개 이상의 데이터를 받는 데에는 시간이 오래 걸립니다. 오늘 포스팅에서는 많은 데이터를 하나의 페이지에 랜더링해야 할 때 어떻게 지연 로딩을 할 수 있는지 알아보겠습니다. 개요 Infinite Scroll과 Skeleton Loading은 무엇일까? 자바스크립트에서 지원하는 Observer API Intersection Observer를 자세히 알아 보자. Infinite Scroll 만들기 Skeleton Loading 만들기 1. Infinite Scroll과 Skeleton Loading은 무엇일까? Infinite Scroll Infinite Scroll, 즉 ..

DOM, Event 기초 지식 정리

DOM, Event 관련 기초 지식 이번 포스팅에서는 Javascript에서 웹 개발을 할 때 필수적으로 알아야 할 기초 지식을 질답 방식으로 간단하게 정리해 보았습니다. 1. 버블링이란? / 캡처링이란? / 둘의 차이 및 사용법 버블링은 특정 요소에서 이벤트가 발생했을 때 상위 요소로 이벤트가 전달되는 이벤트 전파 방식입니다. 캡처링은 버블링과 반대 방향인 상위 요소에서 하위 요소로 이벤트가 전달되는 이벤트 전파 방식입니다. 버블링은 하위 요소에서 이벤트를 등록하면 상위까지 이벤트가 전파되는 기본 속성을 통해 사용할 수 있고, 캡처링은 addEventListener에서 capture: true라는 옵션을 부여해 사용할 수 있습니다. stopPropogation: 위와 같은 이벤트 전파를 막는 web A..

DOM과 브라우저 동작방식

DOM과 브라우저 동작방식 DOM 문서 객체 모델 HTML, XML 문서의 프로그래밍 Interface 문서의 구조화된 표현 제공 프로그래밍 언어가 DOM 구조에 접근 가능한 방법 제공 문서 구조, 스타일, 내용 변경 가능하게 도움 웹페이지 : 일종의 document Object로 구성되어 있음 구성 요소: property, method, event 웹페이지의 객체지향 표현 DOM API(함수묶음정도) 제공 브라우저 동작방식 브라우저는 어떻게 동작하는가 Naver D2 https://d2.naver.com/helloworld/59361 https://poiemaweb.com/js-browser (브라우저 동작원리) 자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. 랜더링 엔진 기본동작 과정..

[React + TS + styled-component] 다크모드 적용하기

[React + TS + styled-component] 다크모드 적용하기 화면 노출이 증가함에 따라 다크모드를 지원하는 운영체제와 사이트가 증가하고 있습니다. 이번 포스팅에서는 React + TypeScript + styled-component 환경에서 custom hook을 사용해 다크모드를 적용하는 방법을 얘기하려고 합니다. 전체 코드: Github Link 예제 데모 링크: Demo 개요 전체 구조 스타일 테마 타입 정의 및 객체 생성 테마 모드를 관리하는 custom hook 작성 custom hook을 사용하여 토글 버튼 생성 1. 전체 구조 이번 포스팅에서 주로 사용하는 코드의 구조는 아래와 같습니다. 전체 환경설정은 Github 링크에서 확인하실 수 있습니다. . ├── src │ ├── ..

[React] 환경설정 제대로 알고 하기 (without CRA) ①

[React] 환경설정 제대로 알고 하기 (without CRA) ① CRA(create-react-app)은 강력하고 편리하지만, 환경설정을 커스텀해서 사용하다가 전체가 어그러지는 상황이 올 수 있어 어렵습니다. 이번 포스팅에서는 초심자로서 CRA를 사용하지 않고 환경 설정하는 방법을 개괄적으로 설명하려고 합니다. 참고: 함수형 컴포넌트 기반으로 구성되었습니다. 2편 보기 : https://egg-programmer.tistory.com/280 참고한 환경설정 처음 환경설정을 시작할 때는 아래에 잘 정리된 설정을 따라 해 보면서 완성했습니다. 한번 잘 동작하는 것을 만들어 두면 다른 프로젝트에서는 조건에 맞게 가감할 수 있다고 생각합니다. 참고한 환경설정을 바탕으로 이해하고 쓰는 저만의 boilerpl..