그랜파 개발자의 프론트엔드 공부

블로그의 조회수글의 목록에서 글을 선택하면상세보기 페이지로 이동해서 글의 전체 내용을 보여줍니다.이렇게 상세보기 페이지가 열릴 때 조회수를 증가시켜 글의 조회수를 집계합니다.   우리의 작은 블로그는 웹툰을 볼 때 화면을 스크롤하면서 보듯우리의 작은 블로그도 마찬가지로 스크롤하면서 글을 볼 수 있도록 하여페이지의 이동 없이도 목록의 글들을 연속해서 볼 수 있습니다.그래서 상세보기가 필요할까 생각할 수도 있지만,상세보기에는 댓글과 답글이 있습니다.또한 구독 요청, 구독 취소를 할 수 있고,글쓴이라면 자신의 글을 수정할 수도 있습니다.이처럼 상세보기에 기능이 많습니다.사실 블로그에 글을 쓰면 조회수가 궁금하기도 합니다.우리의 작은 블로그는 목록에서 이미 글의 내용을 모두 볼 수 있기 때문에상세 보기로 들어오..

블로그 구독블로그의 구독은 특정 블로그의 새로운 글을 사용자가 지속적으로 받을 수 있도록 설정하는 기능을 의미합니다.구독은 블로그를 즐겨 찾는 독자와 블로그글쓴이 간의 연결을 강화하는 주요 도구입니다.구독 요청을 하면 글쓴이가 새로운 글을 등록할 때 푸시 알림을 받을 수 있고,독자는 자신이 구독하는 글쓴이들의 글을 한 곳에 모아볼 수 있습니다. 구독 요구 사항글 상세보기에서 구독을 신청할 수 있습니다.구독을 신청할 수 있으니, 구독 취소도 할 수 있습니다.구독 신청을 하면 내가 구독하는 글들을 구독 페이지에서 모아 볼 수 있고구독 중인 글쓴이가 새로운 글을 저장하면 푸시 알림도 받을 수 있습니다.본인의 글은 구독 요청이 필요하지 않으므로구독 관련 버튼이 보이지 않습니다..구독 기능 정의구독 신청을 할 수..

게시글 댓글에 대한 답글블로그 댓글과 답글 기능은 단순한 소통 수단을 넘어, 블로그의 활성화와 신뢰도를 높이는 중요한 요소입니다.댓글을 통해 독자들은 자신의 의견을 공유하고, 블로거와 직접 소통할 수 있습니다.답글 기능이 있으면 토론이 자연스럽게 이어지고, 블로거와 독자 간의 관계가 강화됩니다.답글 쓰기블로그의 게시글에 대해 댓글을 쓸 수 있습니다.댓글은 게시글의 서브컬렉션 comments 컬렉션에 저장 됩니다.댓글에 대해 답글을 쓸 수 있습니다.댓글의 답글은 댓글의 서브컬렉션 replies 컬렉션에 저장이 됩니다.글 상세보기 페이지가 열릴 때 글을 로드하면서글의 댓글도 state의 comments 배열에 저장하였습니다.각 댓글에 대한 답글은 comments 배열의 각 요소에 replies 배열에 로드합..

블로그 댓글 쓰기블로그의 댓글은 특정 블로그 게시물에 대해 방문자가 의견, 피드백, 질문 등을 작성할 수 있는 기능을 의미합니다. 댓글은 블로그의 중요한 소통 도구로, 글쓴이와 독자 간의 소통 창구 역할을 하며, 콘텐츠의 가치를 높이고 독자의 참여를 유도하는 데 도움을 줍니다.   댓글 기능을 구현합시다.댓글 요구 사항댓글은 자신의 글에 쓸수도 있고, 다른 회원의 글에도 쓸 수 있습니다.댓글은 하나의 게시글에 대해 여러 사용자가 여러 개를 쓸 수 있습니다.댓글은 게시글 아래 입력 필드와 저장 버튼이 있어 입력 필드에 내용을 작성하고,저장 버튼을 누르면 저장합니다.댓글을 저장할 때 글쓴이 정보와 작성일이 함께 저장됩니다.댓글을 저장할 때 posts 컬렉션의 해당 문서의 댓글수 항목도 증가합니다.댓글은 게시..

블로그 글 수정글쓴이는 자신의 글을 수정할 수 있습니다.글의 상세 보기 페이지에 접속한 사용자가 글쓴이라면 ‘수정’ 버튼이 나타납니다.수정 버튼을 누르면 글을 수정할 수 있는 EditView 컴포넌트로 이동하고EdtiView 컴포넌트에서 글을 수정할 수 있습니다. 글 상세 보기에서 수정 버튼을 누르면 글 수정 페이지로 이동할 때 수정할 글은 가지고 가려고 합니다.props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 Vue의 기능입니다.부모 컴포넌트가 데이터를 제공하고, 자식 컴포넌트가 이를 받을 수 있습니다.Vue Router를 사용할 때 props를 통해 라우트 매개변수(route params), 쿼리(query) 또는 정적인 데이터를 컴포넌트로 전달할 수 있습니다. 이는 데이터 ..

