[JH] 학생을 위한 개발 가이드

내가 팀원일 때도 팀장이 도와줬던 게 도움이 많이 돼서 이걸 보고 도움이 되길 바라는 마음에 + 나도 까먹을 때마다 참고하기 위한 글
 

1. Github

1. git clone "깃허브 주소" : 처음 프로젝트를 내려받을 때는 이 명령어로 바로 내려받아짐 (컴퓨터 맛탱이 가서 다 날라갔을 때 사용) -> 받아오고 나서 VSCode로 프로젝트 폴더 열고 npm install ⭐
2. git checkout -b "브랜치 이름" : 브랜치를 생성하고 바로 브랜치로 이동 -> 바로 작업하면됨

---

여기까지는 지난번에 했으니까 개발이 진행되고 올리거나 내려받는 방법에 대해서 정리하겠슴

1. git pull origin master : 수정된 코드를 받아오고 싶을 때 사용. 연결되어있는 깃허브 프로젝트의 master 브랜치(최신 코드)를 받아옴
2. git add . : 변경된 모든 코드를 추가 
3. git commit -m "커밋 메시지" : 추가된 모든 코드를 하나로 묶음
4. git push origin jbranch : 깃허브 jbranch로 변경된 모든 코드를 업로드

개발 → git add . → git commit -m "커밋 메시지" → git push origin jbranch → 깃허브로 이동 → Compare & pull request (초록색 버튼) → Create pull request         팀원은 여기까지, Merge는 팀장이 ⭐
 
서로 본인이 맡은 코드만 건들고 둘이 같이 같은 코드를 건들지 않으면 됨, push로 개발된 거 올리고 pull로 둘 다 최신 코드를 받아왔으면 서로 개발한 거 건드려도 됨. 같이 건들지는 않기 ⭐
 
혹시나 git add .를 하는 과정에서 warning: in the working copy of 'App.tsx', LF will be replaced by CRLF the next time Git touches it
이렇게 LF CRLF 에러가 발생하면 터미널에 git config --global core.autocrlf true 이거 입력하고 다시 git add . 하기

---

이제 첫 번째 일정 페이지 구현하기
어떤 라이브러리가 설치되어 있나 궁금하면 프로젝트 거의 맨 밑에 package.json을 보면 설치되어 있는 라이브러리들
확인이 가능하다~

2. react-native-calendars

- 캘린더 라이브러리
 
↓↓↓ 참고 블로그 ↓↓↓

RN에서 캘린더 기능 쉽게 추가하기 - React-Native-Calendars 라이브러리 활용 가이드

 

3. react-native-push-notification

- 알림을 설정할 수 있는 라이브러리
 

 calendars와 push-notification 둘을 잘 짬뽕해서 사용하면 우리가 원하는 대로 구현이 될 것 같긴 함
아니면 직접 UI랑 기능 모두 만들어도 됨
(시간이 좀 걸리는 대신 라이브러리에서 제공하지 않는 원하는 기능을 모두 구현 가능)

 
고려해야 할 부분

1. 앱이 종료되어 있는 상태에서 푸쉬 알림을 띄우려면 따로 코드를 추가해야하나?
2. Firebase 설정은 다 되어 있으니 Firebase을 사용해서 알림을 구현할 건지? 

Firebase 사용할거면 messaging 라이브러리를 사용해야 하는듯..?
Firebase 우리 프로젝트 들어가면 왼쪽 카테고리에 Messaging도 제공해주는데 이거를 사용하면 되는 것 같음
일단은 이 정도만 고려하면 될 듯

---

캘린더가 모두 구현이 완료되었다면 카카오 API로 카카오톡 로그인 구현하기
이거는 구글이나 인터넷에 사람들이 정리를 엄청 많이해둠..

---

3. 추가적으로

1. .gitignore : 프로젝트 폴더에 .gitignore 은 깃허브에 올라가지 않을 파일을 정의할 수 있음 ( 민감한 키를 담고 있는 .env 파일 같은거 )
2. 한 화면의 부분 부분을 컴포넌트화 시키는게 아주 중요 ⭐

예를 들면 게시글 작성 페이지에는 상단 타이틀(뒤로가기 버튼, 로고, 마이페이지 버튼), 사진 등록하는 부분, 게시글 내용 적는 부분, 날짜 선택 부분, 게시글 작성 완료 버튼 등이 필요한데 이거를 MeetingCreateScreen.tsx 하나에 모두 담으면 코드도 복잡해지고 가독성도 떨어지는 등 단점이 많다... 그래서 따로 컴포넌트로 만들고 페이지에서 import 해서 사용하기

 

재사용성 👍 가독성 👍 코드 수정할 때 👍 일관된 디자인 👍
 

   3. 티스토리 열심히 쓰기 : 노션 포트폴리오에 티스토리 링크 넣어서 포폴로 제출하면 따봉👍
 

pdf 파일로 이력서 및 포폴을 제출해야 하는 곳이 많은데 노션 -> pdf로 변환하는 방법은 아래 블로그 참고하기

노션 화면에 보이는 비율로 PDF 변환 & 인쇄하는 법 (PDF 내보내기 사용 금지)

---

앱 UI 참고 사이트
https://wwit.design/

UI/UX 사이트 모아둔 블로그
https://m.post.naver.com/viewer/postView.naver?volumeNo=33857876&memberNo=31736900&searchKeyword=%EC%95%B1%20%EB%94%94%EC%9E%90%EC%9D%B8

무료 이미지 사이트 (앱 배경)
https://unsplash.com/ko

무료 아이콘 사이트 (버튼 아이콘들 여기서 다 가져와서 만듬)
https://icons8.kr/icons