일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- input
- insertAdjacentHTML
- scroll
- css
- React
- 애니메이션
- scrollY
- scrollevent
- For
- Hover
- classList
- 확장성
- localstorage
- 이벤트리스너
- NAV
- swiper
- NodeList
- JavaScript
- 스크롤
- html
- Animation
- mousemove
- addEventListener
- forEach
- Sticky
- getBoundingClientRect
- pointermove
- swiperjs
- 반복문
- width
- Today
- Total
목록React (12)
ZeroToHunnit Coding
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bsicO9/btsGh3BzkVV/DwsYJ60KxkoSPm1kNAQuz0/img.jpg)
안녕하세요? 얼마 전에 웹디자인기능사 실기도 치고 이래저래 사느라 바빴네요. 일도 하면서 웹디자인기능사 실기 공부도 하고 운동도 하다보니 개인적으로 공부할 시간이 엄청 적었네요. 그래도 짬내서 계속 공부는 하고 있었답니다! 글을 안썼을 뿐... 리액트를 배우고 나서 리액트로 개인 페이지를 만들고 싶어서 이래저래 찾아보다가 웹을 기획하는 일을 하시는 분들이 있다는 것을 새삼 깨달았어요. 그래서 검색도 되게 많이 해보고 알아보려 했는데 생각보다 자료가 그리 많지 않더라구요..? 그래서 말 그대로 웹을 어떤 컨셉으로, 어떤 기능을 구현하고, 어떤 디자인 방향으로 나갈 것인지 등 전반적인 웹 틀을 짜는데 필요한 사람이라고 생각했습니다. 어찌보면 기초를 다지는데 가장 중요한 역할을 하는 사람이라고 생각했죠. 정확..
이제 강의는 다 들었지만 뭔가.. 아직 잘 모르겠다. 다시 반복하면서 사이트 하나를 만들 계획이다. 그러면 자연스럽게 익숙해지지 않을까 싶다. 1. PWA(progressive Web App): 웹사이트를 안드로이드/ios 모바일 앱처럼 사용할 수 있다. 웹사이트에서 스마트폰 홈화면에 앱설치 가능 2. PWA장점 1) 모바일 환경에서 웹사이트 설치 가능 2) 오프라인에서도 동작 가능 (Cache storage) 3) 설치 유도 비용이 적음 3. PWA 설치 방법: 프로젝트를 만들 때 바로 terminal에 npx create-react- app 프로젝트명 --template cra-template-pwa 입력 4. 설치 후 index.js에 serviceWorkerRegistration.unregiste..
리액트 너어무 어렵다 공부할 수록 앞에 했던거 점점 까먹는 느낌.. 진짜 복습 엄청 많이 해야할거같다. 코딩애플님 쉽게 설명해주시는데 머리가 안따라갑니다 1. 암호화폐 거래소나 SNS같이 실시간 데이터를 가져와야하는 사이트들에 react-query쓰면 좋음 2. 설치 방법 : npm install react-query >> index.js가서 const queryClient = new QueryClient() 작성해주고 이걸로 을 감싸면 됨 3. let result = useQuery('작명', function(){ return axios.get('주소').then function(파라미터){ return. 파라미터.data}) 하면 ajax요청 끝 4. react-query 장점 1) ajax 요청이 ..
오늘은 localstorage에 데이터 저장하는거 공부했는데 이거는 바닐라 자바스크립트할 때도 공부했던거라 수월하긴 했는데 예제 혼자 공부하는데 좀 애를 먹었다. 바닐라 자스도 다시 제대로 공부해야겠구만.. 1. localstorage로 반영구적인 데이터 저장이 가능하다. 2. localStorage.setItem('key', 'value') : 데이터 저장 3. localStorage.getItem('key') : 데이터 출력 4. localStorage.removeItem('key') 데이터 삭제 5. 로컬스토리지에 데이터를 수정하려면 데이터를 꺼내서 수정하고 다시 저장하면 됨. 6. 로컬스토리지는 문자만 저장할 수 있기 때문에 array나 object자료로 저장하려면 json으로 바꿔야함. 7. a..
후우 드디어 위기가 왔다. 뭔가 되게 복잡해지면서 머리에 안들어오고 응용도 안되기 시작했다. 싹 갈아엎고 처음부터 복습이 필요한 시기가 슬 온거같다. 일단 오늘은 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 ..
오.. 이제 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..
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파일이 필요가 없으니까 페이지 로딩시간이 단축됨..
사실 어제 쓰는거 깜빡해서 어제꺼랑 오늘꺼 같이 몰아서 쓸건데 하아 진짜 어렵다!! 슬슬 어려워지기 시작한다. 뭔가 머리론 이해가 다 되고 이래저래 잘 풀리긴 하는데 내일 다시 보면 모를거같은 이 느낌? 그럴 땐 또 복습하면 되지~~! 한 10번은 돌려야 내꺼될듯 1. 이미지를 그냥 src에 넣어서 써도 되지만 public폴더에 넣어서 사용한다는 가정하에 리액트로 만든 html 페이지를 배포할 때 안전하게 이미지를 사용하려면 img src에 process.env.PUBLIC_URL + '/경로' 로 작성해야한다. 2. 길고 복잡한 코드들은 App.js 말고 다른 js파일로 만들어서 쓸 수 있다. 다른 js파일을 App.js 파일로 불러오고 싶으면 export default 변수명 으로 내보내고 impor..