코딩기록

1. 먼저 깃허브에서 new repository 생성 2. vscode 터미널에서 연동해주기 git init git remote add origin https://github.com/깃허브아이디/프로젝트명.git git remote -v git branch git push origin main 아래 코드는 깃허브가 잘 연결됐는지 확인하는 거라 생략 가능 git remote -v (깃허브 잘 연결됐나 확인) git branch(브랜치가 main인지 확인) 혹시나 push 하는 과정에서 오류가 뜬다면 git pull origin main --allow-unrelated-histories git push origin main 로 시도하기 3. gh-pages 설치 npm install gh-pages 4. p..

const [counter, setCounter] = useState(1); ... setCounter(counter + 1); const [counter, setCounter] = useState(1); // ... setCounter(prev => prev + 1); 위 아래 코드 모두 동일하게 작동되지만 아래 코드로 사용해야함 위 코드를 사용하면 상태가 예상과 다르게 업데이트 될 수 있으므로 이전 상태를 사용하는 게 좋음

영화 등장인물 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을 사용하지 않는 것을 권장한다고 함.

우선 두 강의 다 처음부터 끝까지 학습한건 아니고 중간의 백 부분은 학습하지 않은 상태입니다..흑,, javascript 완벽 가이드 : 초급 + 고급 마스터 과정 the web developer 부트캠프 2023 두 강의 다 유명하고 후기도 많은 강의입니다. 처음에 javascript 완벽 가이드를 듣다가 부트캠프 2023을 추가로 들었는데요. 저 같은 경우엔 자바스크립트 이해도가 낮은 상태여서 자바스크립트를 이해하고 제가 사용할 수 있는 것이 중요했습니다. 자바스크립트 실력 마이너스 천만점이었는데 지금은 마이너스 백만점 정도로 조금 성장한 것 같아요. 나름 결과가 있습니다,, 우선 저처럼 비전공자이면서 자바스크립트의 이해도가 낮다! 고 하면 부트캠프 2023을 추천 드립니다. 앞에 html, css강..

!오류 해결 못했습니다.. 스와이퍼 안에서 실행되는 datepicker 왼쪽 사진 처럼 슬라이드 안에서도 주간 선택이 잘 실행된다. 하지만 이번 달에서는 주간 선택이 실행되지 않음... ㅎ? 안될거면 다 안되던가 이건 무슨 오류일까,, 근데 웃긴건 마지막 슬라이드에서는 또 주간 선택이 잘 됨...^^ 미쳐버리는 datepicker입니다,, https://codepen.io/hhsshsii-ii/pen/xxmgbVa * 혹시 사용하실 분 계시면 air-datepicker 를 사용중이고 moment.js가 필요합니다! $('.date_week').datepicker({ language: 'ko', autoClose: true, navTitles:{ days: 'yyyy년 mm월', /* 일별 달력 타이틀 *..

$('.date_week').datepicker({ language: 'ko', autoClose: true, startDate:new Date(), navTitles:{ days: 'yyyy년 mm월', /* 일별 달력 타이틀 */ months: 'yyyy년', /* 월별 달력 타이틀 */ years: 'yyyy1 - yyyy2' /* 년별 달력 타이틀 */ } }) const swiperDate = new Swiper('.swiper-container',{ slidesPerView: 1, spaceBetween: 0, allowTouchMove:false, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, on..