기타 개발 과정

oh_eol·2022년 3월 1일

react

목록 보기

3/3

기타 먼저
개발 부문
- 메인 페이지, 회원가입 및 로그인, 비밀번호 찾기
  
  사용 관련
- css 사용 방법 : sass ++ node-sass 가 이것저것 다른 버전에 영향을 많이 받으니 node는 16버전으로 해야 잘 작동할 것임.
  
  1. Sass
- 프론트엔드 프레임워크 : material ui
  - https://velog.io/@sunkim01/React-Material-UI-시작하기
  
  Material-UI: A popular React UI framework
- git flow 관련
  
  Git Flow 개념 이해하기
  
  [Git] Git과 SourceTree를 이용한 협업 방법 (Git Flow)
- macOS mariaDB 설치
  
  Mac에 MariaDB 설치하기
  
  sign-in
  
  material-ui/docs/src/pages/getting-started/templates/sign-in at master · mui-org/material-ui
  
  sign-in-side
  
  material-ui/docs/src/pages/getting-started/templates/sign-in-side at master · mui-org/material-ui
  
  sign-up
  
  material-ui/docs/src/pages/getting-started/templates/sign-up at master · mui-org/material-ui
- 포스트맨 사용
```
아래와 같이 프론트에서 서버에 설정한 주소(http://localhost:8080) 후에 백엔드에 데이터를 보낼 주소(/api/signup) 을 뒤에 붙여서 주소 작성한 뒤 'Body' 에서 'raw' 설정한 뒤 'Text'→'JSON' 으로 변경하고 중괄호 안에 예시처럼 데이터 작성해서 send 하기.
```
  1. ddd
  
  프로젝트 실행
- hanium-webRTC-BE 파일 열어서 App 실행
- 다음과 같은 오류 발생.
- 아래 방법을 1.8 이 아니라 11 버전으로 작동하니까 해결은 된 것 같은데 다른 오류 생김... 해결 안된건가,,
```
jdk 11 설치: [https://gwanhyeon.github.io/Spring-20201123-java-compile-error/](https://gwanhyeon.github.io/Spring-20201123-java-compile-error/)

해결: [https://freelearn.tistory.com/17](https://freelearn.tistory.com/17)

```bash
  Caused by: java.sql.SQLNonTransientConnectionException: Socket fail to connect to host:hanium-videomeeting.ccunwgycpela.ap-northeast-2.rds.amazonaws.com, port:3306. connect timed out
```
```
  +++ 내 ip주소 보안그룹 인바운드에 등록 시에 ifconfig 등으로 나오는 ip주소 말고 aws 보안그룹 만들 때 보안그룹 인바운드 추가에서 나오는 내 ip주소로 해야 오류 안남,,,, 적어도 webRTC 프로젝트 인스턴스에서는 그랬음.
  
  +++ openVidu server 키기
```
ssh openvidu
sudo su
cd /opt/openvidu/
./openvidu start
```
  +++ swagger-ui 작동시키려고 백엔드 실행하면 아래와 같은 에러 페이지만 작동함...
  
  +++ Springboot와 React 연동하여 개발환경 만들기.
  
  Spring Boot와 React를 연동하여 개발환경을 만들어보자
  
  누구나 쉽게 따라하는 React, Spring 연동하기 1
  
  +++ (참고) SpringBoot 사용해서 이메일 인증 구현
  
  Spring boot로 API를 통한 이메일 전송 기능 만들기
  
  +++ React 이메일 유효성 검사 정규표현식
  
  [React] 이메일 유효성 검사 정규표현식
  
  패스워드 확인이랑 다른 문제는 클라이언트에서 처리 가능할 것 같음.
  
  createuserDto 에서 나온 annotation 사용 관련은 클라이언트에서 최대한 할 수 있도록. 이메일 중복 같은 경우 서버와 통신해서 db 비교를 해야 하지만 그게 아닌 경우는 매번 post 하기 힘드니까.
  
  시간 되면 이메일 인증 클라이언트에서 가능한지~ 해보기
  
  (문제)회원가입 형식은 다 맞춰서 sign up 버튼 누를 경우 이메일 밑에 이메일 중복 메시지

