From ripples to waves

1. [Frontend Side][Browser]사용자가 https://application.com/products 같은 URL에 접근합니다.브라우저는 HTML 문서(index.html) 를 받기 위해 요청을 보냅니다. 2. [Frontend Side][Node Server: Next.js]Next.js 서버(Node.js + V8)가 요청을 받습니다.Next.js는 해당 경로(/products)에 대응하는 페이지 컴포넌트를 확인합니다.Pages Router라면 getServerSideProps / getStaticProps 같은 특수 함수 export 여부를 확인합니다.App Router라면 page.tsx 컴포넌트가 Server Component인지, async 함수인지를 확인합니다.만약 데이터 패칭..

여기 아주 간단한 코드가 있다.import React, { useState } from 'react';function CounterButton() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( Count: {count} );}export default CounterButton;    누군가 '버튼을 누르면 무슨 일이 벌어지나요?' 라고 물으면, 다음과 같이 쉽게 대답할 수 있다.  "버튼을 누르면 count 상태가 1씩 증가합니다."  (아마도) 군더더기 없는 설명이다.  한편, 이렇게 대답할 수도 있다. "버튼을 누르면 onClic..

CSR과 SSR의 차이를 공부할 때, CSR 방식은 초기에 서버로부터 빈 껍데기의 HTML 파일을 받아오고 동적으로 컨텐츠를 채운다고 배웠고, SSR 방식은 렌더링 준비가 어느정도 된 상태의 HTML 파일을 받아온다고 배웠다. 실제로 그런지 확인해보고자 내가 참여한 프로젝트(CSR)와 SSR 방식으로 구축된 서비스의 HTML 파일을 비교해보았다 😋 CSR 웹사이트 [개발자 도구 - 네트워크 탭 - HTML 파일] 선택HTTP 헤더 포함 다양한 정보들이 나온다. 우클릭하고 [소스 패널에서 열기] 클릭 그럼 소스(Source) 탭으로 이동해서 서버로부터 받은 HTML 파일 내용이 보이는데 진짜 껍데기만 있다. 태그 안에 초기 컨텐츠가 없는 것이 특징이다. 이는 리액트가 클라이언트에서 실행되어 UI를 ..

이번 프로젝트에서 어려웠던 점 중 하나는 리액트 내부의 코드 실행 순서를 제대로 이해하지 못하고 있다는 것이었는데, 그로 인해 겪은 시행착오 덕에 여러가지를 배울 수 있었다. 나름 유의미했던 러닝포인트 하나를 기록해두고자 한다. 문제 상황우리 프로젝트는 사용자가 작업실을 만들고 그 안에서 플레이하는 형식이기 때문에, API 통신이나 소켓 통신을 활용하는 많은 기능에서 사용자가 어떤 작업실에서 요청을 하는지를 식별해야 했다. 때문에 spaceId(해당 작업실의 UUID)를 요청시 함께 주는 방식으로 설계하였다. 그런데 간헐적으로 HTTP 통신과 소켓 통신을 이용하는 몇몇 기능들이 동작하지 않는 문제가 발생하였고, 확인해보니 spaceId에 계속 null 값이 담겨서 서버에 가는 현상이 있었다. 당시 내..

Life cycle: 마운팅 - 업데이트 - 언마운팅Mount: 컴포넌트가 화면에 나타나는 것Update: 컴포넌트가 업데이트되어 리렌더되는 것Unmount: 컴포넌트가 화면에서 사라지는 것 useEffect로 생명주기 핸들링하기 리액트는 라이프 사이클마다 실행할 수 있는 메서드를 가지고 있는데, 이들은 함수형이 아니라 클래스형 컴포넌트에서만 사용할 수 있다.componentDidMountcomponentDidUpdatecomponentWillUnmount 그러나 앞서 배웠듯 이러한 메서드들은 리액트 훅을 통해 함수형 컴포넌트에서도 사용 가능해졌다. 컴포넌트 생명주기를 핸들링하는 기능은 useEffect 라는 훅을 통해 구현된다. 첫번째 파라미터에는 콜백함수(Clean-up 함수)가 들어간다. 두번째 ..

State(상태)의 기본 개념 리액트의 내장 훅(Hook)인 useState 를 통해 상태관리가 가능하다. const [state, setState] = useState(초기 상태); 의 형태로 선언한다. 상태가 변할 때마다 해당 컴포넌트는 return을 다시 하며, 이에 따라 리렌더링 된다. 예를 들어 버튼과 상태 변화를 연동하고, 해당 컴포넌트 내부에 console.log() 를 찍어보면, 버튼을 누를 때마다 로그가 계속 출력되는 것을 알 수 있다. 즉, 계속 return 된다는 뜻이다. 이때 Strict mode(React.StrictMode)가 세팅되어 있다면 두번씩 호출될 수 있다. 이는 Strict mode가 컴포넌트를 두번 마운트하고, 언마운트 하는 등 두번씩 렌더링해보면서 잠재적인 문제..

드디어 리액트 라이브러리를 익힐 때가 왔다!처음 리액트를 구동시켜보고, 파일을 이리저리 훑어보는데 동작 원리가 궁금해졌다. 그래서 잠깐 리액트의 기본적인 실행구조를 파보는 시간을 가져보았다. 우선 리액트를 설치하면 다음과 같은 디렉토리와 파일들이 생성된다. package.json 파일을 보니, 루트 디렉토리 가서 npm start 해보면 react가 실행될 것 같다.그렇게 했더니 App.js 파일이 다음과 같이 성공적으로 실행이 됨을 확인할 수 있다. 자바스크립트 파일이 어떻게 와 같이 JS 파일을 로드하는 문장이 보이지 않는다.그럼 대체 어떻게 App.js의 변화가 index.html에 반영되고 렌더링될 수 있는거란 말인가?? 일단 리액트를 띄운 화면의 개발자 도구>Network 탭을 보..

Web API브라우저는 WEB API (= DOM + BOM)을 제공한다. 이는 자바스크립트 자체의 기능이나 문법이 아니라, 프로그래밍 언어로 웹페이지를 조작할 수 있도록 브라우저에서 제공하는 기능이다. BOM (Browser Object Model)BOM(Browser Object Model): 브라우저 자체를 다루기 위한 API 잘 보면 WEB API의 모든 것들이 window라는 객체의 하위 집합임을 확인할 수 있다. window 객체는 다양한 객체를 포함하고 있다. window.locationwindow.navigatorwindow.screenwindow.history .. 등이 window 객체들의 집합을 BOM(Browser Object Model) 이라고 한다. 이들은 다양한 기능들을 제..