분류 전체보기 (32) 썸네일형 리스트형 Effective Javascript(1,2장) 1. 자바스크립트에 익숙해지기 item1. 어떤 자바스크립트를 사용하고있는지 알아야한다 자바스크립트의 다양한 구현체들 때문에 어떤 기능이 어떤 플랫폼에서 사용가능한지 추적이 어려움 이유는 주요 생태계인 웹브라우저에서 개발자가 작성한 코드를 실행하기 위해 어떤 버전의 js를 사용할수 있는 제어할 방법이 없어서 따라서, 웹 프로그램은 모든 브라우저에서 지속적으로 동작할 수 있도록 주의 strict 모드 오류를 일으키기 쉽거나 문제를 일으킬만한 기능들을 사용할수 없게 만드는 방법 "use strict" 라는 고정문자열 추가로 활성화가 가능하므로 하위호환에도 문제가 없음 !스크립트 병합시 주의해야할 케이스 strict 모드는 스크립트 또는 함수 상단에 선언되었을 때만 인식 -> 병합 순서에 따라 전부 적용되지 .. Intersection Observer API 뷰포트와 대상 요소(이미지, 텍스트 등)의 교차에서 변경 사항을 비동기식으로 관찰하는 방법을 제공하는 API -> element를 감시하고 해당 요소가 유저에게 표시되는 시점을 알려줌 필요한 이유 평소 스크롤 이벤트를 콜백으로 처리할 경우 짧은시간내에 많은 이벤트가 동기적으로 실행될 수 있음(광고, lazy loading, 무한 스크롤 등) 과거에는 이런처리에 Element.getBoundingClientRect() 를 사용하여 메인 스레드에서 실행하기때문에 성능문제에서 자유로울수 없었음 신뢰도 있는 공식 API의 필요성 사용법 const circle = document.getElementById('circle'); const observer = new IntersectionObserver( (items.. Popover api 메뉴, 다이얼로그, 모달, 등에서 자주 사용되지만 브라우저에서 이런 컴포넌트를 구축하는것은 생각보다 복잡함 -> 포커스 -> 열기 및 닫기 상태 -> 컴포넌트에 접근 가능한 hook 모든 복잡성을 직접 관리하지 않고 브라우저에서 popover 속성과 관련된 기능으로 처리가능합니다 popover 속성 최상위 레이어로 끌어올려줌 popover는 페이지의 다른 레이어 위에 별도의 레이어로 표시되므로 z-index를 찾느라 애쓸 필요가 없습니다. 외부 클릭 닫힘 기능이 포함 popover 영역 외부를 클릭하면 popover가 닫히고 다시 focus됨 기본적인 포커스 관리를 지원 popover창을 열면 다음 탭이 popover창 안에서 멈춤(?) 접근 가능한 키보드 바인딩을 지원 esc키를 누르면 popover .. Core javascript(02-실행 컨텍스트) 실행할 코드에 제공할 환경정보 동일한 환경에 있는 코드들을 실행할때 필요한 환경 정보들을 모아 context를 구성 이를 call stack 에 쌓아올렸다가 가장 위에 있는 context와 관련있는 코드를 실행하는것으로 전체 코드의 환경과 순서를 보장 context 구성 방법 전역 eval() 함수 함수 호출 블록 call stack 에 실행 context가 쌓이는 순서 var a = 1; var outer = funtion () { var inner = function () { console.log(a) } inner(); } outer(); 코드 실행과 함께 전역 context가 쌓임 전역 context의 코드들을 실행 함수 호출시 함수의 환경 정보를 수집하여 실행 context를 생성 call st.. Memoization(memo, useCallback) Memoization, 기존에 수행한 연산의 결과값을 저장해두고 동일한 input이 들어오면 재사용 하는 프로그래밍 기법 useMemo const z = useMemo(() => compute(x, y), [x, y] 첫번째 인자로 결과값을 생성해주는 팩토리 함수 두번째 인자로 기존 결과값의 재사용 여부를 결정할 기준이 되는 입력값의 배열 x, y가 전과 동일할 경우 저장해두었던 결과값을 재사용함 x, y가 전과 달라졌을경우, () => compute(x, y) 함수를 호출하여 결과값을 새롭게 구해 z에 할당 사용시 주의점 필요 이상의 사용으로 컴포넌트 복잡도를 넢여 유지보수성을 떨어뜨리지 않게 할것 useMemo가 적용된 reference는 재사용을 위해 가비지 컬렉션에서 제외되기 때문에 메모리를 더 .. controlled & uncontrolled input setState를 사용하면 안된다 ref는 나쁘다 로 두가지 모순되는 의견들이 있다 Uncontrolled uncontrolled(비제어) input은 전통적인 HTML form input이다 class Form extends Component { handleSubmitClick = () => { const name = this._name.value; // do something with `name` }; render() { return ( (this._name = input)} /> Sign up ); } } 위와 같은경우 ref를 통해 해당 component의 value를 가져올 수 있다.(pull value) form 이 submit 되는 경우 일어날 수 있다 Controlled controlled.. useRef & Refs useRef hook 은 mutable value(참조 또는 ref) 를 생성하고 DOM element에 접근하기위한 hook Mutable value useRef 는 초기값을 받고 참조(ref)를 리턴함 ref는 'current'라는 특수한 속성을 가진 객체임 import { useRef } from 'react'; function MyComponent() { const initialValue = 0; const reference = useRef(initialValue); const someHandler = () => { // ref의 value에 접근 const value = reference.current; // ref의 value 수정 reference.current = newValue; }; /.. Next page page 디렉토리 내 .js, .jsx, .ts, tsx 확장자를 가지는 파일들을 filename 기반으로 라우팅 됨 // pages/about.js export default function About() { return About } dynamic Rountes pages/posts/[id].js -> posts/1 처럼 동적인 url 을 가지는 페이지를 구성할 수 있음 // pages/[id].tsx import { useRouter } from "next/router"; export default () => { const router = useRouter(); return ( post postid: {router.query.id} ); }; pre-rendering static gener.. 이전 1 2 3 4 다음
