일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- nodejs
- Vue.js
- sass
- 댓글달기
- Vue
- JavaScript
- State
- jsx
- webpack
- CSS
- v-html
- 자료구조
- HOC
- storybook
- 자바스크립트
- scss
- 쉬운설명
- ES6
- TypeScript
- react
- event
- MySQL
- mapGetters
- vuex
- App.vue
- input
- 리액트
- Wecode
- Vue transition
- express
- Today
- Total
목록For문 (2)
익명의 개발노트
토글 버튼이나, 탭기능 구현을 함에 있어서 코드를 최대한 적게 쓰고 싶어서. for문을 이용하여 리스트를 만들고 탭 이름을 뿌려줬다. 클릭하면 html에서 클릭한 부분만 클래스 네임이 하나 더 추가되서 이벤트효과를 따로 부여했다. {{item.title}} 위 코드에서 클래스 추가하는 부분에 클릭하면 active 이름이 추가로 붙는다. (item.id 값이랑 선택한 것이랑 일치하면 클래스 명이 추가되도록 했음) tabMenuList는 아래와 같이 이루어져 있으며, 부모컴포넌트로부터 Prop으로 넘겨받는다. 별도의 파일로 만들어져 빼서 사용했다. //util/tabList.js export const storageBox = [ {title:'내 테마', id:'my_theme'}, {title:'좋아요',..
리액트 이벤트 핸들러 1. 트윗메인화면에 트윗을 입력하고 버튼 누르면 아래에 트윗 리스트 나오게 한다. 2. 트윗메인화면에서 textarea는 TweetRightBox라는 컴포넌트로 불러와서 메인화면에 조립했다. 트윗메인화면 ...(생략) TweetRightBox에서 이벤트값을 props로 넘겨서 트윗메인 화면에서 받은 다음, 이벤트 구현하였다. onChange는 textarea 내에서 값이 변화하면 브라우져가 인식한다. 최종적으로 넘길데이터는 유저이름, 메시지내용, 프로필사진, 트윗생성날짜이다(유저가 정한다.) handleChange =(e) => { this.setState({ username : this.props.username, //다른 컴포넌트에서 값을 불러왔음. inputMessage : e..