Log 8/19

Dev log

1

오늘은 명령어를 입력받으면 해당 체크리스트가 사라지는 체크리스트를 구현하려고 했다. 이미 로직은 다른 팀원분이 만들어 놓으셨고 그래서 체크리스트의 list style을 바꾸는 작업을 했다. textContent가 없으면 list style을 none으로 하고 존재하면 list style image를 통해 리스트 앞에 이미지를 보이게 만들었다. CSS 에서는 li 태그의 속성에 list-style: none; 이런식으로 설정하면 없어지고 list-style-image: url('check.svg');이런식으로 하면 나타났다.

li {
  list-style: none;
}
li {
  list-style-image: url('check.svg');
}

하지만 js에서 입력 값에 따라서 style을 변경해야 하니 js 파일 안에서 style을 지정해줘야 했다.
textContent가 없을 때와 있을 때 다르게 넣어줬다.

if (firstList.textContent === '') {
  firstList.style.listStyle = 'none';
} else {
  firstList.style.listStyleImage = 'url("check.svg")';
}

이런식으로 구현했더니 제대로 구현이 되었다.
CSS와 JavaScript style에 차이가 있음을 알았다. 조금 더 많은 효과들을 js 안에서 움직여보고 싶어졌다.

2

word-break 이런 속성을 오늘 처음 알았다. 텍스트가 자신의 박스 박으로 오버플로 할때 줄을 바꾸는 속성이다.

.box1 {
  word-break: normal;    // 기본 줄 바꿈 규칙을 사용한다.
}
.box2 {
  word-break: break-all; // 한글자만 벗어나도 줄바꿈이 일어난다.
}
.box3 {
  word-break: keep-all;  // 단어 단위로 줄바꿈이 일어난다.
}
.box4 {
  word-break: break-word;// 단어별로 모두 줄바꿈이 된다. 사용하지 않는다.
}

애니메이션의 overflow도 더 찾아봐야겠다.

3

팀원들과 kpt 회고에 대한 의견들을 나눴다. 조금 더 구체적이고 실천이 가능한 단위로 바꿔서 표현해보자는 의견이 모였다. 그렇게 하면서 kpt 회고를 작성해보니 전체적으로 어떤 작업을 하면서 어땠는지 조금 더 깊게 생각해보게 되는 효과가 있는 것 같았다. 이런일 저런일이 생각나고 이것은 괜찮았나? 문제가 있었나? 이런 생각들을 하면서 일 처리에 대한 부분만 생각하다가 큰 그림을 보는 관점으로 바꾸니 도움이 되는 것 같았다. 그리고 앞으로 어떤 점들을 고치면 좋을지도 나누면서 정리가 되었다. 프로젝트를 입체적으로 볼 수 있어서 좋은 방법이라는 생각이 들었다.