인공지능 팀프로젝트 두번째 주 회고

01 Flex에 Flex에 Flex를 더해서

본격적인 프론트 개발이 시작된 주였다. 나의 이번 프로젝트의 주요 목표 중 하나는 단연컨대 반응형 구현이었다. 저번 프로젝트 때는 Material Ui의 Grid와 react-responsive를 사용하여 반응형을 구현하였는데, 그때 원하는 대로 화면을 구성하는 데에 너무 많은 어려움을 겪었었기에 이번에는 Grid대신 Flex를 사용해보기로 했다.

Flex는 Container에 적용하는 경우와 Item에 적용하는 경우, 이렇게 두 가지로 나뉘는데, 나는 이번 프로젝트에서 Container에 적용하는 속성을 주로 사용했으므로 간단하게 그 부분만 정리해보았다.

Container에 적용하는 속성

• display: flex;
  - item은 기본적으로 가로방향 배치, 내용물의 width만큼 차지
  - height는 container 높이만큼 늘어남
  

• display: flex;

  • item은 기본적으로 가로방향 배치, 내용물의 width만큼 차지
  • height는 container 높이만큼 늘어남

• flex-direction: 아이템들이 배치되는 축의 방향을 결정
  - row: 가로로 배치(왼→오)
  - row-reverse: 가로로 배치(오→왼)
  - column: 세로로 배치(위→아래)
  - column-reverse: 세로로 배치(아래→위)
  

• flex-wrap: item 줄바꿈을 결정
  - nowrap: 줄바꿈 없이 넘치게 함
  - wrap: 줄바꿈
  - wrap-reverse: 줄바꿈하되, 아이템을 역순 배치
  

• justify-content: 메인축 방향 정렬

  • flex-start: 기본값, 아이템들을 시작점으로 정렬

    • flex-direction이 row(가로 배치)일 시 왼쪽 배치
    • flex-direction이 column(세로 배치)일 시 상단 배치

  • flex-end: 아이템들을 을 끝점으로 정렬

    • flex-direction이 row(가로 배치)일 시 오른쪽 배치
    • flex-direction이 column(세로 배치)일 시 하단 배치

  • center: 가운데 정렬

  • space-between: 아이템들의 사이에 균일한 간격을 생성

  • space-around: 아이템들의 둘레에 균일한 간격을 생성

  • space-evenly: 아이템들의 사이 및 양 끝에 균일한 간격을 생성

• align-items: 수직축 방향 정렬

  • stretch: 기본값, 아이템들이 수직축 방향 끝까지 늘어남

  • flex-start: 아이템들을 시작점으로 정렬

    • flex-direction이 row(가로 배치)일 시 상단 정렬
    • flex-direction이 column(세로 배치)일 시 왼쪽 정렬

  • flex-end: 아이템들을 끝으로 정렬

    • flex-direction이 row(가로 배치)일 시 하단 정렬
    • flex-direction이 column(세로 배치)일 시 오른쪽 정렬

  • center: 가운데 정렬

  • baseline: 아이템들을 텍스트 베이스라인을 기준으로 정렬

02 날로 먹는 Firebase

역할을 분담하다 보니 우리 서비스에 필요한 login 기능을 맡아서 구현하게 되었다. 자연스럽게(?) Firebase를 접하게 된 나는, 아는 것이 하나도 없었으므로 일단 튜토리얼 영상을 여러 번 보고 따라해보았다. 우선 Firebase는 개발자로 하여금 프로그램을 개발하기 쉽게 도와주는 플랫폼이라고 할 수 있는데, 아래 그림에 있는 다양한 기능을 제공해준다. 나는 여기서 인증 및 호스팅 기능을 사용해보았다.

호스팅 날로 먹기

• 리액트 기준

1 새로운 react app을 생성

$ npx create-react-app

2 Firebase 설치

$ npm install firebase

3 Firebase console 페이지로 이동

4 프로젝트 추가

5 웹을 추가하여 시작하기 클릭

6 앱 등록을 위해 앱 닉네임 입력, 호스팅 설정 체크 (선택) → 앱 등록 버튼 클릭

7 다음 클릭해서 넘어감(뒤에서 추가할 예정)

8 해당 지시를 따라 Firebase CLI 설치 및 업데이트

$ npm install -g firebase-tools

10 해당 지시에 따라 login 및 프로젝트 시작

$ firebase login

$ firebase init

11 Yes(Y) 입력

12 Hosting 선택: 방향키로 이동, space로 선택, enter로 입력

13 이미 존재하는 프로젝트 사용 선택

14 Hosting을 원하는 프로젝트를 선택

15 build 입력 후 enter

16 Yes 입력 후 enter

17 build 파일 생성

$ npm run build

18 setupFirebase.js 파일 생성 후 필요한 Firebase 모듈 import

19 Firebase console 페이지 - 내 프로젝트 클릭 - 프로젝트 설정 페이지로 이동

20 페이지 하단 SDK 설정 및 구성에서 Firebase 구성 객체 copy 후 setupFirebase.js 파일에 paste - 해당 객체로 초기화하기

21 index.js에 setupFirebase.js import

22 터미널에 deploy 명령어 입력

$ firebase deploy

23 호스팅 완료

Firebase 체험기

쉬운 문제인 것을 알면서도 내가 아는 게 너무 없어서 이 쉬운 문제를 못푼다는 것에 안타까움을 느껴본 사람들이 있으리라. 지금의 내가 딱 그 꼴이다. 분명 쓰기 편한 툴인것을 내가 몸소 느낄 수 있는데, 그럼에도 그 코드들을 모두 이해하지 못해 완전히 안다고 얘기하거나 남에게 설명해줄 수 없어서 정말 아쉽다. 이번 프로젝트를 통해 Firebase를 조금이나마 '안다'고 말할 수 있는 단계에 이르렀으면 한다.

03 진도가 안나가

이번 주는 분명 바쁘게 뭔갈 많이 한 것 같은데, 정작 해낸 것은 별로 없는 것 같은... 조금 허무한 한 주였던 것 같다. 좀 빠릿빠릿 빠르게 빠르게 일을 할 줄 알았으면 좋겠는데, 프로그래밍은 그런 '일처리'의 개념과는 조금 동 떨어져있는 분야이기 때문인지 원하는 만큼의 속도가 나오기까지 들여야 할 노력의 양과 범위가 상당한 것 같다. 이렇게 느릿느릿 나아갈 거면 성질이라도 급하지나 말아야 하는데 그렇지도 못해서 문제다. 그래도 다시 또 다른 한 주가 시작된다. 이번 주는 저번 주보다 조금이라도 더 많은 것을 해낼 수 있기를. 조금 더 노력할 수 있기를.

• 참고 자료
  이번에야말로 CSS Flex를 익혀보자
  https://www.youtube.com/watch?v=MrRzScFiH4E
  https://www.youtube.com/watch?v=v9r0W2Bc8N4