지난 주 파트별 멘토님과의 멘토링을 통해 칸반보드의 내용을 세분화 및 구체화하고 프로젝트 시작을 위한 typescript & eslint & prettier 초기 설정을 진행했었다.
eslint에 쓰인 extention과 추가 한 룰은 다음과 같다.
extends: [
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'standard-with-typescript',
'prettier',
],
rules: {
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-unused-vars': 'warn',
'@typescript-eslint/consistent-type-definitions': 'warn',
'@typescript-eslint/strict-boolean-expressions': 'off',
'@typescript-eslint/no-floating-promises': 'off',
'@typescript-eslint/no-misused-promises': [
'error',
{
checksVoidReturn: false,
},
],
},초기 셋팅에서 아직도 헷갈리고 제대로 설정을 했다고 생각되지 않는 부분이다. 아직 eslint를 많이 사용해보지 않아서 그렇겠지만 이러한 모호함을 안고 가는 것을 좋아하지 않는지라... 꺼림직하지만 멘토님이 개발을 하면서 룰을 off/on 을 해나가면 어떻게 해야할지 알 수 있을 것이라하여 우선 위의 룰만 추가한 상태에서 최대한 추가하지 않는 쪽으로 개발을 할 생각이다.
화요일 멘토링
이번 시간에는 git에 대해서 이야기를 먼저 나누었다. 단순히 개인 프로젝트를 관리하고 github에 올려두는 정도로만 사용하고 있었기 때문에 git의 push pull branch commit 과 같은 간단한 명령어와 기능만 알고 있는 나로서는 꼭 필요한 시간이었다고 볼 수 있다.
git pull push branch 이외에 pull Request, 충돌문제 해결 git reflog, git reset --hard, rebase, 등에 대해서 배웠다.
그리고 우리 팀의 git을 이용한 협업 개발 방법으로는 git-flow를 택했다.
우리 프로젝트에 git flow가 완전 적합하다고 생각되지는 않는다.
소규모의 작은 프로젝트이고 개발을 진행하니 페어코딩으로 같이 하나의 featrue 브랜치를 다루는 일이 많다보니 굳이 이렇게 많이 branch를 세분화할 필요가 없어 보여서이다.
하지만 팀이나 회사에 따라 다르겠지만 git flow는 많은 곳에서 사용하는 git 협업 방법이기에 이번 프로젝트에서 익혀둘 필요가 있다고 생각하여 멘토님의 도움 하에 git flow로 진행하기로 했다.
커밋 컨벤션
협업을 위해서 git에서 또 중요한 부분중 하나가 커밋 컨벤션을 맞추는 것이라 생각한다. 팀원들끼리 커밋 메세지의 형식을 정하므로 커밋 내용을 쉽게 파악할 수 있기 때문이다.
우리 팀의 커밋 컨벤션은 다음의 블로그 내용대로 하기로 했다.
과제
프론트 팀의 다음 시간까지의 과제는 아래와 같다
- 폴더 구성 짜기
- 라이브러리 다운
- 브랜치 구성
- 템플릿 만들기 / 컴포넌트 렌더링
- 상태관리 셋업(리덕스 툴킷) - 스토어 생성, 기본값 or 데이터 테스트(kakao map api로 해서 리덕스에 저장 )
- eslint 옵션? 변경 (편한대로)
- 라우팅 - 리액트 라우터 사용
- 리뷰 페이지 구현 ( 시간 남으면 )
1. 폴더 구성
우선 폴더 구성부터 짰다.
우리 팀의 폴더 구성은 위 이미지의 구성을 따라 가기로 했다.
- components
- 리액트 순수 컴포넌트 , 렌더링관련 (style)
- services
- api 관련 코드
- 서비스 로직
- stores
- redux-toolkit 코드
- styles
- UI 구현에 필요한 스타일링을 위한 코드 (ex - button, card, container)- utils
- filrebase 관련 코드
- 잡다한 여기저기 휘뚜루마뚜루 쓰이는 코드
- pages
- 각 path 를 렌더링할 컴포넌트 - 순수컴포넌트 & 서비스 로직
2. 라이브러리
라이브러리는 우선
react-redux @redux/toolkit styled-components @types/styled-components react-router-dom axios @ant-design/icons
를 받았고 필요에 따라 그때그때 추가할 예정이다.
3. 브랜치 구성
git flow에 따라 main , develop 이 있고 현재 칸반보드의 7번째 이슈 티켓에 관한 기능을 개발 중이라 feature/7-map-component 라는 브랜치를 만들었다.
4. 나머지 과제 진행
목요일 멘토링 전까지 page 폴더에 todo와 map 페이지를 만들어 route를 뚫었고 todo에서 간단한 todo 기능을 구현하고 값을 redux-toolkit으로 다루는 것을 연습했다.( typescript로 )
redux-toolkit의 createAsyncThunk로 비동기 상태를 관리하는 것을 연습하고자 axios를 이용 오픈소스 api중 하나인
https://jsonplaceholder.typicode.com/posts?_limit=10에 접근해 간단한 편의점 값을 받아오는 것을 연습했다.
//todo slice 및 createAsyncThunk 코드
const initialState: TodoinitalState = {
todos: [],
randata: null,
error: "",
loading: false,
};
export const todoSlice = createSlice({
name: "todo",
initialState,
reducers: {
addTodo: (state, action: PayloadAction<string>) => {
state.todos = [
...state.todos,
{
id: nextId,
text: action.payload,
},
];
nextId += 1;
},
deleteTodo: (state, action: PayloadAction<number>) => {
state.todos = state.todos.filter(({ id }) => id !== action.payload);
},
},
extraReducers(builder) {
builder.addCase(getRandomData.pending, (state) => {
state.loading = true;
});
builder.addCase(
getRandomData.fulfilled,
(state, action: PayloadAction<Post[]>) => {
state.loading = false;
state.randata = action.payload;
}
);
builder.addCase(getRandomData.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message ?? "";
});
},
});
// createAsyncThunk
export const getRandomData = createAsyncThunk(
// fetchRandomData
'todo/randomData',
async (_, thunkApi) => {
try {
const response = await axios.get<Post[]>(JSON_RANDOMAPI)
return response.data
} catch (error) {
if (error instanceof AxiosError) {
return thunkApi.rejectWithValue(error.message)
} else {
throw error
}
}
}
)목요일 멘토링
이번 멘토링 시간에는 파트별로 나눠서 멘도링을 받았다. 프론트는 질문에 답변을 해주는 형식으로 멘토링이 진행되었다.
우선 현재까지는 코드를 잘 짜고 잘 진행하고 있다고 칭찬을 받았다. 😄
eslint 설정과 prettier 설정
칭찬뒤 처음 수정사항이었다.
현재 나와 팀원이 eslint 설정과 prettier 설정이 맞지 않아서 코드 보는 것이 좀 불편하다고 하셨다...
prettierrc.json 파일을 만들고 다음 코드로 설정을 맞췄다.
{ "trailingComma": "es5", "tabWidth": 2, "semi": false, "singleQuote": true }카카오 맵 구현
카카오 맵 api에 따로 검색 기능을 지원하는 라이브러리가 있었다.
우리 팀은 해당 라이브러리를 이용하기로 정하였다. 그리고 카카오 맵에 관한 type을 지정하는데 도움을 주는 파일을 외부에서 가져오기로 했다.
보통 다른 3-party 라이브러리의 경우 자사에 type을 지정하여 개발한 파일을 가지고 있는데 카카오 맵의 경우 이를 지원하지 않는다.
크게 어렵지 않아보이는데 왜 안 만드는지... 다음 맵을 그대로 차용해서 그런 느낌이 없지 않아 있어보인다..
째든 다음 깃허브에서 타입에 관한 파일을 받아와서 사용하기로 했다.
카카오 지도 타입 파일
react-script-hook
카카오 맵... 불편한거 같다
카카오 맵 sdk를 사용하려면 index.html 에 script를 추가 해야한다. 다른 회사의 sdk들은 npm으로 다운받아 쉽게 사용하게 해주는데 카카오는 다르다.
script를 추가해서 사용하는 것이라 script가 받아지기 전에는 카카오 맵 sdk를 쓸 수 없어서 에러가 뜬다.
script가 받아지고 카카오관련 서비스 코드들이 실행되게 하기 위해 script 다운을 기다리는 코드가 필요했고 이를 간단히 해주는 react-script-hook 을 다운받아 쓰기로 했다.
//sample code
useScript({
src: 'https://js.stripe.com/v3/',
onload: () => console.log('Script loaded!'),
});하지만....
현재 사용해본 결과 파일을 실행하면 react-script-hook 이 모듈에 없다는 에러가 계속 발생한다는 것을 알았다.
해당 오류를 확인하고 멘토님과 상의하에 위 훅은 다시 삭제했다.
마무리
다음 화요일 멘토링 시간에는 드디어 로그인 기능을 진행하기로 했다.
로그인 기능은 사용자의 개인정보를 담고 있기에 매우 신중히 잘 다루지 않으면 사용자의 개인정보가 유출될 수가 있다.
그래서 화요일 멘토링 시간 전까지 프론트는 메인페이지에 보여지는 UI와 kakao map sdk 를 이용한 대부분의 기능을 구현해놓기로 했다.
현재 이미 많은 부분 구현을 한 상태라 스타일 부분을 좀 더 구현하고 코드를 정리하는데 초점을 두고 진행하고 있다.
순조롭게 잘 진행되고 있으니 별탈없이 계속 잘 진행되기를 바란다.
