본문 바로가기

분류 전체보기79

[Next.js] App Router와 Pages Router의 특징 요약Next.js 13에서 도입된 App Router는 기존의 Pages Router와 다른 새로운 라우팅 방식입니다.App Router는 React의 최신 기능을 활용하여 애플리케이션을 구축할 수 있도록 하며, 라우팅과 레이아웃 경험을 개선합니다.Pages Router정의: 이전 버전의 Next.js에서 사용되던 라우팅 방식특징:/pages 디렉토리에 페이지 컴포넌트를 배치파일 이름이 곧 URL 경로가 됨페이지 간 상태 공유가 어려움레이아웃 구현이 복잡함App Router정의: Next.js 13에서 도입된 새로운 라우팅 방식특징:/app 디렉토리에 라우팅 및 레이아웃 구현컴포넌트 간 상태 공유가 용이레이아웃 구현이 간단해짐Server Components 아키텍처 지원스트리밍 및 Suspense 기능 .. 2024. 5. 2.
[Next.js] CSR, SSG, ISR, SSR의 차이점과 장단점 요약CSR(Client-Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration), SSR(Server-Side Rendering)은 웹 애플리케이션의 렌더링 방식에 따라 구분되는 개념입니다.각각의 방식은 장단점이 있으며, 웹 애플리케이션의 특성에 따라 적절한 방식을 선택해야 합니다.CSR (Client-Side Rendering)정의: 클라이언트(브라우저)에서 JavaScript를 실행하여 HTML을 생성하는 방식장점:빠른 초기 로딩 속도서버 부하 감소동적인 UI 구현 용이단점:초기 로딩 시 JavaScript 파일 다운로드 필요SEO 최적화 어려움자바스크립트 의존성 높음보안 취약점 존재SSG (Static Sit.. 2024. 5. 2.
[JavaScript] Strict Mode 엄격 모드 Use Strict use strict 지시자를 사용하면, ECMAScript5(ES5) 이후 추가된 새로운 기능과 변경사항이 활성화 된다. 등장 배경 자바스크립트는 다양한 브라우저에서 작동해야 하기 때문에 기존의 기능을 변경하지 않고 새로운 기능을 추가하며 호환성을 유지해왔다. 덕분에 옛날에 작성된 코드를 지금도 사용할 수 있다는 장점이 있지만, 업데이트 전 코드의 결함이 그대로 박제된다는 단점이 있다. ES5 이후에는 새로운 기능을 추가하면서 기존 기능 일부를 변경했기 때문에 하위 호환성 문제가 발생할 수 있다. 따라서 느슨한 모드(sloppy mode)를 기본으로 하되, use strict 지시자를 사용한 엄격 모드(strict mode)에서만 변경사항이 활성화되게 했다. Strict Mode가 에.. 2022. 10. 27.
[MacOS] 맥북 스크린샷 그림자 없애기 (창 캡쳐) 그림자 없애기 터미널에서 아래 명령어 입력 그림자 해제 defaults write com.apple.screencapture disable-shadow -bool true 그림자 설정 defaults write com.apple.screencapture disable-shadow -bool false As-Is 맥북에서 cmd+shift+4+space 단축키로 창 캡쳐 시 기본적으로 이미지에 그림자가 포함되어 저장된다. 정말 아름답지만, 게시글을 쓸 때 공간 낭비가 생기고 그림자까지 고려해야 하니 이미지 사이즈 조절이 힘들다. To-Be 그림자가 없어져서 이미지 경계가 뚜렷해지고 깔끔해졌다. 2022. 10. 27.

티스토리툴바