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

주말 동안 해결해야 할 부분을 정리해 봤다.

• 소셜 회원가입 기능이 정상적으로 작동하는지 확인하기
• 회원가입 시 입력한 닉네임이 user DB에 저장되게 연결하기
• 로그인하지 않았을 때 글 쓰기, 프로필 페이지 등 접근 차단
• 메인 컬러 정하기
• 메인 페이지 스크롤 어떤 방식으로 구현할 것인지 (더보기/페이지네이션 등)
• alert CSS 통일하기
• AW3 도메인 연결하기
• 프로필 페이지에서 내가 작성한 글만 불러오기
• 카테고리 별로 네비게이션 바?
• 이미지 파일 업로드하지 않으면 글 작성 못하도록?
• 게시물 수정 페이지에서 input 창에 데이터 카테고리, 제목, 내용 불러오기

 

 

해결하는 경험

github으로 협업하기

원래는 팀원들마다 개인 브랜치를 만들어서 각자 담당한 페이지 작업을 하고 있었는데 중간에 모든 페이지를 연결하는 과정에서 profile-main이라는 브랜치에 모든 팀원의 작업물을 한 번 합쳤다. 그 후로 현재 모든 팀원들이 profile-main 브랜치에서 작업하고 있는데 뭔가 잘못된 거 같다...🤔 profile-main에서 한번 합친 후에 또 다른 브랜치를 만들어서 체크아웃했다면 충돌 관리가 더 수월했을 거 같다..

 

일단 profile-main 브랜치에 모두 합치고 나서는 VS CODE의 live share 기능을 이용해서 함께 코드를 수정하기로 했다. 다만 live share 기능의 단점은 현재 작업 중인 페이지를 live server로 열지 못한다는 것이다. 만약에 내가  live share를 열어서 링크를 공유했다면 내 로컬에서만 현재 작업 중인 웹페이지를 실시간으로 확인할 수 있다. 그래서 후반부에는 일단 각자 팀원 분들의 로컬에서 작업을 하다가 수정한 코드를 live share 이용해서 옮기고 화면 공유로 css나 js가 잘 적용되었는지 확인하는 방식으로 프로젝트가 진행되었다.

 

 

 

AWS S3와 Route 53 이용해서 도메인 연결 완료!

Amazon S3에 도메인 이름과 동일하게 버킷을 생성한 후 정적 웹 사이트 호스팅을 설정하고 객체에 모든 파일을 넣어 준다. 아직 웹페이지가 완성 전이기 때문에 모든 작업 완료 후에 객체를 다시 업로드하면 될 거 같다.

 

Amazon Route 53에서도 도메인 이름으로 호스팅 영역을 생성하고 NS 유형의 네임서버 4가지를 가비아의 네임서버에 복붙한다. 그리고 A유형의 레코드까지 생성하면 드디어 도메인에 웹페이지 연결 완료!

 

DNS 서버란 무엇인가?

• 도메인은 IP 주소를 대신하여 사용하는 주소이다.
• DNS라는 시스템을 이용해서 IP와 도메인을 매칭한다.
• DNS 시스템 안에서 IP와 도메인 매칭을 하는 역할을 하는 것이 DNS 서버이다.
• DNS 서버와 네임서버는 같은 의미이다.

출처 https://hanamon.kr/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-%EA%B8%B0%EB%B3%B8-%EB%8F%84%EB%A9%94%EC%9D%B8%EA%B3%BC-dns-%EB%84%A4%EC%9E%84%EC%84%9C%EB%B2%84%EB%9E%80-%EA%B0%9C%EB%85%90%ED%8E%B8/

 

 

 

글 쓰기 페이지 css 수정

수정 전

수정 후

다른 팀원 분이 게시물 업로드의 기능 구현을 위해 기본 틀만 갖춰진 페이지에서 css를 수정했다. 최대한 깔끔하게 페이지를 만드는 것이 목표였다. 시간이 없어서 못했지만 카테고리 선택 부분을 드롭다운 형식으로 만들어 보고 싶기도 하다.

 

input 창 클릭했을 때 생기는 저 검은색 테두리가 매우 거슬려서 input:focus 속성으로 아웃라인을 없애주었다.

.upload__title > input:focus {
  outline: none;
}

 

 

 

아직도 어려운 정렬 문제

카테고리를 왼쪽 정렬, 등록하기 버튼을 오른쪽으로 정렬하고 싶었는데 계속 가운데 정렬밖에 안 돼서 진도가 안 나가고 있다. 아무래도 팀원분이 작성한 html 파일을 토대로 css를 수정하다 보니 유연하게 생각하지 못했던 거 같다. 해결 방법은 카테고리와 등록하기 버튼을 감싸는 상위 div를 만들어주기! 그리고 팀원 분께 도움을 청하는 과정에서 Pesticide for Chrome라는 유용한 크롬 확장 프로그램을 알게 됐다. 이 프로그램을 실행하면 이미지처럼 현재 페이지의 엘리먼트 구조를 모두 보여주기 때문에 CSS 작업을 하기 편하다.

 

 

 

메인 컬러에 따른 디테일한 CSS 수정

수정 전

수정 후

드디어 메인 컬러와 배경색이 정해졌기 때문에 프로필 페이지 CSS도 약간 수정했다. 프로필 박스 배경을 흰색으로 하고 그림자 효과를 주어서 조금 더 입체적으로 보이도록 했고 이미지 변경, 닉네임 수정 버튼에 색깔이 약간 밝아지도록 호버 효과를 주었다.

 

 

 

헤더 폰트 수정하기

다른 팀의 작업물을 보다가 우리도 헤더의 페이지 명 부분에 폰트를 설정하면 좋을 거 같다는 생각이 들었다. 팀원들과 먹을텐데라는 단어에 어울리는 폰트를 찾아보았고 어비 세현체가 느낌이 잘 맞는 거 같아서 헤더를 수정했다!

 

폰트 https://noonnu.cc/font_page/187

 

 

 

회원가입 시 닉네임 저장하기

// 회원가입 시 닉네임 저장하기
const signUpNickname = document.getElementById('signup__nick').value;
updateProfile(authService.currentUser, {
	displayName: signUpNickname ? signUpNickname : null,
})

회원 가입할 때 메일 주소, 비밀번호, 닉네임을 입력하도록 되어 있는데 이 때 입력한 닉네임이 firebase authservice에 저장되지 않아서 자꾸 null 값이 뜨는 문제가 발생했다. 프로필 페이지를 내가 담당했기 때문에 닉네임을 수정하는 부분이 비교적 익숙해서 다른 팀원 분이 작성하신 회원가입할 때 작동하는 함수에 updateProfile라는 메서드를 이용해서 회원가입 시 작성한 닉네임이 DB에 저장될 수 있도록 코드를 추가했다.