스파르타코딩클럽 내일배움캠프 85일차

오늘 일과 간단 요약

1. 오전 스크럼
2. SNS 공유 버튼 UI 수정
3. amplitude 강의 듣기
4. top 버튼 수정
5. global css 파일 생성

 

 

 

 

 

 

 

 

SNS 공유 버튼 UI 수정

 어제 기능을 만들어뒀던 버튼들 UI를 수정했다. 희현님이 좋아요랑 댓글 아이콘을 한 줄에 넣어주셔서 그 줄 왼쪽 부분에 SNS 공유 버튼을 넣고 조금씩 수정했는데, 솔직히 말해서 나는 CSS가 기능 구현보다 어려운 것 같다...ㅎ div로 감싸던지 아니면 따로 빼던지, 그리고 간격은 얼마나 줘야 하는지 나란히 정렬하려면 어떤 식으로 해야 하는지 등등...따져야 할 게 너무 많아서 그런가 오히려 CSS 하는 게 더 어렵다. 그래서 오늘도 기능 구현하는 것보다 UI 구현하는 데 시간이 더 오래 걸렸다...

 

 

  이게 수정된 UI. 공유하기 저 멘트를 삭제하고 싶은데 삭제하면 너무 뜬금없이 SNS 아이콘들이 있어서 저 공유하기 버튼도 global css 적용 후에 바꿀 예정이다. 약간 임시 느낌이랄까...ㅋㅋㅋㅋ

 

 좋아요와 댓글은 왼쪽에, 공유 버튼들은 오른쪽에 정렬해두었다. 이게 나중에 모바일 버전에서는 보이지 않고, 다른 버튼이 보이도록 했다.

 

 이런 식으로 모바일 화면에서는 모바일 버전 아이콘과 공유하기 글이 나오도록 했다. 근데 이게 맞나 모르겠다...(?) 좋아요와 댓글은 div로 하나로 묶어서 나란히 나오는데 저 모바일 버전 아이콘이 나란히 있도록 하고 싶은데 컴포넌트도 다르고 아예 hidden으로 해놓아서 적용을 하기가 쉽지 않았다. 그래서 그냥 임시로 아래로 내려가도록 했는데...이것도 나중에 수정할 듯 싶기도 하다. 모바일 화면이 375px 기준으로 만들어서 그것보다 화면이 작으면 또 아예 사라지기도 하고. 디자이너님이 아이폰 기준 가장 작은 사이즈가 360px 이라고 했던 것 같은데, 그러면 괜찮을 수도 있고...?

 

 이렇게 별로 바뀌지 않은 것 같은데 은근히 시간이 오래 걸렸다. 중간에 반응형 한다고 희현님이랑 같이 화면 공유하면서 했었는데, 결론은 global css로 전체 사이즈를 지정해야 고칠 수 있을 것 같다는 의견이 모아져서 여기까지 수정하고 PR 했다.

 

 

 

 

 

 

 

amplitude 강의 듣기

 amplitude에 대해서 튜터님한테 설명을 듣기는 했는데, 그 이후에 올라온 강의를 보지 못해서 오늘 강의를 들었다. 그리 긴 강의는 아니어서 시간이 그리 오래 걸리지는 않았다.

 

 

Amplitude

• Google  Analytics 같은 유저 분석 도구 중 하나
• 사이트에 접속한 유저의 행동을 추적하고 분석을 할 수 있도록 도와주는 도구
• Amplitude를 이용하면 유저가 어떤 행동을 하고 있는 지에 대해 데이터를 수집하고 기록할 수 있다

 

간단하게 정의하자면 amplitude는 이러한 분석 도구이고, 이번에 우리가 배포 한 이후에 유저 피드백을 받아야 하기 때문에 요걸 추가해서 데이터를 받아볼 예정이다. 오늘 오전에 유저 피드백 받는 것과 관련해서 발제를 들었는데, amplitude는 데이터 분석하면서 볼 수 있고 구글 폼을 따로 만들어서 실제로 유저 피드백 받기 두 가지를 할 수 있을 것 같다.

 

 amplitude를 사용하는 방법은 생각보다 간단하다.

 

1. Amplitude 홈페이지 가입

2. 팀 이름과 URL 작성
3. Brower SDK 클릭

• 환경변수 설정을 통해 API Key 관리하기

4. 프로젝트에서 amplitude browser 설치

yarn add @amplitude/analytics-browser
npm install @amplitude/analytics-browser

5. 루트 컴포넌트에서 Amplitude init하기

import { init } from '@amplitude/analytics-browser';
init('YOUR_API_KEY');

