[그룹 스터디 프로젝트]일곱 번째 미팅 -Almost there!! (0502)

회의록

 

[현재 상황 공유]

백엔드
<HY님>
1. AWS EC2 배포
2. API 수정
3. 페이징 처리
* 무한 스크롤로 구현
* lastPostId, size를 POST 리퀘스트 보낼 때 같이 보내면 됨

<SH님>
1. 깃 머지, 데이터베이스 정리
2. 고양이 추가 할 때 이미지(photoFile)
* local folder에 저장함
* deploy된 서버에는 어디에 저장할 지 연구
* DB column에 파일 이름만 해쉬해서 저장 (수정)
  > 방법: 파일 이름 + 업로드 날짜

프론트엔드
<HS님>
1. 소셜 회원가입 / 로그인
2. 다크 모드 적용
* theme provider 더 적절히 사용
3. 백엔드 연동 + 스타일 적용

<HR님>
1. PropTypes 추가
2. 백엔드 연동 + 스타일 적용
3. 전체적 Applayout 적용 (반응형 설정 위해)
4. README

[해야할 일]

백엔드
1. 고양이 사진 추가 완료 - SH
* GET /api/cats할 때, 각 고양이에 사진 정보도 같이 오도록 수정
2. 게시판 사진 추가 완료 - SH
3. 연동 문제 날 때 수정 - HY
4. README 추가 - HY

프론트엔드
1. 그래프 / 리스트 부분 - HS
* 백엔드와 연동
2. 회원 가입 시 - HS
* 이메일 중복확인
3. index.html - HS
* 카카오 회원가입 수정
4. AWS로 배포 시도 / Heroku는 백업 플랜 - BOTH
5. 로컬 스토리지에 유저 데이터 저장하기 (me부분) - HR
6. 에러 메세지 띄우기 - HR
7. 무한 스크롤 연동  at게시판 - HR
8. 자잘한 백엔드 연동, 스타일링 에러 수정 - BOTH
9. 사이트 띄웠을 때 warning 안 나오게 최대한 수정 - BOTH
* 노란 바탕 안에 뜨는 warning들 안 뜨게 고치기
10. React 보안 사항들 확인 - BOTH

[확인할 점]
1. 소셜 로그인
* 프론트에서 email만 보내면 됨

[특이사항]
팀전체
1. 네이버 로그인 없앰
2. 깃 사용 방식 변경
* 기존에는 develop 브랜치에 모든 걸 작업하고 master에 간간히 저장
* 4/29 부로 각자 구현할 기능에 따라 새로운 브랜치를 만들고
* 로칼 master에서 git merge feature/<newTask>하여, 로컬 master -> 리모트 master로 푸쉬하거나
* 로칼 feature/<newTask> -> 리모트 feature/<newTask>로 푸쉬 후, PR 만들어 master와 머지하거나
* 위와 같은 방식으로 변경함
* 히스토리 관리, 에러 추적, 디버깅 위함

프론트
1. 로그인 후 토큰 저장 방식 변경
* 리프레쉬 토큰 없이도 새로고침 시 유저 정보 저장되도록 localStorage에 수정
* 추후 계획에 따라 리프레쉬 토큰 도입 - 백엔드 + 프론트엔드 협업

[계획]
1. 5월 9일 일요일을 프로젝트 마감일로 설정
2. 주간 미팅하며 마무리예정

 

 

회의 내용 추가 설명

 

1. 백엔드 서버 배포!!!

- 백엔드 서버가 AWS EC2로 배포되어 넘 좋다 (감사합니다ㅎㅎ)

- 로컬 문제 없이 이미 배포된 서버 및 swagger로 츄라이와 디버깅 등이 훨씬 쉬워짐!

 

2. 다크 모드 추가

- HS님이 Styled-Component 이용 세팅을 잘 해주셔서, 약간의 코드 tweak으로 다크 모드 구현이 되었다.

- 참고 동영상 - youtu.be/Zgvm-mP9_3A

- 다크 모드 버튼을 눌러 "theme"을 globalStyle.js에 저장된 "lighttheme"과 "darktheme" 사이 toggle하고,

- 각 theme안에 원하는 요소 색깔을 변수 이름은 같게, 따로 지정해주고

- 컴포넌트 생성 시 색깔을

${({theme}) => theme.background}

이런식으로 설정해주면,

- lighttheme일 때는 lighttheme안에 정의된 background 색깔이,

- darktheme일 때는 darktheme안에 정의된 background 색깔이 적용되는 것이다!

 

- 다크모드일 때 이 색깔을 어떻게 변환시켜줄 지만 정해놓으니 구현은 비교적 쉬웠다! (대부분이 노가다)

 

3. PropTypes 추가

- TypeScript를 사용하지 않는 만큼, 입력 자료형을 알아서 체크해주지 않기에

- PropTypes로 어떠한 props이 인자로 들어올 때, 이의 자료형을 체크해주도록

- props을 받아오는 컴포넌트마다 PropTypes를 설정해 주었다!

 

- 참고 - PropTypes는 개발모드에서만 작동되므로, 개발모드에서 에러를 잡은 후 디플로이하도록.

 

4. 전체적 Applayout 적용

- 반응형 디자인을 위해, 스크린의 max-width가 ### px일 때 앱의 너비를 바꿔주는 코드를 짰는데,

