본문 바로가기

분류 전체보기

[React] 로그인 기능 최종 구현 https://youtu.be/dFqb4KvRpNA?si=-2b0Bpht-CzUoqKA 본 포스팅은 John Ahn님의 유튜브 강의를 참고했습니다. 안녕하세요 오랜만에 왔네요 : ) 오늘은 로그인 기존에 만들던 로그인 기능을 마무리 해보려고 합니다. 먼저 코드를 보여드리고 해석해보겠습니다. import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { loginUser } from '../../../_actions/user_action'; import { useNavigate } from 'react-router-dom'; function LoginPage() { const dispatch = useD.. 더보기
[React] Redux 기초 https://youtu.be/dJC_uAR7d60?si=mSyXxNP_wvjcaz-Q 본 포스팅은 John Ahn 님의 유튜브 강의를 참고했습니다. React에서는 Props와 State라는 것이 있습니다. 먼저 Props는 Properties의 줄임말로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘길 때 넘겨지는 데이터를 Props라고 합니다. Props는 자식 컴포넌트로 일단 보내지면 변경될 수 없고 Props를 다시 내려줘야 변경할 수 있습니다. State은 부모 컴포넌트 안에서만 데이터 교환을 이뤄질 때의 데이터를 State이라고 하고 변경될 수 있는 특징이 있습니다. Redux에서는 이러한 데이터를 직접 접근하여 상태 관리를 용이하게 해줍니다. Redux에서 Action은 어떤 작업이 일어났는.. 더보기
[CSS] Antd CSS Framework 처음 사용해 본 CSSs Framework는 React BootStrap이었는데 이번 프로젝트에서는 Antd라는 Framework를 사용해 볼 예정입니다. Framework를 사용하면 좋은 점은 CSS에 시간과 노력을 투자할 필요가 줄어든다는 점입니다. 그래서 기능에 더 집중할 수 있게 됩니다. 그 중에서도 Antd는 중국에서 만든 FrameWork로 기능이 많고 깔끔한 디자인인게 장점이고 그렇기 때문에 용량 문제가 단점으로 꼽힐 수 있습니다. Ant Design of React - Ant Design Ant Design of React - Ant Design An enterprise-class UI design language and React UI library with a set of high-qu.. 더보기
[React] Proxy 문제 해결하기 - http-proxy-middleware https://youtu.be/BHSJw8PDwj0?si=45xjqW7_15UDmeUS 본 포스팅은 John Ahn 님의 유튜브 강의를 참고했습니다. client와 server가 요청을 보낼 때 포트가 다르면 CORS정책 문제가 발생합니다. CORS는 Cross Origin Resource Sharing의 약자로 포트가 다른 상태로 요청을 보내면 보안이 취약해 질 수 있다는 이유로 이러한 행동을 막는 것 입니다. 따라서 포트가 다를 경우는 CORS문제를 해결해야 합니다. 한 가지 방법은 http-proxy-middleware라는 모듈을 사용하는 것입니다. 먼저 이것을 터미널에서 설치해줍니다. npm i http-proxy-middleware --save 그리고 src폴더로 가서 setupProxy라는 j.. 더보기
[React] 라우팅 복습 오늘은 저번에 만든 폴더 구조를 가지고 App.js에서 라우팅을 해보겠습니다. 먼저 npm i react-router-dom --save를 터미널에 입력해서 설치해줍니다. Feature Overview v6.22.1 | React Router Feature Overview v6.22.1 | React Router Feature Overview Client Side Routing React Router enables "client side routing". In traditional websites, the browser requests a document from a web server, downloads and evaluates CSS and JavaScript assets, and renders th.. 더보기
[React] 프로젝트를 위한 React 세팅 - ES7 https://youtu.be/zATkDm0e_CM?si=HkNhOlTJozjISY0c 본 포스팅은 John Ahn님의 유튜브 강의를 참고했습니다. 오늘은 프로젝트 만들기에 앞서 클라이언트 폴더와 파일 구조를 만들어서 세팅하는 시간을 가져보도록 하겠습니다. 만드는 과정은 일반적이니까 생략하고 구조를 설명하겠습니다. 저번 시간까지 만든 서버 파일들은 서버 폴더에 넣었고 클라이언트 폴더를 새로 만들어서 기존에 있던 소스 파일들과 components폴더와 views 폴더를 만들었습니다. components 폴더에는 components코드들이 작성된 파일들이 들어가 있고, views 폴더에는 프로젝트에서 만들 페이지들이 들어가 있습니다. hoc 폴더는 Node.js의 Auth와 같은 역할로 페이지를 이동할 때 .. 더보기
[Node.js] 로그아웃 기능 https://youtu.be/zye0VrVUfuI?si=9Tmd6CsGreZ3m3SL 본 포스팅은 John Ahn 님의 유튜브 강의를 참고하였습니다. 안녕하세요 오늘은 로그아웃 기능을 구현하는 방법을 알아보도록 하겠습니다. 로그아웃은 로그아웃 라우터를 만들고 데이터베이스에 있는 로그아웃 하려는 유저의 토큰을 지워주기만 하면 됩니다. 먼저 로그아웃 라우터를 만들어 보겠습니다. server.js파일로 가서 app.get함수를 만들어 줍시다. app.get('/api/users/logout', auth, async (req, res) => { try { const updatedUser = await User.findByIdAndUpdate(req.user._id, { token: "" }, { new: tr.. 더보기
[Node.js] Auth 기능 만들기 https://youtu.be/OGVsnbEbSLM?si=Wvx3Btu8ptwH0WYH 본 포스팅은 John Ahn님의 유튜브 강의를 참고하였습니다. 웹 서비스에서는 로그인 여부에 따라 접속할 수 있는 페이지가 있고, 회원만 사용할 수 있는 페이지가 있습니다. Auth 기능은 라우팅을 통해서 이것을 구분해주는 역할을 합니다. Auth의 기본적인 개념은 Client에서는 쿠키에 담겨져 있는 토큰을, Server에서는 DB에 담겨져 있는 토큰을 서로 비교하는 것입니다. 먼저 쿠키에 있는 토큰을 가져와서 복호화하고 토큰을 비교해야합니다. 이를 위해서는 먼저 get요청을 해야합니다. app.get('/api/users/auth',auth, (req,res)=>{ res.status(200).json({ _id:.. 더보기

티스토리툴바