반응형 웹서비스 개발/React-App 개발17 Component 작성 아래는 일반적인 HTML 코드 이다. WEB world wide web! > HTML CSS JavaScript HTML HTML is HyperText Markup Lang. > > 컴포넌트를 만들기 위해 App.js의 class를 다루면 될 것이다. - 이 class 는 component를 상속받아 동작하는 클래스이다. - 자바스크립트의 최근 버전에서는 class 안에 있는 function은 function을 적지 않고 사용한다. - 컴포넌트는 반드시 하나의 최상위 태그로 시작해야 한다. React가 컴포넌트화 된 것을 자동으로 웹브라우저가 인식할 수 있는 코드로 바꾸어 준다. - 웹 브라우저는 React의 존재를 모른다고 생각해도 된다. - console 에서 class를 실행시켜 보면 문법 오류가.. 2021. 4. 24. CSS 수정 및 배포 CSS 수정 index.js 파일을 보면 index.css 파일을 import 한것을 볼 수 있다. index.css 파일에서 css파일을 수정할 수 있다. 배포 개발환경을 실행시킬 때 쓴 커맨드 npm run start Production 모드의 앱을 만들때 (Build) npm run build 위 동작을 수행한다면, build 폴더에 index.html 파일이 새로 생긴다. 이 파일은 개발환경때 쓴 파일보다 큰 차이로 용량이 줄어든다. 이 파일은 실제로 서비스 할 때 사용 할 수 있는 html을 만들어주는 커맨드이다. 2021. 4. 24. JS 코딩 VS CODE를 이용해 해당 html 페이지를 열었다. VS CODE의 Terminal에서 npm run start 명령어를 통해 실행한다. 이 웹 페이지는 public의 index.html로 이루어져 있는것이다. 이 웹페이지의 내용을 고치기 위해서는 id가 root라는 파일을 수정해야 한다. 이 해당하는 파일은 src 폴더의 index.js이다. 또한 App 태그는 사용자 정의태그인 컴포넌트 이다. App.js파일은 function type과 class type을 사용할 수 있는데, 본인은 class type을 이용하려고 한다. import React, {Component} from 'react'; import './App.css'; class App extends Component { render().. 2021. 4. 22. React 개발환경 구축 NPM 설치 node.js를 통해 npm을 설치한다. https://nodejs.org Create React App 설치 실행 -> CMD npm install -g create-react-app - npx 와의 차이점은, npx는 실행할 때 마다 설치하고, 최신버전을 사용하게 됨. - npm 은 컴퓨터에 설치한다. Create React App을 이용해 개발환경 구축 1. 바탕화면에 react-app 폴더 생성 2. cd react-app 폴더 경로 : 폴더를 명령 프롬프트로 드래그하면 자동으로 경로 출력 3. create-react-app . - . 을 꼭 입력할것!! VS Code 사용 2021. 4. 21. React란? React 페이스북에서 발표한 사용량 1위의 웹 라이브러리이다. JavaScript와 HTML을 합친 JSX(JavaScript XML)라는 문법을 사용한다. - 이 문법으로 인해 기존 방식보다 코드를 작성하는데 간편하다는 장점이 있다. React의 장점 SPA · 최근 웹은 ‘웹 애플리케이션’이라고 불릴 정도로 복잡하고 동적이다. · 동적인 웹 페이지가 늘어나면서 웹의 크기가 커졌기 때문에 서버와의 통신 속도가 느렸다. · 하지만 리액트는 SPA 방식을 지원하기 때문에 기존 웹 방식보다 속도가 빠르다. · SPA란 HTML, CSS, Javascript 파일을 최초 1회만 로드하고, 이후에는 필요한 부분만 조작하는 방식이다. - SPA 지원: React, ES6, Node.js, npm, webpack.. 2021. 4. 20. 이전 1 2 3 다음 반응형