0822 회원가입 API 추가
1. main 브런치에서 pull
2. yarn add jsonwebtoken —save
3. yarn start 로 구현 전에 실행되는 것 확인
4. swagger-ui 계속 오류... 미해결
0825 동일과정
- swagger-ui 실행 안되는 문제 해결
  - 집에서는 안됐는데 밖에 나와서 카페 ip주소 서버(openvidu, rds 보안그룹)에 등록하고 openvidu 서버 키고 IntelliJ 디버그 실행하니까 페이지 작동함... ㅇㅇ... 일주일 넘게 개고생했는데 왜,,,,
  - 설마 swagger-ui 주소가 잘못된 거,,,? http://localhost:8080/swagger-ui.html#/ 근데 처음에 주소 설정했을 때도 잘 안됐음.
- 리액트 실행 후 sign up/in 할 때 다음과 같은 오류 발생. → 프론트단에서 서버 url이 localhost면 그럴 수 있다고 함. 로컬에서 할 때에는 아래처럼 비활성화(주석) 하고 실행하니 정상적으로 sign up / sign in 됨.
- 그런데 또 문제.. 이메일 형식이 안맞거나 비밀번호가 4자리 미만일 경우 백단의 CreateUserDto에 따라서 어노테이션이 적용이 되어야 하는데 이메일 형식이 아니라 그냥 aaaa 이런 식이여도 회원가입이 됨. 경고 메시지가 뜨지 않음. → 해결
- (정리)회원가입 도중에는 형식에 맞지 않을 경우 에러가 떠야 하고, 회원가입 작성 후 버튼을 누른 다음에는 예외처리에 따라서 중복회원 검사 등을 통해서 에러가 떠야 함.
- 백단 개발분들과 상의해야 할 사항
  - 이메일 검증 안됨. aaaa@n 까지만 해도 회원가입 성공
  - 현재 방식은 모두 입력한 다음 post 하는 방식으로,
    1. (UserService.java : 예외처리)아래와 같이 exception 처리 시 모두 if문으로 되어있어서 한 번에 예외 하나만 볼 수 있음.
    2. (dto annotation 처리)이메일 입력이 완료되면 (마우스 다른 곳 클릭 등) 그 정보를 바로 서버로 보내서 이메일 형식이 맞지 않는다고 뜨고, password 와 checkPassword 불일치 시 바로 메시지 뜰 수 있도록 할 수 있는지. 지금은 정보를 한 번에 입력해서 sign up 버튼까지 눌러야 정보 전달이 가능~(이건 리액트 단에서 가능한지, 백단에서 고쳐야 하는 것인지 알아보기)
0902 클라이언트에서의 오류 추가
- 백단에서의 예외처리를 하려고 했는데 이메일 완성이 되지 않더라도 회원가입이 정상적으로 되는 것을 보고 우선 클라이언트에서 이메일 유효성 검증 구현
- 추가로 비밀번호 4자리 넘는지, 비밀번호와 확인 비밀번호는 동일한지, 이름이 공란이지는 않는지 검증 구현
- 에러가 난 사항에 대해서 경고 대화박스 나타냄.

0908 클라이언트에서의 유효성 검증 관련 오류

올바른 양식 회원가입 시도
형식 오류 회원가입 시도
로그인 시도
기타 console.log data 출력 여부

+++ 백엔드에서 '비밀번호 4자리 이상 여부/이메일 형식 오류' 예외처리 메시지는 안해놓은 것 같음

클라이언트 유효성 검증 X + 백엔드 유효성 검증 X

회원가입 형식 오류시 console 에 msg 데이터 출력됨.
형식 알맞게 회원가입 정상적 + 로그인 "없는 회원입니다."
이메일 형식 안맞춰서 회원가입 정상적 + 로그인 정상적

이메일 중복 확인 안됨??

패스워드 4자리 미만 = 회원가입 정상 + 로그인 정상(???)

