스파르타코딩클럽 내일배움캠프 70일차

오늘 일과 간단 요약

1. 기술 스택 선택
2. 와이어프레임 마무리
3. 기능 역할 분담
4. 깃허브 초기 세팅

 

 

 

 

 

 

 

 

기술 스택 선택

어제 11시 넘어서 S.A.를 작성하고 제출은 했지만, 아직 정해진 게 별로 없었다.

우선 기술 스택도 정하지 못했고 라이브러리는 어떤 걸 사용할지, 사용 언어는 뭘로 할지, 배포는 뭐로 할지 등등...

해야 할 게 아직 산더미만큼 남아있었다.

 

원래 어제 그라운드 룰로 매일 9시 30분부터 스크럼을 한다고 했었지만, 기획이 아직 완성이 덜 되어서 개발을 진행할 수가 없어서 그냥 기획 회의로 전환.

 

이번 프로젝트는 노션을 최대한 많이 활용해보고 싶다. 항상 팀 노션을 만들고 제대로 활용한 적이 없어서 최종 프로젝트인 만큼 프로젝트 시작 전에 노션도 세팅해두고 (다른 팀 노션 참고) 그라운드 룰도 세세하게 정했다.

그래도 다행인건 우리 조 조원들이 모두 열정적이고 으쌰으쌰한다는 점이다.

솔직히 우리 기획이....ㅋㅋㅋㅋ 우리 생각으로는 좀 어려워보이는데, 그래도 다들 긍정적어어서 너무 좋다.

최종 프로젝트도 즐겁게 진행할 수 있을 것 같다.

 

그래서 오전부터 기술 스택에 관해 이야기를 나누고 우리 조는 아래의 기술 스택을 사용하기로 했다.

• react
• redux
• react-query
• tailwind css
• styled-components
• typescript
• firebase
• aws

 

여기서 aws와 tailwind css는 처음 해보는 거라 프로젝트 진행하면서 공부가 필요할 듯 싶다.

aws는 배포할 때 할 건데 어제 aws 신청하는 걸 스파르타에서 제공해줘서 내일 다같이 신청하려고 한다.

잘 모르겠지만...순서대로 하면 잘 배포할 수 있겠지 뭐

 

tailwind css는, 저번 프로젝트에서 다른 조가 쓴 걸 보고 개인 공부할 때 한 번 해봤는데 class name 정하기도 쉽고 부트스트랩처럼 다른 사람들이 만들어 둔걸 custom하기도 좋고 재사용성 좋아서 이번 프로젝트에서 쓰기로 했다.

styled-comoponents를 넣어두긴 했는데 props를 받아오는 컴포넌트의 스타일을 주로 styled-components로 쓸 것 같다.

이건 해봐야 알겠지만, 어쨋든 주로 tailwind css를 써야지. 새로운 걸 써봐서 뭔가 재밌어보인다.

 

일단 typescript + react 프로젝트로 정하고 나니까 이제는 와이어 프레임을 조금 수정하는 시간을 가졌다.

 

어제 피그마로 대충 만들어봤는데 그건 웹페이지 기준이고 모바일로 웹페이지를 열었을 때 어떤 식으로 나와야 하나 고려하는데 이 회의는 디자이너님도 함께 참여해주셨다.

 

 

 

 

 

 

와이어프레임 완성

모바일 기준으로 어떻게 보이는지에 대해 생각해보고, 어제에 이어 와이어프레임이 조금 바뀌었다.

 

글쓰기 페이지

디테일 페이지

 

장소 선택하고 리뷰 작성하고 만들어지는 여행 코스가 세로가 아니라 가로로 바뀌었다.

디자이너님이랑 같이 회의하니까 디자인적으로 어떤 식으로 해야 예쁠지, 뭐가 간결할지 알게 되어서 너무 좋다.

우리끼리 했던 와이어 프레임은 그냥 그림인 것일까?ㅋㅋㅋㅋㅋㅋㅋ

확실히 디자어지너님이 계시니까 디자인 관련 생각은 복잡하게하지 않아도 되서 좋다.

오늘 안에 작업하시고 내일 메인 페이지 와이어프레임을 주신다고 하는데 너무 기대된다. 되게 예쁠 것 같은데...?!

 

이렇게까지 하고 와이어프레임까지 완성했다.

아무리 생각해도 기획이 너무 오래 걸리는데, 기획이 가장 어려운 거니까 좋은 현상이라고 생각한다.

 

 

 

 

 

기능 역할 분담

3주 동안 어떤 식으로 개발을 해야 할지 이야기하면서 중간 발표날 2일 전에 완료하기로 했다.

사실 하기로 한 거고, 실제로 이틀 전에 완료될 지는 잘 모르겠지만 우선은 그렇게 목표를 해야 빨리 끝낼 수 있으니까...!

 

1주차 (2.7 ~ 2.13)

• UI 제작
• 로그인/회원가입
• 글쓰기
• 메인페이지
• 댓글 CRUD

2주차 (2.14 ~ 2.20)

• 게시글 RUD
• 유저 페이지
• 스타일 적용

3주차 (2.21 ~ 2.22)

• 트러블슈팅

 

이런 식으로 목표를 잡았는데, 이대로 잘 되었으면 좋겠다!

 

 

일단 우리 목표가 목요일까지 UI 구현하기여서 UI 역할 분담을 먼저 했다.

 

 

기분 탓인가 UI도 왜 많아보이지....? 하나하나 다 나눠서 그런가 많아보인다 ㅋㅋㅋㅋ