블로그 글 상세 보기홈페이지의 글목록에서 글의 모든 내용을 볼 수 있음에도 불구하고,글 상세보기 페이지가 별도로 있습니다.이것은 글 상세보기에서 구현해야 할 기능들이 많기 때문입니다.글 상세 보기 페이지에서글의 저자이면 글을 수정할 수 있고댓글, 답글을 쓸 수 있고,구독 요청을 할 수 있습니다.또한 저자의 블로그로 이동할 수도 있습니다. 하나씩 기능을 구현해 봅시다.글목록에서 글을 선택하면 글의 id를 파라미터로 가지고 상세보기 페이지로 이동합니다.글의 id를 파라미터로 받아서 글 id로 글을 로드하여 화면에 나타냅니다. 상세 보기 페이지에서는 글의 id로 글을 로드하여 화면에 출력합니다.글의 내용을 보여줄 때는 안전한 HTML로 만들어 화면에 나타내고,글쓴이의 Profile을 얻어 글쓴이 블로그 이름,..

블로그 글 상세보기홈페이지의 글 목록에서 글을 선택하면 상세보기 페이지로 이동합니다.그런데 이미 목록에서 글의 전체 내용을 볼 수 있는데 상세 보기라니 좀 이상하기는 합니다.1. 글 상세 보기글을 보는 것에는 많은 기능이 필요합니다.상세보기를 위한 별도의 페이지가 있습니다.상세 보기의 글이 글쓴이 자신의 글이라면 수정할 수 있습니다.글에 대한 댓글을 쓸 수 있고,댓글에 대한 답글을 쓸 수 있습니다.글쓴이에 대한 구독 신청, 구독 취소를 할 수 있습니다.글쓴이의 블로그 이름을 누르면 글쓴이의 블로그로 이동할 수 있습니다.상세보기 페이지가 열릴 때 조회수를 카운트 할 수 있습니다.2. 글 상세 보기 기능1. 글 상세보기글목록에서 글을 선택하면 글의 id를 파라미터로 가지고 상세보기 페이지로 이동합니다.글의 ..

홈페이지 - 글 전체 보기새글을 쓰고 저장을 하였습니다.글을 쓰는 것은 보기 위해서이니 볼 수 있는 방법을 만들어야 합니다.앱이 열릴 때 로그한 모든 글을 목록으로 화면에 나타내어야 하고,글의 정렬 방법의 선택에 따라 정렬하여 목록을 나타냅니다.목록의 각 글에는 글의 카테고리, 제목, 내용, 글쓴이, 글쓴 날짜와 시간 등이 나타납니다.myBlog에 접속을 하면 처음으로 나타나는 페이지를 홈페이지라고 합시다. 1. 홈페이지 요구 사항보통은 글의 제목과 글 내용 일부를 목록으로 보여주고,목록에서 글을 선택하면 글의 모든 내용을 보여주는 시퀀스를 가집니다.그러나 myBlog는 글의 목록에 글의 제목과 모든 내용을 볼 수 있습니다.즉 웹툰처럼 화면을 위로 스크롤시켜 페이지를 바꾸지 않고 연속적으로 글을 볼 수 ..

글보기 보안블로그 글보기 기능을 구현할 때에는 게시글을 안전하게 표시하려면 보안 조치가 필요합니다.1. XSS(크로스 사이트 스크립팅) 공격 방지문제점사용자가 같은 악성 스크립트를 입력하면, 브라우저에서 그대로 실행될 수 있음.-> 방문자의 개인정보 탈취, 피싱, 악성 코드 실행 등의 보안 문제 발생해결 방법sanitize-html 같은 HTML 필터링 라이브러리 사용Vue의 v-html을 직접 사용하지 않거나, 반드시 필터링 후 사용import sanitizeHtml from "sanitize-html";const safeHtml = sanitizeHtml(userInput, { allowedTags: ["b", "i", "strong", "a", "p", "ul", "li", "h1", "h2"]..

블로그 글쓰기계정을 만들고, 사용자 인증, 글의 카테고리까지 만들었습니다.이제 글쓰기 기능을 구현해야 할 때입니다.1. 글쓰기 요구 사항글을 쓰는 시나리오를 생각해 봅니다.우선 로그인해야 합니다. 회원만 글을 쓸 수 있기 때문입니다.Menu Drawer에 글쓰기 메뉴 항목 외에,글쓰기 페이지를 열기 위한 아이콘도 화면 하단에 둘 생각입니다.글쓰기 아이콘을 누르면 글쓰기 페이지가 열립니다.글쓰기 페이지에 등록된 카테고리를 나타내어 선택할 수 있도록 합니다.글의 제목과 내용을 쓰고 저장을 누르면 글이 저장됩니다.2. 글의 데이터 항목사용자는 카테고리를 선택하고,글의 제목과 내용을 쓴 후 저장합니다.글이 저장될 때는 어떤 것들이 추가될까요?글의 카테고리, 제목, 내용 외에도글쓴이의 userId, 이름, 글을 ..