일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 자바스크립트
- ECMAScript
- CSS
- API
- Component
- Mongoose
- CLONE
- NextJs
- heroku
- Session
- JavaScript
- pug
- 리액트
- Flutter
- clonecoding
- TypeScript
- MongoDB
- HTML
- react
- frontend
- DART
- node.js
- nodejs
- ES6
- backend
- graphQL
- GRID
- javscript
- form
- express
- Today
- Total
목록variable (2)
Enjoy Programming

이번에는 css variable을 select해서 자바스크립트 이벤트로 변화를 줘보는 스타일을 구현해본다. 먼저 백그라운드 사이즈와 블러 그리고 컬러를 변화를 줄 수 있도록 세개의 input을 만들어서 값을 설정해주고 각각의 네임을 지정해준다. 그리고 dataset을 이용할 수 있도록 data-sizing을 지정해준다. 그리고 css variable을 만들어서 내가 적용할 부분에 각각 적용해 준다. 이제 자바스크립트로 셀렉트해서 변경만 해주면 되는데 queryselectorAll을 이용해 input을 모두 select해주고. forEach를 이용해서 이벤트 리스너를 적용해주는데 inputs는 array가 아니라서 map이 적용이 안된다. proto type을 보면 nodelist로 나온다. 뭐 sprea..

유저 프로필 페이지를 수정을 해줄 건데 약간의 수정사항과 추가사항이 있다. 일단 로그인한 유저의 프로필 페이지로 이동을 하면 기존에는 /:id 를 이용해서 갔는데 userDetail 컨트롤러를 이용해서 id값을 찾아 이동을 했다. 사용자마다 똑같은 user template을 이용하는데 이부분을 바꾼다. 그래서 사용자 프로필 페이지 routes와 컨트롤러를 하나 더만들어준다 헤더 템플릿으로 가서 경로도 다시 설정 해주자 기존 userDetail과 같은 기능을 하지만 다른점은 userDetail은 사용자를 찾는 과정이 필요한데 새로 만든 getMe user를 지금 로그인한 유저인 req.user로 전달한다. 햔재 userDetail은 제 역할을 못하기에 프로필 페이지 접속후 :id부분의 url을 임의로 바꿔..