전체 글

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..

React - Redux MiddleWare >> redux-saga

JavaScript 제너레이터 함수 제너레이터 함수를 사용하면 함수에서 값을 순차적으로 반환할 수 있습니다. 심지어 함수의 흐름을 도중에 멈춰 놓았다가 다시 이어서 진행시킬 수도 있습니다. function* generatorFunction() { console.log("hello"); yield 1; console.log("generator function"); yield 2; console.log("function*"); yield 3; yield 4; } const generator = generatorFunction(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next()); console..

React - Redux MiddleWare >> default + redux-thunk

리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 합니다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 합니다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 합니다. 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, '미들웨어'를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있습니다. 작업 환경 준비 // src/components/Counter.js import React from "react"; const Counter = ({ onIncrease, onDecrease, numb..

React - redux ( util_Version )

리덕스 더 편하게 사용하기 redux-action을 사용하면 액션 생성 함수를 더 짧은 코드를 생성할 수 있습니다. 그리고 리듀서를 작성할 때도 switch/case문이 아닌 handleActions라는 함수를 사용하여 각 액션마다 업데이트 함수를 설정하는 형식으로 작성해 줄 수 있습니다. // src/modules/counter.js // 앞에 모듈 이름을 붙여 주는 것은 관례에고 익션 이름을 대문자로 하는 것 또한 관례입니다. import { createAction, handleActions } from "redux-actions"; // 액션 타입 정의 const INCREASE = "counter/INCREASE"; const DE..

React - redux

개념 미리 정리하기 상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생합니다. 이는 하나의 객체로 표현된다. 그리고 액션 객체는 type필드를 반드시 가지고 있어야 합니다. { type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' } } function addTodo(data) { return { type: 'ADD_TODO', data } } 액션 생성 함수는 액션 객체를 만들어 주는 함수입니다. 리듀서는 변화를 일으키는 함수입니다. 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 옵니다. 그리고 두 값을 참고하여 새로운 상태를 만들어서 반환해 줍니다. const initialState = { c..

React - Context API

React에서 ServerSideRendering을 하기위해 동적 Context API에 대해 알아보겠습니다. import React, { createContext, useState } from 'react'; const ColorContext = createContext({ state: { color: 'black', subcolor: 'red', }, actions: { setColor: () => {}, setSubColor: () => {}, }, }); const ColorProvider = ({ children }) => { const [color, setColor] = useState('black'); const [subcolor, setSubcolor] = useState('red'); c..