{

person01@naver.com

person01

}

아이디/닉네임 중복 = console 중복 예외 메시지 정상 출력
ㅇ

import React, { useState } from 'react';
import TopBar from "../../components/topBar/TopBar";
import SignUp from "../../components/SignUp";
import { signUp } from "../../api/Api";

const SignUpContainer = () => {

    const [createUser, setCreateUser] = useState({
        email: '',
        password: '',
        checkPassword: '',
        name: '',
    })

    const { email, password, checkPassword, name } = createUser;

    const handleCreateUser = e => {
        console.log(e.target.value);
        const { name, value } = e.target;
        setCreateUser({
            ...createUser,
            [name]: value
        });
    };

    const handleClick = async (e, setIsLogin) => {
        e.preventDefault()  // 콘솔 초기화 방지
        console.log('클릭!')
        await signUp.signUpApi(email, password, checkPassword, name).then(async r => {
            console.log('회원가입 완료' + r.data['data'], r.data['msg'] + r.data['success']);
        }).catch(e => {
            console.log(e.response);
        })
        setIsLogin(true)
    }

    return (
        <div>
            <TopBar />
            <SignUp email={email} password={password} checkPassword={checkPassword} name={name}
                handleCreateUser={handleCreateUser} handleClick={handleClick} />
        </div>

    )
}

export default SignUpContainer;

클라이언트 유효성 검증 X + 백엔드 유효성 검증 O

올바르지 않은 양식으로 회원가입 성공 + 로그인 성공

같은 이메일로 중복 회원가입 시도 시 console.log data "이미 존재하는 이메일입니다"

import React, { useState } from 'react';
import TopBar from "../../components/topBar/TopBar";
import SignUp from "../../components/SignUp";
import { signUp } from "../../api/Api";
import MuiAlert from '@material-ui/lab/Alert';
import { Snackbar } from '@material-ui/core';

const SignUpContainer = () => {

    const [createUser, setCreateUser] = useState({
        email: '',
        password: '',
        checkPassword: '',
        name: '',
    })

    const { email, password, checkPassword, name } = createUser;

    const [error, setError] = useState({
        isError: false,
        msg: null
    });

    const handleCreateUser = e => {
        console.log(e.target.value);
        const { name, value } = e.target;
        setCreateUser({
            ...createUser,
            [name]: value
        });
    };

    const handleClose = () => {
        setError({
            ...error,
            isError: false,
            msg: null
        });
    }
    function Alert(props) {
        return <MuiAlert elevation={6} variant="filled" {...props} />;
    }
    const handleClick = async (e, setIsLogin) => {
        e.preventDefault()  // 콘솔 초기화 방지
        console.log('클릭!')
        await signUp.signUpApi(email, password, checkPassword, name).then(async r => {
            console.log('회원가입 완료' + r.data['data'], r.data['msg'] + r.data['success']);
            setError({ ...error, isError: true, msg: e.response.data.msg })
            console.log(e.response.data.msg);
        }).catch(e => {
            console.log(e.response);
        })
        setIsLogin(true)
    }

    return (
        <div>
            <div>
                <TopBar />
                <SignUp email={email} password={password} checkPassword={checkPassword} name={name}
                    handleCreateUser={handleCreateUser} handleClick={handleClick} />
            </div>
            <Snackbar open={error.isError} autoHideDuration={6000} onClose={handleClose}>
                <Alert onClose={handleClose} severity="error">
                    {error.msg}
                </Alert>
            </Snackbar>
        </div>

    )
}

export default SignUpContainer;

클라이언트 유효성 검증 O + 백엔드 유효성 검증 X

회원가입 시 형식 항상 바르게 입력됨. + 로그인 시 "없는 회원입니다."

console data 출력 안되는 건 if 조건 안에 있는데 조건에서 탈락해서 넘어가기 때문..

+++ signup.signUpApi 안 내용을 email.value, password.value, checkPassword.value, name.value 이걸로 바꿔주니까 로그인 가능해짐....!! 근데 여전히 r.response? 는 안나옴.

