코딩기록

영화 등장인물 api를 받아와서 슬라이드로 만들었다. 원래 슬릭은 사용해본적이 없어서 swiper를 이용해서하려다가 화살표 바깥으로 빼는게 리액트로하기엔 좀 번거로울 것 같아서 슬릭을 사용해봤다. 슬릭을 설치해주고,, import React from 'react'; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import styled from 'styled-components'; import { API_IMG } from '../../API' import empryIcon from '../../image/icon/empty.png' ..

뭐라고 해야할지,, 하트 아이콘,, 찜,, import React from 'react' import { useState } from "react" import styled from 'styled-components'; import icon1 from '../../image/icon/icon_heart_1.png' import icon2 from '../../image/icon/icon_heart_2.png' function Addwish() { const [Wish, setWish] = useState(true); const wishClick = () => { setWish(!Wish); } return ( ) } export default Addwish const WishIcon = styled.bu..

function StarRating(props) { const AVR_RATE = Math.round(props.voteAverage * 10) ; // 평점 const STAR_IDX_ARR = ['first', 'second', 'third', 'fourth', 'last']; //별의 고유 아이디 const [ratesResArr, setRatesResArr] = useState([0,0,0,0,0]); //별점 리스트 상태 const calcStarRates = () => { let tempStarRatesArr = [0,0,0,0,0]; //임시리스트 let starVerScore = (AVR_RATE * 70) / 100;//별의 width가 14이므로 14*5=70, 100점 만점인 현재와 ..

홈화면 메인 이미지는 인기 1순위의 영화로 해놨지만 지금 1위 포스터가 무서워서 잠시 바비로 바꿔놨다,, 그리고 귀여운 엘리멘탈 노마드 코더 리액트 강의를 듣고 페이지를 좀 더 꾸며보려다가 https://www.youtube.com/watch?v=e8xMcMXqYGw&list=PL9a7QRYt5fqkowXUgTj_tbkFClsPhO5XV 강의를 발견해서 참고하면서 만드는 중이다. 나름 재밌음 ㅎㅎ

const food = [1,2,3,4] food.push(5); const food = [1,2,3,4]; [...food, 5]; 리액트 강의 들을 때 헷갈렸던 부분 왜 push를 사용하지 않고 전개 연산자를 사용하는지? 결과가 같아 보일 수 있지만 .push()를 사용하면 food 배열이 [1,2,3,4,5]로 변경되는 반면 전개연산자 ...food를 사용하면 기존의 배열은 변경되지 않음. 기존 배열을 변경하지 않고 불변성을 유지하기 위해 전개연산자를 사용. push와 마찬가지로 slice, pop을 사용하지 않는 것을 권장한다고 함.