전체보기

1) CREATE 데이터베이스를 만든 뒤 해당 데이터베이스를 선택하고 테이블을 만들었다. 테이블마다 NO를 정수형으로 선언하고 NAME을 문자로 선언했다. create database mytest; use mytest; create table academy_b ( no int primary key, name varchar(20)); create table academy_a ( no int primary key, name varchar(20)); create table academy_c ( no int primary key, name varchar(20)); 2) INSERT 각각 테이블에 형식에 맞는 값을 넣어주었다. NO와 NAME 두 가지밖에 없으므로 VALUES에 모두(2개) 입력을 하면 어디에 어..

1) Node express 설치 https://expressjs.com/ko/ Express - Node.js 웹 애플리케이션 프레임워크 Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크 $ npm install express --save expressjs.com node를 쉽게 사용하기 위해 node의 프레임 워크 express를 설치해야 한다. 먼저 node를 사용할 폴더에 초기화를 해준다. package.json 파일이 만들어 지면 성공이다. npm init 그리고 express도 설치치해준다. npm install express 2) nodemon 설치 https://www.npmjs.com/package/nodemon nodemon Simple monitor script for use..

오늘은 어제 테스트했던 현재 위치, 날씨를 작업 중인 프로젝트에 이식했다. 1) 현재 위치 현재 위치가 적용되어야 할 부분은 업로드, 내주변, 궁금해요 총 세 곳이다. 먼저 어제와 마찬가지로 hook을 만들었다. import { useEffect, useState } from "react"; import axios from "axios"; import { useDispatch } from "react-redux"; import { getLocation } from "../store/modules/acountSlice"; const useLocationHook = () => { const dispatch = useDispatch() const [address, setAddress] = useState(''..

게시글, 궁금해요 질문/답변을 업로드할 때 현재 위치와 날씨가 같이 저장된다. 오늘은 해당 기능을 구현해보기 위해 여러 가지 방법을 알아보았다. 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..