[TIL] 내일배움캠프 React 과정 2022.11.23

Today I Learned

• javascript 공부하기
• github branch merge 첫 도전!

 

 

javascript 공부

AND, OR 논리 연산자

const condition1 = "안녕하세요"
const condition2 = true

const result = condition1 && condition2 && 'Value';

result
// Print: 'Value'

AND 연산자(&&)를 사용할 때, 모든 값이 Truthy할 경우 맨 뒤에 있는 값이 result 변수에 할당된다.

 

const condition1 = false
const condition2 = null
const condition3 = "이용우"

const name = condition1 || condition2 || condition3 || '강승현';

name
// Print: '이용우'

OR 연산자(||)를 사용할 때, 가장 먼저 오는 Truthy한 값이 name변수에 할당된다.

 

 

반복문

for ... of 문

const persons = ['강승현', '홍길동', '김아무개'];

for (const person of persons) {
  console.log(person);
}

// Print: '강승현'
// '홍길동'
// '김아무개'

 

for ... in 문

const persons = ['강승현', '홍길동', '김아무개'];

for (const person in persons) {
	console.log(person);
}

// Print: 0
// 1
// 2

 

 

 

궁금한 부분

메서드 PATCH와 PUT의 차이점?

이번 프로젝트 다른 팀의 피드백을 보다가 궁금해서 검색해 보았다. 프로필 변경 페이지를 예로 들면 사진과 닉네임을 한번에 모두 변경하는 경우에는 PUT, 사진과 닉네임을 각각 선택적으로 변경할 수 있다면 PATCH라고 한다.

참고

https://programmer93.tistory.com/39

 

페어 프로그래밍이란?

https://blog.mathpresso.com/mathpresso-%EA%B0%9C%EB%B0%9C%EB%B0%A9%EB%B2%95%EB%A1%A0-1-%ED%8E%98%EC%96%B4-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-pair-programing-f7d07ac323d0

 

 

 

해결하는 경험

프로필 이미지 로딩 시 개선 사항

수정 전

수정 후

<img id="profileView" src="/assets/transparentProfile.png"/>

새로고침 할 때마다 프로필 이미지가 로딩 중에 엑박이 뜨는 것이 자꾸 눈에 거슬렸다. 그래서 원래는 이미지 src="" 로 비워뒀었는데 여기에 투명한 png 파일을 기본으로 넣으니까 화면 로딩 시에 엑박 뜨는 것을 해결할 수 있었다.

 

 

회원가입 시 입력한 닉네임 정보가 null로 뜨는 현상

회원가입 시 닉네임도 입력하도록 되어있는데 회원가입 -> 로그인 후 프로필에 들어가니까 닉네임 없음으로 뜬다. 원래 displayName에 내가 입력한 닉네임이 들어가야 하는데 null로 뜬다. db에 저장되지 않은 것이다.

 

 

1차 해결

// 닉네임 input 창에 입력한 값을 변수 지정함
const signUpNickname = document.getElementById('signup__nick').value
// firebase 닉네임 저장하는 곳에 그 값을 넣어 줌
authService.currentUser.displayName = signUpNickname;

이렇게 했더니 프로필 페이지에 들어가니까 내가 입력한 닉네임이 뜨길래 성공한 줄 알았다. 그런데 회원가입 후 처음으로 프로필 페이지에 들어가면 닉네임도 제대로 뜨고 displayName에 내가 입력한 닉네임도 담겨있는데 새로고침을 하면 displayName 값이 다시 null로 변한다. 뭐가 문제일까..? 이 문제는 로그인 페이지를 구현하는 팀원 분이 해결하기로 했다.

 

 

 

github branch 간에 merge하기

내 브랜치에서 진행 중인 프로필 페이지에 main 브랜치의 업데이트 사항을 merge하고 싶었다. 근데 merge는 처음이라 막연한 두려움을 가지고 있었기 때문에 main branch 건드릴까 봐 너무 무서웠다😱

 

오늘 merge를 총 두 번 했는데(원래 이렇게 자주 하는 건가..?) 처음에는 소스트리에서 진행하고 두 번째는 vscode 터미널 창에서 진행했다. 근데 vscode에서 충돌 관리하는 게 훨씬 편했던 거 같다. 그동안 여기저기 수정한 코드를 어떻게 합치는 걸까 궁금했었는데 그 궁금증을 해결할 수 있었다.

 

충돌 해결 방법은 내 브랜치의 코드를 유지하거나, merge하는 다른 브랜치의 내용을 가져오거나, 아니면 두 브랜치의 내용을 합쳐서 넣는 방법도 있다. 합쳐서 넣는 경우에는 그 자리에서 바로 코드를 세부적으로 수정할 수도 있다.

 

 

방법 참고

https://zi-c.tistory.com/entry/Sourcetree%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-git-merge-commit-conflict-%EC%B6%A9%EB%8F%8C-%ED%95%B4%EA%B2%B0

 

github으로 협업 시 branch 관련해서 참고하면 좋은 글 추천👍🏻

https://developer-eun-diary.tistory.com/42

 

 

브랜치 삭제하기

테스트용으로 만든 브랜치를 삭제하고 싶어서 검색한 결과를 토대로 브랜치를 삭제해 보았다.

 

참고 https://www.freecodecamp.org/korean/news/git-delete-local-or-remote-branch/

 

 

 

느낀 점

오늘부터 본격적으로 main 브랜치에 내가 만든 프로필 페이지를 합치는 과정을 진행하고 있다. 에러 없이 한번에 완벽하게 웹페이지가 작동하는 경우는 절대 없고 이번엔 무슨 에러가 뜰까 기대(?)가 된다. 지금도 merge 후에 로그인 기능이 작동하지 않아서 에러를 해결해야 하는데 피곤해서 일단 내일로 미룬다.

 

오늘은 시간이 생겨서 다른 팀들의 프로젝트 S.A와 튜터님들의 피드백을 모두 살펴봤는데  다른 팀들의 피드백을 보면서 우리 팀의 웹페이지를 어떤 식으로 개선하면 좋을지 아이디어를 얻기도 했다.