Front-end (31) 썸네일형 리스트형 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.. testing jest 특징 facebook 에서 만듦 testing library가 아닌 testing framework 보통 testing 시 test runner, test matcher, test mock 이 필요한데 이것을 하나의 framework으로 구현한것 testing 대상 test.js 로 끝나는 파일명 __test__ 디렉터리 내의 파일 기본 패턴 test("테스트 설명", () => { expect("검증 대상").toXxx("기대 결과"); }); mathcer toBe primitive 값을 비교할때 사용됨 toEqual 참조형 데이터(ex-object) 검증시 사용 toBeTruthy / toBeFalsy true 또는 false로 간주되는 값 검증(ex-0, '', null...) 배열 관련.. 이전 1 2 3 4 다음