6. Amplitude 이벤트를 발생시키고 싶은 곳에서 발생시키도록 코드 추가

import * as amplitude from '@amplitude/analytics-browser';

amplitude.init('YOUR_API');
amplitude.track('Button Clicked');

 

 

 튜터님 강의에 나온 것과 노션에 있는 걸 간단하게 정리만 했다. 이 코드를 원하는 곳에 발생시키기만 하면 되는데, 희현님이 지금 하고 계신데 너무 많아보인다. 경우의 수가 생각보다 많은 걸...? 이걸 분석하고 최적화 시키는게 해야 할 일인데 생각보다 많아서 좀 당황했었다 ㅋㅋㅋㅋ 여튼...이게 뭔지도 알았고 어떤 식으로 써야 하는지 알았으니까 이제는 우리 프로젝트에 적용할 차례다.

 

 

 

 

 

 

 

 

global css 설정

 반응형이나 UI를 구현할 때 아무래도 global css를 먼저 정하는 게 좋을 것 같아서 오후 스크럼 하고 나서부터 global css 정하는 걸 계속했다. 디자이너님이 이미 만들어두셨기 때문에 그걸 우리가 tailwind에 적용하기만 하면 되었는데, tailwind를 처음 쓰다보니 전체적으로 적용하는 파일이 어디인지가 헷갈렸다.

 

 우선은 tailwind.config.js 파일에 전체적인 걸 적어두고, index.css 에 폰트와 폰트 사이즈 등을 적었다. 전체를 다 tailwind.config 파일에 적는 줄 알았는데 다른 블로그들을 참고해서 나눠서 적었다. 영문 폰트, 한글 폰트도 따로 있어서 그것도 적용했어야 했고 폰트 스타일도 많아서 그거를 전부 적다보니까 시간이 좀 걸렸다. 그래도 다 무난히 적용되니까, 이게 dev에 merge 되면 바로 전체적으로 UI를 조금씩 수정해야 겠다.

 

 이전에 프로젝트 할 때는 공통된 css를 정하지 않고 진행했었는데, 이런 걸 처음 하다보니 약간 프로젝트를 한게 맞나...? 싶다 ㅋㅋㅋㅋㅋㅋㅋ 디자이너님과 협업하면 이런 걸 알 수 있게 되는 걸지도...? 그래도 이제라도 알게 되니 다행인 것인가....암튼 global css까지 완료하니까 한결 UI 구현이 더 쉬워질 것 같다.

 

 

 

 

 

 

 

 

custom hook 짧은 강의

 저녁에 튜터님이 오셔서 custom hook과 관련된 강의를 짧게 해주셨다. 이전에 선발대에 있었을 때 custom hook 관련해서 강의를 들었었는데 듣기만 하고 투두리스트로 연습한번 해보고 프로젝트에는 한 번도 적용한 적이 없었는데, 이번 기회에 리팩토링 하는 계기가 될 것 같다.

 

 custom hook을 어떤 식으로 만들고 어떻게 적용하는지 예시를 들어주면서 설명해주셔서 이제는 직접 해보면서 적용할 차례 같다. 물론 중간에 어려우면 바로 튜터님한테 물어보러 가야지...ㅋㅋㅋㅋㅋ 그래도 오늘 설명해주신 걸로 아직까지는 충분해보인다.

 

 우리 프로젝트에서 직접 예시를 들어서 설명해주셔섰는데, 그렇게 설명을 들으니까 확실히 이해가 잘 간다. custom hook을 만들면 import를 줄일 수 있고 코드 양도 줄일 수 있어서 한눈에 코드를 파악하기 쉬울 듯 싶다. 내가 맡은 부분도 custom hook으로 뺄 게 있나 확인해봐야지. 있을 것 같기도 하고 아닌 것 같기도 하고...? 내일 바로 적용해봐야지.

 

 

 

 

 

 

 

 

 

짧은 기

 오늘은 UI 수정하고 global css하고 등등 하면서 시간을 보낸 것 같다. 내일은 삼일절이라 내배캠은 안하지만, 혼자서 custom hook을 만들어보거나 하지 않을까 싶다. 아니면 개인 공부를 더 하던지...생각보다 2주가 짧아서 그런지 유저 피드백도 받아야 하고 최적화도 해야 해서 괜히 마음이 조급해진다. 이럴수록 더욱 침착하게 해야 하는데...쉽지 않군 ㅋㅋㅋㅋ

 

 그래도 최대한 침착...한 척 하면서 프로젝트 진행해야겠다. 더불어 오늘 배운 것들을 꼭 응용해보고...!