D'story

오늘 한 일

• 미니 프로젝트 주간이 시작되었다. 이제 온종일 강의 듣고 공부하는 시간은 끝났다. 프로젝트를 하면서 틈틈이 찾는 자료들로 충분히 공부가 될지는 다소 의문스럽다. 어찌 됐든 함께 프로젝트를 진행할 우리 조에는 프론트엔드가 나까지 2명, node.js를 다루는 백엔드가 3명 있다. 아이디어 회의를 진행해서 스터디처럼 소모임을 구성하기 위해 게시글을 올리는 페이지를 만들기로 했다. 다함께 miro에서 와이어프레임을 짜고, 노션으로 api 리스트를 작성한 후 S.A를 제출했다. 서로 뭘 알고 있는지 잘 모르는 프론트와 백의 첫 회의란 그야말로 우당탕탕이었다. 그리고 서로의 지식을 공유할 때마다 진심으로 신기해하곤 했다.
• 프론트엔드끼리 버튼, 인풋, 그리드, 텍스트 같은 기초 단위부터 헤더, 푸터 및 메인 페이지, 상세 페이지 등 페이지 단위의 컴포넌트까지 세분화하여 분배했고 각자 코드를 작성하고 깃헙에 올렸다. 나중에 깃헙 리드미에 넣을 내용은 리덕스를 붙일 때부터 정리하고, 그 전에 작성하는 단순 UI 이외의 코드들에 대해서는 주석을 상세히 남기기로 했다.
• 나는 페이지 단위 컴포넌트에서는 목록에서 게시글을 클릭하면 나올 상세 페이지를 맡았는데, 상세 페이지에 들어갈 내용이 많기도 했지만 만들어 놓은 기초 단위 컴포넌트들만 가지고 구성하려니 여백이나 사이즈 같은 것들, 또는 배치 방식이 상이해 자꾸만 시행착오를 겪었다. 뷰포트를 기준으로 한 단위를 사용하지 않으면 브라우저 크기를 줄였을 때 보기 싫을 정도로 시각적 삑사리가 났다. 반응형 웹페이지란 모든 걸 픽셀 단위로만 작성하던 나에게는 가장 힘든 일이 아닐 수 없었다.. 오늘은 일찍 잘 수 있을 줄 알았는데 지금 보니 여전히 비슷한 시각이다. 그래도 다행히 마치기 전에 어느 정도 윤곽을 잡았다.

내일 할 일

• 백엔드와의 회의에 참여해 지금까지의 진행 상황을 공유하고 앞으로의 남은 일정을 재확인한다.
• 로그인 페이지, 회원가입 페이지 작성을 그대로 진행한다고 하면 내일 추가로 완성해본다.
• 전체적인 UI 디자인을 고려해 본다.
• JWT와 AXIOS에 대해 찾아본다.

Day22 한 일

• 주특기 과제로 구성한 두 컴포넌트 중 하나의 뷰를 거의 완성했다. 버튼 하나 고정시키는 것만 적용이 잘 안 됐다. 병원까지 장거리 이동을 해야 해서 하루 중 여기에 온전히 쏟을 수 있는 시간은 얼마 없었는데, 마지막의 마지막까지 그 버튼 때문에 머리를 싸매다가 결국 포기했다.

Day23 한 일

• 다시 어제의 버튼에 매달리는 것부터 시작했다. 이걸 찾아봐도 안 되고 저 자료를 따라해도 안 되는데, 그걸 쓴 사람들은 거의 비슷한 방식을 사용하고 있었다. 보통 부모 태그에 position: relative를 주고, 고정 대상이 될 자식 태그에 position: absolute와 z-index 속성을 줘서 화면이 스크롤 되어도 상관없이 버튼은 같은 자리에 계속 떠 있게 만드는 거였다. 코드를 그대로 가져다 써도 안 먹혀서 온갖 시도를 다 해 본 후에야, position: relative를 바로 상위 태그가 아닌 한 단계 더 위의 태그에 주니 원하는 모양새가 나왔다. 이유는 아직 잘 모르겠다. 그렇게 장장 4시간에 걸쳐 버튼 하나를 고정했다.
• 다음 컴포넌트의 뷰를 구성하는 건 버튼 붙이는 것보다 쉬웠다. 어차피 기본적인 스타일은 이미 만들어 놓은 컴포넌트와 통일성 있게 해야 하니 색상도 갖다 쓰게 되고, 세세한 것들에만 손을 대면 됐다. 그렇지만 CSS가 완성되고 나니 하루가 다 갔다.

