본문 바로가기

Frontend43

sementic tag 개인 노션에서 정리한 내용입니다. article과 section이 너무나 헷갈려 제 나름의 정의를 내려봤습니다. https://sanghoon98.notion.site/sementic-tag-356b188e1c35414b8ac714fcf8bee153 sementic tag sementic tag를 사용하는 이유 sanghoon98.notion.site 2022. 6. 21.
MVC패턴과 Flux 아키텍처 https://sanghoon98.notion.site/MVC-Flux-4450d42440294d02a827ec12e48f89a1 MVC패턴과 Flux 아키텍처 Front-End에 사용되는 프레임워크의 대부분은 MVC(Model-View-Controller) 디자인 패턴을 채택 sanghoon98.notion.site 개인 노션에 정리한 내용입니다. 2022. 6. 20.
e.preventDefault e.preventDefault()는 DOM의 기본 동작을 방지한다. 여기서 e는 event객체를 의미한다. 예를들어 Check Box의 check가 되는 것 스크롤링 의 페이지 넘어가는 것 , 의 text 입력하기 의 페이지 새로고침 애먹었던 상황 form 태그 안의 button태그는 기본적으로 submit으로 실행된다. 하지만 나는 submit을 원한게 아니었다 그렇기에 e.preventDefault()을 사용해주었다. REF https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault 2022. 6. 20.
React에서의 렌더링 최적화 ⚠️ 필요 없다면 최적화 하지마! 웹이나 앱이 느려졌다고 판단됬을 때 최적화를 해라 아무도 방문 안하는데 최적화하는 것 만큼 비효율적인 게 없다. https://sanghoon98.notion.site/834e7a6576df42f9b3adfe539b90b45c 렌더링 최적화 필요 없다면 최적화 하지마! sanghoon98.notion.site 개인노션에 정리한 내용입니다. 2022. 6. 20.
브라우저 저장소 SessionStorage : 임시 저장소 SessionStorage는 데이터가 지속적으로 보관되지 않는다. 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다. SessionStorage는 windows 전역 객체의 SessionStorage라는 컬렉션을 통해 저장과 조회가 이루어진다. 현재 페이지가 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다. SessionStorage는 브라우저가 종료되면 데이터도 같이 지워진다 SessionStorage 역시 Web Storage의 기본 보안 처럼 도메인별로 별도로 생성된다. 여기 더불어 SessionStorage는 같은 사이트의 같은 도메인이라 할지라도 브라우저가 다르면 서로 다른 영역이 된다. 브라우저 컨텍스트가 다르기 때문이다. 탭 브라.. 2022. 6. 20.
lazy loading : dynamic import Eager loading 즉시 로딩 로딩화면을 표시해주며 열심히 로딩한다. lazy loading 지연 로딩, 게으른 로딩 성능을 개선하고 시스템의 resource를 절약하는 기법이다. 필요한 페이지에 들어가면(스크롤, 일부 상호작용) 그제서야 로딩을 한다. image, video, iframe, library등에 사용할 수 있다. auto: 속성을 포함하지 않는 것과 동일한 브라우저의 기본 지연 로딩 동작입니다. 사용하지 않는 걸 추천한다 lazy: 뷰포트로부터 계산된 거리에 도달할 때까지 리소스 로딩을 지연시킵니다. eager: 페이지에서의 위치에 관계없이 리소스를 즉시 로드합니다. 처음 표시되는 뷰포트에 있는 이미지에 대해 loading=lazy 설정을 피해야 합니다. dynamic import r.. 2022. 6. 20.