D'story

오늘 한 일

• 어제부터 연습 삼아 떨어진, 말하자면 '회사 홈페이지 클론코딩' 작업을 하고 있다. 작업 순서도 내 맘대로, 커밋도 내 맘대로, 폴더 구조도 내 맘대로, 아무리 연습이라 해도 처음부터 너무 엉망으로 시작한 게 아닌가 싶다. 착수하기 전에 뭔가 계획을 짜고 시작해야 했나? 매일 공식문서들만 들여다 보다가 오랜만에 코딩만 해도 되는 시간이 오니 반가워서 이성을 잃었었나.. 하지만 이미 돌이키긴 늦었지.
• 나는 지금까지 프로젝트를 하면서 깃허브만 이용했었는데, 회사에서는 비트버킷에서 코드를 관리한다. 처음으로 깃허브가 아닌 다른 플랫폼을 접해봤고, 말로만 들었던 소스트리도 한정적인 부분에서나마 직접 사용하게 되었다.
• 환경이 약간 달라져서 그런지 git add 해놓고 금방 후회하고, commit 해놓고 또 후회하는 일이 자꾸만 생겼다. 이것까지 추가해서 넣었어야 했는데...!!

오늘 배운 것

• 그래서 준비한 git add, commit, push 되돌리는 방법 링크

• 예전 글이긴 하지만 깃허브, 비트버킷, 깃랩은 여러 차이점이 있다고 한다.

오늘 한 일

• 기존에 expo 환경에서 구동했던 걸 Xcode를 이용한 시뮬레이터로 돌려보려고 react-native-cli 방식으로 갈아탔다. expo는 모바일 기기에서 이용할 수 있는 기능을 상당 부분 포기하면서 진행해야 한단다. 가벼운 마음으로 시작했는데, 그 과정에 어쩌면 그렇게 많은 오류가 나는지. 어떤 오류들을 해결하면서 진행했는지 기억도 다 안 날 지경이다. 용케 완료한 내 자신, 기특해 기특해.
• expo의 한계점 관련해서는 이전 포스팅에서 링크를 달아놓았다. why-not-expo

오늘 배운 것

• react-native-cli quickstart! quick하진 못했지만..

오늘까지 한 일

• 어제는 집을 구하러 다니느라 하루를 다 썼다. 그래도 결과가 좋아서 헛수고하진 않았으니 만족스럽다.
• React-admin에 json-server로 fake API 적용: 예전에도 했었는데 지난 기록을 찾아보니 그때는 이게 무슨 의미인지 모르고 했던 것 같다. 기록을 남겨놨다는 것조차 기억을 못하고 있었으니ㅋㅋ.. 다시 적어두려고 보니 이미 있네!?
• React-admin에서 사용되는 dataProvider와 authProvider 파일을 살펴보고 공식문서에서 dataProvider 부분을 찾아 읽었다. 파일은 타입스크립트로 작성되어 있어서 타입스크립트의 공식문서도 함께 참고하며 보느라 진도가 빨리 안 나간다.

오늘 배운 것

오늘 한 일

• NEO(New Employee Orientation): 근무시간, 휴가, 협업 툴, 업무 진행 상황 등 회사의 전체적인 시스템에 대한 설명을 들었다. 노트북이 없는 나(ㅠㅠ)는 임시로 사용할 맥북을 지급받았고, 맥북을 처음 접한 나(ㅠㅠㅠ)는 사용만으로도 허덕였다. 다행히 천사 같은 동기 분이 그때그때마다 단축키 같은 것들을 적절히 알려주셨다. 연휴를 맞아 꼭 맥북 다루기를 마스터처럼 하고 말 테다.
• 그리고 지난 번에 CTO님이 내주신 숙제들의 이행사항을 점검 받았는데, 내가 많이 부족하다는 걸 뼈저리게 느낀 시간이었다.
• 남은 시간에는 맥북 세팅을 마저 하고, 리액트 네이티브의 개발환경을 구축하는 데 힘썼지만 설치하는 데만 시간을 너무 많이 잡아먹어 완료하지 못하고 퇴근해버렸다. 연휴의 나...바쁘겠다^^
• 회사 분위기는 기대했던 것보다도 너무 좋고 재밌었다. 하루밖에 출근 안 했는데 왠지 벌써부터 이 회사에 들어올 수 있어서 운이 좋은 것 같다는 생각도 든다. 암튼 느낌이 좋다.

오늘 배운 것

• iOS 개발을 위한 Xcode는 앱스토어가 아닌, Apple Developer를 통해서 다운 받도록 하자^^삽질은 이제 그만~

오늘까지 한 일

• 서울로, 일단은 나 혼자 임시로 이사를 왔다. 그래서 어제는 하루종일 정신이 없었다.
• 오늘은 개발과 상관없이 개인적으로 멘탈 터지는 일이 생겨서 뭐 하나에 집중하기가 너무 어려웠다ㅠㅠ...
• 그리고 이 모든 것과 상관없이, 이미 야행성 인간이 된 나는 해가 떠 있는 낮에는 뭘 못하나 보다ㅋㅋ
• 리액트 네이티브도 해보다가 환경 설정에 뭔가 오류가 있었던 건지 에러 메시지에 탈탈 털리다가 겨우 정상 궤도에 올려놓았다. 다양한 기능을 시도해보지는 못했지만 expo 구동을 통해 기기에서 바로 확인할 수 있다는 게 신기했다. 서버 연결이 자주 끊기는 게 약간 불편...하지만 와 너무 재밌어 미쳤다
• 토크부트에서 사용된 이미지들을 전체적으로 png에서 svg로 변환했다. 변환하고 나니 이제 모바일 기기에서도 하단 내비게이션바 메뉴 아이콘이 더 이상 깨지지 않는다.

