[✍️ Dev Log] 최우철 / 2021-12-10

### 오늘은 어떻게 프로젝트에 기여했나요?
- 오늘은 마이페이지의 이미지를 변경할 때 불필요하게 이미지가 저장되는 것을 막기 위해 기존 이미지를 지우고 새로운 이미지를 업데이트하는 로직을 작성하였다
- 또한 마이페이지의 유저 정보와, 강아지 정보를 수정하기 위한 레이아웃을 작성하였다
- 추가로, 맵제작과 관련하여 불필요하게 늘어나는 코드를 방지하기 위해 jsx객체를 markup string으로 변환하는 로직, 그리고 해당 markup을 html로 전환하는 wrapper 함수를 구현해 팀원분들에게 전달하였다.

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
- 버튼 클릭을 통해 input 과 div를 바꾸는 작업을 진행하던 도중, 자꾸만 레이아웃이 미묘하게 깨지는 현상을 마주하였다.

> 아주 미세하게 높이가 차이가 난다

---

### 해결하기 위한 노력과 방안

- 처음에는 도저히 원인을 찾지 못해서 이것저것 건들고보다가, 다시 처음부터 차근차근 확인해보았고, 정말 어이없게도 주 원인이 input과 div는 자기만의 고정된 height값이 있는가 하고 헛발길질을 했다는 것을 알았다

- 높이차이가 발생했던 원인은 바로, 수정하기 버튼을 눌렀을때 생기는 취소하기 버튼의 border로 인해 발생한 것이었다
- 참고로 두 버튼은 기본 border을 none으로 준 상태였는데, 옆의 버튼에 스타일링을 하려고 border 1px을 줬던게 원인이었다

> 즉, 미세한 높이차이는 border 1px로 인해 발생하는 것이었다


- 따라서, 해결방법으로는 간단하게 border을 줬던 내용을 outline으로 변경하기만 하면 되었다
- outline의 가장 큰 특징은 레이아웃 계산에서 자신의 영역을 차지하지 않는 특성을 지니고 있기 때문에 지금의 상태에 가장 최적화된 옵션이라고 할 수 있었다.

### 레퍼런스
[description](link url)