![]()
게시글, 궁금해요 질문/답변을 업로드할 때 현재 위치와 날씨가 같이 저장된다. 오늘은 해당 기능을 구현해보기 위해 여러 가지 방법을 알아보았다. 1) 현재 위치 현재 위치는 geolocation을 사용하여 비교적 쉽게 구현할 수 있었다. https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API Using the Geolocation API - Web APIs | MDN The Geolocation API is used to retrieve the user's location, so that it can for example be used to display their position using a m..
![]()
Next는 React 기반의 프레임워크인데 서버에서 정보를 받아와 스크립트로 웹 화면을 출력해주는 React의 단점을 보완하기 위해 사용한다. 클라이언트에서 직접 렌더링을 하지 않고 서버에서 렌더링을 한 후 클라이언트에 보내주기 때문에 첫 페이지의 출력 속도가 빠르다. 또한 API라우트 사용에 있어서 서버리스 함수를 사용할 수 있기 때문에 서버 없이 백엔드 처리를 할 수 있다. https://nextjs.org/blog/next-13 Next.js 13 Next.js 13 introduces layouts, React Server Components, and streaming in the app directory, as well as Turbopack, an improved image component,..
![]()
1) 댓글 해당 게시글에 맞는 댓글들이 출력되도록 했다. 만약 댓글이 없을 시 아래와 같이 출력된다. { boardId: 6, date: '2023-07-17', time: '09시 20분', dateTime: 230717092000, authorAcountId: 3, loactionCity: '인천광역시', loactionGu: '남동구', weather: 'rain', temperatures: '20', yesterday: true, likesAcountId: [1, 2, 3], images: './images/sky/sky6.jpg', authorLike: 70, comment: [ { commentId: 1, commentAuthorId: 1, text: '하늘이 넘오넘오 예뻐용 쿠쿠', date..
![]()
1) Todays Detailswiper 플러그인을 사용해서 유튜브 쇼츠처럼 위아래로 넘길 수 있다. 오늘 날짜에 해당하는 게시글들만 출력된다. likesAcountId의 length로 좋아요 수를 표시하며, 댓글 기능 구현을 위해 데이터에 추가해 놓았다. commentAuthorId와 acountId가 같은 객체를 찾아 닉네임, treeLevel을 가져와야 하고 닉네임 혹은 나무의 레벨이 변할 때 댓글의 내용도 바뀌어야 하므로 고려해야 할 부분이다. const { date, images, time, authorLike, authorAcountId, loactionCity, loactionGu, yesterday, likesAcountId, temperatures, comment } = item cons..
![]()
1) 내 질문, 내 답변 모아 보기 로그인을 한 후 궁금해요 페이지로 가면 내 질문 수와 답변수를 확인할 수 있다. 클릭을 하면 해당 게시글이 출력된다. 내 질문과 내 답변은 지역에 상관없이 모두 출력된다. 2) Todays Detail home 페이지에서 todays에 올라온 이미지를 클릭하면 정보와 이미지를 크게 볼 수 있고 좋아요와 댓글을 확인할 수 있다. 댓글 모두 보기를 클릭하면 해당 게시글의 댓글이 있는 페이지로 넘어가며 모든 댓글을 확인 가능하고 추가도 할 수 있다.
![]()
앞으로 작업해야 할 부분 정리 1) 기능 궁금해요 업로드 궁금해요 내 질문, 내 답변 모아 보기 Todays detail 페이지 Todays detail 좋아요, 댓글 기능 + 삭제 기능 닉네임 수정 Todays 게시글 삭제 2) 기능 외 나무 레벨 별 사진 수집 날씨별 GIF 이미지 3) 궁금해요 업로드 궁금해요에 업로드를 하기 위해 두 가지 조건이 있다. 첫 번째는 로그인, 두 번째는 궁금한 지역 선택 { localOnLogin === 'true' ? uploadWonder()}>궁금해요 : navigator('/login')}>궁금해요 } const uploadWonder = item => { if (selectedSido && selectedGugun) { setOnWonderUpload(true..
![]()
1) 궁금해요 답변 궁금해요 게시글에 답변을 다는 popup을 작업했다. 상단에 질문 정보가 나오고 하단엔 답변을 달 수 있는 폼이 나온다. 2) 궁금해요 답변완료 답변 완료 시 답변을 올릴 때 사용했던 사진이 썸네일로 출력된다. 답변이 완료된 게시글을 클릭하면 답변 정보와 함께 사진과 날씨 정보가 출력된다. 3) 궁금해요 삭제 궁금해요 게시글 글쓴이와 현재 로그인 한 계정이 동일하면 삭제 버튼이 활성화된다.
![]()
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 === forma..
![]()
1) 사진에 장소 표시오늘 하날 카테고리의 사진이 출력될 때 사진의 장소가 같이 출력되도록 추가했다. return ( {loactionCity} {loactionGu} ); 2) 업로드 날씨 이미지로 변경 날씨 창에 텍스트가 아닌 GIF로 현재 날씨가 출력되고 온도는 오른쪽에 출력된다. 아직 날씨 GIF들을 구하지 못 해서 비 만 출력된다. .weather { display: flex; font-size: 5vw; justify-content: flex-end; background: none; background-image: url('images/weather/rain.gif'); background-repeat: no-repeat; background-position: 0 70%; } 3) 내 주면 C..