import React, { useState } from 'react';
import TopBar from "../../components/topBar/TopBar";
import SignUp from "../../components/SignUp";
import { signUp } from "../../api/Api";

const SignUpContainer = () => {

    const [createUser, setCreateUser] = useState({
        email: '',
        password: '',
        checkPassword: '',
        name: '',
    })

    const { email, password, checkPassword, name } = createUser;

    const handleCreateUser = e => {
        console.log(e.target.value);
        const { name, value } = e.target;
        setCreateUser({
            ...createUser,
            [name]: value
        });
    };

    const handleClick = async (e, setIsLogin) => {
        e.preventDefault()  // 콘솔 초기화 방지
        console.log('클릭!')
        const email = document.querySelector('input[name="email"]')
        const password = document.querySelector('input[name="password"]')
        const checkPassword = document.querySelector('input[name="checkPassword"]')
        const name = document.querySelector('input[name="name"]')
        {/* TODO 패스워드 둘 다 하지 않고 password랑 checkPassword랑 같은지 비교해서 하나만 넣기. */ }
        if (checkEmail(email.value) && isPwSame(password.value, checkPassword.value) && (name != null)) {
            await signUp.signUpApi(email, password, checkPassword, name).then(async r => {
                console.log('회원가입 완료' + r.data['data'], r.data['msg'] + r.data['success']);
            }).catch(e => {
                console.log(e.response);
            })
            setIsLogin(true)
        } else if (!checkEmail(email.value)) {
            alert("이메일이 유효하지 않습니다.\n한 번 더 확인해주세요.")
            return false
        } else if (!checkPw(password.value) || !checkPw(checkPassword.value)) {
            alert("비밀번호는 네 자리 이상입니다.\n한 번 더 확인해주세요.")
            return false
        } else if (!isPwSame(password.value, checkPassword.value)) {
            alert("비밀번호와 확인 비밀번호가 일치하지 않습니다.\n한 번 더 확인해주세요.")
            return false
        } else {
            alert("이름은 필수입니다.")
        }
    }

    //  이메일 유효성
    const checkEmail = (value) => {
        var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i
        // 형식에 맞는 경우 true 리턴
        console.log('이메일 유효성 검사 제발 성공하자 한번에 :: ', regExp.test(value))
        return regExp.test(value)
    }

    //  비밀번호 유효성
    const checkPw = (value) => {
        //  최소 4자 이상
        var regExp = /[0-9a-zA-Z]{4,}$/
        // 형식에 맞는 경우 true 리턴
        console.log('비밀번호 유효성 검사 :: ', regExp.test(value))
        return regExp.test(value)
    }

    //  비밀번호, 확인 비밀번호 동일성 체크
    const isPwSame = (pw, ckPw) => {
        if (checkPw(pw) && checkPw(ckPw)) {
            if (pw == ckPw) {
                return true
            }
        }
        else return false
    }
    return (
        <div>
            <TopBar />
            <SignUp email={email} password={password} checkPassword={checkPassword} name={name}
                handleCreateUser={handleCreateUser} checkEmail={checkEmail} checkPw={checkPw} handleClick={handleClick} />
        </div>

    )
}

export default SignUpContainer;

