ios 모바일에서 새로고침시 현재 스크롤 위치를 고정하기 위해 다음과 같은 코드를 사용하였다. if (sessionStorage.scrollPosition) { window.scrollTo(0, sessionStorage.scrollPosition); } window.onbeforeunload = function () { sessionSto...

State 변경 시 어떤 일이 벌어질까? 리액트의 함수형 컴포넌트는 최초에 한번 실행이 되면서 초기값으로 설정해놓은 상태를 기억한다. const [state, setState] = useState(0); 이후 setState가 호출되어 상태가 변경된다면 다시 함수형 컴포넌트가 실행되고 virtual DOM을 리턴한다. 그리고 이전에 리턴했던 v...

타입 스크립트 2.8부터 다음과 같은 조건부 타입을 사용할 수 있다. T extends U ? X : Y 뜻은 T가 U의 서브타입이거나 같은 타입이면 X, 아니면 Y 타입을 할당한다는 것이다. T가 유니온 타입일 경우 다음과 같이 T가 유니온 타입일 경우가 있다. type T = "A" | "B" | "C" 이러한 경우엔 분배법칙이 성립...

Javscript 메모리 관리 이해하기 Garbage collector 자바스크립트 엔진은 더이상 사용하지 않을 메모리를 놓아주기 위해 garbage collector를 사용한다. garbage collector(GC)는 앱에서 더이상 사용하지 않을 객체를 찾아내고 삭제한다. 따라서 GC는 앱의 object와 변수를 계속 모니터링하고 어떤 것이 여...

typescript 5.0이 나왔다고 하여 간단히 어떤 기능들이 추가되었는지 살펴보았다. 자세한 내용은 Typescript 5.0 번역에서 확인 가능하다. 데코레이터 데코레이터는 재사용 가능한 방식으로 클래스와 그 멤버를 사용자 정의하는 ECMAScript의 기능이다. 데코레이터는 이전부터 지원되었으나 Typescript 5.0부터는 공식 기능으로...

AppDir next.js에서 layout과 routing 경험을 개선시키고 React 최신 기술을 지원하기위해, next.js 13부터 지원하는 디렉터리 방식. 기존의 pages 디렉터리를 대체한다. 23년 04월 기준으로 아직은 베타버전으로 프로덕션에서 사용하는 건 추천하지 않는다고 한다. 하지만, 좋은 기능들이 많기에 학습해봐도 괜찮을 거 같...

원글에서는 TMDB의 클라이언트 웹 어플리케이션을 만들고, 여러번의 실험을 거쳐 성능 최적화에 달성하는 과정을 서술하였습니다. 이 글은 기본적으로 원글을 학습하면서 제가 읽기 편한 방식으로 번역/정리한 글입니다. 정확한 내용을 알고 싶으시면 원글을 보시는 걸 추천드립니다. 용어 정의 FCP : First Contentful Paint. ...

최근 create-react-app 대신에 vite를 공식으로 사용하자는 얘기가 나오고 있다. https://github.com/reactjs/reactjs.org/pull/5487 번역본 여기서 지적한 문제점들은 다음과 같다 SSR/SSG 지원의 부족 빈 페이지 로드 -> 리액트 번들 로드 -> 리...

Headless CMS 란? 웹사이트를 만들 때는 반드시 컨텐츠(데이터)가 필요하다. Headless CMS는 컨텐츠를 보여줄 수단인 Head와 컨텐츠를 분리한 구조로, 컨텐츠가 Head에 독립적으로 동작할 수 있도록 하는 구조이다. ![1E3qz8MZ8zR7Y3NRghFOvJQ](https://miro.medium.com/v2/resize:fit...

webpack module federation 여러 개의 개별 빌드가 단일 어플리케이션을 형성할 수 있도록 해주는 webpack의 기능이다. 개별 빌드는 컨테이너처럼 작동하며, 빌드 간에 코드를 노출하고 소비하여 단일 통합 애플리케이션을 생성할 수 있다. Low-Level concepts 로컬 모듈과 원격 모듈을 구별한다. 로컬모듈 : 현...