[DAY - 98] #8 개인프로젝트 '오늘 하날'

2023. 7. 21. 19:40·🔥 부트캠프-웹 개발 🔥/오늘하날(개인프로젝트)

1) Todays Detail

swiper 플러그인을 사용해서 유튜브 쇼츠처럼 위아래로 넘길 수 있다.
오늘 날짜에 해당하는 게시글들만 출력된다.
likesAcountId의 length로 좋아요 수를 표시하며, 댓글 기능 구현을 위해 데이터에 추가해 놓았다.
commentAuthorId와 acountId가 같은 객체를 찾아 닉네임, treeLevel을 가져와야 하고 닉네임 혹은 나무의 레벨이 변할 때 댓글의 내용도 바뀌어야 하므로 고려해야 할 부분이다.
 

    const { date, images, time, authorLike, authorAcountId, loactionCity, loactionGu, yesterday, likesAcountId, temperatures, comment } = item

    const acount = useSelector(state => state.acount.acount)
    const authorAcount = acount.find(item => item.acountId === authorAcountId)
    const { nickname, treeLevel } = authorAcount

    let likeNumber = likesAcountId.length
    useEffect(() => {
        likeNumber = likesAcountId.length
    }, [likesAcountId])
        {
            boardId: 1,
            date: '2023-07-01',
            time: '09시 20분',
            dateTime: '20230717082510',
            authorAcountId: 1,
            loactionCity: '인천광역시',
            loactionGu: '연수구',
            weather: 'rain',
            temperatures: '20',
            yesterday: true,
            likesAcountId: [1, 2, 3],
            images: './images/sky/sky1.jpg',
            authorLike: 70,
            comment: [
                { commentId: 1, commentAuthorId: 1, text: '하늘이 넘오넘오 예뻐용 쿠쿠', dateTime: 202307210830 },
                { commentId: 2, commentAuthorId: 2, text: '예뻐용 쿠쿠', dateTime: 202307210930 },
                { commentId: 3, commentAuthorId: 2, text: '하늘이 넘오넘오 쿠쿠', dateTime: 202307211030 },
                { commentId: 4, commentAuthorId: 4, text: '쿠쿠루삥뽕', dateTime: 202307211130 },
                { commentId: 5, commentAuthorId: 4, text: '쿠쿠루삥뽕', dateTime: 202307211130 },
            ]
        },
'🔥 부트캠프-웹 개발 🔥/오늘하날(개인프로젝트)' 카테고리의 다른 글
  • [DAY - 101] #10 개인프로젝트 '오늘 하날'
  • [DAY - 99] #9 개인프로젝트 '오늘 하날'
  • [DAY - 97] #7 개인프로젝트 '오늘 하날'
  • [DAY - 96] #6 개인프로젝트 '오늘 하날'
Yeonhub
Yeonhub
✨ https://github.com/yeonhub 📧 lsy3237@gmail.com
  • Yeonhub
    비 전공자의 Be developer
    Yeonhub
  • 전체
    오늘
    어제
    • 전체보기 (169)
      • 🔍 Tech 🔍 (19)
        • Front-End (11)
        • Back-End (4)
        • AI (1)
        • Server (1)
        • Etc (2)
      • 💡 원티드 프리온보딩 챌린지 💡 (14)
        • PRE-ONBOARDING_AI (11월) (1)
        • PRE-ONBOARDING_FE (2월) (2)
        • PRE-ONBOARDING_FE (1월) (2)
        • PRE-ONBOARDING_FE (12월) (9)
      • 🔥 부트캠프-웹 개발 🔥 (118)
        • HTML5 (7)
        • CSS3 (21)
        • JavaScript (27)
        • JavaScript_advanced (9)
        • React (24)
        • Next (1)
        • MYSql (5)
        • Node (5)
        • 오늘하날(개인프로젝트) (12)
        • 이젠제주투어(팀프로젝트) (7)
      • 💻 CS 💻 (1)
        • 알고리즘 (1)
      • ⚡ 코딩테스트 ⚡ (11)
        • JavaScript (11)
      • 📚 Books 📚 (6)
        • 클린 아키텍처 (2)
        • 인사이드 자바스크립트 (4)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • Github
  • 공지사항

  • 인기 글

  • 태그

    expo fcm push
    node crontab
    expo fcm
    react native bottom sheet
    php node
    react native analytics
    react native expo fcm
    node cron
    라스콘4
    react native firebase analytics
    bottom sheet
    react native admob
    python node
    expo map
    node fcm
    rn bottom sheet
    expo node fcm
    rn admob
    expo google map
    javascript fcm
    라스콘
    node.js fcm
    expo 지도
    expo deep linking
    expo 길찾기
    expo admob
    Node
    react vite
    프론트엔드 테스트코드
    컴파운드 컴포넌트 패턴
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
Yeonhub
[DAY - 98] #8 개인프로젝트 '오늘 하날'
상단으로

티스토리툴바