🆕 최신 포스트
Next.js 13+에서 무한 대댓글 구현 (with mongoDB)
Next.js 13+에서 무한 대댓글 구현 (with mongoDB)
next.js 13 이상의 버전에서 mongoDB와 계층형 트리구조를 활용한 무한 대댓글을 구현하였습니다. 댓글가 대댓글의 그룹으로 묶어 관리하는 REF, 댓글의 순서를 결정하는 RE_STEP, 댓글의 들여쓰기 레벨을 의미하는 RE_LEVEL, 부모 댓글의 고유 식별자를 의미하는 RE_PARENT 총 4개의 속성을 이용해 자동으로 대댓글의 위치를 조정하도록 하였습니다. 클라이언트에서는 React의 hooks를 활용해 interactive한 사용자 경험을 제공하고 next.js의 serverless function을 활용해 대댓글 작성 api를 손쉽게 구현하였습니다.
2024-01-04
네이버 CDN 서버를 활용한 Markdown 이미지 첨부(3)
네이버 CDN 서버를 활용한 Markdown 이미지 첨부(3)
AWS S3에서 제공하는 javascript SDK를 이용해 node.js 환경에서 파일(이미지)를 api 요청을 통해 전송해보겠습니다. @aws-sdk/client-s3 모듈을 설치 후 next.js의 원하는 api 엔드포인트에서 route.ts를 작성합니다. S3 클라이언트에 연결하기 위한 객체를 선언하고 접근권한(ACL), 경로 등을 설정하고 Buffer 객체에 이미지를 담아 S3에 전송합니다. 바이너리 데이터로 이미지를 변환해 api의 요청사항을 만족시킵니다. 이미지를 별도의 DB에 분산저장(백업) 하여 데이터의 무결성을 유지합니다.
2023-12-16
[next.js] 네이버 CDN 서버를 활용한 Markdown 이미지 첨부(2)
[next.js] 네이버 CDN 서버를 활용한 Markdown 이미지 첨부(2)
안전한 HTTP 통신을 위해 이미지 파일을 base64 형태로 인코딩, next.js 서버단에서 CDN 서버에 업로드 하는것이 이상적입니다. github issue에 이미지를 등록하는것은 CDN 서버를 구성할 필요 없이 간편하게 이미지를 업로드 할 수 있지만 궁극적인 해결방안은 아닙니다. 네이버 클라우드 플랫폼의 CDN+와 Object Storage, AWS S3 bucket를 이용해 CDN 서버를 구성합니다. 네이버 클라우드 플랫폼의 API 인증키를 발급받고 서비스 사용 신청을 합니다.
2023-11-13
[next.js] CDN 서버를 활용한 Markdown 이미지 첨부(1)
[next.js] CDN 서버를 활용한 Markdown 이미지 첨부(1)
마크다운에서 이미지를 첨부하기 위해선 img태그의 src에 url을 전달하듯 url 형식의 문자열을 전달해야 합니다. 때문에 README를 작성하거나 저처럼 블로그 등지에서 마크다운을 활용하는 경우 첨부하고자 하는 이미지의 전처리 과정이 요구됩니다. 이미지 파일을 base64 형식으로 인코딩하여 안전한 문자열로 사용할 수 있습니다. HTTP 통신에서 JSON 형태의 통신을 위해 base64 형태로 인코딩할 필요가 있습니다. blob 객체 또한 이용 가능합니다. js의 내부 메소드로 간단하게 blob 객체로 인코딩, 브라우저에서 가상 url을 생성할 수 있습니다.
2023-11-11
[lv.2] 주차 요금 계산 | 프로그래머스
[lv.2] 주차 요금 계산 | 프로그래머스
프로그래머스 lv.2 주차 요금 계산 풀이 with javascript. javascript의 객체를 이용해 차량의 입/출차 시간을 기록, 해당 객체를 순회하며 주차시간을 주어진 요금표에 맞게 정산하는 것으로 문제를 해결한다.
2023-06-03
[lv.1] 성격 유형 검사하기 | 프로그래머스
[lv.1] 성격 유형 검사하기 | 프로그래머스
프로그래머스 lv.1 성격 유형 검사하기 풀이 with javascript. javascript의 객체를 이용해 성격 유형(이하 MBTI)별 획득 점수를 기록하고 MBTI의 value를 비교해 문제를 해결한다.
2023-06-01
👍 추천 포스트
Next.js 13+에서 무한 대댓글 구현 (with mongoDB)
Next.js 13+에서 무한 대댓글 구현 (with mongoDB)
next.js 13 이상의 버전에서 mongoDB와 계층형 트리구조를 활용한 무한 대댓글을 구현하였습니다. 댓글가 대댓글의 그룹으로 묶어 관리하는 REF, 댓글의 순서를 결정하는 RE_STEP, 댓글의 들여쓰기 레벨을 의미하는 RE_LEVEL, 부모 댓글의 고유 식별자를 의미하는 RE_PARENT 총 4개의 속성을 이용해 자동으로 대댓글의 위치를 조정하도록 하였습니다. 클라이언트에서는 React의 hooks를 활용해 interactive한 사용자 경험을 제공하고 next.js의 serverless function을 활용해 대댓글 작성 api를 손쉽게 구현하였습니다.
2024-01-04
[next.js] CDN 서버를 활용한 Markdown 이미지 첨부(1)
[next.js] CDN 서버를 활용한 Markdown 이미지 첨부(1)
마크다운에서 이미지를 첨부하기 위해선 img태그의 src에 url을 전달하듯 url 형식의 문자열을 전달해야 합니다. 때문에 README를 작성하거나 저처럼 블로그 등지에서 마크다운을 활용하는 경우 첨부하고자 하는 이미지의 전처리 과정이 요구됩니다. 이미지 파일을 base64 형식으로 인코딩하여 안전한 문자열로 사용할 수 있습니다. HTTP 통신에서 JSON 형태의 통신을 위해 base64 형태로 인코딩할 필요가 있습니다. blob 객체 또한 이용 가능합니다. js의 내부 메소드로 간단하게 blob 객체로 인코딩, 브라우저에서 가상 url을 생성할 수 있습니다.
2023-11-11
[python] snscrape를 이용한 웹크롤링 및 데이터 시각화
[python] snscrape를 이용한 웹크롤링 및 데이터 시각화
python 모듈인 snscrape, wordCloud 모듈을 이용해 twitter에서 특정 키워드가 포함된 트윗을 크롤링하여 언급 빈도수에 따라 시각화된 자료를 생성할 수 있다.
2023-03-21