분류 전체보기 14

01-3. 리액트 앱 수정하기

src 폴더의 App.css 맨 아래에 다음 코드를 추가하여 스타일을 바꾼다. .. .title { font-style: italic; } 다음과 같이 src 폴더의 App.js의 두번째 줄에 다음 코드를 추가하여, 바뀐 스타일을 반영한다. import React, { Component } from 'react'; import './App.css'; // 스타일 반영 class App extends Component { render() { return ( 두잇! 리액트 시작하기 ); } } export default App; render() 함수 : 웹 브라우저에 출력되는 HTML을 반환. HTML의 스타일 클래스 이름은 자바스크립트 클래스(class) 키워드와 같으므로 리액트에서는 class가 아니라 ..

JavaScript & React 2023.09.25

01-2. 리액트 개발 환경 설치하기(2)

(1)에서 이어진다. 예제에 필요한 라이브러리 미리 설치하기 package.json 수정하기 * 현재 실습 중인 node 버전(18.18.0)과 호환되지 않아 진행이 안되었다. 우선 이 과정은 건너뛰고 바로 yarn을 실행했다. 이후에 문제가 발생한다면 그때그떄 접은글을 만들거나 해서 설명을 추가하겠다 { "name": "react-do-it-examples", "version": "0.1.0", "private": true, "dependencies": { "axios": "0.18.1", "enzyme": "^3.8.0", "enzyme-adapter-react-16.3": "^1.4.1", "moment": "^2.24.0", "next": "^8.1.0", "react": "^16.7.0", "r..

JavaScript & React 2023.09.25

01-2. 리액트 개발 환경 설치하기(1)

글이 길어져서 두 개로 나누었다. node 10 버전으로 실습해본 결과, node 호환성 문제로 create-react-app 모듈이 설치되지 않는다. 그냥 더 높은 버전으로 실습하도록 하자. NVM으로 node.js 설치하기 NVM 설치 우선 nvm을 설치한다. $ nvm -v 터미널에 위의 명령어를 실행했을 때, nvm이 설치되어 있다면 현재 설치되어있는 버전을 확인할 수 있다. NVM이 설치되어있지 않다면 아래의 주소에서 nvm-setup.zip을 내려받아 압축을 해제하고 설치 파일을 실행한다. https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management..

JavaScript & React 2023.09.25

01-1. 리액트의 정체를 알아보자!

https://github.com/justinpark/justin-do-it-react 리액트란? 리액트는 프론트 프레임워크 중 하나다. 현재 프론트 프레임워크로는 리액트, 앵귤러, vue.js를 많이 사용하고 있다. React 높은 사용률 코드 블록(컴포넌트)을 조합하여 효율적인 화면 구성 가상 화면 기술(Virtual DOM) 도입: 화면 출력 속도 빠름 Angular 완성형 framework 지향 Vue.js 다른 프레임워크의 장점 흡수, 단점 보완 더보기 프레임워크: 개발자가 작업을 할 때 사용하는 tool. vs 라이브러리: 하나의 기능을 제공함, 개발자가 필요할 때 가져와서 사용. 리액트는 다른 프레임워크와는 달리 오로지 ui를 만드는 기능만을 제공하기 때문에, 프레임워크와 유사한 역할을 하는..

JavaScript & React 2023.09.24