본문 바로가기

분류 전체보기73

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.
코딩 컨벤션 코딩 컨벤션이란? 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약이다. 특히 자바스크립트는 다른 언어에 비해 유연한 문법구조(동적 타입, this 바인딩, 네이티브 객체 조작 가능)를 가지기 때문에 개발자 간 통일된 규약이 없다면 코드의 의도를 파악하거나 오류를 찾기 어렵다. 장점 가독성이 좋아진다. 성능에 영향을 주거나 오류를 발생시키는 잠재적 위험 요소를 줄여준다. 유지보수 비용이 절약된다. 코딩 컨벤션 적용하기 삼중 등호 연산자인 ===, !==만 사용한다. 변수, 함수 Camel Case로 표기하기 낙타의 혹처럼 첫단어는 소문자로, 나머지는 대문자로 시작하게 작성한다. ex) stringArray 상수는 대문자, Snake Case로 표기하기 ex) STRING_ARRAY 변수.. 2022. 6. 19.
클로저 클로저(Closures) 우리가 함수 안에서 또 다른 함수를 만들 때마다 사실 우리는 클로저를 만든겁니다. 안쪽 함수가 클로져입니다. 🔥 어떠한 함수 안에 내부 함수를 정의한다면, 이 함수는 클로저라고 불릴 수 있습니다. 내부함수의 범위에서는 외부 함수 범위에 있는 변수에 접근이 가능하지만 그 반대는 실현이 불가능하다는 개념이다. 실행컨텍스트, 스코프 체이닝, 렉시컬 스코핑와 관련됨! function outerFunction () { const outer = `I see the outer variable!`; function innerFunction () { console.log(outer); } return innerFunction; } outerFunction()(); // I see the oute.. 2022. 6. 19.

티스토리툴바