분류 전체보기

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

프론트랑 백엔드단에서 데이터를 가져올 때 axios모듈을 많이 사용한다. 그런데 axios를 쓰게 되면, url을 사용해서 데이터를 가져오고 넘겨주고 해야 한다. 만약 url이 같다면 똑같은 코드를 계속적으로 쓰게 된다. axios를 모듈화하여 사용하면 코드를 한결 덜 길게 사용할 수 있다. axios 기본 코드 import axios from 'axios'; function Other() { const [data, setData] = useState([]); useEffect(() => { useEffect(() => { axios.get("").then((res) => setData(res.data)); }, []); return ( {JSON.stringify(data.userId)} ) } exp..

지금 작성하는 Scroll Progressbar는 아래의 사이트를 따라하여 만들었습니다. 💡 https://velog.io/@yiyb0603/React에서-Scroll-Progressbar-만들어보기 1. 컴포넌트 생성하기 components라는 폴더를 만들어, ScrollProgress파일을 만들어 이곳에서 progressbar를 만들어줄 것이다. 그에 대한 style을 css파일 넣어 따로 관리해준다. 2. 기본 셋팅하기 1) components/ScrollProgress.js import React, { useState, useCallback, useEffect, useRef, MouseEvent, } from "react"; import "./ScrollProgress.css"; const Scr..