회고

20230526 TIL

2023. 5. 26. 23:22
목차
  1. next.js에서는 폴더구조를 유의하자
  2. 멘토님의 폴더구조 조언
  3. 스토리북 배포하기
  4. 데이터 중복 검사(MongoDB)
  5. 만난오류
  6. 오늘의 뻘짓

next.js에서는 폴더구조를 유의하자

next.js에서는 서버에게 api요청을 간단하게 할 수 있다. pages/api 폴더안에 js 파일로 만들어주는 방법을 사용했는데 처음에 pages 폴더를 app 폴더 안에 생성해서 아무리 get요청을 보내도 404에러가 뜨는 것이다! 공식문서에 구글링에 아무리 찾아봤는데도 안되어서 결국 다시 강의를 보는데 pages폴더가 최상단에 있었다. ㅎㅎ ㅎㅎ ㅎㅎ 이걸로 한 40분을 날림. 

멘토님의 폴더구조 조언

/msgs

export const EMPTY_SEARCH_ALERT: string = '검색어를 입력해 주세요.';

export const ADD_BOOKMARK_MSG: string = ‘북마크에 상품이 추가되었습니다’;

 

자주쓰는 메세지도 저렇게 따로 저장을 해서 import로 사용하면 나중에 수정할때 편리하다.

 

컴포넌트 또한 스토리북 작성시 폴더링을 잘 해서 관련된 파일 한곳에 저장하는것이 좋다.

스토리북 다운받았을 때 자동생성되는 stories 폴더에 저장하는것 보다 위 사진처럼 관련된 파일들 한곳에 저장하는것이 좋다.

 

스토리북 배포하기

Chromatic 사이트에서 get started now 를 따라하면 명령어 단 2 줄에 만들 수 있다.

북마크 별이랑 드롭다운 메뉴만 넣어본 스토리북 배포해봤다!

 

 

데이터 중복 검사(MongoDB)

import { connectDB } from "@/util/database";
export default async function Handler(req, res) {
  if (req.method === "POST") {
    if (req.body.title === "") {
      return res.status(500).json("fill the title");
    }
    try {
        const db = (await connectDB).db("forum");
        let result = await db.collection("post").find({title:req.body.title}).toArray()
        if(result.length===1){
            return res.status(500).json('already exist id')
        }
        result = await db.collection('post').insertOne(req.body)
      return res.status(200).json("완료!").redirect("/list");
    } catch (error) {
      console.error();
    }
  }
}

1. 요청객체의 title과 같은 값이 db에 있다면 요소가 하나 들어있는 배열 생성

2. 배열의 길이가 1이라면 이미 있는 id라는 응답 메세지

3. 아니라면 db에 데이터 추가

 

만난오류

./node_modules/mongodb/lib/cmap/auth/gssapi.js:4:0 Module not found: Can't resolve 'dns'

import { connectDB } from "@/util/database";

를 하지않으면 일어나는 오류

 

app-index.js:32 Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

input에 defaultValue를 써주면 경고 없어짐

 

 

오늘의 뻘짓

try {
      let db = (await connectDB).db("forum");
      let result = await db
        .collection("post")
        .updateOne(
          { _id: new ObjectId(req.body.id) },
          { $set: { title: req.body.title, content: req.body.content } }
        );
        console.log(result);
        res.redirect(302, '/list')
    }

1. 원래 _id 부분에 그냥 냅다 req.body.id 씀 << 이건 없어도 괜찮았음 

=> objectId 의 역할 ? 새로운 id 부여 인자넣어주면 지정 id 사용가능 

2. res.redirect 부분을 updateOne뒤에 바로 붙여씀 << 이게 문제였음

 

Next.js에서 다이나믹 라우팅을 하려면 폴더 안에 [id]폴더를 만들어줘야하는데. 왜방금한것도 까먹지!!

 

'회고' 카테고리의 다른 글

230530 TIL  (0) 2023.05.31
20230527 TIL  (1) 2023.05.27
20230525 TIL  (0) 2023.05.25
[solo project] 솔로 프로젝트 회고  (6) 2023.05.19
코드스테이츠 12주차 회고  (0) 2023.05.07
  1. next.js에서는 폴더구조를 유의하자
  2. 멘토님의 폴더구조 조언
  3. 스토리북 배포하기
  4. 데이터 중복 검사(MongoDB)
  5. 만난오류
  6. 오늘의 뻘짓
'회고' 카테고리의 다른 글
  • 230530 TIL
  • 20230527 TIL
  • 20230525 TIL
  • [solo project] 솔로 프로젝트 회고
Summer.dev
Summer.dev
프론트엔드 개발자 Summer 입니다! 피드백은 언제나 환영입니다.
Summer.dev
꾸준함이 무기
Summer.dev
전체
오늘
어제
  • 분류 전체보기
    • Projects
      • Next.js board-project
      • MOMO
    • 원티드
    • 우테코 프리코스
    • JavaScript
    • React
    • TypeScript
    • Node.js
    • Algorithm
      • 코플릿
      • 개념정리
    • 네트워크
    • 오류해결
    • 회고
    • 기술면접준비
    • git,github
    • 소소하게 궁금한것
    • Next.js Beta Docs 번역
    • 디자인패턴
    • 트러블슈팅
    • 번역

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 알고리즘
  • 메모이제이션

최근 댓글

최근 글

hELLO · Designed By 정상우.
Summer.dev
20230526 TIL
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.