사이드 프로젝트 썸네일형 리스트형 카페 추천 웹사이트(회원가입 / 로그인 구현 백엔드) 백엔드에서 회원가입과 로그인하는 기능을 구현하겠습니다. 기능 구현 하다가 막힌 부분이 있는데 아무리 찾아도 뭔가 해결을 못해서 다음에 계속 이어서 하겠습니다. 혹시 코드 보고 뭐가 문제인지 아시는 분은 댓글로 알려주시면 감사하겠습니다. ㅜㅜ * 페이지를 넘어가서 하는거 말고 현재는 메인페이지에서 팝업창으로 회원가입 / 로그인 기능을 구현하려는 상황 * CafeMain.js코드 (React)import React, { useState, useEffect } from 'react';import { useNavigate } from 'react-router-dom'; // useHistory 훅 임포트import styles from './CafeMain.module.css';import { Link } fr.. 더보기 카페 추천 웹사이트 카페리스트 카드 디자인 수정CafeList.module.css 코드* { margin: 0; padding: 0; box-sizing: border-box;}a { text-decoration: none; color: black;}li { list-style: none;}img { display: block; width: 100%;}.bgImg { display: flex; flex-direction: column; justify-content: flex-start; /* 수직 정렬을 상단으로 변경 */ background-image: url('../img/main_bg.avif'); /* 배경 이미지 설정 */ background-s.. 더보기 카페 추천 웹사이트(메인페이지 로그인 팝업, 비밀번호 재설정, 상세페이지 수정요청 버튼) 오늘은 메인페이지에서 회원가입, 로그인만 구현했던 것에 더해서 로그인 팝업에 비밀번호 재설정 기능을 추가하고, 카페 상세페이지에서 수정요청버튼을 누르면 수정내용을 적어서 제출할수있게 구현함 요약메인페이지비밀번호 재설정카페 상세페이지수정요청 버튼 기능 코드를 블로그에 작성했었는데 가독성이 떨어지는 기분이라 Github 주소를 올려두겠습니다. 참고하실분들이 계시다면 참고 해주시면 됩니다. 시연 영상 기능 시연 영상이기 때문에 소리 끄고 보시는걸 추천드립니다.* 음악 틀어놔서 시끄러울 수 있습니다. * Github 주소 (프로젝트)GomTang99/cafeRecommend 더보기 카페 추천 웹사이트(마이페이지 즐겨찾기한 목록 기능, 마이페이지 디자인) 저번에 마이페이지 페이지를 만들고 내가 작성한 카페 목록을 보여주는 페이지를 만들었다. 오늘은 저번에 작업한 페이지에 + 즐겨찾기 목록과 마이페이지 디자인을 해보겠습니다. CafeMypage.js코드import React, { useState } from "react";import { useNavigate } from "react-router-dom";import styles from './CafeMypage.module.css';const initialCafes = [ { id: 1, name: "그릿비", region: "울산", category: "뷰맛집", description: "아름다운 바다를 볼 수 있는 카페", isFavorite: true }, { id: 2, name: "롤링.. 더보기 카페 추천 웹사이트(카카오맵 API 환경변수 설정, 마이페이지 컴포넌트 생성 및 css) .env파일에 환경변수를 설정한다. = 뒤에 개인 API키 삽입REACT_APP_KAKAO_KEY=89fd30d4 index.html에 scirpt 추가script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_KEY%">script> 카카오맵 지도가 들어가는 페이지 코드CafeDetail.jsimport React, { useEffect, useRef } from "react";import styles from './CafeDetail.module.css';import { Link, useParams, useNavigate } from "react-router-dom";const { kakao } .. 더보기 카페 추천 웹사이트(즐겨찾기 기능) 카페리스트에서 카드칸에 즐겨찾기 기능을 하트모양으로 만들기 CafeList.js코드import React, { useState } from "react";import styles from './CafeList.module.css';import { Link } from 'react-router-dom';import { FaBell } from "react-icons/fa";export default function CafeList() { const [selectedRegion, setSelectedRegion] = useState("all"); const [selectedCategory, setSelectedCategory] = useState("all"); const [showAlert,.. 더보기 카페 추천 웹사이트(카페추천리스트 페이지 수정, 메인페이지 수정) 기존의 디자인했던 것에 추가되는부분이 알람과 마이페이지부터 수정하겠습니다. 알림버튼은 아이콘을 사용할 예정이기 때문에npm install react-icons --save를 사용해서 설치를 해준다. 설치가 완료되면React Icons 해당 사이트에서 사용할 아이콘을 골라준다.(저는 알림버튼을 대체할 종모양 => fa FaBell) 그 다음 해당 아이콘을 사용할 react파일에 import해준다.import { FaBell } from "react-icons/fa"; 여기서 주의할 점은 'react-icons/fi' 이 부분이다.위의 사진을 자세히 보면 아이콘의 이름들이 파스칼 케이스로 되어 있는 것을 볼 수 있다.(파스칼 케이스 : 첫 글자와 중간 글자가 모두 대문자) 여기서 파스칼 케이스 중 첫 번째 .. 더보기 카페 추천 웹사이트(뭔가 찜찜해서 다시 되짚고 가는) 저번시간에 Node.js로 DB연결을 했는데 뭔가 프론트 부분에서도 그렇고 백엔드 부분에서도 그렇고 세부적으로 기획하지 않고 넘어 간거 같아 기존의 프로젝트를 유지하면서 처음부터 차근차근 진행하려고 한다. 1. 메인페이지 (기능)사진 클릭시 로그인 창 띄우기로그인 창 (회원가입 시 이메일=아이디, 비번 찾기 기능)이미지 슬라이드 (가능하다면 카페 추천 리스트에 올라와있는 사진들로 슬라이드 구성 ex) 카페가 새로운 곳이 추가가된다면 이미지 슬라이드에도 사진하나가 추가되어 슬라이드 되는 기능)2. 카페 리스트 페이지 (기능)카테고리 별 검색 (지역, 맛집 태그)카페 추가 버튼마이페이지, 알림 nav추가즐겨찾기 기능3. 카페 상세 페이지 (기능)카페 이미지 및 카카오맵API로 카페 위치 표시 => 이 기능.. 더보기 이전 1 2 3 다음
