Learn new Get simpler Do more

사용자가 로그인 페이지를 통해 블로그에 로그인을 할수 있습니다. 다음으로는 사용자가 로그인을 했는지 여부에 따라 페이지를 조정할수 있는 작업을 합니다. ArticlePage에서 이제 로그인 사용자만 좋아요를 한번만 누를 수있다던지 댓글을 로그인 한 상태에서만 작성할수 있는 제한등을 설정 합니다. 그러기 위해서는 Article페이지에 이 설정을 알려줄수 있는 작업을 해야 합니다. 그래서 이제부턴 Custom auth hook를 작성하도록 합니다. 현재 로그인 한 사용자들이 사용하고 훨씬 쉽게 찾을 수 있는 사용자 지정 Hook를 생성합니다. 그래서 src폴더 아래에 새로운 hooks라는 폴더를 먼저 생성합니다. 여기에는 custom hook를 저장시키는 용도로 사용합니다. 그 후 사용자 관리를 할 useU..

Firebase 연결 작업이 끝났으므로 실제로 로그인 페이지를 구현해 보도록 합니다. 우선 src폴더 안의 pages폴더에 LoginPage.js파일 생성하고 코드를 작성합니다. LoginPage.js import { useState } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { getAuth, signInWithEmailAndPassword } from 'firebase/auth'; const LoginPage = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, se..

사용자 등록이 완료되었으니 블로그 Front End에 Firebase Auth를 추가하도록합니다. 왼쪽 메뉴에서 Project Overvie 메뉴를 클릭하면 다음과 같이 작성한 프로젝트 메인 페이지가 보입니다. Get started by adding Firebase to your app이라는 문구가 보이면서 추가할 방법을 선택할수 있습니다. 여기서는 Web에 추가할 예정이므로 버튼을 클릭합니다. Register App 설정이 보이고 App의 닉네임은 별도로 구분하기 위한 이름으로 적당한 이름으로 정한 후 Firebase hosting을 사용을 하지 않을 예정이므로 체크를 하지 않은 후에 Register app 버튼으로 진행합니다. 그 다음으로 이제 블로그 Front End에서 사용할수 있는 방법이 나옵니..

지금까지 블로그에 데이터베이스를 연결했습니다. 다음으로 할 일은 블로그에 기본 사용자 인증을 추가하는 작업입니다. 코드로 사용자 인증을 넣을수도 있지만 많은 양의 노력이 필요하므로 여기서는 구글의 Firebase Auth로 인증작업을 진행합니다. Firebase Auth는 기본적으로 모든 사용자의 정보와 비밀번호를 매우 안전한 방식으로 저장하는 서비스입니다. 이것을 사용함으로써 Google의 보안정책에 편승할수 있으며 구글 서비스를 사용하는데에 제한사항이 줄어들게 될것입니다. 그럼 지금부터 Firebase Auth에서 프로젝트를 생성하여 사용자 관리를 해보고 나중에 블로그에 연결하도록 하겠습니다. 프로젝트를 만들기 위에 다음 URL로 접속을 합니다. http://console.firebase.google..

이번에는 댓글을 작성할수 있는 기능을 추가하도록 합니다. 댓글을 작성하는 폼은 상당히 복잡해 질수도 있으므로 따로 컴포넌트로 작성하여 불러와주는 방식으로 합니다. 그래서 components 폴더안에 AddCommentForm.js라는 파일을 생성하고 코드는 다음과 같이 작성합니다. AddCommentForm.js import { useState } from 'react'; import axios from 'axios'; const AddCommentForm = ({ articleName, onArticleUpdated }) => { const [name, setName] = useState(''); const [commentText, setCommentText] = useState(''); const a..

이제 좋아요 버튼을 생성하여 실제 사용자가 좋아요를 클릭할수 있게 하는 작업을 하겠습니다. 그렇게 위해서 버튼을 만들고 서버에 요청을 하는 다음과 같은 작업이 필요합니다. ArticlePage.js import { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import axios from 'axios'; import NotFoundPage from './NotFoundPage'; import CommentsList from '../components/CommentsList'; import articles from './article-content'; const ArticlePage = () => { c..

이제 블로그 페이지에 서버에 저장되어 있는 댓글(comment)을 불러오는 작업을 하겠습니다. 그렇게 하기 위해 우선은 components폴더 안에 댓글의 리스트를 보여줄 CommentsList.js파일을 생성해주고 코드는 다음과 같이 작성합니다. CommentsList.js const CommentsList = ({ comments }) => ( Comments: {comments.map(comment => ( {comment.postedBy} {comment.text} ))} ); export default CommentsList; ArticlePage.js import { useState, useEffect } from 'react'; import { useParams } from 'react-ro..

이제 실제로 서버에서 데이터를 로드해서 페이지를 불러오는 작업을 Axios를 이용해서 작성하겠습니다. 하드 코딩으로 되어있던 부분을 수정합니다. ArticlePage.js import { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import axios from 'axios'; import NotFoundPage from './NotFoundPage'; import articles from './article-content'; const ArticlePage = () => { const [articleInfo, setArticleInfo] = useState({ upvotes: 0, comments: ..

서버에서 문서 페이지로 데이터를 로드하는 방법을 살펴보겠습니다. 현재 페이지의 컴포넌트 중 어느것도 실제로 어떤 종류의 메모리도 가지고 있지 않습니다. 그 자체로 매개 변수로 요청을 받아서 그대로 결과를 뿌려주는 형태입니다. 이제 여기에 서버에서 반환하는 응답을 저장할 장소를 제공하도록 하겠습니다. 상태와 효과를 추가해주는 React hook을 사용합니다. 변경한 코드는 아래와 같습니다. ArticlePage.js import { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import NotFoundPage from './NotFoundPage'; import articles from './articl..

지금까지 작업한 Front End 파트와 Back End 파트를 연결하도록 하겠습니다. (참고) VS Code에서 따로 작업한 코드를 한 IDE에서 볼려면 새로 open folder로 오픈하거나 터미널에서 부모 폴더로 이동해서 code . 으로 새로운 IDE를 불러주면 됩니다. Client와 Server를 연결하기 위해 Axios library를 사용합니다. https://axios-http.com/docs/intro Getting Started | Axios Docs Getting Started Promise based HTTP client for the browser and node.js What is Axios? Axios is a promise-based HTTP Client for node.js..