프론트엔드/라이브러리, api (9) 썸네일형 리스트형 Styled Component Styled Component란? Styled Component란 Css-in-JS라고 하는 JS파일 안에서 CSS를 처리할 수 있게 해주는 대표적인 라이브러리입니다. Styled Component 문서 설치방법 npm install styled-components 위 코드를 통해 설치합니다. package.json파일에 위와 같이 추가합니다. Firebase Firebase Firebase는 모바일 및 웹 애플리케이션을 만들기 위해 Google에서 개발한 플랫폼입니다. 대부분의 앱을 만들 때 필요한 부분들을 자동으로 만들어 줍니다. 기본적으로 벡앤드를 firebase로 간단한 기능을 실현할 수 있습니다. Firebase와 app 연결하기 1. firebase사이트로 이동 => https://firebase.google.com/ 2. 회원 가입 & 로그인 => go to console → create project → web선택 → register app → 순서대로 작업 3. 프로젝트 생성 프로젝트 루트 경로에 firebase.js 파일 만들고 방금 SDKs를 복붙한 후, export default app를 추가하면 됩니다. Auth 활성화 1. 해당 프로젝.. Axios Axios란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다. axios 사용 방법 axios 모듈 설치 => npm install axios --save 사용시 axios.get('https://api.pokeapi.org...') Vite vite 문서 vite의 가장 큰 장점은 빌드 속도나 새로운 코드를 적용했을 때의 반영 속도 같은 Feedback 속도의 엄청난 개선입니다. vite vs create react app vite create react app 설치 시간 약 30초 약 1분 40초 file size 45MB 221MB build file size 150KB 553KB JS - scrollMagic 라이브러리 scrollMagic 라이브러리를 사용해서 페이지가 일정 위치에 도달하면 이벤트 발생시키는 라이브러리입니다. scrollMagic cdn참조 scrollMagic demo 참조 section.scroll-spy 값이 있는 요소들을 모두 찾아서 spyEls에 할당합니다. forEach메소드를 사용해서 각각의 요소를 반복하게 함수를 실행될 겁니다. ScrollMagic뒤에 체이닝방식으로 메소드들을 연결합니다. .Scene() 메소드는 특정한 요소를 감시하는 옵션을 지정해줍니다. triggerElement 속성은 감시한 요소를 지정하고, triggerHook 속성은 뷰포트의 어느 위치에 도달한지 감시하는 겁니다. 뷰포트 위에는 0, 하단에는 1인 값입니다. .setClassToggler() 메소드는 어떤 클래.. youtube iframe api 유튜브에 있는 동영상을 내 사이트에 삽입해주는 api입니다. youtube iframe api 참조 지원하는 매개변수 설명 참조 JS - Swiper 라이브러리 swiper 라이브러리는 공지사항처럼 한 영역에서 글이 위로 혹은 아래로 이동하면서 나오는 요소를 제어하는 라이브러리입니다. swiper참조 js코드 같이 사요해야 됩니다. 위에 링크를 타고 들어가서 확인하시면 됩니다. new Swiper(선택자, 옵션); JS - gsap 라이브러리 gsap 라이브러리는 자연스럽게 요소를 제어할 수 있는 라이브러리입니다. html 요소에 애니메이션을 추가할 수 있습니다. gsap cdn 페이지 링크 gasp.to(요소, 지속시간, 옵션); 지속시간은 초(s)단위로 계산합니다. 옵션은 객체 데이터 { } 를 넣어줍니다. JS - lodash 라이브러리 어떤 html파일에서 한 이벤트를 실시할 시 함수가 작동됩니다. 해당 파일이 이런 이벤트나 함수가 많아질 수록 페이지가 버벅거릴 수 있습니다. 흔히, 무거워졌다고 표현하죠. 이 대, lodash 라이브러리를 사용하면 문제 해결됩니다. lodash cdn 페이지 링크 lodash 라이브러리 원리 lodash 라이브러리 사용 전 후 비교 scroll이벤트가 발생하면 scoll!! 를 출력하는 함수를 작동한 js코드입니다. 보시면 scroll할 때마다 출력이 되므로 짧은 시간 안에 출력된 값을 많이 쌓였습니다. lodash 라이브러리 사용 후, 함수를 실행한 횟수가 현저히 낮아졌습니다. 여기서 _.throttle메소드를 이용하며, 뒤에 300은 300ms마다 함수 실행하겠다는 뜻입니다. _.throttle(함.. 이전 1 다음
