분류 전체보기407 프론트엔드7-4. [React] App.js를 통해서 화면 구성 react 프로젝트 생성 ( VS code에서) : Node.js와 react가 설치되었을 때 1. create-react-app 새로 만들 프로젝트명(폴더명) 폴더명을 적을때는 카멜 규칙은 안된다! ex) myReact xx my-react ok 2. 터미널에 새로 만든 프로젝트 경로까지 이동(cd 파일명) npm run start (npm start도 가능하다..) 3. React App 창이 뜨면 성공! 1. App.js에서 화면 구성해보기 리액트에서 함수 생성하기 function App() { // 리액트에서 함수 생성하기 function myWelcom(){ let hello = "안녕하세요"; if(true){ let hello = "hello!"; console.log(hello); } co.. 2022. 2. 19. Something is already running on port 3000 문제 상황 react를 쓰는데 npm runt start로 실행하려고 했더니? Something is already running on port 3000 Would you like to run the app on another port instead? 이게 나왔다.. 이뜻은 3000번 포트를 이미 실행시키고 있기 때문에 다른 프로젝트가 포트를 사용할 수 없다는 것이어서 3000번 포트를 죽여야 한다. 1. 특정 포트 검색 : netstat -ano netstat명령어를 통해 찾고 있는 port의 PID를 알아낸다. find 명령어와 함께 사용하면 쉽게 특정 포트를 확인할 수 있다. netstat -ano | find "3000" 이렇게 하면 출력된 결과 중 "3000"이 포함된 부분만 출력된다. 2. 특.. 2022. 2. 19. 프론트엔드7-3. [React] CDN 방식으로 화면 구성 1. React 사이트에 접속해 CDN 주소 복사하기 https://reactjs.org/docs/cdn-links.html#gatsby-focus-wrapper CDN Links – React A JavaScript library for building user interfaces reactjs.org 2. Babeljs 사이트에 접속해 CDN 주소 복사하기 https://babeljs.io/docs/en/babel-standalone Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io babel이 필요한 이유는 JSX타입을 감지해서 컴파일 할 때 JS코드로 바꿔주.. 2022. 2. 18. 프론트엔드7-2. React의 구조(index.html, App.js, index.js) https://everysmallstep.tistory.com/195 프론트엔드7-1. React 설치 (Node.js 설치) 1. 노드.js 설치법 (세팅법): react를 설치하기 위해서 node.js를 먼저 설치한다. https://nodejs.org/en/ 16.14.0 LTS 다운로드 (버전이 중요하기 보단 LTS 다운하면 된다) 다운받은거 실행하고 next-> next해서.. everysmallstep.tistory.com VS code에서 react 실행하는 방법 Terminal > reactSrc 폴더로 이동 > npm start (이미 앞에서 프로젝트를 생성해놓았다.) index.js src 폴더에 있으며 메인프로그램이다. 서버가 실행될 때 index.js로 된다. 여기에서 HTML 템플.. 2022. 2. 18. 프론트엔드7-1. React 설치 (Node.js 설치) 1. 노드.js 설치법 (세팅법): react를 설치하기 위해서 node.js를 먼저 설치한다. https://nodejs.org/en/ 16.14.0 LTS 다운로드 (버전이 중요하기 보단 LTS 다운하면 된다) 다운받은거 실행하고 next-> next해서 마무리한다. window powershell을 관리자 권한으로 실행하여 get-help Set-ExecutionPolicy 를 치고 모듈 다운로드 하겠냐고 물으면 Y를 쳐서 업데이트 시작한다. 2. 리액트 설치(세팅)하는 방법 cmd 관리자 실행 npm install -g create-react-app Npm이란 nodejs를 이용해 만든 여러 앱들을 명령어 환경에서 쉽게 설치할 수 있도록 도와주는 도구로 node.js계의 앱스토어 역할을 하는 SW.. 2022. 2. 18. 프론트엔드6-4. jquery플러그인 easing/checkeditor/ bxslider / dialog 1. easing : animate를 줄 때 움직이는 모양 https://api.jqueryui.com/easings/에서 실행결과를 볼 수 있다. http://jqueryui.com/download/all/ jQuery UI 1.13.1 (concatenated JS and CSS files) 위의 링크에서 다운로드 HTML에서 필요한 파일 1. jquery-ui.min.css 2. jquery 3. jquery-ui.min.js https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> 2. checkeditor : 웹사이트 게시판에 글을 쓸 때 사용하는 편집툴 https://ckeditor.com/ckeditor-4/download/에서.. 2022. 2. 18. 이전 1 ··· 37 38 39 40 41 42 43 ··· 68 다음
