React 썸네일형 리스트형 [React] 영양제 추천 사이트 - 졸업 작품 예행 연습(1) 안녕하세요 오랜만에 돌아왔네요. 개강 후 수강신청하고 졸업작품 준비하느라 시간에 허덕이고 있습니다. 다행히 지금은 방향이 정해져서 프론트엔드 쪽으로 일단 진행하고 백엔드 부분을 도와주는 식으로 나아갈 것 같습니다. 아직 파트 분배를 하지 않았지만 미리 사이트를 만들고 있습니다. 저희 조는 영양제를 추천해주는 웹사이트를 만들기로 했습니다. 사용자의 건강 정보와 식단을 입력받으면 사용자의 영양소 섭취량과 권장 섭취량을 비교해서 나온 수치로 부족한 영양소 성분을 보충해주는 영양제 사이트 입니다. 먼저 디자인의 방향성을 잡기 위해 로고를 만들었습니다. 로고 1도 괜찮았지만 좀 더 범용성이 넓을 것 같은 로고 2를 채택했습니다. 사이트 이름은 로고처럼 NUTRIGUIDE가 될 것 같습니다. 먼저 랜딩페이지를 만들.. 더보기 [React] 로그인 여부 확인 - Auth [Node.js] Auth 기능 만들기 (tistory.com) [Node.js] Auth 기능 만들기 https://youtu.be/OGVsnbEbSLM?si=Wvx3Btu8ptwH0WYH 본 포스팅은 John Ahn님의 유튜브 강의를 참고하였습니다. 웹 서비스에서는 로그인 여부에 따라 접속할 수 있는 페이지가 있고, 회원만 사용할 수 있는 페이지 pufrontend.tistory.com 서버에서 만든 Auth 기능을 만들었었습니다. 클라이언트에도 적용시킬 차례입니다. hoc 폴더를 만들고 Auth.js 파일을 만들어 줍니다. import React, { useEffect } from 'react'; import Axios from 'axios'; import { useDispatch } from 'r.. 더보기 [React] 로그아웃 기능 중요한 로그아웃 기능을 빼먹었네요. app.get('/api/users/logout', auth, async (req, res) => { try { await User.findOneAndUpdate({ _id: req.user._id }, { token: "" }); return res.status(200).send({ success: true }); } catch (error) { return res.json({ success: false, error }); } }); 서버에서 로그아웃을 구현했었는데 id에 해당하는 user의 id가 존재한다면 토큰을 지워버리는 메커니즘입니다. 성공한다면 success: true를 반환할 것입니다. 그럼 먼저 로그아웃 버튼을 만들어 주겠습니다. 로그아웃 랜딩페이지에서 .. 더보기 [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은 어떤 작업이 일어났는.. 더보기 [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.. 더보기 이전 1 2 3 4 5 다음 목록 더보기
