trouble shooting12 [Trouble Shootings #9] CSS - 말줄임 (...) 처리하기 전에 회사에서 진행하던 프로젝트 중에 텍스트가 해당 요소의 정해진 사이즈를 넘어가면 ... 으로 말줄임 표시 처리해야 하는 부분이 있었습니다. 구글링을 통해 간단히 해결할 수 있었습니다. 해당 부분의 css를 적용할 때, 아래 속성들을 추가하면 됩니다. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 블록 레벨 요소에만 적용된다고 합니다. 2022. 9. 24. [Trouble Shootings #8] HTTP/DB - HTTP 메소드 관련 DELETE vs. PUT/PATCH API를 설계하고 구현할 때 고민되는 것이 하나 있습니다. 우선 클라이언트 단 화면에서 삭제가 되었지만, 실제로 DB 단에서는 삭제가 되지 않고 수정이 되는 경우가 있습니다. 예를 들어, 사용자가 찜한 목록을 해제하였다면 그 해제한 날짜를 DB 테이블 컬럼에 추가만 하고 해당 레코드는 삭제하지 않는 경우입니다. 이렇게 하는 이유는 사용자가 찜했다가 찜을 해제한 사용자의 행태를 분석하여 보이지 않는 데이터를 가지고 유의미한 데이터를 만들어서 마케팅이나 여러 부분에 사용할 수 있기 때문입니다. 아마존에서 0.1초? 정도 속도를 줄이고 매출을 엄청 많이 오른 사례를 보면 상당히 중요한 이슈입니다. 그런데 백엔드 개발자 입장에서는 해당 API를 Restful 형식으로 개발한다는 가정 하에 DELETE 요청으로 .. 2022. 9. 23. [Trouble Shootings #7] React - input의 여러 state 처리 리액트에서 form을 만들 때 useState를 여러 개 만들어서 처리하는 경우가 있습니다. 하지만 그러면 너무 불필요한 반복되는 코드가 많아져서 inputs 라는 object를 useState의 초기값으로 만들고, 각각 input 태그에는 name 속성을 지정하여 이후 event handler로 [name]: value 값으로 지정시키면 훨씬 간단하게 구현할 수 있습니다. 추가적으로 타입스크립트를 이용한다면 input 뿐만 아니라 textarea 까지 고려해서 타입을 지정하시면 됩니다. 2022. 9. 23. [Trouble Shootings #5] CSS - list style 및 인덴트 HTML - CSS 를 이용하여 list style을 들여쓰기 방식의 리스트 아이템 형태로 만들고 싶을 때가 있습니다. 왜냐하면 그냥 디자인만 입히게 되면 indent가 올바르게 먹지 않고 다음 줄의 맨 앞에 붙어서 나오기 때문입니다. 이를 해결하기 위해서는 li 태그에 css로 text-indent를 적당히 -20px 정도 주고 padding-left를 20px 주면 됩니다. 그러면 올바르게 인덴트가 잘 됩니다. ex) - 안녕하세요 안녕하세요 (X) - 안녕하세요 안녕하세요 (O) 그리고 추가적으로 li 태그의 depth를 늘리고 싶을 때가 있습니다. 그럴 때는 list-style-position: inside; 로 처리하시면 됩니다. ex) - 안녕하세요 - 안녕하세요 2022. 9. 22. 이전 1 2 3 다음 반응형