멀티캠퍼스 풀스택 과정/프론트엔드53 프론트엔드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. 프론트엔드6-3. [jquery 예제] review 기능과 게시판 기능 만들기 1. review 기능 textarea를 이용해서 100글자를 넘어가면 못쓰게 한다. 1. HTML 파일 남은 문자 수 : 100 textarea의 maxlength 값을 이용하면 손쉽게 제어할 수 있다. 2. js 파일 $(function(){ $("#review").keyup(function(){ let textlen = 100 - $("#review").val().length; $("#cnt").text(textlen); //$("#cnt").html(textlen); }); }); 입력할 때 이벤트 실행! keyup 2. board 기능 1. HTML 파일 게시판 목록 전체선택 번호 제목 작성자 조회수 등록일 100 제목1 sweet potato 0 02-16 12:10 101 제목2 potato.. 2022. 2. 17. 프론트엔드6-2. [jquery 예제] jquery를 이용해서 글자 크기 변경 단위가 px이든, em이든, cm이든 컴퓨터는 모두 px로 인식한다. 버튼을 눌러서 글자 크기를 작게 하거나 기본 크기로 하거나 크게 한다. 1. HTML 파일 - 0 + 게임·웹툰 등 일부 앱들은 이용자가 광고 영상을 수십초 재생하면 서비스를 무료로 제공한다.이 광고 모델을 기반으로 스마트폰 카메라를 이용해 사용자 눈을 추적한 뒤, 화면을 보지 않으면 광고 영상이 일시 정지되는 앱이 등장해 눈길을 끌고 있다. 바이스닷컴·기가진 등 외신에 따르면 ‘무비패스’라는 앱은 월정액 요금을 내면 하루 1개 영화를 볼 수 있는 서비스다. 하지만 회사가 어려워지면서 2019년 9월 서비스가 종료되고, 회사는 2020년 파산을 선언했다. 그 뒤 회사에서 쫓겨났던 공동 창업자인 스테이시 스파이크 씨가 무비패스를 인수, .. 2022. 2. 17. 이전 1 2 3 4 5 ··· 9 다음
