판교너굴맨의 개발노트

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. 코딩 컨벤션 (Coding Convention) 이란? 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약이다. 여러 개발자들이 협업하는 과정에서 각각의 개발자들은 서로 다른 코딩 스타일을 가지고 있다. 조건문과 함수를 통해 예를 들어보겠다. // if문 if (true) return true; if (true) { return true; } // 화살표 함수 const foo = () => "Hello World"; const foo = () => { return "Hello World"; } 위의 코드처럼 다양한 방식으로 코드를 작성할 수 있다. 특히 자바스크립트는 언어 특성상 다른 언어에 비해 유연한 구조를 가지고 있기 때문에 (자유도가 높음) 개발자간 코드의 의도를 파악하기 ..

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

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(순수 함수) 등을 설정한다. 작성하면서 공식문서를 봤는데... 한국어 지원도 되고, 굉장히 잘 읽히는 것 같다. 일단 다른 상태관리 라이브러리를 사용해봤다면 ..