오늘은 깃 레포 초기설정부터 시작했다.
깃 레포 초기설정을 해야하는데 그거부터 문제가 시작되었다.
client, server 폴더를 나눠서 진행해야해서 하는데
폴더나누는거부터 문제가 시작되었다.
client랑 server를 만들어야하는데 시작하자마자 바로 문제가 되었다.
vite로 리액트를 설치하는데 vite project를 설정해줘야해서 client폴더 속에 project폴더가 생기게 되는 것이다.
바로 아차싶어서 client를 지우고 브랜치를 새로 파서 vite로 project폴더로 client라는 이름으로 생성해주었다.
그렇게 client 폴더를 생성해주고, 초기 설정을 해주었다.
Prettier, ESlint 설정도 해주었다. 아니나 다를까 Prettier에서 바로 에러가 생겼다.
module.exports = {
printWidth: 80, // 한 줄 최대 문자 수
tabWidth: 2, // 들여쓰기 시, 탭 너비
useTabs: false, // 스페이스 대신 탭 사용
semi: true, // 문장 끝 세미콜론 사용
singleQuote: true, // 작은 따옴표 사용
trailingComma: 'all', // 꼬리 콤마 사용
bracketSpacing: true, // 중괄호 내에 공백 사용
arrowParens: 'avoid', // 화살표 함수 단일 인자 시, 괄호 생략
proseWrap: 'never', // 마크다운 포매팅 제외
endOfLine: 'auto', // 개행문자 유지 (혼합일 경우, 첫 줄 개행문자로 통일)
};처음에 위처럼 설정해주었다가 module 에러가 계속 생겼다.
그래서 동기분한테 여쭤봤는데 아래처럼 바꿔보라고 제안을 받았다.
{
"singleQuote": true,
"bracketSpacing": true,
"bracketSameLine": true,
"arrowParens": "avoid",
"printWidth": 120
}위처럼 코드를 바꿔주고 파일 확장자를 json으로 바꿔주었다. 그랬더니 오류가 해결되었다.
이렇게 초기세팅을 마치고 PR을 날려서 같은 프론트엔드 팀원분들이 pull받아서 사용할 수 있게 해주었다.
이렇게 초기 세팅을 마치고 만들어놓았던 이슈대로 기능개발을 시작했다.
먼저, 고정 컴포넌트로 필요한 헤더, 사이드바, 푸터를 3명이서 나누어서 진행하였다.
저는 푸터를 맡아서 개발을 하게되었다. 기능 개발에서의 첫PR과 merge 연습과 테스트를 위해 이 3개를 통해서
진행을 했는데 다행히 PR, merge가 잘 되어서 다행이였다. 이제 git은 어느정도 익숙해졌고,
제가 맡은 파트의 기능 개발을 위해 많이 노력해야겠다.
기능 개발하는 도중 느낀 어려움과 에러들은 다음 포스팅에서 쓸 예정이다.
먼저 UI를 만들어놓고 백엔드팀의 api가 완성되면 바로 바꿔넣을수 있게끔 코딩을 할 예정이다.
우리팀 파이팅!!
