React에 StoryBook을 입혀보자. 도입 최근 회사에서 webpack의 Module Federation을 도입하게 되면서 React 프로젝트를 도입할 수 있는 기회가 생기게 되었다. 아울러 그에 맞춰서 백지에서 시작하는 프로젝트를 할 수 있게 되었는데, 그에 맞춰 Storybook을 세팅한 이야기를 작성해보려고 한다. React 프로젝트 생성 React의 간단한 프로젝트를 생성하기 위해 create-react-app 을 사용해 간단히 만들어 본다. npx create-react-app react-storybook-playround Storybook 구축 storybook은 아래 명령어로 간단히 구축이 가능합니다. npx storybook init 그렇다면 아래와 같은 의존성과 스크립트가 포함됩니다..
Frontend/React
10 JavaScript concepts for React beginners(React 초보자를 위한 10가지 JavaScript 개념) React는 JavaScript 프론트엔드 라이브러이며, 시작 하기 위해서는 JavaScript를 배워야 합니다. 그러나 JavaScript는 거대한 개념의 언어이기 떄문에 모든 것을 배우기에는 어렵습니다. 그래서 이 글에서는 React를 배우기 위해 알아야 하는 10가지의 JavaScript 개념에 대해 다룹니다. ✨ JavaScript이란? JavaScript는 웹 페이지용 높은 수준의 스크립트 언어입니다. 1995년 Brendan Eich에 의해 만들어졌습니다. 처음엔 JavaScript는 interactive(상호작용하는) 웹페이지로 만드는 것이 목표였습니다. ..
React의 defaultValue vs value 🧐 Input의 값을 어떻게 변수에 저장할까!? Vue.js에서는 v-model 이라는 속성으로 쉽게 input의 값을 변수에 저장해서 사용할 수 있었다. React를 하면서 v-model과 같이 Input값을 어떻게 변수를 저장할 수 있을지를 찾아본 결과 defaultValue와 value 라는 속성값이 나왔고, 둘의 차이를 비교해보기로 하였다. 참고로, onChange 이벤트를 이용해 직접 할당을 해줘야 하는 다른 점이 있지만, 지금 글과는 주제는 조금 다르기 때문에 아래 코드만 간단히 살펴보는것으로 하겠습니다. const [value, setValue] = useState(initialValue); const onChange: ChangeEvent..
Fragments? 란? React 16.2부 터 Fragements를 지원해 DOM에 노드를 추가하지 않고 자식 목록을 그룹화 할 수 있습니다. render() { return ( ); } Fragments란? 일반적으로 자식 목록을 반환하는 용도로 사용합니다. 이전에는 아래와 같이 div 또는 span 을 사용해 자식 요소를 래핑하였습니다. render() { return ( // Extraneous div element :( Some text. A heading More text. Another heading Even more text. ); } 위와 같은 방식에서 16.0 버전에서는 요소 배열을 반환하는 방식을 지원하기도 하였습니다. render() { return [ "Some text.", A..
