본문 바로가기

전체 글

(75)
React Node.js 왜깔아야 하는데? React 환경 세팅하기 초초간단 나는 오랜시간 리액트에 왜 Node.js 를 깔아야 하는데? 라고 생각했는데 드디어 확실히 와닿는 이유를 찾았다!!!!!!!!!!!!! 간단히 말하면 React를 실행하기 위한 셋팅이라고 생각하면 된다. 구동시켜줄 환경을 만드는것! 그래서 Node.js를 깔고 작업을 시작해주면된다. https://nodejs.org/en 여기서 client를 다운로드받기 다운로드 후 아래코드 작성. npm install -g create-react-app app . 현재 폴더에 설치하겠다는 뜻이다 npx create-react-app . 만약 현재 폴더에 다른 폴더명으로 시작하고 싶다면 아래 코드처럼 입력하기. npx create-react-app reactsite01(폴더명) 혹시 이렇게 쳤는데 빨간색 Error 가 ..
React-Router-Dom 개념 Routing - 라우팅은 우편배달기사가 집집마다 배달하듯이 지정된 곳에 배달해주는 것. 즉 지정된곳에 콘텐츠를 이동시켜주는것이다. React-Router를 사용하는 이유 그냥 a 태그를 사용하면 페이지 전체가 새로 로딩된다. 화면 깜빡임이 필수적으로 발생하고 이는 사용자 경험을 떨어뜨리는 큰 요인이다. 따라서 라우팅을 통해 부드러운 화면전환을 위해 사용된다. Router 종류 BrowserRouter : 별도의 서버 설정이 없다면 새로고침 시 404에러가 발생한다. :큰 프로젝트에 적합하다. :서버가 존재하고, SEO가 필요한 프로젝트라면 BrowserRouter를 사용하는 것이 좋다. React-Router-Dom React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리이다...
react 설정 하기 (리액트 환경 구축하기) ❔ React란? React는 UI를 더 쉽게 만들기 위한 JS 라이브러리라고 한다 단순히 UI를 쉽게 만들기 위해서 개발된 라이브러리. 그리고 '복잡한 태그들(태그들의 조합)을 사용자 정의 태그로 묶어서 다른 파일에서 사용하면 편하지 않을까?' 라는 생각에서 나온 개념이 바로 React라고 합니다 사용자 정의 태그 'Component' : React에서는 사용자 정의 태그를 'Component'라고 부릅니다 Component 사용의 장점 : 가독성↑ / 재사용성↑ / 유지보수가 용이 / 코드 복잡도↓ Toolchains : 개발자의 목표에 따라 필요한 개발환경, 도구 이런 것들을 모아서 한 번에 제공해주는 도구를 "Toolchain"이라고 부른다. npm : npm은 JavaScript 런타임 환경 N..