[Git] React 프로젝트 github pages에 호스팅 하기
2022. 5. 31. 13:53
공부
Repository 만들기 난 당연히 공개할 것이기 때문에 Public으로 설정 했다. 프로젝트에 Git 연결부터 Push 까지 생성된 저장소 주소를 복사 해놓은 뒤에 내 프로젝트의 터미널에 아래 커맨드를 순서대로 실행했다! Git init git add * git commit -m 'commit message' git remote add origin http://git저장소주소.git git push -u origin master 위에서 아래 순서로, [ git 설치 - gitignore 리스트 제외하고 전부 추가 - commit message 작성 - git저장소 연결 - master로 push ] Github pages 배포하기 gh-pages 설치 npm install gh-pages --save..
[React] YTS API로 영화 소개 페이지 만들기(3) - React Slick (slide)
2022. 5. 31. 02:37
공부/JavaScript
React Slick install 저번 포스팅에서 작성했지만 다시 한 번 제대로 정리해야겠다! npm i react-slick import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; 설치 후 css까지 import 했다. 사용법 우선 가이드에 따르면 아래와 같이 적용한다. export default class SimpleSlider extends Component { render() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScro..
[React] YTS API로 영화 소개 페이지 만들기(2)
2022. 5. 31. 02:14
공부/JavaScript
상세 페이지 만들기 function MovieDetail( { title, genres, description, rating, runtime, bgImg, coverImg, }){ return( {title} Rating: {rating} / 10 {genres.map(item=>`${item}`).join(`/`)} Runtime: {runtime} minute {description} ) } 상세 페이지에 쓸 커버 이미지와 rating, genres, runtime을 넣어주고 하단에 줄거리를 출력하기 위해 description을 사용했다. 로딩 페이지 만들기 내가 만든 로딩 페이지는 사실상 로딩 gif를 화면에 출력하는 것 밖에 없다... import React from "react"; import ..
[React] YTS API로 영화 소개 페이지 만들기(1)
2022. 5. 31. 02:01
공부/JavaScript
YTS Movie api로 영화 소개 페이지를 만들었다. 복습할겸 다시 정리해보려고 한다. React 프로젝트 생성 CRA를 이용하여 프로젝트를 생성했다. npx create-react-app yts-movie Install React-router-dom, Import npm i react-router-dom import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' react-router-dom 설치 후 import 해주었다. 노마드코더 강의에서는 react-router-dom V5 로 진행하여 Switch를 사용하는데, V6 로 업데이트 되면서 Switch 대신 Routes로 바뀌었다. 3. 컴포넌트 생성 홈 페이지에서 상세 페..
[React] 리액트 프로젝트 생성
2022. 3. 16. 20:46
공부/JavaScript
프로젝트 생성 npx create-react-app project-name 해당 디렉토리로 이동 cd project-name 실행 npm start //npm 사용시 yarn start //yarn 사용시 기본 포트는 3000이므로 localhost:3000으로 접속한다.
[JS] JSON 메서드, JSON 배열
2022. 1. 30. 15:27
공부/JavaScript
JSON JSON은 자바스크립트의 객체 표기법을 제한하여 만든 텍스트 기반의 데이터 교환 표준이다. JSON 메서드 자바스크립트에선 아래와 같은 JSON 데이터 처리를 위한 메서드를 제공하고 있다. JSON.stringify(), JSON.parse(), toJSON() JSON.stringify() : 인수로 전달받은 자바스크립트의 객체를 문자열로 변환 후 반환한다. JSON.parse() : 인수로 전달받은 문자열을 자바스크립트의 객체로 변환 후 반환한다. toJSON() : 자바스크립트 Date 객체의 데이터를 JSON 형식의 문자열로 변환 후 반환한다. 따라서 Date.prototype 객체에서만 사용할 수 있다. JSON 배열 var personList=[ {name:'박덕팔',age:20,he..
[JS] 사용자 정의 객체
2022. 1. 30. 15:13
공부/JavaScript
자바스크립트에서는 내장된 객체를 사용하기도 하지만 사용자가 직접 객체를 정의할 수도 있다. var person={ name:'김철수', age:20, height:170, introduce:function(){ document.write("이름:"+this.name," ") document.write("나이:"+this.age," ") document.write("키:"+this.height," ") } } person.introduce()
[JS] 1차원 동적배열
2022. 1. 30. 15:10
공부/JavaScript
자바스크립트 배열은 단순 배열이 아닌 배열 객체이다. 길이도 자유자재로 변경이 가능하다. var score=new Array(0) var num=prompt("과목 갯수 입력") num = Number(num) var input = 0 var total = 0 for(i=1; i
[JS] 관계 연산자
2022. 1. 15. 19:07
공부/JavaScript
관계 연산자(또는 비교 연산자)는 관계를 판별하는 연산자이다. const num1=9 const num2=2 const result=(num1>=num2) 사용 부호는 >=, , = num2 즉, num1이 num2 이상이다라는 말이 된다. 여기서 num1이 num2 이상인가에 대해 의문문을 사용하여 관계를 물어보고 큰지 작은지 판별한다. 결과가 참이면 전체가 true로 바뀌고 거짓이면 false로 바뀐다. 아래는 여러가지 경우이다. num1>=num2 : num1이 num2 이상인가? num1>num2 : num1이 num2 보다 큰가? num1