[항해99 70일차] WIL_실전 프로젝트 3주차 종료

이번 WIL 키워드

MVP 개발을 하는 3주 동안 어떤 기술들을 다뤄봤는지 정리해보세요.

 

 

패키지 및 메소드

package.json 에 설치된 순으로 정렬

 

react 

- useState

- useRef

- useEffect

 

redux-toolkit (전역 상태 관리)

axios (서버-클라이언트 간 통신)

react-dom

react-modal

react-redux

- useDispatch

- useSelector

 

react-router-dom

- useNavigate

 

redux

redux-logger

sockjs-client

- SockJS : 실시간 채팅 & 알람 기능

 

stompjs

- Stomp : 실시간 채팅 & 알람 기능

 

styled-components

- styled

 

 

 

기술

1. axios 통신 관련

1) async / await 

- 예시

 // 채팅방(chat) 나가기
    deleteChat: async (roomId) => {
        const data = await instance.delete(`/api/rooms/${roomId}`);
        return data;
    },

 

2) baseURL

- baseURL 을 저장한 .env 파일을 만들고, 그 파일을 baseURL 이 필요한 곳에서 불러옴. '.env' 파일은 github 에 업로드하지 않도록 gitignore 에 저장함

 

3) header에 Content-Type 설정

- 데이터를 서버에 전송하여 DB를 생성할 때, Content-Type 을 서버측에서 요청하는대로 맞추기 위해 header 에 Content-Type 을 정의함

 

4) interceptors 사용

- 메소드.interceptros.request.use() 의 형식

- 메소드가 실행될 때 중간에 가로채어 정의한 작업을 진행함

 

- 2)~4) 예시

export const instance = axios.create({
    baseURL: process.env.REACT_APP_BASE_URL,
    headers: {
        'Content-Type': 'application/json;charset=utf-8'
    }
});

export const fileInstance = axios.create({
    baseURL: process.env.REACT_APP_BASE_URL,
    headers: {
        'Content-Type': 'multipart/form-data'
    }
})

fileInstance.interceptors.request.use(
    config => {
        const accessToken = getCookie('authorization');
        if (accessToken) {
            config.headers["authorization"] = accessToken;
            return config;
        }
        return config;
    },
    error => {
        return;
    },
);

 

5) JSON.stringify()

- JSON.stringify() 는 ()에 있는 value 값을 json 형식으로 만들어주는 메소드

- 데이터를 json 형식으로 보내야 하는 경우 사용한다.

 

6) && 연산자

- Javascript 의 논리 연산자

- true && expression 은 항상 expression 으로 평가되고, false && expression 은 항상 false로 평가됨. 

- 따라서 && 뒤의 엘리먼트는 조건이 true 일 때 출력 됨. 조건이 false 라면 React 는 무시함.

 

★ [참고] React 공식 문서 7. 조건부 렌더링

https://ko.reactjs.org/docs/conditional-rendering.html

 

&& 연산자를 찾다가 들어간 React 공식 docs. 역시 공식이 짱이다..

7. 조건부 렌더링부터 읽다가 11. 합성 vs 상속 까지 넘어갔다.. ㅋㅋㅋ