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

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

1) 최신순 sort

 

    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = String(currentDate.getMonth() + 1).padStart(2, '0');
    const day = String(currentDate.getDate()).padStart(2, '0');
    const formattedDate2 = `${year}-${month}-${day}`;
    const formattedDate3 = `${month}월 ${day}일`

    const formattedDate = '2023-07-17'
    const todaysList = board.filter(item => item.date === formattedDate)

    const todaysTopThreeList = todaysList.sort((a, b) => b.likesAcountId.length - a.likesAcountId.length).slice(0, 3)
    const todaysSortList = todaysList.sort((a, b) => b.dateTime - a.dateTime);

 
기존에 저장한 날짜는 년/월/일, 시/분뿐이었는데, 정확한 비교를 위해 연월일시분초가 게시글에 저장되도록 했다.
 

 { boardId: 17, date: '2023-07-17', time: '09시 20분', dateTime: '20230717082510', authorAcountId: 2, loactionCity: '인천광역시', loactionGu: '서구', weather: 'rain', temperatures: '20', yesterday: true, likesAcountId: [1, 3], images: './images/sky/sky17.jpg', authorLike: 70 },
sort

 

2) 업로드

 
지난주에 업로드 폼까지 만들어서 오늘은 실제 데이터를 입력하고 업로드 버튼을 누르면 새로운 게시글 객체가 데이터에 저장되게 했다.
 

업로드
  addBoard(state, action) {
            const { selectedImage, authorAcountId, city, gu, date, time, dateTime, weather, temperatures, yesterday, authorLike } = action.payload
            const boardId = state.board.length + 1
            const newBoard =
            {
                boardId,
                date,
                time,
                dateTime,
                authorAcountId,
                loactionCity: city,
                loactionGu: gu,
                weather,
                temperatures,
                yesterday,
                authorLike,
                images: selectedImage,
                likesAcountId: []
            }
            state.board.push(newBoard)
            state.onUpload = true
            console.log(JSON.parse(JSON.stringify(state.board)));
        },

 

 

3) 궁금해요

 
날씨가 궁금한 지역을 선택해 요청 게시글을 올리면 해당 지역의 사람이 현재 날씨를 알려주는 페이지를 작업했다.
게시글 클릭 시 요청 정보가 나오고 사진과 현재 날씨 상태를 선택 한 뒤 답변을 줄 수 있다.
오늘은 팝업까지만 작업했다.
 

궁금해요
궁금해요 popup

 
 

'🔥 부트캠프-웹 개발 🔥/오늘하날(개인프로젝트)' 카테고리의 다른 글
  • [DAY - 96] #6 개인프로젝트 '오늘 하날'
  • [DAY - 95] #5 개인프로젝트 '오늘 하날'
  • [DAY - 93] #3 개인프로젝트 '오늘 하날'
  • [DAY - 92] #2 개인프로젝트 '오늘 하날'
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
  • 공지사항

  • 인기 글

  • 태그

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

  • 최근 글

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

티스토리툴바