멀티캠퍼스 풀스택 과정170 프론트엔드 7-5. [React] port 번호 변경하기 react 프로젝트를 실행할 때, 기본적으로 3000번 포트번호로 실행된다. 만약 다른 포트 번호로 변경하고 싶다면? -> React 프로젝트 폴더에 "package.json" 파일에 있는 script를 수정한다. -> React 앱을 실행시킨다. ex) npm start나 npm run start "start" : "react-scripts start", -> "start" : "set port=원하는 폰트번호 && react-scripts start", 로 변경한다. 2022. 2. 19. 프론트엔드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. 프론트엔드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 ··· 5 6 7 8 9 10 11 ··· 29 다음
