일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- scrollY
- React
- 애니메이션
- insertAdjacentHTML
- input
- scroll
- NAV
- Animation
- Hover
- scrollevent
- For
- NodeList
- classList
- 이벤트리스너
- css
- addEventListener
- swiper
- JavaScript
- 확장성
- swiperjs
- mousemove
- getBoundingClientRect
- forEach
- pointermove
- width
- Sticky
- 스크롤
- localstorage
- html
- 반복문
- Today
- Total
목록전체 글 (56)
ZeroToHunnit Coding
후우 드디어 위기가 왔다. 뭔가 되게 복잡해지면서 머리에 안들어오고 응용도 안되기 시작했다. 싹 갈아엎고 처음부터 복습이 필요한 시기가 슬 온거같다. 일단 오늘은 Redux에 대해 공부했음 1. Redux를 사용하면 컴포넌트들을 props없이 state 공유할 수 있기 때문에 사용함. 근데 요즘 Redux Toolkit을 쓰는 것을 권장하기 때문에 엄밀히 말하면 Redux Toolkit을 공부했음 2. Redux 설치하는 방법 : 터미널에 install @reduxjs/toolkit react-redux 3. Redux 세팅하기 1) store.js 파일 생성하기 2) 생성한 파일에 아래 코드 붙여넣기 import { configureStore } from '@reduxjs/toolkit' export ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/FpuUG/btsDNIGNQqM/mUBDwftqOcPV50t9LWKOC1/img.gif)
위와 같이 스크롤하면 중간에 박스의 크기가 커지고 글자의 크기와 위치가 변형되게 만들어보았다. HTML 제 위치로 찾아갑니다~ CSS body, html{ contain: paint; } .section{ width: 100%; height: 300vh; } .wrap{ position: sticky; top: 0; left: 0; width: 100%; height: 100vh; } .bg{ width: 100%; height: 100%; background-color: aqua; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.3); } .title{ width: 100%; text-align: cent..
오.. 이제 7일차야..? 7일차치고는 뭔가 많이 알아가는거 같기도 하고..? 근데 했던거 다시하면 제대로 못하는 나를 보면서 머리 싸매고 있기도 하지만.. 언젠간 잘하겠지 뭐!! 1. ajax쓰려면 XMLHttpRequest (옛날거라 안씀), fetch() (이거 바닐라 자바스크립트할 때도 써봤는데), axios 라이브러리 쓰면 됨. 근데 리액트에서 axios 라이브러리 편함 2. axios 쓰려면 npm install axios 하고 import 해줘야함 3. axios.get('url').then(콜백함수).catch(콜백함수) 이런식임. fetch랑 비슷하네. then은 데이터 가져오는거 성공했을 때, catch는 실패했을 때 쓰는 공간 4. 동시에 ajax 요청 여러개 하려면 Promise.a..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/D2yYj/btsDHqgdNY3/X6jPpnbQOkNFTd5E3d9pE1/img.gif)
원래는 스크롤 이벤트로 이렇게 애니메이션을 만들었다면 이번에는 Intersection Observer로 간단한 애니메이션을 만들어보았다. HTML 안녕하세요? 반갑습니다. 스크롤 이벤트 말고 intersection observer로 조금 편하게 스크롤 애니메이션 줄 수 있어요 대박이죠? CSS .section{ height: 6000px; } .box{ margin-top: 800px; } .box p{ font-size: 60px; font-weight: bold; text-align: center; opacity: 0; transform: scale(0); transition: all 0.6s; } .observe{ opacity: 1 !important; transform: scale(1)!impo..
styled-components라는 것과 useEffect 공부했음! 1. styled-components 설치 방법 - npm install styled-components를 터미널에 쓰면 된다. 설치되면 import styled from 'styled-components'하면 됨. 2. 변수에 담아서 styled.요소`css코드작성` 3. 컴포넌트를 생성해주는 문법이기 때문에 변수 첫글자는 대문자로 해주기 4. styled-components의 장점 1) css파일 안열어도 됨 2) 스타일이 다른 js파일로 간섭되지 않음. (원래 App.css는 모든 파일에 간섭함) * App.module.css 이렇게 쓰면 App.js에만 css파일 적용됨 3) css파일이 필요가 없으니까 페이지 로딩시간이 단축됨..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/FDnNn/btsDGKdNKoD/BNhJR2nzXfF644qAEcjR31/img.gif)
위와 같이 평소엔 마우스 커서를 따라다니는 작은 원이었다가 특정 섹션에 마우스를 올리면 VIEW가 나오는 큰 원으로 변하는 커서를 만들어보았다. HTML VIEW 커서에 미리 VIEW를 넣어 놓는다. CSS .cursor{ position: absolute; width: 30px; height: 30px; background-color: black; border-radius: 50%; z-index: 9999; transition: all 0.3s; display: flex; align-items: center; justify-content: center; } .cursor p{ color: white; font-size: 40px; font-weight: bold; opacity: 0; visibili..
사실 어제 쓰는거 깜빡해서 어제꺼랑 오늘꺼 같이 몰아서 쓸건데 하아 진짜 어렵다!! 슬슬 어려워지기 시작한다. 뭔가 머리론 이해가 다 되고 이래저래 잘 풀리긴 하는데 내일 다시 보면 모를거같은 이 느낌? 그럴 땐 또 복습하면 되지~~! 한 10번은 돌려야 내꺼될듯 1. 이미지를 그냥 src에 넣어서 써도 되지만 public폴더에 넣어서 사용한다는 가정하에 리액트로 만든 html 페이지를 배포할 때 안전하게 이미지를 사용하려면 img src에 process.env.PUBLIC_URL + '/경로' 로 작성해야한다. 2. 길고 복잡한 코드들은 App.js 말고 다른 js파일로 만들어서 쓸 수 있다. 다른 js파일을 App.js 파일로 불러오고 싶으면 export default 변수명 으로 내보내고 impor..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nsfLC/btsDDXYzpxh/cja0GPt874N9yiVNFTbmIk/img.gif)
이렇게 스크롤을 하면 한글자씩 서서히 나타나게 하는 ui를 만들어보았다. HTML 안 녕 하 세 요 헬 로 우 ~ 반 갑 습 니 다 이렇게 한 글자씩 span태그에 따로따로 담아주었다. 마지막 split-letter을 비워둔 이유는 나중에 밝히겠다. CSS .section{ margin-top: 500px; margin-bottom: 500px; height: 200vh; background-color: blue; } .sticky{ position: sticky; width: 100%; height: 100vh; top: 0; left: 0; display: flex; align-items: center; justify-content: center; } .split-letter{ font-size: 4..