전체 글

1. Patterns layout : layout component를 생성하고 생성한 component를 상위 컴포넌트로 적용할 컴포넌트들을 감싸주면 된다. _app.js 파일이 지나치게 커지는 것을 막기 위하여 쓴다. Layout 컴포넌트를 만들어주고, App 컴포넌트에서 이를 사용한다. Head 컴포넌트 리액트에서 react-helmet으로 구현했던 것들을 Next.js에서는 간단히 Head 컴포넌트로 구현 가능하다. 2. Fetching Data public 폴더에 있는 파일들은 쉽게 import할 수 있다. Image next.js에서는 이미지 최적화를 위해 img 태그 대신 Image 태그를 사용한다. import Image from "next/image"; ... ... 3. Redirect ..

1. Pages react 컴포넌트를 export하는 파일들을 pages폴더 안에 넣어주면, 파일 이름으로 url을 만들어 자동으로 라우팅 해준다. 안의 function이름은 파일이름과 달라도 된다. 특징 파일 이름이 url이 된다. export default function ~ 형태로 컴포넌트 작성해야함. url에 pages폴더에 없는 파일이 보여줘도 자동으로 404페이지를 보여준다. 2. Routing 보통 페이지간 이동은 a 태그를 사용하지만, next.js에서는 사용하지 않는다. a 태그를 사용하면 처음 페이지 진입시 번들파일을 받고, a태그에 의해 라우팅 되면서 다시 번들파일을 받기 때문이다. 그래서 next에서 페이지간 이동에는 모두 Link 태그를 사용한다. 3. CSS Modules imp..

hydrate : SSR을 하면서 나오는 개념이다. SSR의 경우 pre-rendering를 통해 완성된 HTML을 클라이언트에게 전달한다. 서버에서 렌더링된 정적 페이지를 클라이언트에게 보낸다. react는 번들링된 JavaScript 코드를 클라이언트에게 보낸다. 클라이언트는 전달받은 HTML과 JS코드를 매칭하는 Hydrate를 수행한다. Hydrate란 전송받은 JavaScript들이 이전에 보내진 HTML DOM 요소 위에서 한번 더 렌더링하게 되면서 각각 자기 자리를 찾아가며 매칭된다. → Next.js 프로젝트에서 개발한 리액트 컴포넌트를 프론트 엔드에서 실행하는 것을 하이드레이션(Hydration)이라 부른다. Next.js는 코드를 이미 HTML로 렌더링한 상태에서 만약 리액트 컴포넌트와..

Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 서버 사이드 렌더링(SSR)과 같은 다양하고 풍부한 기능을 제공합니다. Next.js는 많이 말하는 것처럼 SSR을 하기 위해 사용한다고 한다. CSR과 SSR의 개념을 알아보자. CSR과 SSR의 개념 1) 클라이언트 사이드 랜더링(CSR) : 클라이언트인 브라우저가 랜더링을 처리하는 방식이다. 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면을 그리는 주체가 된다. 2) 서버 사이드 렌더링(SSR) : 브라우저가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식이다. 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면을 만들어 제공한다. 서버가 화면을 그리는 주체가 된다. SSR의 장점 클..

express로 코드를 짜서 깃에 올리기 전에 3계층 레이어를 적용하면 좋다는 말에 여러 글을 보고 정리한 글이다. 1. 3 layer architecture란? 3 layer architecture는 비즈니스 로직을 분리하는 것을 목적으로 한다. Controller, Service Layer , Data Access Layer 세개의 층으로 나뉜다. Controller : client와의 통신에서 필요한 req, res를 다룬다. Service layer : business logic을 Data Access Layer은 DB와의 직접적인 통신을 한다. Business logic : client와 Data Acees Layer 사이에서 데이터를 관리한다. 2. 3 Layer Architecture을 적용..

우연히 글을 하나보고 만들고 싶어서 해당 기능을 구현하였다. 그리고 이에 대해 알게된 점을 간략하게 서술하고자 한다. 워크스페이스 만들기 💡 https://slack.com/intl/ko-kr 위의 사이트에 접속하면 상단 오른쪽에 새 워크스페이스 개설이 있다. 이를 클릭한다. 나는 워크스페이스명을 slack bot test로 지정하여 만들어주었다. 앱 만들기 💡 https://api.slack.com/apps?new_app=1 위의 사이트에 접속하면 모달창이 뜨게 된다. 그러면 From scratch를 눌러 앱 이름을 지정하고, 위에서 만들어둔 워크스페이스를 클릭해준다. 그리고 나서 Create App을 누르면 앱이 생성된다. 권한 설정 및 토큰 발급 1) 사이트 이동 앱을 생성하고 난 다음에 왼쪽에 사..

1. 필요한 패키지 설치하기 npx create-react-app {app 이름} 새로운 react app을 생성하도록 한다. npm install --save styled-components npm install --save styled-reset npm install --save react-router-dom npm install react-icons styled-components : createGlobalStyle를 사용하기 위해 설치해준다. createGlobalStyle : 글로벌 스타일 적용을 도와주는 styled-components내장 메서드이다. styled-reset : styled-components와 연결되어, 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.j..

💡 https://velog.io/@yiyb0603/React에서-무한스크롤-구현하기-8rdmbhtj 위의 사이트를 따라하며 쓴 글입니다. 1. 파일 생성 및 코드 작성하기 임의의 폴더를 만들어 파일을 생성한다. InfiniteScroll.js을 만들어준다. InfiniteScroll.js import React, { useState, useCallback, useEffect } from 'react'; import { getPostList } from './postList'; const InfiniteScroll = () => { const [page, setPage] = useState(1); const [posts, setPosts] = useState(getPostList(1)); return (..