Velog clone coding

프로젝트 설명

개발자들을 위한 개발블로그 공개 플랫폼 클론 코딩

프로젝트 기간

2022.12.23 ~ 2022.12.29 ( 1주간 진행 )

주요기능

• local 회원가입, 로그인

• 회원정보 수정

• 게시글 및 댓글

• 게시글 이미지 업로드

• 최신순, 트랜딩 조회

도입 기술

• mySQL
  관계형 데이터 베이스를 사용하는데 있어 가장 사용량이 많은 mySQL 사용

• TypeScript
  새로운 기술의 적용과 학습을 위해 TypeScript를 사용

• prisma
  TypeORM과 prisma중 prisma가 이번연도 사용량 추세가 더 많아지고 있다는 점을 알게 되어 새로운 ORM으로 prisma를 사용

• JWT
  Token방식의 회원인증 처리를 위해서 사용

• Multer - S3
  게시글 이미지 파일 업로드를 위해서 파일업로드 라이브러리인 Multer와 저장소로 S3를 사용

• Express
  Node.js진영의 가장 인기가 많고 널리 사용되고 있는 프레임워크로 Express를 사용

• ES lint
  코드의 컨벤션을 지키기 위해 엄격한 규칙을 가질 수 있는 airbnb룰 ESlint를 적용

담당 기능에 대한 문제해결(트러블 슈팅)

• 문제1
  파일 업로드 시 이미지 외 다른 텍스트나 동영상파일이 업로드 가능하게 되어 데이터베이스에 저장되는 상황 발생

• 문제의 원인
  Multer라이브러리가 이미지 뿐만 아닌 여러 파일 업로드를 지원하는 점을 감안하지 않고 유효성검사를 실시하지 않음

• 해결과정

1. 프로젝트를 완성 이후 테스트하는 과정에서 예외적으로 .txt파일 이나 .wmv파일을 넣음 => 화면에는 이미지 없음의 표시가 발생하고 S3에 저장되는 현상을 확인

2. 미들웨어 구간이 아닌, 게시물 생성 서비스 로직에서 .txt나 .wmv파일을 걸러내는 유효성 검사기를 만듦 => 유효성을 검사해야할 종류가 다양해짐

3. Multer라이브러리 자체적으로 내포하고 있는 filefilter기능을 찾아서 이미지 확장자와 대조하여 맞을 때만 통과 할 수 있도록 미들웨어에 내용 추가로 해결

filefilter관련 에러처리 포스팅 바로가기 << 클릭

• 문제2
  텍스트 에어리어에서 클라이언트가 엔터(Enter)키 를 이용하여 행을 변경하여 글을 작성하고 저장하였을 때, 조회 시 작성한 글의 엔터(Enter)키의 개행 적용이 발생하지 않는 현상

• 문제의 원인
  JSON 객체의 전달로 인한 문자열 변환으로 데이터베이스에도 개행은 \r\n으로 저장되고 프론트에서 요청이 왔을 때도 똑같은 형태의 문자열을 보내주게 됨

• 해결과정

1. 게시글 조회 파트를 프론트인원들과 작업 중 조회 시 작성한 글의 엔터(Enter)키의 개행 적용이 발생하지 않는 현상을 확인

2. 개행문자를 <br>태그로 바꿔주면 된다는 글을 읽고 replace메소드를 사용해서 <br>태그로 변경 => 이후 개행 부분에 문자열 형태로 <br>태그가 그대로 노출됨

3. 다시 처음으로 돌아와서 프론트인원에 요청하여 전송되는 JSON객체의 content의 \r\n개행문자를 <br>태그로 변경해달라고 요청함 => 태그의 적용으로 개행이 적용되었지만, 문단 분리형 태그라 일반적인 게시글에 비해서 개행이 매우 넓게 생성됨

4. 구글링 중 <pre>라는 태그를 새로알게되어 content를 <p>태그가 아닌 <pre>태그 사용을 요청함 => 개행이 잘 적용되어 해결됨.

개행문자 에러처리 관련 포스팅 바로가기 << 클릭