[TIL] React 관련

오늘 한 것

컨퍼런스

직무 특강

• 프론트엔드 개발자가 하는 일
  회사 공식 홈페이지
  회사 채용 사이트
  회사 웹 서비스
  웹 서비스 만들고 배포, 운영하는 인프라(서버를 만들수도 있고, 이미지 다운 사이징 등등 하는 것 많다.)
  비즈니스에 대한 고민
  UX에 대한 고민 (비지니스를 잘 알아야 좋은 UX를 만들 수 있다 라는 것)

• 프론트엔드 개발자의 일정
  - 월요일 스프린트 회의
  어떤 가설(신규 기능)을 세우고 실험할 것인지, 근거와 배경을 정리
  주에 하는 스프린트는 상하반기 목표와 결부되어 있음(OKR)
  큰 맥락에서 어떤 부분에 집중을 해야할지에 대한 방향을 정리

  - 금요일에 스프린트 회고
  월~목에 무슨 작업들을 했는지 진행상황 파악
  진행이 됐고, 성공적인 결과가 있었다면 수치와 지표는 어느 정도고, 거기서 어떤 해석을 할 수 있는지 파악

• 토스에서 프론트엔드 개발자가 일하는 것
  토스페이의 모든 퍼널(결제 과정 화면 화면을 퍼널이라고 한다.)에 로깅을 추가하는 작업을 한다고 가정.
  보통 스프린트는 1~2주 소요
  프로덕트(추가할 기능)에 대해 싸일로가 결정 (사일로 구조 <-> 기능 구조)
  보통 토스에서는 프론트 1 백1 프로덕트 오너1 디자이너1 4명 정도로 구성

  사일로 구조는 어느 누구라도 주인의식을 가지고 제품/기능을 만들자는 건의할 수 있고, 모든 사람이랑 소통하게 된다. 그러나 전반적인 프로덕트 관리는 PO가 한다.
  기능 구조는 백엔드 팀, 프론트엔드팀이 따로 나누어져있다.

• 프론트엔드 개발자는,
  제품/서비스에 대한 주인의식이 중요하다.

PO / 백엔드 / 디자이너 와 지속적으로 협업한다.
커뮤니케이션을 촘촘하고 꼼꼼하게 하는 것이 중요할 것 같다.

• 그래서 뭘 해야하냐고?
  HTML, JS, 브라우저, 네트워크에 대한 "기본기"가 너무너무 중요!!!!!!!
  뭐 만들어봤고, 뭐 했고, 그건 중요한 게 아니다.

오늘 배운 것

React 관련

setState

어제 알아본 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 관련

수직 가운데 정렬

세로 가운데 정렬, 수직 가운데 정렬은 css를 사용하면 항상 어떻게 해야할지 바로바로 생각이 안나는 것 같다.

그래서 찾아보기도 했고, 찾아본 방법과 내가 나름 생각해낸 방법을 적어두어야 겠다.

1. line-height  이용
2. padding 이용
3. display table 이용
4. pseudo selector 이용

1. line-height 쓰기
   가장 간단한 방법이고 직관적인 방법이라고 생각한다.
   나는 거의 line-height를 즐겨쓰게 되는 것 같다ㅋㅋㅋ
   하지만, 이것은 정적인 웹에서만 해당이 된다는 것. 만약 가운데에 두고 싶은 text가 개행이 되거나 요소의 height가 달라지면 이 방법도 통하지 않게 된다.
   line-height를 특정 px로 고정시켜서 사용하는 것이기 때문에 이 설정 px과 달라지면 정중앙으로 오지 않는다.(text의 높이를 건드리는 것이므로 완전 text가 완전 넘어가버린다.)

2. padding 이용
   그래서 text의 양이 일정하지 않다면,height값을 빼고 padding을 넣으면 가운데로 보낼 수 있다.

3. display table 이용
   찾아보면서 배운 것인데, 부모 요소에 display에 table을 지정하고, 가운데로 보내고 싶은 자식 요소들의 display를 table-cell로 설정하여 수직 가운데 정렬이 가능해진다.

[참고 및 출처] https://oursmalljoy.com/css-%EA%B8%80%EC%9E%90-%EC%88%98%EC%A7%81-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC-text-vertical-align/

4. pseudo selector 이용
   나는 이렇게 구현해보았다. 사실 위의 상황과 많이 다를 수는 있으나 이런 방법으로도 구현할 수 있을 것 같다. 가상 선택자를 이용해서 absolute로 위치를 지정하고 content에 text를 쓰는 방법을 사용했다.

.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를 하나 더 추가할 수 밖에 없었다!!