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

게시글 댓글에 대한 답글블로그 댓글과 답글 기능은 단순한 소통 수단을 넘어, 블로그의 활성화와 신뢰도를 높이는 중요한 요소입니다.댓글을 통해 독자들은 자신의 의견을 공유하고, 블로거와 직접 소통할 수 있습니다.답글 기능이 있으면 토론이 자연스럽게 이어지고, 블로거와 독자 간의 관계가 강화됩니다.답글 쓰기블로그의 게시글에 대해 댓글을 쓸 수 있습니다.댓글은 게시글의 서브컬렉션 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, 이름, 글을 ..

블로그 카테고리 관리블로그에서 카테고리를 사용하면 다음과 같은 장점이 있습니다.1. 콘텐츠 정리 및 구조화비슷한 주제의 글을 그룹화하여 블로그가 체계적으로 정리됨예: "프로그래밍", "라이프스타일", "여행", "요리" 등사용자 입장: 원하는 주제를 빠르게 찾을 수 있음블로그 운영자 입장: 콘텐츠를 쉽게 관리 가능2. 사용자 경험(UX) 향상방문자가 관심 있는 글을 쉽게 찾도록 유도카테고리를 클릭하면 관련 글 목록을 바로 확인 가능방문자가 블로그에서 더 오래 머무를 가능성이 증가3. SEO(Search Engine Optimization) 최적화카테고리별로 검색엔진에 최적화된 URL 구조 생성 가능예:- https://example.com/category/vue- https://example.com/ca..

구글 계정으로 로그인OAuth(Open Authorization)는 제3자 서비스에서 사용자의 비밀번호를 공유하지 않고 인증 및 권한을 위임할 수 있도록 하는 표준 프로토콜입니다. 예를 들어, 웹사이트나 앱에서 Google, Facebook, GitHub 등의 계정으로 로그인하는 기능이 OAuth를 사용한 사례입니다.OAuth의 핵심 개념1. 사용자의 로그인 정보를 직접 제공하지 않음앱이 직접 사용자의 아이디/비밀번호를 저장하지 않음대신, OAuth 제공자(예: Google, Facebook) 를 통해 사용자를 인증2. 제한된 권한 부여사용자가 특정 권한(예: 이메일 접근, 프로필 정보, 파일 읽기/쓰기 등) 을 앱에 허용할 수 있음앱이 사용자 대신 특정 작업을 수행할 수 있도록 토큰(Token)을 발급..