20240424 맘대로 해봐라! 3차 프로젝트 FlowNary SNS 7일차

24.04.24 대화 / 작업내용
# 1교시
리눅스, AWS 기출문제 공부

이윤주 : 지금 검색해서 리눅스랑 aws 기출문제 찾아주세요 
여기 공유 해주세요

이병학 : 리눅스마스터1급20230311(교사용).pdf 파일 공유

윤영준 : [리눅스마스터 1급 실기] 1502회 기출문제 (바로 풀기) 사이트 공유
https://d1.awsstatic.com/ko_KR/training-and-certification/docs-sa-assoc/AWS-Certified-Solutions-Architect-Associate_Sample-Questions_v4.0_FINAL.pdf

https://blog.naver.com/limits2018/220772068617 리눅스 단답형 문제입니다

# 2교시
안순현 : 회원가입/로그인 파이어베이스랑 제 api랑 연동 하겠습니다

이병학 : 저는 스프링이랑 연동하는 거 해볼게요

안순현 : 회원가입 성공했고 비밀번호 일치여부랑 아이디 겹치는거 알림창 만들겠습니다

이병학 : 리액트-스프링 연동 성공 스크린샷 이미지 업로드

곽주영 : 이따 다같이 세팅할까요?

이병학 : 네 다음시간에 방법 정리해볼게요

이윤주 : 1교시 2교시 어떤 작업 하셧는지 알려주세요~

# 3교시
곽주영 : react-input-emoji 라이브러리의 자체 CSS를 board.css에 옮겨서
디자인 작업했습니다.
안순현 : firebase 인증과 login,register 페이지에서 연결해서db 들어가는거 확인했고, register에서  이메일형식확인, 비밀번호 길이와 일치여부, 특수문자/숫자 포함여부 확인 메시지 추가했습니다.
현재 register에서 이메일 중복 확인중입니다

로그인/회원가입 구현 완료입니다.
구글 로그인 연동해보겠습니다

      { path: 'profile/mypage', element: <Mypage /> },
마이페이지 경로 변경. 
마이페이에 통계랑 책갈피만 있는데 이 부분 이름 다른거 생각나시는 분 말씀해주세요

이병학 : FlownarySpring 설정법.docx 
text.java
application.properties
Test.txt
파일 업로드

Test.txt는 visual code에서 확장자명을 jsx로 바꿔주시면 됩니다

윤영준 : flownary    routing table   ( title, bContents ) 자료수집하여 추가하고있습니다.

이병학 : 통계 페이지 이름은 stat이 어떨까요 

안순현 : 통계랑 책갈피가 같이 있는데 페이지 버튼을 누를때마다 바뀌게 하면 좋을가요?

이병학 : 분리할 수 있다면 분리하는게 낫죠

곽주영 : 스프링부트-react 연결했습니다

안순현 : 일단 레지스터 구글 로그인하는거 해보고 나눠볼게용


# 4교시
구글 연동 끝
register
        try {
            // 이메일 중복 확인
            await auth.createUserWithEmailAndPassword(userInfo.email, userInfo.password);
            console.log("회원가입 성공");
            alert('회원가입 성공. 환영합니다.');
            register(userInfo);
            navigate('/login');
        } catch (error) {
            // 이메일이 이미 사용 중일 경우
            console.error("이미 사용 중인 이메일입니다:", error.message);
            alert("이미 사용 중인 이메일입니다. 다른 이메일을 입력해주세요.");
            return;
        }

import React, { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Card } from "@mui/material";

import '../css/theme.css';
import { register } from "../api/firebase";
import { initializeApp } from 'firebase/app';
import { GoogleAuthProvider, getAuth, signInWithPopup } from 'firebase/auth';

export default function Register() {
    // 테마설정
    const [theme, setTheme] = useState('light'); // 초기 테마를 설정
    const toggleTheme = () => {
        setTheme...

login
import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Card } from "@mui/material";
import { login } from "../api/firebase";

import '../css/theme.css'; // CSS 임포트

export default function Login() {
    const [theme, setTheme] = useState('light'); // 초기 테마를 'light'로 설정

    // 테마를 토글하는 함수
    const toggleTheme = () => {
        setTheme(theme === 'light' ? 'dark' : 'light');
    };

    // 테마에 따른 배경 이미지 경로 변경
    const backgroundImage = theme === ...

.env.local
REACT_APP_FIREBASE_API_KEY=AIzaSyA7v4YqLGI-ih2v5TT4-HZc23yxTuMsOSM
REACT_APP_FIREBASE_AUTH_DOMAIN=project-f3a7f.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=project-f3a7f

# 아래는 안씀
# REACT_APP_FIREBASE_STORAGE_BUCKET=project-f3a7f.appspot.com
# REACT_APP_FIREBASE_MESSAGING_SENDER_ID=713476532738
# REACT_APP_FIREBASE_APP_ID=1:713476532738:web:f7525cd864b937726c551b

GENERATE_SOURCEMAP=false


곽주영 : firebase.js는 youtube에서 따왔나요?
안순현 : 네

# 5교시
이윤주 : 지금 작업하고 계신것과 
1,2,3,4 교시에 작업하신 것 정리해서 올려주세요
아까 올리신 분은 생략하시고 지금 시작한 작업만 톡에 올리세요

안순현 : 
env.local에 본인 api로 해야할 것 같습니다
cmd로 firebase에 본인이 로그인 한 값이여서
일치하지 않아서 제 api로 사용 못하는 것 같습니다

그 외 파일들은 정리해서 바로 보내드릴게요
구글로그인 구현했고, 레지스터 이메일 체크 오류 해결했습니다.

이제 다른 사람들 공유해서 되는거 확인하고
mypage - 통계 책갈피 구분하는거 링크로 나누고 파일 쪼개는거 해볼게요

20240424Login&Register.zip 파일 공유

이병학 : Spring react 연동했고 지금 heidiSql에 DB 추가할 파일 만드는 거 작업중입니다

정성한 : 1~3교시에는 개인사정으로 인해 공석
1:40 ~ 2:00 env.local 본인 api로 변경 및 firebase 정보 연동 확인