본문 바로가기

Programming/React14

[1] JSX 기본 문법 JSX JSX는 HTML이랑 비슷하지만, 지켜야 할 규칙이 몇가지 있음 React 개발을 쉽게 하기 위해, HTML과 비슷한 문법으로 작성하면 React.createElement를 사용하는 자바스크립트의 형태로 변환해줌. 1. 태그는 꼭 닫혀있어야 함 #한 번 열은 태그를 그 자리에서 바로 닫는다. 2. 두 개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 함. 안뇽1 안뇽2 근데 구찮게 이렇게 div로 꼭 감싸주어야하나?! 뭔가 불필요해 보인다. => 이런 문제를 해결하려면 Fragment로 감싸주면 된당! import React, { Component, Fragment } from 'react'; class App extends Component { render() { return ( 안녕.. 2020. 7. 6.
[React] Webpack, Babel이란? Webpack 코드들을 의존하는 순서대로 잘 합쳐서 하나 또는 여러 개의 파일로 결과물을 만들어냄 파일을 하나 하나 만든 것들을 HTML에서 매번 불러오는게 아니라, js에서 import한 것들을 bundling작업을 하게될 때 특정 확장자마다 어떠한 처리 작업을 하도록 준비를 해줌. 이미지들을 압축하고, 그 결과물로는 특정 경로에 특정 이름으로 저장하게끔 만들 수 있음. js파일을 여러 개 만들었을 때, 나중에 합쳐서 하나의 파일로 만들어줌. (나중에 원하면 규칙에 따라 분리시켜줄 수도 있음) 추가 : 우리가 나중에 ES6를 사용할건데, 구형 브라우저에서 지원이 안되는 경우가 있음. 그래서 새로운 문법을 사용할 수 있게끔 나중에 Babel을 사용함. js파일이 여러 종류의 브라우저에서 사용될 수 있게!.. 2020. 7. 6.
리액트 기초 리액트로 프로젝트를 생성하면, node_modules, public, src 폴더가 생긴 것을 알 수 있다. 뭐, 우리는 node_modules나 public 을 거의 건드리지는 않을거고, 거의 src 안의 파일들을 건드리게 될 것이당! 케케 하지만 먼저 public 폴더의 index.html을 보자.우리가 알던 흔한 html의 파일과는 쬐금 다르다. yarn start를 하면 분명 이렇게 페이지가 켜지는데, DOCTYPE html> React App index.html 을 보면 아무 내용이 없고, body 안에 root라는 id를 가진 div 하나만이 있는 것을 볼 수 있다. >>ㅑ 짱신기 일단 신기한 걸 제외하고, src 폴더 안의 파일들을 보면 App.css,App.js,App.test.jsinde.. 2018. 6. 16.
로컬에서 리액트 개발환경 세팅하기 1. Node.js를 설치한다.2. git을 설치한다. (xcode가 있으면 다운 안받아도 된당)3. 터미널을 연다. (윈도우는 git-bash 실행)4. `sudo npm install create-react-app -g`5. `sudo npm install yarn -g`6. `create-react-app testapp`7. `cd testapp`8. `yarn start`그럼 시작한다앗!!! 2018. 6. 16.
react 시작하기 1. Web 과 Application 의 차이 웹은 설치하지 않아도, 브라우저를 통해 볼 수 있고,어플리케이션은 설치를 해야만 실행할 수 있다. 2. 검색, 과거와 현재 우리가 웹에서 검색을 하게 되면, 과거에는 1. http 요청2. http 응답3. 리소스 다운 (index.html, css, js, image file.. )4. 해석5. 렌더6. 노출이런 형식으로 웹이 작동해서 우리가 볼 수 있었다. 하지만 현대에는 1. http 요청 (필요한 것만!)2. http 응답 - 데이터 (json, xml.. )3. html 그리기 (js로) [이게 새로 생김!]=> 이걸 "뷰" 라고 부른다! => 요걸 효율적으로 바꾸었음 좋겠다, 해서 나온게 vue, polymar, angular, react.. 등등.. 2018. 6. 16.