lahuman & jabsiri 노트 lahuman & jabsiri 노트

일반적으로 React에서의 상수는 .env를 활용해서 관리합니다. 하지만, 환경에 따라 상수를 변경해야 한다면 어떻게 처리해야 할까요? 정답은 build 이후에 환경 변수를 주입 할수 있게 설계 하면 됩니다. React에서는 public 이라는 디렉토리가 있고 이는 정적 파일을 보관하는 곳입니다. 또한 이 디렉토리에 있는 파일들은 빌드 시 자동으로 build 디렉토리에 복사 되며, 브라우저에서 접근이 가능한 파일로 사용이 됩니다. 전역 상수 파일 생성 먼저 환경 변수는 전역값으로 처리 하기 위해서 window 전역 객체에 env키를 이용해서 저장 합니다. // root 디렉토리에 키 값과 벨류 키값을 가진 _env-config.js 파일 생성 window.env = { REACT_APP_API: "V_R..

meterial ui datetimepicker 값 설정시 유의점 개인적으로 프로젝트 진행시 reactjs + mui 조합을 가장 많이 사용합니다. 익숙한 이유도 크지만, 기능 추가 등의 지원이 mui를 사용하는 가장 큰 이유 입니다. mui 4.X에서는 beta 버젼으로 제공 되었고 오류를 꽤 가지고 있었지만, mui-x 5.x에서는 좀 더 안정된 datepicker를 제공(22.06.24 기준 5.0.0-alpha.6) 하기 시작했습니다. mui-x 5.x 컴포넌트 중 datetimepicker를 사용할때 유의 사항을 작성하여 봅니다. datetimepicker의 value는 any 타입을 받아서 처리 할 수 있습니다. 하지만 문자열로 설정하면 값이 화면에 안그려지거나, 갱신이 안되는 경우가 발생합니..

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 호이스팅을 설명할 땐 주로 “변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는” 것으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. let과 const로 선언한 변수도 호이스팅 대상이지만, var와 달리 호이스팅 시 undefine..

화면 크기 만큼 이미지를 꽉 채우고 이미지가 클 경우 스크롤이 생기게 하는 예제 GO CODESENDBOX 이미지를 div tag로 감싸서 처리하면 쉽게 될 줄 알았는데 스크롤이 생기기 위해서는 height, width의 크기가 있어야 합니다. 작성한 예제는 top, left, right, bottom을 0으로 주어서 크기를 잡아 처리 했습니다. 작성한 예제

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. 내가 만든 React 모듈을 rollup으로 빌드 후 사용할때 위와 같은 오류를 만났습니다. 원인으로 peerDependencies 설정을 하지 않아서 발생했습니다. package.json에 다음과 같이 peerDependencies 를 설정하고 모듈을 배포 하면 해당 오류가 사라졌습니다. "peerDependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" },제가 사용한 rollup.conf 파일은 아래와 같습니다. import peerDepsExternal from "rollup-plu..

onPaste contentEditable 을 이용한 이미지 붙여 넣기 처리 페이스북 댓글창에서 클립보드에 저장(Ctrl+C) 된 이미지를 붙여넣기(Ctrl+V)를 하면, 이미지가 업로드 되는 것을 확인 할 수 있습니다. 이를 구현 하기 위해서는 우선 다음 HTMLElement.onpaste 이벤트에 대하여 알아야합니다. 간단하게 요약하면 붙여넣기를 처리할때 호출되는 이벤트 인데요. 붙여넣는 이벤트에서 이미지일 경우 업로드 처리를 하면 됩니다. 구현하기 구현은 React.js기반으로 구현 하였습니다. import React from "react"; import axios from "axios"; import MockAdapter from "axios-mock-adapter"; import "./style..

Reactjs에서는 상속보다 더 강력한 합성을 제공합니다. 상속 대신 합성을 사용하면 컴포넌트 간에 코드를 재활용하기 펼리합니다. 합성의 사용 예제는 아래와 같습니다. function SplitPane(props) { return ( {props.left} {props.right} ); } function App() { return ( ); }와 동일한 React 엘리먼트는 단지 객체이기 때문에 다른 데이터처럼 props로 전달할 수 있습니다. 참고자료 합성 (Composition) vs 상속 (Inheritance)

tailwindcss with ReactJS tailwindcss는 html에 class를 이용해서 화면을 구성하는 방식의 css 라이브러리 입니다. 이 방식의 장점은 HTML만으로 직관적인 화면을 구성 할 수 있습니다. ReactJS에서 tailwindcss를 사용하기 위해서는 몇가지 설정을 해야 합니다. 다음 설정을 따라 하면 tailwindcss를 사용할 수 있습니다. 작업을 시작하기 전에 다음 사항을 유의하셔요. nodejs 12.13.x 이상 버젼만 가능합니다. 1. react 프로젝트 생성하기 npx create-react-app my-project cd my-project2. tailwind css 설정하기 npm install tailwindcss@npm:@tailwindcss/postcs..