기능 구현도 위의 역할 분담과 비슷한데 UI 우선 하고 목요일부터 기능 들이 했던거 + 새로운 거 라서

하나하나 쪼개고 보니까 30개였다...!! 과연 다 할 수 있을까? 아니지, 우리는 할 수 있다..!

긍정적으로 생각해보면 우리 모두 최선을 다할 거니까 아마 잘 할 수 있을 거라고 생각한다.

 

일단 목표는 내일까지 UI 제작하는 걸로...!!

 

 

 

 

 

 

 

프로젝트 초기 세팅하기

기능 역할 분담도 하고 해야할 일들도 다 정해지고 나니 이제 진짜 개발 시작.

 

CRA로 프로젝트 생성하고 깃허브 레퍼지토리도 만들었다. 처음에는 내가 repository 만들어서 contributor로 팀원들을 초대했는데 owner에게만 권한이 주어진 것 같아서 기존 repository를 organization으로 변경했다.

 

그래서 issue도 생성해놓고, github wiki도 이번에 처음 해봤다.

 

이건 우리 프로젝트 깃허브 링크

https://github.com/Nilili-007/Nilili

GitHub - Nilili-007/Nilili: 007조의 최종 프로젝트입니다.

 

issue는 이번에 선형님이 알려주신 건데, 한 이슈에 전체 기능들을 다 적어두고 기능별로 issue를 다시 생성할 수 있었다. 되게 신기하다. 깃허브에는 내가 모르는 다양한 기능들이 있는것 같다. 기능과 UI를 나누어서 세세하게 issue를 생성했더니 무려 issue가 52개...이렇게 세세한게 맞나 싶지만 이전에 issue를 너무 적게 생성했어서 이게 오히려 더 좋은 것 같다.

 

그리고 이전에 프로젝트에서 썼던 것처럼 dev 브랜치를 default 브랜치로 두고, PR 할 때 리뷰어 1명을 두고,

dev에 머지하지 못하도록 규칙을 생성했다. 이래야 나중에 혹시나 잘못 push할 때를 대비할 수 있으니까...

 

이번에는 진짜 깃허브도 잘 활용할 것 같다.

커밋할 때 까먹지 말고 issue 켜놓고서 이슈 번호랑 같이 커밋해야지....PR 날릴 떄도 PR 컨벤션을 미리 정해둬서 그대로 꼭 해야겠다.

(약간 진짜 최종 프로젝트 기분이라서 쬐금 떨린다)

 

이후에 프로젝트 생성하고 필요한 라이브러리까지 다 설치한 뒤에 push 해두었다.

그런데 폴더 구조 잡는 걸 까먹어서 선형님이 그것까지 해서 다시 initial setting 완료...!

 

 

 

 

 

 

 

tailwind 적용 오류

우리 조 노션 트러블 슈팅에 자세하게 적을 거지만, 간단하게 TIL에도 적어보자면 tailwind가 적용되지 않는 오류가 생겼었다.

 

그래서 설치가 안되었나 싶어서 블로그들을 찾아보고 추가로 설치해야 될 것들을 더 설치했다.

 

$ npm install -D tailwindcss@latest
$ npm install -D postcss@latest 
$ npm install -D autoprefixer@latest
$ npm install -D postcss-loader

 

그러고 난 뒤에 postccss.config.js 파일을 생성해서 아래 코드를 넣어 파일을 저장했다.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

 

tailwind.config.js 파일도 수정해주었다.

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

 

아무래도 처음에 파일 생성했을 때 어떤 확장자 파일에 tailwind를 적용할 것인지 써주지 않아서 그런 것 같다.

그래서 위처럼 파일을 수정해주고 index.css 파일도 새로 만들어주었다. (전체적으로 적용하기 위함)

 

// index.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

 

이렇게 전체적으로 다 적용해준 다음에야 tailwind가 정상적으로 적용되는 걸 볼 수 있었다.

그래도 9시 전에, 그리고 튜터님에게 질문하러 가기 전에 해결해서 다행이다.

처음에 초기 세팅할 때 일부만 설치하고 파일을 추가하지 않아서 생긴 오류라고 생각한다. 정확한건 내일 다시 봐야겠지만....

 

여튼 초기 세팅만 했는데 오늘 하루가 다 가버렸다. 역시 기획이 세상에서 제일 어려운 일인 것 같다.

 

 

 

 

 

 

 

짧은 일기

어제에 이어 오늘도 거의 하루 종일 기획을 하고, 깃허브 규칙을 정하고, 프로젝트 초기 세팅만 했는데 하루가 지났다.

그래도 어제는 11시까지 했는데 오늘은 9시 조금 넘어서 끝나서 다행이라고 해야 하나...ㅋㅋㅋㅋㅋㅋ

근데 그래도 재밌다.(?) 우리 조원들 모두 긍정적이어서 다같이 으쌰으쌰 하면서 힘 내서 하기 너무 좋다. (최고)

 

사실 조금 어려운 기능들이 많고 처음에 생각 정리가 잘 안되어서 버벅거리면서 기획을 했는데, 심지어 기능도 나눠보니 30개나 되고 역할 분담하기가 좀 어려웠다.

그래도 다들 하고 싶은 기능들을 맡고 어려운 걸 다들 맡으려고 하셔서(!) 순조롭게 기획이 진행되고 있다.

내일 이제 UI 구현을 빠르게 끝내고 이제 진짜 기능개발로 들어가야지.

 

디자이너님도 있어서 프로젝트가 퀄리티가 더 높아질 것만 같다. 이번에도 프로젝트 즐겁게 마무리 할 것 같다~