250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- 실행컨텍스트
- 리덕스
- gql restapi 차이
- jwt
- chromatic error
- 타입스크립트
- 코어자바스크립트
- 리액트
- this
- 리액트 렌더링 최적화
- JS module system
- 항해99 부트캠프
- Js module
- 항해99 사전스터디
- v8 원리
- 렌더링 최적화
- js배열 알고리즘
- 리액트 메모
- 항해99 미니프로젝트
- 함수형 프로그래밍 특징
- 웹 크롤링
- 리액트 메모이제이션
- FP 특징
- 웹팩 기본개념
- 테스트 코드 툴 비교
- 자바스크립트 엔진 v8
- 항해99
- toggle-btn
- 알고리즘
- next js
Archives
- Today
- Total
목록toggle-btn (1)
Jaeilit
토글버튼 만들어보기
이 토글 버튼 UI는 처음엔 a,b 두개로만 동작을 해서 정말 토글버튼이였습니다만 리스트 갯수를 2개에서 더 많은 갯수로 늘려 다양하게 활용처에 사용하고싶은 마음에 코드를 수정한 결과 이런 결과물이 나왔습니다. 사실 토글버튼 보다 nav 버튼에 가깝지 않을까 싶지만 적당한 명칭을 정하지 못하여 최초의 이름인 토글로 지정하였습니다.구조컴포넌트마다 독립적인 구조를 위해서 폴더마다 tsx, hooks, provider, css, types 파일을 가지도록 했습니다.📦components ┗ 📂toggle ┃ ┣ 📜hooks.ts ┃ ┣ 📜index.tsx ┃ ┣ 📜provider.tsx ┃ ┣ 📜styles.module.css ┃ ┗ 📜type.ts - tsx: view 담당- hooks: 로직 담..
TIL
2024. 6. 20. 01:53