왜 또 일주일이 지났지🙄
📝일주일 동안의 고민들
TIL을 결국 쓰지 못했다.
해야 할 일과 버그에 치여 휩쓸리다보니 일요일 밤 10시가 되었다는 마법같은 일✨
대신 매일 고민했던 내용을 WIL로 기록하려고 한다.
그래서 엄청 길다.
20210802 월요일
1. Calendar에서 일정을 어떻게 다룰까?
이전에도 언급했듯이 주특기 심화 과제로 캘린더를 만든 적이 있다.
그 때는 하루 단위의 일정이었기 때문에 날짜 값은 딱 하나만 필요했고, 그 날짜로 필터하면 아주 말끔하게 그 날의 일정을 보여줄 수 있었다.
이번엔 2021.08.02 ~ 2021.08.08 같이 이어진 일정을 저장하게 되었다.
각각 startDate, endDate로 저장하기로 했고 구현하기 전까지는 아무 생각이 없었다.
그런데 막상 구현하려고 보니 큰 산에 부딪혔다.
2021.08.05에도 해당 일정이 적용된다는 것을 어떻게 알지...?
1번)
startDate부터 endDate까지 배열로 저장할까?
=> 이런 미친 생각도 해봤지만 역시 그건 아닌 것 같았다.
2번)
해당 날짜(targetDate)가 startDate <= targetDate <= endDate이면 렌더하도록 해볼까?
=> 이 방법으로 우선 구현했다. 캘린더를 더 예쁘게 보여주기 위해서는 다른 방법을 찾아야 할 것 같지만 우선은 돌아가는게 중요하다🤦🏻♀️
2. 칸반과 일정(캘린더)는 같은 정보를 공유하는데 api를 어떻게 써야 할까?
1번) 다 따로 만든다
=> 그렇다기에는 필요한 정보가 겹치는 경우가 대부분이다
2번) 겹치는 것을 확인해서 추가로 필요한 것만 만든다.
=> 이게 맞는지는 모르겠지만 필요한 정보가 같은데 또 api를 만드는 것이 과연 효율적인가 하는 생각이 들어서 2번으로 선택했다.
20210808 현재 아직도 캘린더를 서버와 연결하지 못했다.
WIL쓰고 시작할 예정..
20210803 화요일
1. Input↔Text가 되는 컴포넌트가 필요하다.
(trello 녹화)
처음에는 눌렀을 때 서로 바뀌면 되겠지 생각했다.
하지만 막상 만들려니 고려해야 할 점이 더 있었다.
- Text 상태에서 Text부분을 누르면 Input으로 바뀌어야 한다.
- Input 상태에서는 Input을 또 누른다고 Text로 변하면 안 된다.
- Input 상태에서 enter를 누르면 Text로 바뀌어야 한다.(수정된 채로)
- Input 상태에서 Input 외의 곳을 누르면 Text로 변해야 한다.
이 점들을 고려해서 짠 코드는 다음과 같다.
//inputToggle.jsx
...
const [editMode, setEditMode] = useState(false);
const [currentValue, setCurrentValue] = useState(value);
const myRef = useRef();
const handleSave = () => {
setEditMode((pre) => !pre);
// saveFunc(); // props로 saveFunction 받아올 예정(dispatch)
};
// Input 외 영역 클릭 시 저장
useEffect(() => {
const handleClickOutside = (e) => {
if (myRef.current && !myRef.current.contains(e.target)) handleSave();
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, [myRef]);
// 엔터 눌렀을 때 저장
const handleEnterEvent = (e) => {
if (e.key === "Enter") handleSave();
};
...
기능 부분만 잘라왔다.
다 아는 내용이어도 응용은 참 다른 영역인 것 같다😢
2. Icon(svg)사용하기
1번) svg파일을 import 해서 사용한다
2번) Icon Fonts로 사용한다.
이 두가지 중 고민했다.
1번 svg 파일을 직접 사용하는 것은 쉽지만 불러올 때 로딩이 있는 것 같았다.
path에서 불필요한 부분을 삭제해서 최적화할 수 있다는 것 같은데 좀 더 간편한 방법이 필요했다.
또한 CSS를 할 때 더 편한 방법을 찾고 싶었다.
2번은 HTML + CSS(SCSS) 프로젝트를 할 때 사용해 본 적이 있었다.
fontAwesome을 사용하는 것처럼 간편하게 사용할 수 있고 색상도 변경이 가능해서 2번을 골랐다.
Icon font를 react에서 어떻게 사용해야 할 지 고민했는데, 다행히 react-icomoon 라이브러리가 있어서 더 쉽게 사용할 수 있었다.
icomoon에서 주는 json파일을 넣어주기만 하면 쉽게 사용할 수 있다.
// Icon.jsx
import React from "react";
import IcoMoon from "react-icomoon";
const iconSet = require("../shared/selection.json");
const Icon = ({ ...props }) => {
return <IcoMoon iconSet={iconSet} {...props} />;
};
export default Icon;<Icon icon="delete" size="20px" color="var(--grey)" /> //와 같은 형식으로 쓰면 된다.20210804 수요일
스타일 가이드를 어떻게 활용해야 좋을까?
디자이너님들께서 디자인을 업데이트 해주고 계신다.
공통적으로 사용되는 컴포넌트들도 정리해주시고, 글꼴도 나눠서 정리해주셨다.
이 많은 걸 어떻게 정리해야 할까 많은 고민을 했던 날이다.
제일 고민을 많이했고 결과적으로 만족스럽게 쓰고 있는 Text element를 대표 예시로 가져왔다.
기존에 Text.jsx로 element를 만들어뒀지만 별도로 textStyle.js라는 파일을 만들어주었다.
// textStyle.js
import { css } from "styled-components";
export const head_1 = css`
font-size: 6rem;
line-height: 7rem;
`;
export const head_2 = css`
font-size: 4.4rem;
line-height: 5.2rem;
letter-spacing: -0.05rem;
`;
export const head_3 = css`
font-size: 4rem;
line-height: 5rem;
`;
...일부만 가져왔지만 이런 방식으로 스타일을 정리하고 어디서든 가져다 쓸 수 있게 했다.
또한 기존의 Text.jsx에서도 분기해서 사용하기 위해 아래와 같이 코드를 수정했다.
// Text.jsx
...
...
const Text = ({ children, ...rest }) => {
return <Wrapper {...rest}>{children}</Wrapper>;
};
const Wrapper = styled.div`
${({ type }) => {
switch (type) {
case "head_1":
return `${head_1}`;
case "head_2":
return `${head_2}`;
case "head_3":
return `${head_3}`;
...
...
...
}
}`;
20210805 목요일
제일 바쁜 날...
금요일마다 팀장들이 대표님을 만나러가기 때문에 꼭 뭐라도 들려보내야 할 것 같은 기분이 드는 매주 목요일이다🤦🏻♀️🤦🏻♀️
1. 버그는 끝이 없다.
기능이 많다보니까 디테일들을 놓치고 있다는 생각이 들면서 심각해졌다.
예상치 못한 동작을 하는 기능들이 꽤 많은데 언제 다 찾아낼 수 있을지 걱정이다.
게다가 하나를 고치면 다른 기능이 동작하지 않는 경우들도 많다.
최대한 서로서로 의존을 줄이고 개별적으로 동작할 수 있도록 만드는 것이 중요할 것 같다.
2. document는 페이지가 많다😇😇
에디터를 사용한다고 쉽게 넘어갈 줄 알았던 Document...
사실 페이지만 세 개다.
- 문서가 하나도 없을 때 페이지
- 에디터 페이지
- 뷰어 페이지
+) 리스트 컴포넌트
기능이나 스타일을 적용하는 것이 어려운 것은 아니다.
이 페이지들 안에서 CRUD를 반복하며 페이지가 자연스럽게 넘어가야 하는데 삐걱삐걱 거리는 경우가 많았다.
redux를 거쳐 데이터가 오면서 조금의 텀이 생기는 경우, api를 너무 많이 호출해서 깜빡 거리는 경우 등 문제가 많았다.
하루 종일 붙잡고 정리하니까 비교적 자연스럽다.
디테일😥
20210806 금요일
1. redux-logger... 못 보겠다.
프로젝트 시작 때 redux-logger를 적용해두고 console에서 확인해가며 작업해왔다.
그런데 모듈이 현재 기준 8개가 될 정도로 많은 데이터가 오고 가다보니 logger를 보기도 어렵지만 찾는 것도 어려웠다.
콘솔에 한 가득인 logger들.. console.log 찾는 것도 일이다.
그래서 redux-devtool을 적용했다.
모르고 있던 것도 아닌데 왜 이제 적용했을까...
store의 변화를 더 직관적으로 볼 수 있고 state도 빨리 찾을 수 있어서 작업 속도가 좀 빨라지지 않을까 하는 기대가 있다.
2. 동시 수정 방지하기
팀장 미팅에서 딱 한 가지 지적을 받았다고 한다.
문서 수정을 동시에 하는 경우를 고려해야 한다.
초반 기획 때는 분명 생각했던 문제인데 답을 내리지 못하고 지금까지 시간이 흘렀다.
그래서 이런 지적이 너무 반가웠다.
회의 결과 DB에서 boolean값으로 수정 중 여부를 가지고 있도록 해서 누군가 한 명이 수정중이면 다른 사람은 수정 페이지에 진입할 수 없도록 만들기로 했다.
그러면서 누군가 독점하고 있을 가능성을 고려해 "___님이 문서를 수정중입니다와 같이 누가 수정 중인지 명시해주기로 했다.
프론트에서도 모든 가능성을 고려해서 막아야 할 텐데 url를 입력해 들어오는 부분은 어떻게 하면 좋을 지 아직도 모르겠다.😢
20210807 토요일
1. '10분 전 작성'과 같은 시간 나타내기
Document 페이지 디자인을 보니 '몇 분 전'을 나타내주는 부분이 있었다.
사실 생각도 안 한 기능이었는데 디자인 되어있는 걸 보니 반드시 해야할 것 같은 의무감이 들었다.
캘린더를 작성할 때도 momentJS를 사용했기 때문에 그대로 moment를 사용했다.
// 현재 시간과 마지막 수정시간(없을 경우 최초 작성시간)과의 차이를 text로 return하는 함수
const getModifiedTime = () => {
let target;
if (docId === current.docId) {
if (current.modifiedAt) {
target = moment.utc(current.modifiedAt); // 한국시간으로 바꿔줌
} else if (current.createAt) {
target = moment.utc(current.modifiedAt);
}
const now = moment();
const diff = {
day: moment.duration(now.diff(target)).days(),
hours: moment.duration(now.diff(target)).hours(),
minute: moment.duration(now.diff(target)).minutes(),
second: moment.duration(now.diff(target)).seconds(),
};
const text = `${diff.day !== 0 ? diff.day + "일" : ""} ${
diff.hours !== 0 ? diff.hours + "시간" : ""
} ${diff.minute !== 0 ? diff.minute + "분" : "0분"} 전`.trim();
return text;
}
};
아쉬운 점은 N일 전일 경우는 시간, 분을 없애는 것이 자연스러워 보인다는 것이다.
그 점은 일단 다른 것을 완료한 후 수정해봐야겠다.
총 회고
일주일이 하루 처럼 지나갔다.
더 많은 고민을 하고 회의를 했을텐데 매일 완벽히 기록하지 못해서 너무 아쉽다.
짧게 메모라도 남겨놓은 것에 셀프 칭찬😅
이번 주는 디자이너 분들께서 너무나 열심히 일해주셔서 서비스가 예쁘게 그려지기 시작했다.
내 손이 더 빠르게 움직여서 착착 만들어지면 너무 좋겠다.
누구 하나 열심히 하지 않는 사람이 없는데 일이 끝이 없다.
하지만 '힘들다 힘들다' 매번 이야기해도 쉬는시간 제외 12시간 이상을 앉아서 코딩만 할 수 있다는 건 재밌으니까 가능한 것 같다.
힘들지만 즐기자.
잠은 자면서😇
