HYEWON JUNG의 개발일지
20231110 TIL Fan Letter -1 본문
목표
- 개인과제 ui 구현하기
새로운 개인 과제 '팬레터' 요구사항 체크하기
app구조
- header (title, 멤버버튼)
- 입력 form (input, selector, button)
- 멤버별 팬레터 CR 구현
- 팬레터 누르면 상세페이지 모달(모달은 선택사항임)
- 상세페이지에서 UD 구현
필수 요구사항
- props drilling -> useContext -> redux 순으로 구현하기
- styled-component 이용(스타일링 전부)
2023.11.07 - [React] - styled component 작성법 장점 자바스크립트 메소드 사용
styled component 작성법 장점 자바스크립트 메소드 사용
styled components란 ? 기본의 css는 태그의 인라인으로 하거나, css파일을 따로 만들어서 구현을 했었는데js파일에서 styledcomponent를 이용하는 방법도 있다. styledcomponent는 리액트의 고유 기능은 아니고
hyewonjung-coding.tistory.com
- 전역에 reset.css해주기
2023.11.08 - [React] - GlobalStyle, sass, css초기화
GlobalStyle, sass, css초기화
GlobalStyle GlobalStyle은 전역스타일링으로 코드 전체에 공통된css를 적용할 때 쓰인다. 적용 방식은 편하게 파일(컴포넌트)을 새로 생성해준 후 const GlobalStyle = createGlobalStyle` body{ font-family: "Helvetica",
hyewonjung-coding.tistory.com
- styled-components에 props 넘김으로 조건부 스타일링 (아티스트 선택탭)
- 팬레터의 key는 id:uuid로 하기
단순하게 구조 생각해보기
- createAT, nickname, avatar, content,writeTo, id로 카드 추가
- 버튼별로 클릭이벤트를 줘서 setstate 줘서 writeTo 상태 바꾸기 iswriteTo === 멤버 ?<멤버/> : ""
- todolist의 isdone처럼 각자의 값에만뜨기.. 아니면 전체를 둘까..
- 팬레터 전체에 클릭이벤트를 줘서 모달 띄우기, filter로 인자로 받은 것의 id 와 버튼의 id가 같은 것만 띄우기(지난번 개인과제에서 달성하지못한 것) => 리액트 책에 모달 만들기 있었으니 참고해보자.
- 삭제는 하는 법은 알지만 수정은 뭐지..? 현재 내용이 그대로 인풋으로 들어가는.. 그리고 완료버튼을 누르면 완료되기
목표 달성여부
....
주말 목표
- 개인과제 추가, 멤버별 표시, 상세화면 모달만들기..
- 강의 완강하기
'개발일지' 카테고리의 다른 글
| 20231113 TIL Fan Letter -2 편지추가하기 , 분류버튼, 상세페이지 만들기, router로 연결하기 (1) | 2023.11.14 |
|---|---|
| 20231107 TIL (0) | 2023.11.11 |
| 20231109 TIL (0) | 2023.11.10 |
| 20231108 TIL (0) | 2023.11.08 |
| 20231106 TIL react todolist 만들기 (0) | 2023.11.05 |
'개발일지' Related Articles
more
