리액트 JSX 에서 html 렌더링 방법 추가

객체리터럴을 사용할 수도 있고 import "./styles.css"; const test = { a: Hello, b: 안녕하세요, c: Bonjour }; export default function App() { let key = "a"; return {test[key]}; } 함수에 따로 html 리턴을 만들어서 사용할 수도 있다. import { useState } from "react"; import "./styles.css"; export default function App() { function A() { return ( 안녕하세요. 우지입니다. ); } const [state, setState] = useState(true); return {state && A()}; }

React Radio 버튼에서 value 값 얻기

다음과 같은 UI에서 라디오 버튼을 선택할때에 각각에 Radio 버튼에 할당한 value 값을 얻고 싶었다. state 변수를 선언한다. onChange 함수를 만든다. input tag에 value와 onChage를 사용해서 state를 변경한다. const [TTL, setTTL] = useState(''); const onChangeRadio = (e: any) => { setTTL(e.target.value); };

yarn vs npm 실행속도

yarn 과 npm 에 대한 갑론을박. 뭘 사용해도 상관없지만 둘중에 하나를 사용할때는 선택한 이유와 장단점을 알고있어야한다. 그래서! 오늘 한번 정리를 해보려고한다. 우선 npm 의 캐쉬를 날린다. yarn 도 못참지 ㅋㅋ 각각 버전은 현재기준으로 다음과 같습니다. 너무 빠르게 변화하다보니 이글을 보실때는 어떨지 모르겠네요. yarn.lock 파일과 package.lock 파일을 삭제했습니다. npm은 1분 41초가 걸렸네요. yarn install 을 할때에 이전과 동일한 환경에서 실험하기 위해 npm , yarn 캐쉬를 삭제하고 node_module 또한 제거한 상태입니다. 이제 yarn을 테스트 해보겠습니다. yarn은 1분 20초 정도 소요가 되었습니다. 하지만 한번해봐서는 확신할 수 없습니다...

npx 이란?

갑자기 공부하다가 npx 이란 명령어에 대해 궁금해졌다. npm 의 오타같은 npx는 어떤 목적을 가지는 명령어일까? npx npm 5.2버전부터, npx가 기본 패키지로 제공되기 시작했다. npx 또한 모듈의 일종인데, 이 모듈은 npm 을 통해 패키지를 로컬에 설치해야만 실행을 할 수 있던 문제점에 대한 해결책이 될 수 있었다. 매번 패키지의 최신 버전을 불러와 실행시킨 후에 그 파일이 없어지는 방식으로 모듈이 돌아간다. npx가 효과적인 경우 CRA 같은 보일러플레이트 모듈이 효과적이다. 해당 보일러 플레이트는 업데이트가 잦다. 따라서 npx를 사용하기 적합하다. 항상 최신의 버전을 사용할 수 있기 때문이다. 따라서, npx를 사용하기 적합할 때는 해당 패키지가 잦은 업데이트를 갖는 패키지일 경우이..