솔미는 성장중

프로젝트를 시작하며 패스트캠퍼스 X 야놀자 프론트엔드 부트캠프 1기를 참여하며 첫 과제가 나왔다. HTML,CSS 과제였고, 웹사이트를 클론 코딩하는 것이었다! HTML/CSS 과제였지만 간단한 부분은 JS로 구현해보았다. 웹사이트 선정 기준 1. 기존에 관심있었던 브랜드 2. 온보딩 강의에서 배웠던 swiper라이브러리와 스크롤 효과를 적용해볼 수 있는 사이트 3. CSS를 통해 다양한 효과를 시도해볼 수 있는 사이트 레퍼런스 사이트 & 프로젝트 결과 잭슨카멜레온 (레퍼런스 사이트) 클론코딩 사이트 클론코딩 깃헙 23.08.05 기준: 데스크탑에서만 정상적으로 작동한다. (반응형 미구현) 구현 내용 1. 헤더 애니메이션 스크롤에 반응 : 상단에 있을 땐 투명 / 어느 정도 스크롤을 내리면 흰색 배경 :..

1. Console log : 일반 메세지 warn : 경고 메세지 error : 에러 메세지 dir : 속성을 볼 수 있는 객체를 출력 (ex. console.dir(documnet.body) : body태그에서 사용가능한 속성/메소드 확인가능) 🎃 콘솔에 메세지나 객체를 출력한다. console.count('이름') console.countReset('이름') cf) 아무런 이름도 추가하지 않으면 default : 횟수 형태로 출력 🎃 콘솔에 메소드 호출의 누적 횟수를 출력 or 초기화 console.time('이름') console.timeEnd('이름') cf) 동일한 이름을 써서 시작, 종료 시점을 알려줘야 하고, 두 코드 사이에 동작하는 코드를 넣어서 실행하는 데 얼마나 걸렸는지 알아볼 수 있..

🎃 .addEventListener() 대상에 이벤트 청취(listen)을 등록. 대상에 지정한 이벤트가 발생했을 때 지정한 함수(Handler) 호출 ex) click, dbclick(더블클릭시), wheel, keydown, mousedown(버튼 누를때), mouseup(버튼 뗄때), mouseenter(포인터가 요소 위로 올라갈 때), mouseleave(포인터가 요소 밖으로 나올 때), mousemove(포인터가 움직일 때), contextmenu(우클릭했을 때) 등등.. click 예시) childEl.addEventListener('click',() => { childEl.classList.toggle('active') //actvie클래스 있으면 없애고, 없으면 만들고. }) wheel 예..

원시 데이터의 "데이터 불변성" 원시 데이터 : String, Number, Boolean, null, undefined 원시 데이터에서는 단순하게 모양이 다르면 false가 나온다고 생각해도 틀리진 않는다. 하지만 정확히는 '메모리 주소'가 같고 다름에 따라 true/false가 바뀐다. let a = 1 let b = 4 console.log(a,b,a===b) //1 4 false -> 메모리 주소가 달라서 false b=a console.log(a,b,a===b) //1 1 true -> b가 a가 가리키는 메모리주소를 가리키게 됨 a=7 console.log(a,b,a===b) //7 1 false -> 메모리 주소가 달라서 false 새로운 원시 데이터를 사용했을 때 그 원시 주소가 기존 메모..

fetch (주소, 옵션) 네트워크를 통해 리소스의 요청(request)과 응답(response)을 처리한다 promise 인스턴스를 반환 console.log(fetch('https://www.omdbapi.com/?apikey=********&s=avengers')) //Promise 📍 fetch를 통해 promise 인스턴스를 반환하니 뒤에 then 메소드를 써줄 수 있다. fetch('https://www.omdbapi.com/?apikey=********&s=avengers')) .then(res => console.log(res)) //Response 📍 json 메소드를 호출해야 데이터를 꺼낼 수 있다. fetch('https://www.omdbapi.com/?apikey=********&..