프로젝트에 새롭게 도입한 기술 스택이 있다면 정리해 주세요! (도입 이유도 함께 적어주시면 더욱 좋습니다!)
[FE] 프론트엔드 작업을 javacript에서 typescript로 migration
: 기존 프로젝트는 React+javascript를 기반으로 prop-types 패키지를 이용해 간단하게 나마 타입을 선언해주며 진행하려 했습니다.
front-end 팀원들끼리 회의한 결과, 어렵더라도 typescript로 변경하기로 정하였고 진행 중입니다.
[BE] 서버 여러 대 둘 것을 대비하여 AWS 엘라스틱 캐시의 REDIS 클러스터 생성하여 AWS EC2와 엔드 포인트로 연동하였습니다.
이번 주 한 일
javascript에서 typescript로 migration
AWS S3, cloudfront, route 53(도메인 구매 및 등록)을 이용한 배포
(github action CI/CD : 전면 수정 및 테스트 완료)
tailwind.config.js
default style 설정
웹 뷰 프레임 구현
웹/모바일을 감지하는 기능 구현
axios instance 생성 및 API 모듈화
소셜로그인 서버통신 진행중
이외에도 기술적인 방향을 잡기 위한 질문을 정리해오시면 가장 좋습니다!
[FE, BE 공통] 소셜로그인 구현에 관한 issue
현재 front에서 back으로 api 요청(ex. get
메소드, /api/user/login/kakao
요청)을 하면 서버에서 자동으로 처리( 로그인 요청이 들어오면 서버에서 redirect로 카카오 로그인 페이지로 이동 후 인증 하면 redirect callback을 서버에서 바로 받아서 처리 )를 해주고 access-token과 refresh token을 보내주는 방식을 사용하려 하고 있습니다.
구글링을 해본 결과 프론트에서 따로 라우팅 처리라던지 인증 코드를 요청하는게 대부분이던데, 저희가 생각한 방식으로 구현을 해도 가능할까요? 프론트에서 따로 라우팅 처리를 안해도 진행이 될지 모르겠습니다.
❓아니면 아래와 같은 방식으로 구현을 해야할까요?
실전프로젝트 이전에 리액트 주특기 주차에서는 리덕스+react-router-dom V5로 thunk에서 라우트를 할 때 다음과 같은 방법으로 라우팅처리를 하였습니다.
export const goToHome = () => (dispatch, getState, { history }) => {
history.push('/');
};
하지만 react-router-dom V6를 사용하면서 리덕스에서 history를 사용할 수 없게되면서(V6에서는 useNavigate로 변경됨) 컴포넌트단에서 액션함수를 dispatch로 호출할 때 navigate함수를 인자로 넘겨서, 넘겨받은 navigate함수를 이용해서 라우팅 처리를 하였습니다.
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
const handleAddPosts = () => {
appDispatch(
postsSlice.actions.addPost({
postsId: undefined,
title,
content,
tagName,
postsImage,
navi: navigate,
})
);
...
// 액션 함수로 넘겨받는 인자의 interface
interface AddPostsType {
postsId: number | undefined;
title: string;
content: string;
tagName: string[];
postsImage: string;
navi: (to: string) => void;
}
...
export const postsSlice = createSlice({
...
reducers: {
addPost: (state, action: PayloadAction<AddPostsType>) => {
const new_postsList = [...state.list,{ 추가 할 게시물 },];
action.payload.navi('/posts'); // payload에 담긴 navigate로 라우팅처리
return { list: new_postsList };
},
이렇게 라우팅처리를 하였습니다만, 페이지가 넘어가고나서 콘솔창을 확인해보니 다음과 같은 에러가 나타났습니다.
조사를 해본 결과, 리덕스의 핵심 사용 원칙 중 하나가 직렬화할 수 없는 값을 state, action에 넣지 않아야 한다는 것이라고합니다. 직렬화가 불가능한 payload는 reducer를 통해 애플리케이션 상태로 만들지 않아야한다고 한다고 생각합니다만, 현재상황과 같은 예외적인 상황이 불가피하게 발생할 수 있다고 생각합니다.
그래서 이 문제를 일단 configureStore에서 serializableCheck를 false를 하면서 위와같은 에러가 안 나오게 하였습니다.
...
export const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({ serializableCheck: false }).concat(logger),
});
...
이러한 해결방안에 문제는 없는 지 멘토님의 어드바이스를 듣고싶습니다.
타입스크립트를 사용하게 되면서, 2번 질문과 같이 라우팅을 해주는 useNavigate()를 인자로 넘기거나, 카카오 맵 API를 사용하기 위해서 타입을 지정해줬어야 했습니다.
interface AddPostsType {
...
navi: (to: string) => void;
}
declare global {
interface Window {
// eslint-disable-next-line
kakao: any;
}
}
카카오의 경우 타입을 지정하는 것이 현재 저의 수준으로서는 어려움이 있어서 any로 하였습니다. 타입스크립트를 사용하면 any를 쓰는 것은 피해야한다고 알고있는데 이러한 상황일때는 어떻게 타입지정문제를 대처하면 좋을 지 멘토님의 의견을 듣고싶습니다.
→ 단, “A는 어떻게 구현하나요”의 질문은 삼가주세요.
→ “A와 B를 알아보았는데, 둘 중 A가 낫다고 판단했는데 맞을까요?”의 식의 고민의 흔적을 담아 질문해주세요.
숙제: 멘토링 결과 다음 주까지 해올 일