728x90 리액트4 [React] SPA 그리고 React Router 🌈 SPA and React Router 💡 SPA -> Single Page Application : 전통적인 웹페이지 사이트는 페이지 전체를 로딩하고, SPA는 Menu, Footer 와 같이 페이지 전환 후 전후에 중복되는 페이지 부분은 새로 불러 오지 않는다. SPA 는 HTML 전체가 아닌 업데이트에 필요한 부분만 서버에서 전달받아 동적으로 HTML 요소를 화면에 보여준다. (Youtube, facebook, Gmail, airbnb, Netflix등 우리가 사용하는 다양한 서비스들이 SPA 방식으로 제작되어 있음.) - 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하기 때문에 사용자와의 Interaction에 빠르게 반응. - 서버에서 요청 받은 데이터만 넘겨주면 되기 .. 2022. 5. 10. [VS code] Module not found: Error: Can't resolve 'react-dom' in 해결방법 🌈 Module not found: Error: Can't resolve 'react-dom' in 에러 해결 방법 리액트 앱을 실행하려다 보니 모듈이 없다는 아래와 같은 에러가 발생하였다. 구글링 하다보니 생각보다 간단하게 해결할 수 있었다. npm install npm install 을 실행한후, 다시 npm run start 를 해줬더니 문제없이 앱 실행! 2022. 5. 7. <JavaScript> React 그리고 JSX 🌈 React 리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리 - 선언형 (Declarative) 리액트는ㅇ 한 페이지를 보여주기 위해 HTML/CSS/JS 로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. 직관적으로 코드를 짤 수 있다는 장점이 있다. 코드를 보고 실제 기능을 대충 떠올릴 수 있다. - 컴포넌트 기반 (Component-Based) 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에 기능 자체에 집중하여 개발할 수 있다. - 범용성 리액트는 자바스크립트 프로젝트 어디에든 유연하게 적용 가능. 페이스북에서 관리되어 .. 2022. 5. 6. [JavaScript] React 로 만든 웹페이지 실행하는 방법은? 🌈 React 실행하기 1. create-react-app 설치 npm install -g create-react-app 2. react project 생성 -> 원하는 이름으로 생성하면 된다. create-react-app test_app 3. 생성한 폴더로 이동 후 app을 실행시키면 아래와 같은 페이지가 생성된 것을 확인할 수 있다. cd test_app npm start 4. App.js 파일에 들어가 수정하고 save를 하면 자동으로 컴파일이 시작되어, 페이지가 자동으로 reload 되는 것도 확인할 수 있다. 이제 리액트 공부 준비 끄읕:D 2022. 5. 6. 이전 1 다음 728x90
