서론
서버에서 문자열을 받아와서 처리하는 경우, 프론트에서 문자열을 하드코딩해서 쓰는 경우가 있다.
데이터가 자주 바뀐다면, 서버에서 get 해야 맞지만, 그게 아니라면 프론트에서 상수로 가지고 있어도 괜찮을 거라는 답변을 받았다.
일단 나는 아래와 같은 3줄짜리 ui를 만들고 싶었다.
나름 고민한 것은 Text 컴포넌트를 만들어서 각자 입력을 했다.
이게 정말 바보같은 일이었던 것이 나중을 하나도 고려하지 않는 멍청한 생각이었다.
이 프로젝트가 나중에 진짜 서비스가 된다고 가정한다면, 아마 다시 짜야하는 상황이 나오게 될 그런 하드 코딩이었다.
줄바꿈 방법
리액트에서 줄바꿈을 하는 방법은 split을 써서 map으로 하나씩 넣는 방법이 있다.
하지만 줄바꿈을 위해 이렇게 까지 해야하는가? 이런 생각이 많이 들었다.
역시 의심이 들었다는 것 자체가 더 좋은 방법이 있을 것이라는 증조였다.
내 검색 스킬이 부족했는지, 영어를 읽지 못 해서 였는지는 몰라도, css 하나 만으로 해결할 수 있는 문제였다.
아아.. 그동안 문자를 잘라서 내가 무슨 짓을 했던 것일까 후회하게 된 시간이었다.
진짜 방법
일단 문자열로 이뤄진 상수 변수에 '\n' 문자가 있다면
word-break: break-all
white-space: break-space끝이다. 프론트 내부에서 문자열을 다룰 때는 이렇게 덜 하드한 코딩을 하면 아주 간단하게 해결이 될 문제였다.
그렇다면 서버에서 데이터를 받아왔을 때는 어떻게 해야하는가?
이 부분이 약간 골치가 아프다. 문자열을 그대로 받아왔을 때 생각한 것은 굉장히 하드 코딩이다.
일단 Indexing을 이용해서 innerHTML을 사용한다?
뭔가 가능해 보이지만 매번 데이터를 받아올 때마다 처리를 해줘야 하니 굉장히 불편하다.
그렇다면 내가 가장 편한 방법은 백엔드에서 데이터를 넘겨줄 때 \n을 넣어서 주면 안되나?ㅎㅎㅎ
하지만 많은 데이터를 보는 백엔드 프론트에서 개행 하나 때문에 문단을 나누고 문장을 나누고 있을리가 없다.
분명 프론트에서 처리해야 할 것이다.
불편하지만 이런 일을 많이 할 일은 없다고 생각한다. parser를 하는 것을 정답으로 생각했다.
안녕하세요.저는 박재성입니다.
를 parser해서 안녕하세요 이후에 개행이 들어간다면, 안녕하세요., <br/>, 박재성입니다.로 나눠서 innerHTML을 활용해서 강제 개행을 하는 방법을 사용해 보자...
옳고 그른지는 해보면 안다. 하다가 기분이 나쁘거나, 이게 아닌 것 같다는 생각이 들 때, 다시 공부를 해보자. 일단은 이게 맞는 것 같다.
