Notice
Recent Posts
Recent Comments
Link
«   2025/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

HYEWON JUNG의 개발일지

20231110 TIL Fan Letter -1 본문

개발일지

20231110 TIL Fan Letter -1

혜won 2023. 11. 11. 21:51

목표

  • 개인과제 ui 구현하기

새로운 개인 과제  '팬레터' 요구사항 체크하기

app구조

  • header (title, 멤버버튼)
  • 입력 form (input, selector, button)
  • 멤버별 팬레터 CR 구현
  • 팬레터 누르면 상세페이지 모달(모달은 선택사항임)
  • 상세페이지에서 UD 구현

필수 요구사항

 

styled component 작성법 장점 자바스크립트 메소드 사용

styled components란 ? 기본의 css는 태그의 인라인으로 하거나, css파일을 따로 만들어서 구현을 했었는데js파일에서 styledcomponent를 이용하는 방법도 있다. styledcomponent는 리액트의 고유 기능은 아니고

hyewonjung-coding.tistory.com

 

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