오늘은 jQuery로 스크롤 값에 따라 이벤트를 추가하는 방법을 작성해보겠다! 클론코딩하던 도중 의외로 jQuery가 많이 쓰인다는 걸 깨달았다. 그냥 단순 스크립트로 이벤트를 줄 수 있지만 훨씬 코드가 복잡해지고 어려워짐.. ㅠ 제이쿼리를 쓰면 더 직관적이고 애니메이션도 줄 수 있다. 아무튼! 사이트를 보다보면 스크롤 이펙트가 많이 사용된 사이트를 볼 수 있을 것이다. 내가 클론한 사이트 또한 스크롤마다 다양한 애니메이션과 효과가 적용됐는데 스크롤값에 따라 이벤트를 추가하는 방법을 기록하려한다.(class 추가, css 적용 등등등..) jQuery로 스크롤 이벤트 추가하기 스크롤 값에 따라 CSS 속성 변경하기 요건 헤더 부분을 스크롤 할 때마다 네비게이션이 나타나게끔 이벤트를 적용했다. 파티룸 오디..

gsap 연습할 겸 요즘 클론코딩을 자주하고있는데 처음보는 플러그인이 있어서 사용법을 기록해보려한다! 클론할 사이트는 랜딩페이지로 https://vibe.naver.com/about/ VIBENAVER VIBEvibe.naver.com vibe 서비스의 어바웃 페이지다. 요렇게 전광판 효과?로 플레이리스트를 추천하는 부분이다.CSS로만 구현해야하나 싶었는데 마침 jQuery 플러그인이 있어서 사용해볼려한다. marquee.jsMarquee.js는 HTML 요소를 효과적으로 스크롤하도록 도와주는 JavaScript 라이브러리 중 하나입니다. 이를 사용하여 웹 페이지에서 텍스트나 이미지를 자동으로 스크롤하거나 특정 동작에 따라 스크롤할 수 있습니다. 👀 사용법Marquee.js 라이브러리 추가  구조 ..

오늘은 ftp-simple 사용법에 대해 기록하려한다. 첨에 왔을 때 에디터를 vscode말고 edit plus라는 걸 쓴다했을 때 처음 들어봐서 당황했었던.... ftp 작업이 편리해서 쓰는 것 같았다. 근데 처음 쓰는 거라 익숙치 않고, 프로그램이 불안정하다는(중간에 날라갈 수도 있음..) 얘기가 나와서 어떻게든 vscode쓰고싶어 방법을 찾아봤었다. 그래서 학원 다닐 때 잠깐 쓰던 vscode 확장자가 생각났던..! 바로 ftp-simple!! 확장자를 이용하면 원격으로 리모트할 수 있다. 그래서 소스 수정하면 바로 서버에 반영이 됐었던 걸로 기억해서.. 아무튼! ftp simple 적용을 해보겠음,, ftp-simple ftp-simple은 Visual Studio Code(이하 VSCode)의 ..

반응형 작업할 때 분기점이 항상 헷갈려서 기록하려한다. 반응형 (미디어쿼리) 분기점 뷰포트 설정 뷰포트(viewport)는 웹 페이지를 표시하는 브라우저의 영역을 말합니다. 모바일 기기에서 웹 페이지를 렌더링할 때, 뷰포트는 디바이스의 화면 크기에 맞게 조정되어야 합니다. 이것을 구현하기 위해 뷰포트 메타 태그를 사용합니다. HTML 문서의 태그 안에 태그를 추가하여 뷰포트를 설정할 수 있습니다. 대부분의 모바일 브라우저는 이 설정을 읽고 웹 페이지를 올바르게 렌더링합니다. 이거 head 안에 추가해야 작동함 ,, ㅇㅇ 분기점 /* pc, 태블릿 가로 (해상도 768px ~ 1023px) */ @media all and (min-width: 768px) and (max-width: 1023px) { } ..

오늘은! Zustand 사용법을 알아볼 것이다. 바야흐로 n개월전... 정말 라이브러리라는 것을 거의 몰랐던 나는 실무에서 엄청난 코드를 마주하게 된다.. 어느정도 규모가 좀 있는 프젝이였는데 초반에 코드를 짜던 분이 (그분도 프론트는 익숙치 않다 했음,,) 상태 관리를 useState로 다 하고있었던 .. (근데 그게 맞는 건줄 알았ㅋ) 원래 useState로 하는 거 아냐? 라고 한다면 맞긴한데,,, 정말 단순한 로직일 경우에만 쓰지 사실상 실무에서는 거의 상태관리 라이브러리를 쓴다. (상태관리가 복잡하기 때문) useState로 하다보니 감당할 수 없는 사이드이펙트들......... 정말 울고싶었다. 아무래도 그렇게 뼈저리게 느끼다보니 아 이래서 개발자들 다 상태관리 라이브러리 쓰는 구나.. 괜히 ..

1편과 이어집니다! https://duektmf34.tistory.com/199 React Hooks 종류(1) 오늘은 React에서 유용하게 쓸 수 있는 Hook에 대해 알아보려한다. 사실 뭣도 모를 때 useState와 useEffect만 있는 줄 알았는데... (그것도 사실 뭐하는 용도인지 잘 몰랐음) 실무에서 처음보는 use접두사 duektmf34.tistory.com 이번에 다뤄볼 건 useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue 아마 마지막 3개는 간단하게 설명하고 마무리할 것 같다. useCallback useCallback Hook은 함수를 기억하고 새로 렌더링될 때마다 함수를 재생성하는 것을 방지하..