내일 할 일

• input에 입력되는 텍스트를 ref로 가져오는 기능을 구현한다. 그런데 input은 자식 컴포넌트에 있고 state는 부모 컴포넌트가 가지고 있는데, 이걸 어떻게 하지?
• redux를 붙여서 데이터를 모은다.
• firebase를 연결한다.

Day20 한 일

• <프론트엔드의 꽃, 리액트> 강의를 4주차까지 이해가 잘 안 되지만 일단 꾸역꾸역 듣고, 5주차 강의는 프로그레스바를 채운다는 느낌으로만 들었다. 강의 내용이 머리에 들어와서 바로 튕겨나가는 기분이라 자괴감으로 치면 알고리즘 급이었다.

Day21 한 일: day-off 아닌 day-off

• 리액트의 기본 개념조차 머리에 잘 남지 않아 따로 공부를 했다. 리액트를 이루는 가장 기초적인 단위가 되는 컴포넌트에서부터 리액트의 작동 원리를 익히고(DOM은 나중에 다시 또 찾아봐야 할 것 같지만), 무조건적으로 사용 방법만 외웠던 create-react-app에 대해서도 조금은 알게 되었다.
• 낯설기만 했던 notion의 사용 방법을 우연한 기회에 알게 되어 페이지를 나름대로 신경써서 꾸며보기도 했다. 오늘 하루 중 가장 힐링이 됐던 시간.

내일 할 일

• 주특기 기본 주차의 과제를 일단은 뷰 정도만 만들어 놓는다. 기능은 차차 추가하기로 하자.

나도 모르게 어느 한 순간 흐름을 놓치고 나니 다시 따라잡기가 힘들다.

그래도 중간중간 눈으로 겨우 따라가며 익힌 몇 가지를 발판 삼아,

전체적으로는 강의자료에 의존하며 위태위태하게 나아가는 중..😥

물론 나는 하루에 몰아 들었으니 더 그렇게 느끼는 것도 있겠지만,

1주차에서 2주차로 넘어오니 난이도가 급격히 상승하는 것 같았다.

강의는 어떻게 머릿속에 욱여넣으며 들어봤지만,

숙제는 한 방에 끝낼 수가 없어서 일단 내일로 미뤄야겠다..

나중에 1.5배속으로라도 다시 한 번씩 들어봐야 할 것 같다.

'시작하기' 버튼은 onclick 함수조차 안 걸려 있는 껍질뿐인 버튼이다.

숙제의 이해를 돕기 위한 예시를 거의 클론코딩한 거나 마찬가지이다ㅠㅠ

드디어 주특기 공부 주간의 첫날이 밝았다.

내가 주특기로 선택한 것은 자바스크립트를 기반으로 하는 라이브러리인 'React'이다.

조금이라도 공부에 도움이 될까 싶어 어제 강의와 책을 통해 조금은 자바스크립트 공부를 해 뒀는데,

만약 그것마저 없었다면 오늘 1주차 숙제를 제출하는 데 어려움이 따랐을 것 같다.

내장함수 map, filter, concat, from, indexOf를 배웠고,

JSX에서는 '태그는 무조건 닫고', '무조건 엘리먼트 1개만 반환하며', '파이썬에서 익숙한 class는 className으로 바꿔 붙여야 하고', '자바스크립트 값이나 문법은 { } 안에 써서 가져올 수 있고', '인라인 스타일은 {{ }} 안에 가져온다'는 것을 배웠다.

써 놓고도 아직 무슨 소린지 모르겠다😅

아무튼 갈 길이 멀다.

갈 길은 멀고 시간은 없다..