- 이 코드가 컴포넌트마다 반복이 되니 관리가 어려웠다.

 

- 따라서 반응형 디자인과 배경 이미지를 지정해주는 Applayout 컴포넌트를 따로 만들어

- 해당 코드의 관리가 용이하도록 했다.

 

Applayout.js

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

const BodyWrapper = styled.div`
    ...
    background-color: #fff;
    ...
`;

const Global = styled.div`
	...
    max-width: 414px;
    width: 100%;
    min-height: 100vh;
    height:100%;
    margin: 0 auto;
    position: relative;
	...
`;

const Applayout = ({children}) => {
    return (
        <>
        <BodyWrapper>
            <Global>
                {children}
            </Global>
        </BodyWrapper>
        </>

    )
}

Applayout.propTypes = {
    children: PropTypes.node.isRequired,
}
export default Applayout;

 

그리고

 

index.js

 

ReactDOM.render(
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <ThemeProvider theme={theme}>
                    <Router>
                        <Applayout>
                            <App />
                        </Applayout>
                    </Router>
                </ThemeProvider>
            </PersistGate>
        </Provider>,
    document.getElementById('root')
);

 

와 같이 <App /> 부분을 <Applayout>의 children으로 넣어줬다.

 

 

 

5. README

- README에 설명과 이미지를 추가했다!

- iPhone X를 기준으로 UI를 설정한 만큼, 핸드폰 안에서 실행되는 화면을 캡쳐하고 싶었는데

- chrome.google.com/webstore/detail/mobile-simulator/ckejmhbmlajgoklhgbapkiccekfoccmk?hl=en

Mobile simulator

 

- 위의 Chrome Extension Tool이 유용했다!

- 그런데 캡쳐하고 보니 그리 이쁘진 않아서 ㅜ 그냥 포토샵을 할까 생각중이다 ㅋㅋ

 

- 백엔드 부분은 HY님께서 추가해주셨다 ㅎㅎ

 

6. 사진 추가 부분

- 이 부분은 백엔드 API 완성을 기다리는 중이다.

 

7. 에러 메세지 띄우기

- 이상적인 것은 모달 메세지를 띄워 앱 안에서 해결하는 것이겠지만,

- 보다 쉽게 접근하기 위해, 고양이 정보 / 게시글 삭제 시도 시, window.alert() 메세지를 띄우는 방향으로 갔다.

- 차차 모달 메세지 창을 구현해보도록 하자.

 

8. 로컬 스토리지에 유저 데이터 저장하기

- 결국은 ㅜ 로컬 스토리지에 Redux 상태 저장을 하기로 결정했다.

- 우리 앱이, 유저 정보가 없으면 에러나는 페이지가 많아서

- 모달 메뉴 통해 로그아웃 하거나, 새로고침하면 유저 정보가 날아가 에러가 생겼기 때문이다.

- 이 문제 해결을 위해 리덕스 상태를 저장 및 유지시켜주는 Redux-Persist를 사용하기로 했다.

- 사용하니 새로고침 후에도 상태가 남아있어 너무 너무 편했다!

- 저장된 정보의 민감성을 보호하기 위해, 로그아웃 시에는 purge()를 해줘, 개인 정보가 저장되지 않도록 해줬다.

 

- 토큰 또한 (보안에 정말 안 좋겠지만) 일단은 localStorage에 저장해주기로 했다... 새로고침 후 데이터가 날라가지 않도록.

- 추후 백엔드 팀과 협업해 리프레쉬 토큰 만들어 위와 같이 안 해도 되도록 개선하면 좋겠다.

 

9. 무한 스크롤 적용!

- 백엔드 HY님께서 GET /api/posts할 때, lastPostId와 size를 같이 전달하도록 수정해주셨고,

- 이를 이용해 무한스크롤을 구현했다.

- 이는 따로 글을 파는 걸로.. ㅎㅎ

(기억하자!)

 

10. 깃 사용 방식 변경

- 기존에는 우리에게 master와 develop 단 두개의 브랜치만 있었고 (작은 프로젝트여서 이렇게 하면 충분할거라 생각했다)

- develop에서 모오오오든 작업을 하고 master에 최종 푸쉬만 하기로 했었다...!

 

- 하지만 백엔드 서버 deploy를 위해 master에 머지할 때, 다같이 develop에서 일하고 있으니 에러가 너무 많이 나서

- 다양한 브랜치의 필요성을 느끼게 되었다

 

- 따라서 각자 구현할 기능에 따라 새로운 브랜치를 만들고,

  * 로칼 master에서 git merge feature/<new_feature>을 해주고, 원격 master에 푸쉬하던가

  * 로칼 feature/<new_feature>브랜치에서 원격 feature/<new_feature>로 푸쉬한 후, master로 머지할 때 Pull Request를 만들어주던가

  * 둘 중 하나의 방법을 채택하기로 했다. 돌이켜보니 잔잔바리 변경사항들은 전자의 방법을 채택하고, PR을 할 만큼 significant change가 있을 때는 후자의 방법을 채택하면 좋겠다!

 

10. 마감일

- 중간에 취직하신 팀원분의 미친듯이 바쁘신 이사 스케쥴과 끊임없는 디버깅으로 인해 마감일이 늦춰져서

- 일주일 후로 마감일을 잡아놨지만 역시 디버깅은 끝이 나지 않았는데... (To be continued...)