현서의 개발 일지📚

Next.js - Layouts

Single Shared Layout with Custom App 만약 내가 전체의 애플리케이션에서 하나의 레이아웃만을 가지고 있다면 나는 Custom App을 생성할 수 있다. 그리고 이 Custom App으로 나의 애플리케이션 레이아웃을 감싸면 된다. 또한 만약 내가 많은 레이아웃을 사용하고 싶다면 내 페이지에 있는 getLayout 속성을 추가해서 사용하면 된다. // pages/index.js import AppLayout from "../components/AppLayout"; import styles from "../styles/Home.module.css"; export default function Home() { return ; } Home.getLayout = (page) => { re..

Next.js - Built-in CSS Support

Adding Global StyleSheet 만약에 stylesheet를 내 애플리케이션에 추가하고 싶다면 'pages/_app.js'에 css파일을 추가해야 한다. 이는 Next.js가 JavaScript의 import를 확장했기 때문에 가능한 일이다. // style.css body { font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; padding: 20px 20px 60px; max-width: 680px; margin: 0 auto; } // pages/_app.js import '../styles.css' // This default export is required in ..

HTML - History API

하나의 페이지로 만들어진 웹을 SPA라고 합니다. SPA의 단점은 주소가 바뀌지 않는다는 것입니다. 초창기에는 주소 뒤에 # #!을 붙이고 뒤에 하위 주소를 넣었습니다. 따라서 해쉬뱅 대신 브라우저에서 제공하는 주소 API를 사용해 주소를 바꾸게 되었습니다. 주소 내역은 하나의 목록입니다, 뒤로가기, 앞으로가기는 목록 안에서 이동하는 것입니다. 따라서 목록에 새로운 주소를 추가하면 페이지를 이동한 셈이 됩니다. 목록에 주소를 추가하기 위한 메소드가 HTML5에서 생겼습니다. history.pushState()와 history.replaceState()입니다. pushState replaceState history.pushState({data: 'pushpush'}, 'title을 pushState로', ..

React - ServerSideRendring

서버 사이드 렌더링은 결국 원래 브라우저가 해야 할 일을 서버가 대신 처리하는 겁니다. 서버 리소스가 많이 사용 된다는 단점이 있으며 갑자기 많은 사용자가 동시에 웹 페이지에 접속하면 서버에 과부화가 발생할 수도 있습니다. 따라서 사용자가 많은 서비스라면 캐싱과 로드 밸런싱을 통해 성능을 최적화 해주어야 합니다. CRA에서의 서버사이드 렌더링 구현 // src/index.server.js import React from "react"; import ReactDOMServer from "react-dom/server"; const html = ReactDOMServer.renderToString(Hello Server Side Rendering!); console.log(html); 일단 가장 기본적인 코..

React - React.lazy & Suspense & Loadable Components

import logo from "./logo.svg"; import "./App.css"; function App() { const onClick = async () => { const { default: notify } = await import("./notify"); notify(); }; return ( Hello React! ); } export default App; 위와 같이 컴포넌트를 작성하면 import()함수 형태로 메서드 안에서 사용하면, 파일을 따로 분리시켜서 저장합니다. 그리고 실제 함수가 필요한 지점에 파일을 불러와서 함수를 사용할 수 있습니다., 이렇게 import를 함수로 사용하는 문법은 비록 아직 표준 자바스크립트가 이니지만, stage-3단계에 있는 dynamic impo..