클라이언트 유효성 검증 O + 백엔드 유효성 검증 O
1. 올바른 양식으로 회원가입 시도하고 sign up 버튼 클릭 시 아래와 같은 오류 출력됨.

    ```jsx
    import React, { useState } from 'react';
    import TopBar from "../../components/topBar/TopBar";
    import SignUp from "../../components/SignUp";
    import { signUp } from "../../api/Api";
    import MuiAlert from '@material-ui/lab/Alert';
    import { Snackbar } from '@material-ui/core';
    
    const SignUpContainer = () => {
    
        const [createUser, setCreateUser] = useState({
            email: '',
            password: '',
            checkPassword: '',
            name: '',
        })
    
        const [error, setError] = useState({
            isError: false,
            msg: null
        });
    
        const { email, password, checkPassword, name } = createUser;
    
        const handleCreateUser = e => {
            console.log(e.target.value);
            const { name, value } = e.target;
            setCreateUser({
                ...createUser,
                [name]: value
            });
        };
    
        const handleClick = async (e, setIsLogin) => {
            e.preventDefault()  // 콘솔 초기화 방지
            console.log('클릭!')
            const email = document.querySelector('input[name="email"]')
            const password = document.querySelector('input[name="password"]')
            const checkPassword = document.querySelector('input[name="checkPassword"]')
            const name = document.querySelector('input[name="name"]')
            {/* TODO 패스워드 둘 다 하지 않고 password랑 checkPassword랑 같은지 비교해서 하나만 넣기. */ }
            if (checkEmail(email.value) && isPwSame(password.value, checkPassword.value) && (name != null)) {
                await signUp.signUpApi(email, password, checkPassword, name).then(async r => {
                    console.log('회원가입 완료' + r.data['data'], r.data['msg'] + r.data['success']);
                }).catch(e => {
                    console.log(e.response);
                    setError({ ...error, isError: true, msg: e.response.data.msg })
                    console.log(e.response.data.msg);
                })
                setIsLogin(true)
            } else if (!checkEmail(email.value)) {
                alert("이메일이 유효하지 않습니다.\n한 번 더 확인해주세요.")
                return false
            } else if (!checkPw(password.value) || !checkPw(checkPassword.value)) {
                alert("비밀번호는 네 자리 이상입니다.\n한 번 더 확인해주세요.")
                return false
            } else if (!isPwSame(password.value, checkPassword.value)) {
                alert("비밀번호와 확인 비밀번호가 일치하지 않습니다.\n한 번 더 확인해주세요.")
                return false
            } else {
                alert("이름은 필수입니다.")
            }
        }
    
        const handleClose = () => {
            setError({
                ...error,
                isError: false,
                msg: null
            });
        }
    
        function Alert(props) {
            return <MuiAlert elevation={6} variant="filled" {...props} />;
        }
    
        //  이메일 유효성
        const checkEmail = (value) => {
            var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i
            // 형식에 맞는 경우 true 리턴
            console.log('이메일 유효성 검사 제발 성공하자 한번에 :: ', regExp.test(value))
            return regExp.test(value)
        }
    
        //  비밀번호 유효성
        const checkPw = (value) => {
            //  최소 4자 이상
            var regExp = /[0-9a-zA-Z]{4,}$/
            // 형식에 맞는 경우 true 리턴
            console.log('비밀번호 유효성 검사 :: ', regExp.test(value))
            return regExp.test(value)
        }
    
        //  비밀번호, 확인 비밀번호 동일성 체크
        const isPwSame = (pw, ckPw) => {
            if (checkPw(pw) && checkPw(ckPw)) {
                if (pw == ckPw) {
                    return true
                }
            }
            else return false
        }
        return (
            <div>
                <div>
                    <TopBar />
                    <SignUp email={email} password={password} checkPassword={checkPassword} name={name}
                        handleCreateUser={handleCreateUser} checkEmail={checkEmail} checkPw={checkPw} handleClick={handleClick} />
                </div>
                <Snackbar open={error.isError} autoHideDuration={6000} onClose={handleClose}>
                    <Alert onClose={handleClose} severity="error">
                        {error.msg}
                    </Alert>
                </Snackbar>
            </div>
    
        )
    }
    
    export default SignUpContainer;
    ```

== 백엔드 유효성을 해야 회원 정보가 날아가는데 이런 ,,, 이런 오류가 나...........

!!! 해결 !!!

마지막에 클라이언트 백엔드 모두 연결한 거에서 signup.signUpApi 안 내용을 email.value, password.value, checkPassword.value, name.value 로 바꿔줘야 하는 내용이었음...!! 내가 const 로 각각을 다시 설정했는데 회원가입 폼을 넘기는 과정에서는 원래 변수를 넣어버림...

기타 개발 과정

react

개발 부문

사용 관련

1. ddd

프로젝트 실행

!!! 해결 !!!

Sign in-out

0개의 댓글