본문 바로가기

react3

리액트 초기 세팅 환경 구축하기: Windows에서의 React 설치 가이드 리액트 환경 구축하기: Windows에서의 React 설치 가이드 안녕하세요! 이번에는 리액트(React)를 Windows 환경에서 설치하는 방법에 대해 알아보겠습니다. 리액트는 페이스북에서 개발한 프론트엔드 라이브러리로, 주로 컴포넌트 기반의 개발에 중점을 두고 있습니다. 이제부터 순차적으로 진행해보겠습니다. 리액트 초기 세팅 전 준비 사항 리액트를 설치하기 전에 몇 가지 준비 사항이 필요합니다. 아래와 같이 진행해보세요. Node.js 설치: 리액트를 사용하기 위해서는 Node.js가 필요합니다. Node.js는 Webpack과 Babel과 같은 도구를 사용하기 위해 필요한 기반 환경을 제공합니다. Node.js 공식 웹사이트에서 설치하세요. Yarn 설치: Node.js와 함께 설치되는 패키지 매니.. 2023. 8. 22.
리액트 모달창 드래그 방법 react bootstrap modal draggable jquery에서 bootstrap 모달 창을 드래그하는 방법은 굉장히 직관적이고 쉽다. 반면에 리액트 부트스트랩 콤포넌트 라이브러리를 사용하면서 react bootstrap modal draggable 하기는 쉽지 않다. 아니, 쉽다. 쉬운데 레퍼런스가 부족하다. react bootstrap, react-draggable만을 사용해서 정통으로 리액트 부트스트랩의 모달을 드래그하는 것을 웬만하면 포기하고 antd, dragm 조합으로 넘어가는 사람들이 많은 듯하다. 구글에서 react Bootstrap modal draggable주제로 검색하면, 대부분 리액트 예제를 클래스형으로 설명해두고 있다. how to make react-bootstrap modal draggable I've tried making.. 2022. 9. 13.
여러가지 리액트 멀티 레이아웃 connected-react-router multi layout 적용하기 리액트를 별로 좋아하지 않는 1인이다. 그런데 어쩔 수 없이 리액트 플젝을 해야 해서 퍼블리셔 겸 프런트 엔드로 참여 중이다. jquery라면 단박에 끝낼 문제에 고민하지 않아도 될 문제들이 리액트에는 넘쳐난다. 왜 쓰는지는 여전히 모르겠지만 까라니까 깐다. 일단 SPA 사이트에서 리액트가 편한 것은 대충 짐작은 된다. 그런데 SPA사이트라고는 해도, 한 사이트에 서로 다른 레이아웃이 여럿 사용해야 되는 경우가 많다. 단적으로 GNB, LNB가 없는 Intro페이지, Login페이지 그리고 사용자 화면과 다른 관리자 화면의 레이아웃은 서로 다를 수 있다. 아니 다를 수 있는 정도가 아니라 대체로 다르다. 그럴 때 리액트 여러 가지 레이아웃 적용하는 방법은 꽤 다양하지만 직관적이고 쉬운 리액트 멀티 레이아.. 2021. 3. 25.