판교너굴맨의 개발노트

Next.js를 학습하면서 궁금한 점에 대한 자체 Q&A를 진행하려고 한다. 궁금한 점이 생길 때마다 업데이트를 할 생각이다. Next.js 13.4 버전 이상의 app Router 기반으로 작성되었다. Q: 'use client'를 사용한 CSR 컴포넌트도 어떻게 SSR 컴포넌트와 같이 서버에서 정적 HTML를 렌더링 할 수 있을까?? A: 기본적으로 Nextjs는 클라이언트 컴포넌트, 서버 컴포넌트에 대해 서버에서 정적 HTML preview를 렌더링 한다고 한다. 그 후 js 파일을 가져와 html과 하이드레이트 과정을 거치고 인터렉션이 가능하게 만든다 Server Component Static Rendering (정적 렌더링): 빌드 시에 렌더링 Dynamic Rendering (동적 렌더링): ..

사내 제품의 다국어 처리를 맡게 되어 i18next 라이브러리를 적용하게 되었다. 쉽고 간단하게 사용할 수 있으며, 내용을 작성해 두면 다음에도 유용하게 사용할 수 있을 것 같다. 1. i18next란? 자바스크립트 환경을 위한 국제화 라이브러리 2. 사용 방법 1. 라이브러리 설치 # npm npm install i18next react-i18next # yarn yarn add i18next react-i18next 2. 디렉터리 구조 PATH: src/i18n/ i18n/index.ts: 다국어 초기화 설정 파일 i18n/locales: locales별 JSON 파일 ( locales 또는 translation 이름 사용) 3. JSON 파일 생성 각 locale에 맞는 JSON 파일 생성 # en..

기존에 사용하던 Ant Design라이브러리 Table을 Ag grid로 변경하게 되었다. Ant D Table은 Row Data를 useState hook을 통해 직접 변경해야 했다면 Ag grid에서는 useState hook을 사용하지 않고, applyTransaction이라는 내장 함수를 통해 Row Data를 변경할 수 있다. applyTransaction: Update row data. Pass a transaction object with lists for add, remove and update 행 데이터를 업데이트합니다. 추가 제거 및 업데이트 목록과 함께 트랜잭션 객체를 전달합니다. 1. 환경 설정 1-1. Ag Grid 설치 (무료 버전만 사용 시) # npm npm i ag-grid..

React의 useRef로 간단하게 특정 DOM 요소로 이동할 수 있다. 1. 디자인 구현 먼저 아래와 같은 간단한 디자인을 구현했다. 우측 상단에 navigation을 클릭하면 해당 content로 이동하는 구조이다. import React from 'react' export default function App() { return ( content1 content2 content3 content1 content2 content3 ) } 2. 스크롤 이동 구현 useRef와 onClick 함수를 추가해준다. useRef는 특정 DOM을 선택해서 조작할 수 있도록 해주는 React의 Hook이다. import React, {useRef} from 'react' export default function ..

CRA (Create React App)으로 프로젝트를 시작하면 우리가 사용하지 않을 파일도 같이 생성된다. 이번에 새 프로젝트를 시작하면서 하나씩 정리해보려고 한다. 1. CRA로 프로젝트 생성 // yarn yarn create react-app debrains-ui // npm npx create-react-app debrains-ui CRA로 프로젝트를 생성하고 나면 아래와 같은 구조를 가지게 된다. 2. 파일 제거 1. public - favicon.ico: 추후 변경될 때까지 유지 - logo192.png, logo512.png: react 기본 이미지므로 제거 - manifest: 웹앱에 대한 정보를 담고 있는 파일이다. - index.html: 사용하고 있는 logo192.png, mani..

1. ESLint란 코드를 실행하기 전에 코드를 분석해 문법적인 오류나 안티 패턴을 찾아 잠재적 위험요소를 사전에 방지하고, 일관된 코드 스타일로 작성할 수 있도록 도와주는 코딩 컨벤션이다. 코딩 컨벤션: 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약(작성 표준)이다. ESLint 특징 직접 코드 규칙(rules)을 설정할 수 있으며 규칙을 어긴 코드에는 error 또는 warnig을 발생시킬 수 있다. airbnb esLint와 같이 큰 기업에서 사용하는 코딩 스타일 가이드를 적용할 수 있다. 팀 프로젝트를 진행하다 보면 팀원 간 각자의 코딩 스타일이 다르다. 세미콜론을 사용하는 사람과 사용하지 않는 사람, 조건문 사용 시 중괄호를 사용하는 사람과 사용하지 않는 사람 등 ESLin..

개요 사내 프로젝트 도중에 서버에서 많은 데이터를 받아와 가공해야 하는 경우가 있었다. 자바스크립트는 싱글 스레드이기 때문에 이 과정에서 화면은 잠시 멈추는 것처럼 버벅이게 된다. 그래서 다른 동작을 할 수 없는데 이때 계산하는 과정을 서버에서 데이터를 받을 때처럼 다른 스레드가 처리해 줬으면 했었고, 검색해보니 web-worker에 대해 알 수 있었다, (구글 최고) 간단한 예제를 만들어보자 export default function App(): JSX.Element { const onTestStart = () => { console.log('start'); Array(10000000).fill(0); console.log('end'); }; const onSubTask = () => console.l..

2022.05.07 - [Backend] - [Backend] Firebase, FireStore 설정 및 사용 [1] 이전 게시물에서 만들어 둔 Firestore를 React에서 사용해보겠습니다. 1. Firebase 앱 추가 먼저 생성한 Firebase 프로젝트로 이동합니다. 이동 후에 앱 추가 버튼을 확인할 수 있습니다. 앱 추가 버튼을 클릭 후에 웹 버튼을 클릭합니다. 아래 순서대로 먼저 앱 닉네임을 정한 후 앱 등록 버튼을 클릭합니다. 잠시 기다리면 Firebase SDK 추가 내용이 나옵니다. (이후 페이지를 이탈해도 확인 가능) 2 Firebase SDK 사용 React 프로젝트를 실행하고, firebase를 설치합니다. # npm npm install firebase # yarn yarn ..

React를 사용한 토이 프로젝트를 진행하면서 반응형을 고려하게 되었다. 반응형을 구현할 때 가장 많이 접했을만한 미디어쿼리를 사용할까 했다가 react-responsive라이브러리를 추천 받아서 사용해보려고 한다. 1. 설치 # npm npm i react-responsive # yarn yarn add react-responsive Typescript를 사용한다면 아래 명령어를 추가한다. # npm npm install @types/react-responsive # yarn yarn add @types/react-responsive 2. useMediaQuery react-responsive 라이브러리는 useMediaQuery라는 Hook을 제공합니다. import React from "react"..

Recoil 라이브러리 설치 npm install recoil yarn add recoil 프로젝트 적용 import React from 'react'; import ReactDOM from 'react-dom'; import { RecoilRoot } from 'recoil'; import App from './App'; ReactDOM.render( document.getElementById('root') ); 로 컴포넌트를 감싸준다. 전역 상태를 관리할 디렉터리 (ex stroe, recoil 등)에서 Atoms(공유 상태)와 Selector(순수 함수) 등을 설정한다. 작성하면서 공식문서를 봤는데... 한국어 지원도 되고, 굉장히 잘 읽히는 것 같다. 일단 다른 상태관리 라이브러리를 사용해봤다면 ..