목록분류 전체보기 (158)
HYEWON JUNG의 개발일지
목표 렌더링 최적화 과제 10-3 구현 새로 알게 된것/ 오늘의 코드 과제10-3 은 각 필터별 편지가 없을 경우 편지가 없는 멘트가 뜨게 하는 것이다. 이렇게! 간단할 거라고 생각해서 시도했는데 계속 안되는 상황이었다. 결국 팀원분에게 물어봤다 나 : 왜 안될까요..? ???: 걔가 거기있으면 안돼요. 나: 에..? { filteredLetter filteredLetter.length === 0 ? (🙅♀️편지가 없습니다! 첫 편지를 작성해주세요!) : ( .map((letter) => ( { navigate(`/detail/${letter.id}`) }}> {letter.nickname} {letter.createdAt} {letter.content.length < 23? {letter.conten..
목표 redux 렌더링 최적화하기 새로 알게 된것/ 오늘의 코드 redux로 변경하는데 개념이 이해가 가면서도 이해가 가지 않는 부분이 많았다. 엄청많은 오류를 보고나서야 해냈다. redux 모듈은 2개로 만들고 writeTo로 필터링할 것 하나, 데이터 하나 해서 만들었다. 가장 먼저 한 것은 편지를 추가하는 기능 부터 손을 댔다. 아무래도 강의에서 배운 todolist 리팩토링과 비슷할 것 같아서, module / fanletter.js import { data } from 'shared/fakedata' export const addLetter = (payload)=>{ return {type: "ADD_LETTER", payload} } const initialState = { letters : ..
목표 styled component 적용 이미지 디폴트 넣기 drilling 리팩토링 후 context 넘어가기 새로 알게 된것/ 오늘의 코드 이게 맞는진 모르겠으나 css를 모두 styled components로 바꾸기긴 했는디.. 잘은 모르것다.. 잘 활용은 못하는 것 같다. 조건부 스타일링 한 부분만 적고 넘어가겠다. 이때까지 필터 버튼을 눌러도 버튼에는 변화가 생기지 않았는데 조건부 스타일링으로 바꿔주었다. 내가쓴 방법은 필터 버튼 과 비슷하게 구현을 했는데 4개의 버튼에 할당한 state를 선언 하고 초기값을 white 안눌렸을 때 색으로 두고 onclick때마다 set을 할 수 있도록 하는 것이다. header에 포함이 되어있기에 Header 컴포넌트에서 진행했다! const CategoryB..
목표 styled component 적용 detail 수정 삭제 구현 이미지 디폴트 넣기 drilling 리팩토링 후 context 넘어가기 새로 알게 된것/ 오늘의 코드 상세페이지 버튼 기능 구현 1번째 삽질 {navigate(`/${letter.id}`) {state:letters}}}> navigate로 data 내려주기 const {state} = useLocation() Detail에서 data 받기 const [detail, setDetail] =useState(state) const removeLetterBtnEvent = (id) => { const filteredLetter = letters.filter(to => to.id !== id) setDetail(filteredLetter) }..
목표 styled component 적용 detail 수정 삭제 구현 이미지 디폴트 넣기 drilling 리팩토링 후 context 넘어가기 목표 달성여부 detail에 수정과 삭제 구현을 한다음에 styledcomponent를 하려고 했는데 기능구현이 생각보다 쉽게 되지 않아서 오늘은 진행된 것이 없다. 상세페이지부분을 한번 다 뜯어고쳐야할 것 같다. 우선 styled component를 먼저 하고 진행하는 것이 순서에 맞을 것 같다는 생각이 들었다. 내일 목표 styled component 적용 detail 수정 삭제 구현 이미지 디폴트 넣기 drilling 리팩토링 후 context 넘어가기
목표 추가 버튼 구현 분류 버튼 구현 컴포넌트 분리 main - 상세페이지 라우터 구현 헤더 layout 분리 styled component 적용 새로 알게 된것/ 오늘의 코드 원래는 컴포넌트 분리와 styled component 는 바로 해야하지만 아직 익숙하지 않아서 기본으로 구현 후 변경하려는중이다. 편지 생성(리팩토링 필요) const [letters, setLetters] = useState(data); function IdolLetters({fanLetterStyle, imgStyle,letters}) { return ( {letters .filter((letter)=>{ return letter.writedTo === "아이돌" }) .map((letter) => { return ( {let..