오늘 한 일
- 오늘은 회의에 많은 시간을 쏟았다. 지난 주 토요일에 중간 점검이 있었는데, 다른 팀들이 워낙 준비를 잘 하기도 했고, 우리 팀에게서 부족한 점을 생각보다 많이 발견한 계기가 되었다. 다른 팀에는 질문하지 않는 CSS 관련 질문을 받는가 하면, 리덕스에 대한 기본적인 질문도 있었다. 모양새는 얼추 대답 비슷한 걸 내놨던 것 같기는 한데, 발표 준비에 소홀했던 나 자신을 되돌아보게 되었다. 그래도 우리가 앞 순서여서 다행이었던 걸까, 조금 긴장이 풀린 상태로 다른 팀의 발표를 들었다. 마지막 팀 발표까지 전부 보고 싶었지만, 그 전날 이미 한숨도 안 자고 밤을 새버린 나는 중간에 주어진 쉬는 시간 1시간 사이에 잠들어서 밤에 일어나고 말았다.. 아무튼 토요일 이후로 나는 물론 팀장님 포함 우리 팀원들 전체가 적지 않은 충격을 받았다. 그래서인지 바빴던 와중에 모처럼 앞으로의 계획을 차근차근 얘기해볼 기회가 있었다.
- 프론트 팀원들끼리는 지금까지 완성한 기능들을 톺아보는 시간을 가졌다. 에러가 나는지, 기능이 잘 돌아가는지 교차 확인도 해주고, 에러가 나면 같이 해결도 해보고, 서로서로 부족한 점도 얘기해주고. 평범하다는 평가를 받을 수밖에 없었던 CRUD를 오늘에야 마무리하는 듯싶다.
- 오후 8시 저녁 회의가 끝나고 나서는 피그마에 올라온 태블릿 사이즈 디자인을 적용해보기 시작했다. 지난번 클론코딩 때 눈에 충분히 익혔던 미디어쿼리를 적용해보았고, 직접 해보니 생각보다 까다롭지 않았다. 이미 styled-components를 사용하고 있던 중이라 원래부터 클래스나 아이디 선택자는 잘 사용하지 않았었는데, 이번에는 어쩌다 보니 클래스 선택자를 써야 할 일이 생겼다. 데스크탑 버전(1440*1080)에서는 메인 화면에 등장하는 카드가 6개인데, 태블릿 버전(768*320)에서는 그 수가 4개로 줄어야 하기 때문이었다. 잘 쓰지 않던 클래스 선택자와, 본격적으로는 처음 사용해보는 미디어쿼리를 적절히 섞어서 styled-components와 함께 쓰려니 약간 애매하게 느껴지긴 했다. 하지만 하늘은 역시 구글링하는 자를 돕는다고.
- "맨 마지막 카드 2개만을 어떻게 없애지!?" -> "일단 이름을 붙여야 없애든 말든 할 것이니 클래스를 써보자" -> "맵을 돌리는 카드들을 어떻게 각각 이름을 붙이지?" -> "인덱스가 다르니 인덱스로 이름을 줘 보자" -> "이름은 붙였는데 어떻게 없애지!?" -> "안 보이게 하면 그만 아닐까, 미디어쿼리 안에 클래스 선택자를 써서 display: none을 줘버리자" ... 이만하면 의식의 흐름도 생산적이었다(❁´◡`❁) 내 코드 웬만하면 TIL에 안 넣는데 오늘은 너무 뿌듯해서 넣는다.
....
<CardList>
{pop_camps.map((pc, idx) => {
return (
<CampCard className={`campcard${idx}`} key={idx}>
....
const CardList = styled.div`
....
@media screen and (min-width: 768px) and (max-width: 992px) {
.campcard4, .campcard5 {
display: none;
}
}
`;
내일 할 일
- 사용자 인증에 쓸 구글폼은 어떤 식으로 적용하는지 찾아보자.
- 보안을 강화하기 위한 HTTP ONLY 쿠키에 대해 알아보고 적용할 방법을 찾아보자.
- 백엔드에 요청한 API가 들어오는 대로 적용하자.
- 그러고도 남는 시간에는 태블릿 사이즈 디자인을 작업한다.
- 구독자가 구독 취소하는 게 가장 겁나므로 앞으로는 TIL을 꼬박꼬박 쓰자.