230618 내일배움캠프 5주차 WIL

230618 내일배움캠프 5주차 WIL

 

Facts

내일배움캠프 리액트 1주차 시작

리액트 1주차 과제로 TodoList 만들기

nodejs http 모듈과 express 기초 공부

 

Feelings

드디어 리액트 주차가 시작되었다.

1. 리액트를 통해 할일 목록을 만드는 개인과제를 진행했는데,
   contentEditable 속성을 사용하면 내용이 변경될 때 마다 리렌링되고
   커서 위치가 초기화되어 할일 내용을 편집하는 것이 어려웠다.
2. 또한 할일을 flex나 grid로 배치할 때 각각의 내용의 길이가 달라 높이가 달라지고
   이 때문에 어색하게 보이는 문제가 있었다.

 

Findings

1. contentEditable 속성을 사용할 때는 리렌더링을 되지 않게 useRef를 사용하여 제어했지만,
   다른 방법도 있을 것 가다. 커서 위치를 렌더링 때마다 원래 위치로 바꾸어도 한글을 사용하는 경우에는
   초성, 중성, 종성으로 이루어져 있어, 자음 모음이 분리되는 현상이 발생하게 된다.
   커서 위치를 보정하는 방법말고 다른 방법이 필요한 것 같다.
2. 할일을 display: flex나 grid로 제어 하지 않고 transform으로 각각의 높이에 일일히 이동시키는 방법으로 해결했다. 단점은 매번 렌더링 때마다 계산하고 호출된다는 것인데 보완이 필요해보인다.

 

Future

contentEditable 속성은 리액트에서 사용하기 어려운 면이 있는 것 같다. 차라리 Input 요소를 사용하는 것이 나을 수도 있겠다.

높이 계산이 복합적으로 필요한  이번 경우와 같이 css 만으로 해결할 수 없는 것도 있는 것 같다.
css transform 속성은 사용자가 원하는 대로 변형시킬 수 있는만큼 활용 가치가 많아 보인다.