Progressive(점진적) Hydration이 뭔데

patterns dev의 렌더링 패턴을 읽던 중, Progressive Hydration은 한번 구현해 보면 좋을 것 같다는 생각이 들어 포스팅을 작성해보려 한다. 또한, 앞으로 SSR을 활용한 여러 기법들을 구현해보며 Next.js 와 좀 더 친해지는 시간을 가져보겠다.  Hydration??나는 Hydration 을 이해할 때 이렇게 정의하는 게 가장 이해가 잘됐다. Hydration은 그대로 번역하면 "수분 공급" 이라는 뜻이다. 그런데 왜 렌더링 기법에서 수분 공급이란 말이 나올까?Hydration은 말 그대로 정적인 HTML 문서에 수분을 공급하는 과정을 의미한다.여기서 말하는 수분이란, React와 연결을 통해 정적인 HTML을 인터랙티브 하게 만드는 과정을 의미한다. 첫째로, 서버 사이드 렌..

• format_list_bulleted FrontEnd/Next.js
• · 2025. 4. 11.
• textsms

동기, 비동기, 동기, 비동기, 동기,,,

SKALA 과정에서 수업을 듣던 중, 오랜만에 JS 기본 개념에 대해 공부하며 흐릿해진 개념에 대해 다시 정리해보려한다. 각각 파트에 대해서 배경, 문제점, 해결방법 그리고 예시 코드를 곁들인,, 느낌으로 정리해보려한다.  동기 (Synchronous) vs 비동기 (Asynchronous) 자바스크립트는 기본적으로 싱글 스레드 기반의 언어로, 코드가 한 줄씩 순차적으로 실행된다. 하지만, 네트워크 요청, 파일 입출력, 타이머 등의 작업은 시간이 걸리므로, 이러한 작업이 실행되는 동안 프로그램이 멈추지 않도록 비동기 처리 방식이 필요하다. 동기 방식에는 실행 시간이 긴 작업 (서버 요청, 파일 읽기 등)이 있으면 전체 코드 실행이 멈춰버리는 문제가 발생한다.console.log("시작");// 동기 코드..

• format_list_bulleted FrontEnd/Javascript
• · 2025. 3. 14.
• textsms

this 키워드

자바스크립트 자주 볼 수 있는 this 키워드에 대해서 알아보자 에서 this 키워드를 출력해보면 window{...} 라는 것이 출력된다. 또한 일반 함수 내에서 this 키워드를 출력해보면 function f(){ console.log(this); } f(); 여기서 Window 란 무엇일까? Window 란? Window 는 모든 전역변수, 함수, DOM 을 보관하고 관리하는 전역 객체이다. 우리가 흔히 사용하는 document.getElementById(), alert(), console.log() 이러한 함수들을 보관하는 보관소이다. 이 보관소는 하나의 큰 {오브젝트} 라고 생각하면 된다. 또한 코드를 짜며 전역변수들을 만들었을 때도 이 변수들을 window에 보관해준다. strict mode ..

• format_list_bulleted FrontEnd/Javascript
• · 2023. 7. 6.
• textsms

react-query

- 몇 초마다 자동으로 데이터 다시 가져오기 - 요청 실패 시 몇 초 간격으로 재시도 - 다음 페이지 미리 가져오기 - ajax 성공 / 실패 시 각각 다른 화면 보여주기 ajax 요청하다가 보면 위와같은 기능들 필요하다 react-query 사용하면 더욱 편리하다 실시간 데이터 보여주어야 하는 사이트들에서 유용 react-query 설치 세팅 터미널에 npm install react-query 작성 index.js 파일에서 import { QueryClient, QueryClientProvider } from "react-query" //1번 const queryClient = new QueryClient() //2번 const root = ReactDOM.createRoot(document.getEl..

• format_list_bulleted FrontEnd/React
• · 2023. 3. 9.
• textsms

Redux

Redux 는 props 없이 state 를 공유할 수 있게 도와주는 라이브러리이다. Redux 설치하면 js 파일 하나에 state 들을 보관할 수 있는데, 모든 컴포넌트들이 직접 꺼내서 사용할 수 있다. 따라서 귀찮은 props 전송이 필요가 없어진다. Redux 설치하기 npm install @reduxjs/toolkit react-redux 터미널에 입력해주면 설치된다. redux toolkit 은 redux 의 개선버전이라고 생각하면 된다. ( 문법이 좀 쉬워진 ) 설치 전 pakage.json 파일에서 "react", "react-dom" 항목의 버전이 18.1 이상인 것을 확인하자 Redux 세팅 import { configureStore } from '@reduxjs/toolkit' exp..

• format_list_bulleted FrontEnd/React
• · 2023. 3. 7.
• textsms

Context API

App 에 있던 state 를 손자 컴포넌트에서 사용하고 싶다면 어떻게 할까? props 를 하위로 2번 전송해주어야한다. 하지만 이런 과정은 귀찮기 때문에 Context API 문법이나 Redux 같은 외부 라이브러리를 사용한다. Context API 문법으로 props 없이 state 공유하기 재고라는 state 를 App 컴포넌트에 만들고 이 state 를 TabContent 라는 자식컴포넌트에서 쓰고 싶을 때 Context API 문법을 사용하면 props 전송 없이도 손자 컴포넌트에서 사용할 수 있다. (App.js) export let Context1 = React.createContext(); function App(){ let [재고, 재고변경] = useState([10, 11, 12])..

• format_list_bulleted FrontEnd/React
• · 2023. 3. 7.
• textsms