본문 바로가기

생활코딩85

[생활코딩-React] 리액트가 없다면 [출처 : Youtube - 생활코딩] https://youtu.be/QG4RxNHz-bc?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 아래의 코드를 WEB world wide web! 이렇게 바꾸면 훨씬 더 편리할 것이다. 이것을 해주는 기술이 React이다. 2021. 5. 28.

[생활코딩-React] 배포하는법 [출처 : Youtube - 생활코딩] https://youtu.be/E_-ua6uCQOU?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi '캐시 비우기 및 강력 새로고침'을 누른다. 전체 용량이 1.7MB나 된다. (React가 개발의 편의성을 위해 여러가지 기능을 추가해놔서 create-react-app은 파일의 무게가 상당히 무겁다) 그러나 용량이 커서 보안쪽의 문제가 생길 수 있어서 완성한 후에는 npm run build 라는 명령어를 쓴다. 터미널에 npm run build를 입력하면 build라는 폴더가 생성된다. build 폴더 안에 index.html 파일로 들어가면 아래와 같이 공백이 하나도 없는 복잡한 코드가 있다. 이유는 create-react-app이 inde.. 2021. 5. 28.

[생활코딩-React] CSS 코딩하는 법 [출처 : Youtube - 생활코딩] https://youtu.be/FbNvDu-XTVg?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi CSS는 index.css에서 수정할 수 있다. 2021. 4. 21.

[생활코딩-React] JS 코딩하는 법 [출처 : Youtube - 생활코딩] https://youtu.be/LEPiRfPD9Uw?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi public index.html 파일이 있는 곳임. index.html 안에 id가 root인 곳 태그 안쪽에 컴포넌트가 들어가도록 create-react-app은 약속했음. src 컴포넌트는 src 안에 있는 파일들을 수정해서 만듬. 앞으로 개발작업을 하게되면 대부분의 파일을 src 안에 넣게 될 것임. 그중에서 entry파일, 즉 진입파일은 index.js 파일임. 위에 밑줄 친 부분을 기반으로 해서 public의 index.html 파일을 수정한다. 위에 밑줄 친 은 react를 통해 만든 사용자 정의 컴포넌트이다. 저 컴포넌트의 실제 구.. 2021. 4. 19.

[생활코딩-React] 샘플 웹앱 실행 [출처 : Youtube - 생활코딩] https://youtu.be/O58tOX0CtoY?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi terminal을 실행한 후 다음과 같이 명령어를 입력한다. npm run start 실행하면 아래와 같은 창이 뜬다. ★npm을 끄고싶을땐 ctrl + c 를 입력한다. 2021. 4. 19.

[생활코딩-React] create-react-app을 이용해서 개발환경구축 [출처 : Youtube - 생활코딩] https://www.youtube.com/watch?v=C9l-dQTeW7k&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=5 1. 먼저 Node.js와 create-react-app을 설치한다 (설치&세팅법 카테고리에 있음) 2. react-app이라는 폴더를 생성한다. 3. cmd 창을 띄우고 경로를 react-app 폴더로 설정한다. 그리고 다음과 같이 명령어를 입력한다. create-react-app . ★주의 create-react-app이 최신버전이 아니면 최신버전으로 재설치해야함!! 설치 : npm install -g create-react-app 제거 : npm uninstall -g create-react-app.. 2021. 4. 18.

이전 1 2 3 4 5 ··· 15 다음

티스토리툴바