NOW OR NEVER

React의 class 형 Component 제작 기본 패턴 React란? 코드 양이 많을 경우 한 눈에 코드가 들어오지 않고 혼란스러운 상태를 초래한다. 이를 하나의 태그로 줄여주는 역할을 하는 것이 React이다. 웹브라우저는 이세상에 react라는 기술이 있는지 모른다. 왜냐하면 react는 그냥 사람들이 짜는 코드이고 react가 최종적으로 웹브라우저한테 html 코드를 공급해주기 때문이다. react는 JSX 언어이다 React의 js에서 짜는 코드들은 유사 Javascript이다. react에서 짠 코드를 javascript로 작성할 경우 에러가 발생한다. 왜냐하면 js의 경우 tag를 표현하는 부분들을 따옴표 등을 활용하여 잘 작성해야 하는데 react의 경우 그냥 tag를 작성해도 잘 동작..

React Sample Web App에 관하여 1. create react app이 기본적으로 제공하는 샘플 웹앱 실행 npm run start / npm start : create react app으로 개발환경을 만들고 난 후 npm run start 혹은 npm start을 terminal에 작성해 실행할 수 있다. 개발을 할 때 접속해서 개발 중인 앱을 확인하기 위한 주소(이 주소들 중 하나로 들어가면 확인 가능) Local: http://localhost:3000 On Your Network: http://192.168.35.217:3000 처음 실행했을 때 웹브라우저 상에 보여지는 앱은 create react app이 가장 최소한의 앱을 미리 구현해서 보여주는 앱 이다.(즉 react 기술로 만..

create react app을 활용한 개발환경 구축 순서 : npm 설치 -> create react app 설치 -> create react app 사용 1. node js 설치 npm은 node js로 만들어진 프로그램들을 쉽게 설치해 주는 일종의 앱스토어이므로 node js를 먼저 설치 설치 : https://nodejs.org/en/ LTS : 안정화 된 것 / current : 가장 최신 버전 2. npm node js 설치 시 자동으로 같이 설치됨 window에서 설치 확인 window key + R (실행 창 열기) cmd 입력해서 cmd 열기(cmd : commend의 약자로 명령어라는 뜻, 컴퓨터를 명령어를 통해서 제어하는 프로그래밍으로 즉 말로 제어하는 방법이다) cmd에서 npm -..

React 공식 문서 사이트 https://ko.reactjs.org/docs/getting-started.html 개발 환경 종류 online playground : 자기컴퓨터 세팅하는 건 까다로운 일, code sandbox 등 에서 리액트를 구현해볼 수 있는 온라인 사이트 add react to a website 이미 웹사이트를 가지고 있는 데 처음부터 끝까지 리액트로 만드는 것이 아니라 부분적으로 리액트를 추가하고 싶을 때 사용하는 옵션 시작하기는 쉽지만 뒤로 갈수록 개발환경을 직접 구축해야하는 어려움들이 많기 때문에 초급 개발자에겐 사용하기 까다로운 옵션 create a new react app Toolchains 리액트로 개발할 때 목표가 무엇인가에 따라서 그목표를 달성하기 위한 개발 환경, ..