반응형 언어공부/JS&TS&React16 [React]Material-kit-react-main 활용 프로젝트 만들기 src폴더 App.js 파일 다음과 같은 코드로 theme과 style을 받아옴 Theme의 경우 { ThemeProvider } from '@material-ui/core'; 를 import 하여 사용 index.js 파일 App 컴포넌트 import 하여 사용함 해당 파일을 public폴더의 index.html 파일의 div id="root" 에서 사용 더보기 route.js 파일에 경로 정보 작성되어있음 경로에 따라 DashboardLayout과 MainLayout으로 레이아웃 구성이 달라짐 BrowserRouter 사용 => 경로, 라우팅 관련 추후 추가 공부할 것 (같은 경로 내 routes.js, serviceWorker.js 파일 추후 추가 공부할 것) src/theme 폴더 index.js.. 2021. 6. 9. package-lock.json 이란, 필요한 이유 package-lock.json 파일은 npm을 사용해서 node_modules 트리나 package.json 파일을 수정하게 되면 자동으로 생성되는 파일입니다. 이 파일은 파일이 생성되는 시점의 의존성 트리에 대한 정확한 정보를 가지고 있습니다. PACKAGE-LOCK.JSON이 필요한 이유 package.json 파일의 의존성 선언에는 version range가 사용됩니다. version range란 특정 버전이 아니라 버전의 범위를 의미합니다. 가장 흔한 예로 npm install express를 실행하게 되면 package.json 파일에는 “^4.16.3”(Caret Ranges)로 버전 범위가 추가됩니다. 저 package.json 파일로 npm install을 실행하면 현재는 4.16.3 버.. 2021. 6. 9. [React 문서] State and Lifecycle, 이벤트 처리 함수에서 클래스로 변환하기 function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } function tick() { ReactDOM.render( , document.getElementById('root') ); } setInterval(tick, 1000); 함수에서 클래스로 변환하기 다섯 단계로 상기의 Clock과 같은 함수 컴포넌트를 클래스로 변환할 수 있습니다. React.Component를 확장하는 동일한 이름의 ES6 class를 생성합니다. render()라고 불리는 빈 메서드를 추가합니다. 함수의 내용을 render() 메서드 안으로 옮깁니다. render() 내용 안에 있는 pro.. 2021. 6. 3. [JavaScript] setTimeout과 setInterval, var 와 let 과 const의 차이점 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 합니다. 호출 스케줄링을 구현하는 방법은 두 가지가 있습니다. setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법 setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법 setTimeout이 함수를 단 한 번만 실행하는 것과 달리 setInterval은 함수를 주기적으로 실행하게 만듭니다. *setTimeout function sayHi() { alert('안녕하세요.'); } setTimeout(sayHi, 1000); *setInterval // 2초 간격으로 메시지를 보여줌 let timerId = setInterval(() .. 2021. 6. 2. [React 문서] JSX, 엘리멘트 렌더링, Component와 Props (주요 개념 1~4) 가장 단순한 React 예시 ReactDOM.render( Hello, world!, document.getElementById('root') ); JSX 소개 const element = Hello, world!; 위에 희한한 태그 문법은 문자열도, HTML도 아닙니다. JSX라 하며 JavaScript를 확장한 문법입니다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. JSX란? React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는.. 2021. 6. 2. [React 생활코딩] 1. 소개 및 개발환경 리액트의 장점 가독성 재사용성 유지보수 컴포넌트를 중심으로 현대적인 웹애플리케이션 UI를 만들 수 있다. Coding -> Run -> Deploy 의 순서로 배울 것 React 공식문서 홈페이지 활용하기 https://reactjs.org 실습을 위한 개발환경 셋팅 1. Nodejs 설치파일 다운로드 후 실행 https://nodejs.org/ko/ 2. npm 이용하여 Create React App 설치 cmd창에서 npm -v 입력 후 버전확인 npm install -g create-react-app 입력하여 설치 후 create-react-app -v 입력하여 버전확인 3. react-app 디렉토리 설정 및 실행 react-app 디렉토리 생성 cd C:\react-app 입력하여 해당 디렉토리.. 2021. 6. 2. 이전 1 2 다음 반응형