오늘 배운 것

• GUI(Graphic User Interface)와 대비되는 CLI(Command-Line Interface)

• React Native에서 scrollable div를 ScrollView라고 한다. React에서 구현하기 위해 골머리를 앓던 것들이 모바일 기기 특성상 ScrollView에 단순히 props 하나를 줌으로써 설정 가능해지곤 한다. 예를 들면 pagingEnabled라는 props로 페이징을 할 수 있다.

• React Native에서 편리한 라우팅을 담당하는 React Navigation. 이게 있으니 좀 더 실제 어플 같다.

• 이토록 편리한 Expo에도 개발의 자유도가 낮아진다는 제약 사항이 있다. 링크도 오죽하면 why-not-expo.

오늘 한 일

• 잠시 손을 놓았던 프로젝트 토크부트에 다시 손을 대보았다. 헤더를 페이지 상단에 고정했다. 왜, 그땐 그렇게 이게 까다로웠다고 생각했을까. 애초 디자인에도 헤더는 고정형이었는데 의외로 고정이 잘 되지 않아서, 또는 고정이 되면 그 위에 있는 버튼들이 자꾸 행방을 감춰버려서, 이런저런 이유로 내맘대로 생략해버리고 말았다. 지금에라도 고정시키니 마음이 편하다.
• 1일 1커밋은 꼭 하자! 1일 1TIL도 제대로 못하면서? 그게 프라이빗 저장소든, 토크부트처럼 예전 프로젝트에 수정을 가하는 것이든. 커밋이 있다는 건, 어쨌든 코딩을 했다는 것이니까. 잔디도 심고?

오늘 배운 것

• 공식문서 첫머리만 겨우 읽은 React Native.

내일 할 일

• 내일은 본격적으로 해봅시다. 서울로의 이사(?) 준비로 바쁘겠지만.

오늘 한 일

• 어제 받아온 숙제를 시작했다. React-admin의 튜토리얼을 완료했다. 튜토리얼을 진행해 본 지금도 이런 패키지가 존재한다는 게 도저히 믿기지가 않는다. 게시판 당연히 가내수공업인 줄 알았는데!? 소름 돋는다.
• 코드 몇 줄이면 CRUD가 가능한 게시판이 그냥 만들어진다. 아이콘 넣고, 링크 언더라인 빼고, 이런 기본적인 커스터마이징은 물론이고 반응형으로까지 제작 가능하다. 이쯤에서 터지는 헛웃음

오늘 배운 것

• React-admin 튜토리얼 링크를 첨부한 거지만, 이 중에서도 특히 Optimistic Rendering And Undo 부분이 인상 깊었다. 리덕스로 상태 관리할 때 리듀서에서 서버를 통하지 않고도 변화를 주는 것과 비슷하다고 생각했다. 데이터를 변경한 후, 변경한 데이터를 서버에 보내기 전에 일단 보여준다. 데이터 변경 후 5초 안에 사용자가 Undo를 누르면 원래대로 돌려놓고, 별다른 입력이 없으면 5초가 지났을 때 서버와 통신해 실제 데이터를 업데이트한다. 생각해 본 적 없는 방식이어서 신선했다.

내일 할 일

• 내일은 저어엉말 오랜만에 나들이를 다녀올 생각인데, 만약 집에 돌아와서 저녁이나 밤 시간에 여유가 있으면 React-admin 커스터마이징을 해보겠다.

SSR(Server Side Rendering)

클라이언트가 데이터를 요청하면 브라우저 > 프론트 서버 > 백 서버 > 데이터베이스를 거쳐서 데이터베이스에서 데이터를 가져온 후 브라우저에 그려지는 방식.

서버에서 데이터까지 모두 포함하여 페이지를 구성한 후 브라우저에 전달하므로, 불필요한 부분까지 모두 다시 렌더링해야 한다는 단점을 가진다.

CSR(Client Side Rendering)

데이터를 제외한 화면을 그리는 코드들은 프론트 서버에, 데이터는 따로 백 서버에 요청하여 받아오는 방식.

서버 부하가 덜하다는 장점이 있는 반면, 번들된 JS 파일의 다운로드로 인해 초기 로딩이 길고 SSR에 비해 SEO에 약하다는 단점이 있다.

Next.js

첫 페이지는 SSR 방식으로 백 서버에서 렌더링해서 데이터가 채워진 html을 받아오고, 그 다음 페이지부터는 CSR 방식으로 필요한 데이터 부분만 갱신하는 방식.

여담

• 예전에 프로젝트 할 때 한번 찾아본 내용이었는데, 오늘 본 면접에서 잠깐 언급된 김에 다시 정리해보았다.

참고