프론트엔드 개발자가 하는 일
회사 공식 홈페이지
회사 채용 사이트
회사 웹 서비스
웹 서비스 만들고 배포, 운영하는 인프라(서버를 만들수도 있고, 이미지 다운 사이징 등등 하는 것 많다.)
비즈니스에 대한 고민
UX에 대한 고민 (비지니스를 잘 알아야 좋은 UX를 만들 수 있다 라는 것)
프론트엔드 개발자의 일정
- 월요일 스프린트 회의
어떤 가설(신규 기능)을 세우고 실험할 것인지, 근거와 배경을 정리
주에 하는 스프린트는 상하반기 목표와 결부되어 있음(OKR)
큰 맥락에서 어떤 부분에 집중을 해야할지에 대한 방향을 정리
- 금요일에 스프린트 회고
월~목에 무슨 작업들을 했는지 진행상황 파악
진행이 됐고, 성공적인 결과가 있었다면 수치와 지표는 어느 정도고, 거기서 어떤 해석을 할 수 있는지 파악
토스에서 프론트엔드 개발자가 일하는 것
토스페이의 모든 퍼널(결제 과정 화면 화면을 퍼널이라고 한다.)에 로깅을 추가하는 작업을 한다고 가정.
보통 스프린트는 1~2주 소요
프로덕트(추가할 기능)에 대해 싸일로가 결정 (사일로 구조 <-> 기능 구조)
보통 토스에서는 프론트 1 백1 프로덕트 오너1 디자이너1 4명 정도로 구성
사일로 구조는 어느 누구라도 주인의식을 가지고 제품/기능을 만들자는 건의할 수 있고, 모든 사람이랑 소통하게 된다. 그러나 전반적인 프로덕트 관리는 PO가 한다.
기능 구조는 백엔드 팀, 프론트엔드팀이 따로 나누어져있다.
프론트엔드 개발자는,
제품/서비스에 대한 주인의식이 중요하다.
PO / 백엔드 / 디자이너 와 지속적으로 협업한다.
커뮤니케이션을 촘촘하고 꼼꼼하게 하는 것이 중요할 것 같다.
어제 알아본 setState 비동기를 예상치 못하게 만나서 해결하게 되었다!
처음 postTodo useState를 이용하여 state 선언을 할 때, props.editTodo.todoText를 set 해주었는데, 자꾸 값이 바뀌지 않아서 왜 그런가 했었다.
setState는 비동기이기 때문에 이미 다 실행이 된 상태에서 저기에 set이 되었기 때문에 render시에 저 업데이트된 값을 볼 수 없었던 것이다.
그래서 나는 useEffect를 사용해서 state set을 해주기로 하였다.
useEffect를 이용해서 render가 되었을 때, props.editTodo의 값이 바뀌면 set을 하도록 한 것이다.
useEffect(() => {
// dependency 추가하지 않고, functional update 사용
setPostTodo({
todoText: props.isTodoEdit ? props.editTodo.todoText : "",
todoDone: false,
tempId: null,
})
}, [props.editTodo])
그러나, 이 코드 또한 문제?점이 있다.
useEffect의 dependency에 추가가 권고되는 변수들이 props.editTodo 이외에도 props.isTodoEdit가 있는데, 이를 추가하면 too much render 가 된다..
그래서 알아보니.. (사실 알아보기 보다, 친절하게 워닝이 뜨더라..)
추가 dependency를 추가하지 않고, 함수형 업데이트를 사용해서 추가 변수들을 쓰지 않아도 되었다.
useEffect(() => {
// dependency 추가하지 않고, functional update 사용
setPostTodo((todo) => {
return { ...todo, todoText: props.editTodo.todoText }
})
}, [props.editTodo])
이처럼 setState를 전 상태를 전달해서 그를 업데이트 하는 식으로 함수형으로 set을 하면 추가 dependency가 필요하지 않게 된다.
세로 가운데 정렬, 수직 가운데 정렬은 css를 사용하면 항상 어떻게 해야할지 바로바로 생각이 안나는 것 같다.
그래서 찾아보기도 했고, 찾아본 방법과 내가 나름 생각해낸 방법을 적어두어야 겠다.
1. line-height 이용
2. padding 이용
3. display table 이용
4. pseudo selector 이용
line-height 쓰기
가장 간단한 방법이고 직관적인 방법이라고 생각한다.
나는 거의 line-height를 즐겨쓰게 되는 것 같다ㅋㅋㅋ
하지만, 이것은 정적인 웹에서만 해당이 된다는 것. 만약 가운데에 두고 싶은 text가 개행이 되거나 요소의 height가 달라지면 이 방법도 통하지 않게 된다.
line-height를 특정 px로 고정시켜서 사용하는 것이기 때문에 이 설정 px과 달라지면 정중앙으로 오지 않는다.(text의 높이를 건드리는 것이므로 완전 text가 완전 넘어가버린다.)
padding 이용
그래서 text의 양이 일정하지 않다면,height값을 빼고 padding을 넣으면 가운데로 보낼 수 있다.
display table 이용
찾아보면서 배운 것인데, 부모 요소에 display에 table을 지정하고, 가운데로 보내고 싶은 자식 요소들의 display를 table-cell로 설정하여 수직 가운데 정렬이 가능해진다.
.row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 4px auto;
color: #fff;
background: linear-gradient(90deg, rgba(255, 118, 20, 1) 0%, rgba(255, 84, 17, 1) 100%);
padding: 16px;
border-radius: 5px;
width: 90%;
}
.complete {
text-decoration: line-through;
position: relative;
}
.complete::after {
content: "COMPLETE!";
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
letter-spacing: 10px;
font-size: 17px;
font-weight: bold;
color: black;
opacity: 1;
pointer-events: none;
}
.complete::before {
content: "";
background-color: rgba(255, 255, 255, 0.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
그러니까, 가운데로 보낼 요소를 psuedo selector로 생성하는 것이다. 그 안에 content에 넣고 싶은 text를 넣고, pseudo selector를 absolute로 두어서 옮기면 된다!
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
이렇게 가운데로 보내면 된다.
그런데 여기서 나는 배경 색은 따로 가져가고 싶었기 때문에 pseudo selector를 하나 더 추가할 수 밖에 없었다!!