Gwni Lab GwniLab

콜백함수에 대해서 알아봅시다. 콜백함수는 다른 함수에 인수로 넘겨지는 함수 를 말합니다. funcA()와 funcB()가 순서대로 있는 와중에 A가 아니라 B를 먼저 실행 시키고 싶을때 사용할 수 있습니다. 동시에 이루어지는걸 동기, 동시에 이루어지지 않는 방식을 비동기라고 합니다. function func(){ document.write("함수가 실행되었습니다.2"); } function callback(str){ document.write("함수가 실행되었습니다.1"); str(); } callback(func); 콜백함수 안에서 매개변수 str에 함수 func가 들어갑니다. 원래대로 차레 차례 실행을 하면 함수가 실행되었습니다. 2 함수가 실행되었습니다. 1 이렇게 나와야 하지만 콜백함수에 매개변수..

자바스크립트 내부함수에 대해서 알아보겠습니다. 기본적인 형태입니다. { function func(){ function funcA(){ document.write("함수가 실행되었습니다."); } funcA(); function funcB(){ document.write("함수가 실행되었습니다."); } funcB(); } func(); } 함수안에 함수가 들어가있는 형태로 이대로 실행하게되면 함수가 실행되었습니다. 함수가 실행되었습니다. 이렇게 funcA와 funB가 같이 출력됩니다.

리액트를 본격적으로 만들기 전에 package.json 파일로 들어가서 필요한 모듈을 설치해줘야 합니다, 이렇게 뜨는데요. 지금은 필요한 모듈이 설치가 완료된 상황입니다. 설치한 모듈로는 axios, node-sass, react-router-dom, prop-types 이렇게 있는데요 버전에 맞게 잘 설치해야합니다. 모듈을 설치하는 방법은 터미널에서 가능합니다. 이런식으로 npm install (설치할 모듈이름) 으로 설치할 수 있습니다. 저같은 경우는 react-router-dom 이 자동적으로 6.3.0 버전이 설치되는데 이러면 오류가 나오더라구요 그래서 그 이전 버전인 5.3.0으로 설치했습니다. 다른 버전으로 설치하기 위해서는 명령어에 @버전을 입력해야 합니다. 이런식으로요.

//설명. 참고사항. document.addEventListener("mousemove", function (e) { let body = document.querySelector("body"); let circle = document.createElement("span"); let x = e.pageX; let y = e.pageY; // circle.style.left = x + "px"; // circle.style.top = y + "px"; //gsap를 이용해서 더 부드러운 애니메이션 효과 주기 gsap.set(circle,{left:x,top:y}); let size = Math.random() * 100; //랜덤한 사이즈를 주어서 방울방울이 크기가 다르도록 효과 circle.style.wi..

//설명. 참고사항. const mouseImg = document.querySelectorAll(".mouse__img"); mouseImg.forEach((item)=>{ const imageWrap = item.querySelector(".img"); const imageWrapBounds = imageWrap.getBoundingClientRect(); let itemBounds = item.getBoundingClientRect(); const onMouseEnter = ()=>{ gsap.set(imageWrap, {xPercent:-50, yPercent:50,rotation:-15, scale:0.3, opacity:0,}); gsap.to(imageWrap, {xPercent:-50,yP..

//설명. 참고사항. highlight(); modal(); tabMenu(); function mousemove(e){ let positionSlow = (e.pageX - (window.innerWidth/2)) * 0.1; let positionsFast = (e.pageX - (window.innerWidth/2)) * 0.3; gsap.to(".spanSlow", {duration: 0.4, x: positionSlow}); gsap.to(".spanFast", {duration: 0.4, x: -positionsFast}); gsap.to(".cursor", {duration:0.3, left: e.pageX, top: e.pageY}); } document.addEventListener("m..

초기세팅 //한번만 해주면 됨 git config --global user.name 이름 git config --global user.email 이메일 세팅 확인 git config --list 폴더이동 cd 경로 깃허브와 로컬 저장소 동기화 git pull 리퍼지토리 클론(다운) git clone 경로 변경사항 확인 git status 인덱스 추가 git add 파일이름 인덱스 삭제 git reset 파일이름 수정된 파일 싹 다 인덱스 추가 git add . 잘못된 commit 메시지 수정 git commit --amend a 수정모드 esc 누른후 : wq! 저장 수정된 파일 되돌리기 git check -- 파일이름 Git Commit git commit -m "설명" Git 업로드 git push ..

css box padding의 기본 원리 width를 200을 지정한 후, 패딩을 50을 주면, CSS에서는 기본 박스 가로(200px)을 유지한 채 패딩(50px)만큼 크기를 늘림 그렇기에 총 width는 250xp이 됨 이를 막기 위해 box-sizing:border-box를 사용함. box의 크기를 유지한 채 padding 값을 줄 수 있다