// 객체 생성let dynamicVars = {};// 동적으로 변수명 생성for (let i = 0; i  이렇게 무지성 변수도 선언할 수 있고,${i} 대신 기존에 선언해두었던 변수들을 사용할 수도 있다. 나의 경우에는 배열 안의 값에 해당하는 데이터의 검증한 결과를 저장해둬야 해서 동적 변수를 구현하게 되었음. 예를 들면 그리드안에 배열[] 안에 있는 값과 이름이 같은 컬럼에 데이터를 확인하는 일이다.그때는 아래와 같이 변형해서 사용할수도 있다. const checkColumns = ['Nation', 'Dept', 'Name', 'Age'] _.forEach(dataList, (row, index) => { let dynamicVars = {}; // 동적으로 변수명 생성 for (let i ..

Public 디렉토리 와 src 디렉토리의 차이점 Public 디렉토리- 정적 파일을 넣는 디렉토리 (index.html을 비롯한 html 파일, img 파일 등..)   * 파일이 후처리(post-process) 되거나 경량화(minify) 되지 않는다.   * 파일 경로를 잘못 입력하거나, 파일이 존재하지 않을 경우에 컴파일 단계에서 오류가 발생하지 않고, 사용자가 접근할 때 404 오류를 응답하게 된다.   * 파일이 수정될 때 마다 직접 파일명을 수정하거나 매개변수 쿼리를 추가해야 함     => 환경 변수를 사용하면 어느정도 해결이 가능하긴 하다.. src 디렉토리- 개발하면서 작업하는 파일의 대부분을 넣는 디렉토리 (index.js, 그 외 리액트 컴포넌트 같은 js 파일, css 파일 등....

인터넷 검색하니 죄다 리눅스, ios 이야기에서 먹히는 코드만 복붙한 것 처럼 널려 있어서..윈도우 환경에서, vs code 를 이용한 react 프로젝트의 힙 메모리를 변경하는 방법을 메모해둠. 터미널을 powershell 환경으로 연다.만약 터미널이 다른 환경으로 되어 있다면ctrl + shift + P 한 다음 Terminal: Select Default Profile을 해서 터미널 기본 설정을 powershell 로 바꿔주던가.여기서 열 때 powershell 창을 하나 열어 주도록 하자. 현재 내 힙 메모리 확인//powershellnode -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))' 힙 메모리 사이즈 변경//powe..

React 19 Beta – ReactThe library for web and native user interfacesreact.dev 일부 해석 발췌 React 19의 새로운 기능Action리액트 앱의 일반적인 사용 사례는 데이터 변화를 수행한 다음 응답으로 상태를 업데이트하는 것입니다. 예를 들어, 사용자가 이름을 변경하기 위해 양식을 제출하면 API 요청을 한 다음 응답을 처리합니다. 과거에는 보류 상태, 오류, 낙관적 업데이트 및 순차적 요청을 수동으로 처리해야 했습니다. 예를 들어 usestate에서 보류 및 오류 상태를 처리할 수 있습니다.// Before Actionsfunction UpdateName({}) { const [name, setName] = useState(""); con..

React 프로젝트를 개발하다보면, 배포 환경?에 따라 다르게 환경 변수를 셋팅해야하는 case가 발생한다. 예를 들면, 보통 API 주소를 환경 변수로 많이 셋팅해두고는 하는데.. 운영 API 주소와 개발 API 주소를 배포 환경에 따라 다르게 셋팅해두고 싶은 case가 딱 이에 해당한다. React :: 환경변수(.env) 셋팅하기 토큰이나 API 키 같은 것은 하드코딩으로 집어 넣으면 배포 시 개발자 도구에 모두 드러나기 때문에 최대한 숨겨서 코딩을 진행해야 한다. 이때 사용할 수 있는 방법 중 하나가 "환경변수" 이다. bornatnoon.tistory.com 우선 기초 셋팅 방법을 첨부해본다. (.env 파일을 하나만 쓰는 케이스) 케이스에 따른 .env 설정 방법 ※ 참고. 리액트 프로젝트 생..

참고 글 원문 Making Sense of React Server Components This year, the React team unveiled something they've been quietly researching for years: an official way to run React components exclusively on the server. This is a significant paradigm shift, and it's caused a whole lot of confusion in the React communit www.joshwcomeau.com (이번 글의 경우 해당 글에 덧붙혀 설명이 부족하다고 느껴지는 것들은 다수 서칭하여 작성하여.. 참고 글이라고 하기에도 머쓱하다.)..

회사의 경우 여러 해외 법인이 존재하고 있어, 다국어 지원이 필요하다. 웹페이지의 경우 chrome 등 인터넷 브라우저 내 번역으로도 지원이 가능하지만, 회사에서는 사전적으로 번역하기 보다는, 각 나라에서 이해하기 쉬운 단어로 번역하는 케이스가 필요하게 된다. ​ 이때 사용되는 것이 i18next. i18next란? Javascript로 작성된 국제화 프레임워크로 여러 국가의 언어를 처리할 수 있도록 도와준다. 많이 사용하는 라이브러리로는 react-i18next, next-i18next, next-translation 이렇게 3가지. 각 라이브러리에 장단점과 특성이 존재하므로 알아보고 채택하는 것을 추천한다. ​ 우리의 경우 react-i18next 를 채택하게 되었는데.. 정확히는 채택 당했다. 고로..

현재 프로젝트의 경우 권한 관리를 recoil 로 다루고 있다. ​ Rocoil 이란? 페이스북에서 발표한 React 전역 상태 관리 라이브러리이다. usestate 만을 사용하여 상태 관리를 하게 되면 프로그램이 복잡하게 될 시, props drilling이 일어나게 되는데, Recoil은 이러한 행위를 방지하게 해준다. ​ Recoil의 경우. React 에서 사용하는 라이브러리가 아닌, 외부 라이브러리로 아래의 링크에서 내용을 확인하면 된다. Recoil A state management library for React. recoiljs.org Recoil 라이브러리에 주요한 개념으로는 Atom 과 selector가 있다. ​ Recoil 에서 하나의 전역 상태를 Atom 이라고 하는데, Atom ..

컴포넌트의 속성 값을 불러올 수도 있고, value나 style 값 같은 것들을 바꿔줄 수도 있는. DOM을 조작할 수 있게 해주는 ref. 렌더링에 필요하지 않은 값을 참조할 수 있는 ref. 에 대하여 설명하도록 하겠다. ​ ref 는 비교적 간단한 개념이므로 forwardRef 와 useImperativeHandle 를 설명하기 위한 도약 단계처럼 가볍게 짚고 넘어가도록 하겠음. ​ 덧붙히는 말.. 모 부장의 "Ref 는 React 생명주기와 어울리지 않는 문법으로 React 상에서도 지양해야 한다"는 발언에 대하여 설명하도록 하겠다. Ref 를 무분별하게 선언하고, 다른 문법으로 대체가 가능한데도 불구하고 무지성으로 사용하는 것이 문제. (이것은 다른 문법도 동일하다. 각자가 가지는 고유의 특성을..

UseEffect 란. 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook임. ​ 기존에는 클래스형 컴포넌트에서만 생명주기 메소드를 사용할 수 있었는데. useEffect를 쓰면 함수 컴포넌트에서도 side effect 를 쓸 수 있게 되었다. 라이프사이클 hook(componentDidMount, componentDidUpdate, componentWillUnMount)을 대체할 수 있는 useEffect. 사용 방법 import { useEffect } from 'react'; function useeffecttest() { // 사용법 1. 종속성 매개변수 없음. useEffect(() => { DoSomething(); }); // 사용법 2. 빈 종속성 매개변수 ..

리액트 16.8 버전 이전에서는 함수형 컴포넌트에서 상태 관리를 할 수가 없었음. (컨버팅 하는 사람도 보았다..) 하지만 16.8 버전 부터 Hooks 라는 기능이 도입되며 함수형 컴포넌트에서 상태를 관리할 수 있게 되었다.! ​ ※ Hook : 함수 컴포넌트에서 React state (리액트에서 아주 중요한 개념 중 하나) 와 생명주기 기능(lifecycle features)을 연동할 수 있게 해주는 함수. ※ 상태관리(State Management) : 데이터를 관리하는 방법. 여러 component 간에 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 것을 의미. ​ 리액트로 개발을 하다보면 usestate 를 적절한 위치에서 선언하고, 잘 내려주고(상속) 꼬이지 않도록 관리하는 것이 고오급 스킬..

목차 동적인 값을 할당하기 위한 변수, "useState" 초기 렌더링 및 변수 변환에 따른 기능 call을 위한 "useEffect" 컴포넌트의 속성 값을 get/set 할 수 있는 "useRef" useRef + 상속 개념, "ForwardRef()", "useImperativeHandle()" 함수 재사용을 위한 "UseCallback" 쉬운 전역 상태관리를 위한 "Recoil" 커스텀한 다국어 처리를 위한 "i18next" 번외. Axios와 Fetch의 차이 번외. Lazy Import 란?