728x90 반응형 프로젝트4 이미지와 데이터 서버로 같이 전송하는 법 - FormData 생성 및 사용법 원래 코드상에서 이미지 정보 1번, 작성된 데이터 1번 이렇게 총 2번 서버로 전송하는 방식이었다. 한 페이지에서 사용되는 정보들을 굳이 2번 나누어서 전송해야 하는 불필요함을 해결하기 위해 찾아보다가 FormData를 생성해서 사용하면 되는 것을 확인하고, 코드에 적용해 봤다. FormData란? 먼저 FormData는 form 데이터를 동적으로 생성하고, 조작할 수 있게 해줍니다. 사용되는 메서드들 FormData.append() FormData 객체 안에 이미 키가 존재하면 그 키에 새로운 값을 추가하고, 키가 없으면 추가합니다. 첫 번째 인자로 key를 두 번째 인자로 값을 설정할 수 있습니다. FormData.delete() FormData 객체로부터 키/밸류 쌍을 삭제합니다. FormData... 2023. 8. 12. 이벤트 버블링이 되지 않았던 문제 해결하기 아래의 게시물도 참고해서 확인해주시면 좋을 거 같습니다! 마우스 포인터가 요소를 벗어나지 않았음에도 onMouseOut 이벤트가 실행되는 이유 + 해결방법 이전에 노션에 정리를 해둔 내용이나, 제대로 정리되지 않은 부분이 있어 블로깅을 하게 되었다. 그리고 노션은 나만 보기도 하니깐! 문제상황 나는 아이콘에 mouse를 hover했을 때 dropdown 메뉴가 1two13.tistory.com 문제상황 나는 아이콘에 mouse를 hover했을 때 dropdown 메뉴가 화면에 노출되고, 메뉴 안에 있는 값을 클릭했을 때 해당 값이 선택되도록 구현하고 싶었다. dropdown 메뉴를 구현하기 위해 에게 onMouseOver 이벤트와 onMouseOut 이벤트를 등록한 상황이다. 두 번째로 확인되는 문제점은.. 2023. 3. 26. 마우스 포인터가 요소를 벗어나지 않았음에도 onMouseOut 이벤트가 실행되는 이유 + 해결방법 이전에 노션에 정리를 해둔 내용이나, 제대로 정리되지 않은 부분이 있어 블로깅을 하게 되었다. 그리고 노션은 나만 보기도 하니깐! 문제상황 나는 아이콘에 mouse를 hover했을 때 dropdown 메뉴가 화면에 노출되고, 메뉴 안에 있는 값을 클릭했을 때 해당 값이 선택되도록 구현하고 싶었다. dropdown 메뉴를 구현하기 위해 에게 onMouseOver 이벤트와 onMouseOut 이벤트를 등록한 상황이다. 근데 여기서 확인되는 첫 번째 문제점이 있었다. 선택된 영역 위에, 즉 div 위에 마우스를 올렸을 때 onMouseOver 이벤트만 발생되어야 하는데, onMouseOut 이벤트도 발생되는 문제점이 있었다. 참고로 onMouseOut 이벤트는 마우스의 커서가 해당 요소에서 위치하다가 빠져나갈.. 2023. 3. 26. [React] 메모리에 있는 값과 화면에 보여지는 값이 상이한 문제 문제 상황 아래 사진에서 삭제 버튼을 클릭했을 때 메모리에 있는 skillList(redux로 관리하고 있는 배열로, 객체들을 요소로 가지고 있다.)의 값은 변경되지만, 실제 화면에 보여지는 값은 변경되지 않는 문제점이 있었다. 시도한 해결방법과 문제점 skillList.map을 실행할 때 주는 key의 값을 index(숫자)가 아닌 랜덤한 값을 주는 방법이였다. 이 방법을 시도하게 된 이유는 스킬 추가 버튼을 클릭했을 때 콘솔창에 오류가 발생하는데 key prop이 문제라는 내용의 오류 문구였고, 이를 해결하면 문제 상황이 해결될 줄 알았다. 지금 생각해보면 그 오류는 그 오류고,(사실 오류도 아니였고 warning이였다😂) 값이 변경되지 않는 문제는 다른 문제였을텐데 아무튼 여기에 꽃혀서 빙빙 돌아갔.. 2023. 3. 8. 이전 1 다음 728x90 반응형
