코딩기록

홈화면 메인 이미지는 인기 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..

.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/ ..