Aaron[에런]/Trouble Shootings14 [Trouble Shootings #10] React - 파일 업로드 로직 구현 시 발생 가능한 이슈 리액트에서 사진/파일 업로드 로직 구현 시 다양한 방식이 있습니다. 그 중 대표적으로 input type="file" 태그를 display:none; 처리하고 ref를 만들어 속성으로 추가한 뒤 업로드 버튼에 연동하는 방법이 있습니다. 이 때 input type="file" 태그에 onChange 이벤트를 추가하여 작업을 처리했지만 발생할 수 있는 이슈가 하나 있습니다. 사진/파일 업로드하고 해제 후 다시 동일한 사진/파일 업로드 했을 때 아무 작동도 하지 않는 경우가 있습니다. input onchange 이벤트 발생 후 input value 관련 ref.current.value 빈 문자열로 초기화하면 해당 이슈는 해결됩니다. 2022. 10. 1. [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. 이전 1 2 3 4 다음 반응형