코딩기록

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); 위 아래 코드 모두 동일하게 작동되지만 아래 코드로 사용해야함 위 코드를 사용하면 상태가 예상과 다르게 업데이트 될 수 있으므로 이전 상태를 사용하는 게 좋음

우선 두 강의 다 처음부터 끝까지 학습한건 아니고 중간의 백 부분은 학습하지 않은 상태입니다..흑,, 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..

.date_week { width: 300px; cursor: pointer; padding: 10px; padding-left: 20px; border-radius: 20px; border: 0; outline: 0; color: #fff; font-size: 15px; background: #0cf; box-shadow: 0 4px 10px rgba(0,204,255, .3); } .date_week:hover { background: #26D4FF; } .date_week:active { background: #0bf; margin-top: 1px; box-shadow: 0 1px 10px rgba(0,204,255, .3); } .picker-icon { color: #fff; margin-lef..

제목 쓰기가 난감했다. 프로그레스바,, 색깔 나누기,,? 분할,,? 여튼 내가 만들고 싶었던 것은 저런 프로그레스 바 css로 만들려면 만들수야 있겠지만 만약 수치가 바뀔 때마다 조절하는 건 귀찮은 것 같아서 data를 이용했다. //html red % pink % blue % //css .progress-bar { width: 300px; height: 20px; border: 1px solid #ccc; font-size: 0; border-radius: 20px; padding: 2px;} .progress-bar div { height: 100%; display: inline-block; position: relative; } .progress-bar div:first-child{border-ra..

https://codepen.io/hongshii0i0i/pen/LYXRBgL javascript30 scroll event ... codepen.io function debounce(func, wait = 20, immediate = true) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (c..

Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion //css css는 기존에 있던 거에 flex로 배열을 맞춰주었다. .panel p:nth-child(1) {transform: translateY(-100%);} .panel p:nth-child(3) {transform: translateY(100%);} .panel.open { flex: 5; font-size: 40px;} .panel.open p:nth-child(1), .panel.open p:nth-child(3) {transform: translateY(0);} 글자 효과는 transform으로 위치를 바꿔주었고 panel에 flex:5를..

const data = 'new york;10.22;2000'; const transformData = data.split(';'); transformData[1] = +transformData[1] console.log(transformData); //(3) ['new york', 10.22, '2000'] split() - split(); (괄호)안에 구분자를 통해 문자열을 구분함. - transformData[1] = +transformData[1] -> 숫자로 변환 const nameFragments = ['max', 'anna']; const aaaa = ['123', 'dd'] const name = nameFragments.join('/ '); console.log(name); //max/ ..