리액트32 [React] 리액트에서 사용하는 JSX 2020.08.18 - [웹 프론트엔드/React 리액트] - [React] 리액트 개발환경 구축 2020.09.09 - [웹 프론트엔드/React 리액트] - [React] 리액트 테스트 앱 생성 및 수정 간단한 JSX 사용해보기 JSX (JavaScript XML)는 자바스크립트에 XML을 추가 확장한 문법입니다. HTML에서 XML로 다시 JS + XML이 바로 JSX입니다. 참 간단하죠? 상기한 테스트앱 생성 글을 기반으로 JSX 사용해보겠습니다. 먼저 App.js 파일을 열고 하기와 같이 수정합니다. // ..\test_project\src\App.js import React, { Component } from "react"; class App extends Component { render().. 2020. 9. 11. [React] 리액트 테스트 앱 생성 및 수정 리액트 개발환경 구축이 안 된 분들은 아래 링크 참조 2020.08.18 - [웹 프론트엔드/React 리액트] - [React] 리액트 개발환경 구축 1. 테스트 프로젝트 생성 및 구동 예시는 윈도우 환경과 상기한 개발환경이 구축됐다는 전제로 쓰겠습니다. 먼저 명령 프롬프트(cmd)를 열고 하기와 같이 입력합니다.(프로젝트명은 test_project) yarn create react-app test_project 이런 식으로 기본 프로젝트 골격이 자동으로 완성됩니다. 그다음은 프로젝트 루트 폴더(test_project) 이동해서 yarn start 기본 포트는 3000번이지만 사용중일 경우 다른 포트 번호도 기동 가능합니다. 본인이 사용하는 기본 브라우저에 로컬호스트 주소로 위 화면처럼 나오면 성공! .. 2020. 9. 9. [ES6] 전개 연산자(spread operator) 사용법 2020.09.05 - [웹 프론트엔드/자바스크립트] - [ES6] 객체 확장 표현(Destructuring) 및 구조 분해 할당 배열 전개 연산자 ES6에서 새로 나온 문법으로 굉장히 중요하면서 강력한 기능입니다. 기존 배열 요소를 다룰 때는 index를 사용해 풀어쓰거나, 내장 메서드를 사용했지만 전개 연산자를 사용하면 간단하게 내용을 전달하고 표현할 수 있습니다. 기존 배열 요소 사용법과 전개 연산자 도입 비교 // 기존 var array1 = [1, 2]; var array2 = [3, 4]; var arrayNew = [array1[0], array1[1], array2[0], array2[1]]; // ES6 var arrayNew = [...array1, ...array2];// 참 간단하죠.. 2020. 9. 5. [React] Visual Studio Code 및 관련 플러그인 설치 비주얼 스튜디오 코드 설치 https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications. code.visualstudio.com 1. Reactjs code snippets 플러그인 설치 기본적인.. 2020. 8. 21. [React] 리액트 개발환경 구축 1. 노드 버전 매니저 (NVM) 설치 리액트는 javascript 기반이라 노드제이에스(Node.js) 런타임으로 돌리겠습니다. 그래서 편하게 NVM 깔고 버전 관리하면서 구축하는 방향으로 고고~! https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com 여기 들어가서 Assets에 있는 nvm-setup.zip 설치 2. NVM 설치 확인하기 명령 프롬프트 (윈도우면cmd) 열어서 > nvm -v Runn.. 2020. 8. 18. 이전 1 2 3 4 다음
