- [ react & next.js ]React 의 RSC, RCC 에 대하여 (with Next.js)2023-10-18 23:25:36React 18 버전이 출시 된 후 Next.js 에서는 app dir 기능이 도입되어 React 의 RSC, RCC 기능을 사용할 수 있게 되었습니다. 이번 포스트에서는 최근 화두인 RSC, RCC 에 대해 한번 정리해보고자 합니다. RSC 란? RSC 란, React Server Component 의 줄임말로 서버에서 렌더링 되는 컴포넌트를 의미합니다. 서버 컴포넌트는 async 함수로 선언하고 내부에서 await 를 사용하여 비동기 데이터를 가져와 이를 렌더링 하는 것이 가능합니다. 즉, 비동기 컴포넌트가 되는 것이죠. 기존 Next.js 에서는 서버에서 데이터를 fetch 해오고 이를 컴포넌트에 전달하기 위해서는 페이지 단위로 페이지의 최상단에서 getServerSideProps 함수를 사용하여 ..
- [ react & next.js ]Next.js 에서 종속성 패키지에 browserslist 적용하는 방법2023-10-18 00:14:54프론트 개발을 하다보면 일부 예전 버전의 브라우저들을 지원해야 하는 경우가 있습니다. Next.js 에서도 이와 관련된 기능을 제공하고 있습니다. package.json 에 browserslist 작성 package.json 에 아래와 같이 browserslist 를 작성합니다. { ... "browserslist": [ "chrome 64" ] ... } chrome 64 는 예시이며 지원하고 싶은 브라우저 범위에 맞게 수정하시면 됩니다. browserslist 에 대한 자세한 내용은 여기를 참고해주세요. 위와 같이 작성하면 Next.js 에서는 빌드 시 해당 브라우저 버전의 범위에 맞춰 코드를 트랜스파일링 합니다. 하지만 여기까지만 작성하면 next.js 자체는 package.json 의 browse..
- [ react & next.js ]Next.js 가 실행될 때 한번만 특정 로직을 실행하는 방법2023-10-17 21:02:11Next.js 를 실행할 때 마다 최초 한번 특정 로직을 실행해야 하는 경우가 있었습니다. 구동할 때 마다 최초 한번이라는 말은 즉, 코드가 수정되어 git merge 된 이유를 포함한 여러가지 이유로 인해 애플리케이션을 재기동 할 때를 말합니다. 해당 부분을 Next.js 에서 처리하는게 가능할까? 라는 생각과 함께 Next.js 문서를 읽어보던 도중에 Next.js 에서 제공하는 기능 중 하나인 Instrumentation 을 발견하였습니다. Instrumentation 이 무엇인가? Next.js 레포지토리의 루트 경로 또는 src 폴더 사용시에는 src 경로에 instrumentation.ts 라는 파일을 생성 후 이 파일 안에서 register 라는 함수를 export 해놓으면 Next.js 가..
- [ react & next.js ]useEffect 에 대해 알아봅시다2023-07-25 22:37:04안녕하세요. 루루개발자입니다. 이번에는 리액트에서 기본으로 제공해주는 훅 함수 중 하나인 "useEffect" 에 대해 알아보고자 합니다. 아래 예시 코드들은 리액트의 프레임워크인 Next.js 를 기준으로 작성되었으므로 이 점 참고해주세요. useEffect 란? 리액트(react) 공식 문서에 의하면, useEffect 는 외부 시스템과 컴포넌트를 동기화 할 수 있게 해주는 리액트 훅(hook) 이라고 정의 되어 있습니다. 여기서 말하는 외부 시스템이란, 리액트에 의해 제어 되지 않는 것들을 말합니다. 리액트에 의해 제어 되지 않는 예시는 다음과 같습니다. API 통신 ref 를 이용한 dom 제어 window 전역 객체에 이벤트 리스너 할당 또는 해제 이 밖에도 여러가지가 있겠지만, 대체로 이런 상..
- [ react & next.js ]useState 에 대해 알아봅시다2023-07-24 23:04:10안녕하세요. 루루개발자 입니다. 리액트로 프론트엔드 개발을 하다보면 자주 접하는 훅 함수가 있습니다. 바로 "useState" 입니다. useState 란 무엇인가? useState 는 리액트에서 기본으로 제공해주는 훅 함수들 중 하나로, 컴포넌트에 상태 변수를 추가할 수 있도록 해주는 훅 함수입니다. 해당 함수는 2개의 원소를 갖는 배열이 반환되며, 첫번째 원소에는 상태 값이 반환되며 두번째 원소에는 상태 값을 변경할 때 사용되는 setter 함수가 반환되게 됩니다. 그렇기 때문에 보통 아래와 같이 구조 분해 할당을 이용하여 선언하게 됩니다. const [state, setState] = useState(initialState); 상태값 변경시 리렌더링 발생 useState 에서 반환된 배열의 두번째 ..
- [ react & next.js ]Next.js 의 렌더링 과정에 대하여2022-11-09 16:26:18안녕하세요. 루루개발자입니다. 최근 Next.js 에서 렌더링이 진행되는 과정 및 원리 등에 대한 질문을 받았는데 제 스스로가 만족스러운 답변을 하지 못했습니다. 단순히 서버 사이드에서 한번 렌더링 하고 그 뒤에 클라이언트에서 다시 렌더링 되는 정도로만 알고 있었는데, 이번 기회에 한번 정리를 해보고자 합니다. Next.js 렌더링 과정 Next.js 의 렌더링 과정에 대해 정리해보겠습니다. Pre-Rendering Next.js 는 서버 사이드에서 먼저 페이지를 Pre-Rendering 합니다. 좀 더 정확히 말하면 서버 사이드에서 ReactDOMServer.renderToString 라는 함수를 사용하여 페이지에 대한 html 문서를 문자열로 가져오는 것이라고 할 수 있습니다. 해당 html 문서에는..
- [ react & next.js ]Next.js 에서 local, development, production 환경 셋팅하기2022-10-13 23:29:39안녕하세요! 루루개발자입니다. 이번 글에서는 최근 Next.js 의 Typescript 환경에서 local, development, production 환경을 셋팅한 과정을 공유드리고자 합니다. 왜 local, development, production 환경을 셋팅해야 하나? 로컬에서 구동할 때, 개발 서버에서 구동할 때, 운영 서버에서 구동할 때 통신해야 할 API Base Url 이나 콜백 받아야할 Url 등을 다르게 처리되어야 하는 경우가 종종 발생하곤 합니다. 이럴 때 config 파일이 각 환경에 맞게 분리되어 있다면 원하는 config 파일로 구동하여 각 환경마다 다른 값으로 처리가 가능하기 때문에 local, development, production 환경을 셋팅하는 것은 중요합니다. .en..
- [ react & next.js ]자식 컴포넌트에 전달하는 props 관련 테스트2022-05-29 09:58:37안녕하세요. 루루개발자 입니다. 이번 시간에는 리액트에서 자식 컴포넌트에 전달하는 props 값들의 변화 감지에 대해 테스트를 진행해보려고 합니다. 먼저 부모컴포넌트는 아래와 같이 작성하였습니다. -- index.tsx import { useCallback, useRef, useState } from "react"; import { TestChildComponent } from "../../../src/components-in/test/test-child-component/test-child-component"; const Index = () => { const [name1, setName1] = useState('홍길동'); const name2 = useRef('아이유'); const renderLo..