[데이터 분석 웹 서비스 프로젝트] 22.04.22 DAY-4

garaming·2022년 4월 22일
0

[어? 이게 되네?? 팀] 일일회고

어제 한일

  • 화면(about,intro) 구현 해보기 @프론트

오피스아워 이슈 : 1. 로그인 로직


로그인을 구현하기 위해서 웹서비스 프로젝트의 비동기 통신 코드를 차용할 예정이었다. 기존 코드는 아래와 같다.

스켈레톤 코드 배경

📁 front/src/App.js

'user/current'로 get요청을 보내 유저데이터가 있다면 = 로그인 상태를 유지해주고 / 없다면 catch 문으로 빠져 토큰이 없다는 콘솔 메세지를 띄어준다.

위의 try-catch 문이 종료되면 setIsFetchCompleted(true)로 state를 변경시켜 렌더링을 시켜주게 된다.

app 다음으로는 portfolio 컨포넌트가 렌더링된다고 생각했다. (왜냐하면 path='*' 이기 때문에..? or '/' 이기 때문에..?)

📁 front/src/components/portfolio

portfolio 컴포넌트에서도 역시 'users'에 ownerId를 파라미터로 보내서 서버로 요청을 보낸다.

useEffect 부분을 보면, 조건부 렌더링으로 코드가 구현되어 있다. 만약 전역 상태의 유저 아이디가 없다면 (!userState.user) navigate으로 로그인 페이지로 가게하고, 유저 아이디가 있다면 자식컴포넌트들을 렌더링 해주는 로직이다.


여기서 질문

1) app.js 에서 get 요청을 보내 current user를 판별하는 이유가 로그인 상태를 유지시키기 위해서? 라고 해석하면 되는지?
▶️ app.js에서는 userState 전역에서 유저의 로그인 상태를 저장하고 다른 컴포넌트에서도 알아채기 위해서 비동기 통신을 하고, portfolio.js 에서는 get 초기에 한번 이루어지는 일은 로그인 햇는지 확인을 하기 위해서!
2) app.js / portfolio.js 와 같은 로그인 로직이 현업에서도 사용하는 방식일지?
▶️ 개념은 다 같다! 사바사

2. 조건부 렌더링

1) portfolio.js 에서는 if문으로 userState가 있냐 없냐로 로그인 페이지로 이동을 시켜줍니다. 이러한 조건문을 이용한 처리가 바람직한 코드 인지?
▶️ 맞다!
(+ 만약 admin 페이지를 구현할 일이 생긴다는 예시를 든다면, 서버로 부터 받은 응답(user 정보)에서 특정 값(admin)이 true/false 인지에 따라서 렌더링을 다르게 해주는 방식도 적절한지?)
▶️ 아주 바람직하다!

3. HOC 고차컴포넌트

기존의 코드

기존의 프로젝트에서는 로그인을 구현하기 위해 if문으로 전역상태인 user 정보가 있냐 없냐로 navigate로 path를 바꿔줌으로써, 페이지 전환이 되는 것처럼 구현해주었다. react route를 사용하기 때문에 path에 따라 컴포넌트의 렌더링이 달라지기 때문이라고 생각했다.

HOC를 사용한다면?

HOC는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수이기 때문에, App.js에서 조건에 따라서 그에 맞는 컴포넌트를 반환해주는 코드를 구현하면 어떨지? 에 대해 고민했다.
▶️

4. redux와 비동기 통신

action 함수 안에 비동기 통신!

1) api를 이용한 서버와의 통신 코드는 모두 useEffect나, 클릭핸들러 등 안에서 사용을 해왔다. 그래서 redux를 구현할 때도 자연스럽게 밖에서 비동기 통신을 해왔는데, 이를 분리 하여 action 함수 안에서 모든 비동기 통신을 해결해야 하는 것이 맞는지?

예시코드

// usesr_action.js 
export function auth() {

    const request = Axios.get('/api/users/auth')
        .then(response => response.data)                     


        return {               
            type: AUTH_USER,
            payload: request
        }
}  

▶️ HOC 필요하면 사용을 해도 괜찮지만, 안썻다고 문제는 아니다!

5. 폴더 구조

1) page나 view 별로 폴더를 나누는 방식?
▶️ src 안에 page or view 폴더에는 라우팅관련 컴포넌트를 넣고, 재사용을 안하는 컴포넌트에 경우에는 사용했던 page or view 폴더 안에 넣어 준다. 재사용을 하는 컴포넌트는 그냥 components 폴더에 넣어준다.

css 폴더 생성

1) 작업을 하다보면 css를 따로 분리하여 컴포넌트 마다 css파일이 생성되는데, 이를 css 폴더에 묶어 관리하는 것이 좋을지?
▶️ css 폴더 : 컴포넌트 관리와 같이 컴포넌트 폴더 안에 같이 붙여놓고

예) button.js button.css

글로벌하게 쓰는 것 들은 app.js 해서 폴더에 넣는다.

profile
Connecting the dots

0개의 댓글