[ 생활 코딩 - react ] (4) JS 코딩하는 법 / CSS 수정 / 배포(build, 서비스 시 용량 줄이기)

[ JS 코딩하는 법 ] 1. Visual Studio Code를 연 후 [File] - [Open Folder] - [리엑트 개발환경이 구축된 폴더] 를 열어준다. 2. 해당 폴더를 열고 왼쪽 상단에 종이 두장이 그려진 카테고리를 누르면 다음과 같이 디렉토리가 나온다. 여기서 public이라는 폴더는 index.html이 있는 곳이다. index.html은 저번 시간에 서버를 돌렸을 때 웹브라우저에 뜨는 페이지이다. 3. index.html에서 볼 부분은 31번째 이다. 편집기에서는 이게 끝이지만 서버를 실행 후 브라우저에서 F12를 누르고 Elements 부분에서 다음 부분을 확인하면 APP이라는 부분이 들어가 있는 것을 확인할 수 있다. 이 부분은 public폴더와 같은 위치인 src 폴더의 소스에..

• format_list_bulleted 프로그래밍/생활코딩
• · 2020. 12. 28.
• textsms

[ 생활 코딩 - react ] (3) 샘플 웹앱 실행

Editor는 Visual Studio Code를 사용할 것이다. 1. 편집기를 실행하고 리액트 개발환경을 구축했던 폴더에 진입하여 npm run start를 입력하면 다음과 같은 웹 브라우저 창이 뜬다. 서버를 멈추고 싶을 때엔 ctrl + C를 누르면 멈추고, 다시 실행시킬 때엔 npm run start을 입력하면 된다.

• format_list_bulleted 프로그래밍/생활코딩
• · 2020. 12. 28.
• textsms

[ 생활 코딩 - react ] (2) 개발 환경 구축

npm : node.js를 이용한 여러 앱들을 설치 가능하게 해주는 도구. 1. Node.js 홈페이지에서 node.js를 설치해준다. 왼쪽은 안정화된 이전 버전, 오른쪽은 최신 버전이다. 2. 윈도우키 + R을 눌러서 실행 프로그램이 뜬다. 그곳에 cmd를 검색하여 실행해준다. (윈도우키를 누르고 cmd를 검색한 후 ctrl+shift+enter를 누르면 관리자 모드로 열린다.) 명령창에 npm -v 를 입력한다. [ 1. npm을 사용하는 방법 ] npm install -g create-react-app 를 입력하여 리액트 앱을 만들어 준다. [ 2. npx를 사용하는 방법 ] npx install -g create-react-app 를 입력하여 리액트 앱을 만들어 준다. npm과 npx의 차이점 n..

• format_list_bulleted 프로그래밍/생활코딩
• · 2020. 12. 28.
• textsms

[ 생활 코딩 - react ] 1. React에 대해서..

React : 페이스북 닷컴 UI를 더 잘 만들기 위해서 페이스북에서 만든 자바스크립트 UI 리엑트가 가지고 있는 기술 중 하나로 사용자 정의 태그를 만들어 사용할 수 있다. => 컴포넌트 1. 가독성을 높임. 2. 재사용성 3. 유지보수가 편리해진다 [ 리엑트 시뮬레이션 사이트 ] codesandbox.io/s/new?file=/src/App.js React - CodeSandbox React example starter project codesandbox.io codepen.io/pen?&editors=0010 Create a New Pen ... codepen.io stackblitz.com/edit/react-rpzzlq react-rpzzlq - StackBlitz Starter project ..

• format_list_bulleted 프로그래밍/생활코딩
• · 2020. 12. 28.
• textsms