'append' called on an object that does not implement interface FormData. 문제 jQuery Ajax와 FormData를 이용해 파일을 비동기로 업로드 하던 중 해당 아래와 같은 에러 발생 'append' called on an object that does not implement interface FormData 코드는 다음과 같다. $('#migration_form').on('submit', function () { var formdata = new FormData(); const file = $('#input_file')[0].files[0]; formdata.append..

Intro 자바스크립트 파일의 validation을 이클립스가 제대로 하지 못해서 Error로 인식하며 빨간불이 들어왔습니다. 당연히 코드를 구동하는데는 아무 문제가 없지만, 코드에 빨간불이 들어와있으면 굉장히 거슬립니다. 여러가지 편의성으로 인해 지금은 IntelliJ IDEA를 사용하기 때문에 이클립스를 사용할 때에 겪었던 여러 가지 불편했던 점을 모두 해결 한 상태 이지만, 혹시나 같은 문제로 스트레스 받고 있는 분들을 위해 설정했던 내용을 공유합니다. 해결 일단 아래의 순서로 이동해 설정 화면을 띄웁니다. 프로젝트 우클릭 -> Properties -> Client-side JavaScript > Include Path 위에 있는 Source 탭을 누르고 > Excluded 선택 > Edit... ..

Intro 오늘도 열심히 코딩하던 중, 자바스크립트에서 만든 key-value 쌍을 서버사이드에 어떻게 넘길지 고민 하는 일이 있었습니다. 자바스크립트에서는 Object 를 사용해 다른 언어에서의 Map 과 유사하게 사용 할 수 있기 때문에 딱히 Map을 사용 해 본 적이 아직까지는 없었는데요 org.springframework.boot.json.JsonParser 인터페이스를 확인해보면 JSON 데이터를 List 혹은 Map 으로 파싱할 수 있습니다. 그래서 Object 형태로 보내지 않고 Map 형태로 마샬링해서 보낸다면 다시 언마샬링 할 때도 좀 더 간단하지 않을까 하는 생각에 자바스크립트 진영에도 Map이 있는지와 어떻게 쓰는지에 대해 찾아보았습니다. https://betterprogramming..

Intro javascript를 사용하며 다른 페이지로 이동 하는 방법은 몇 가지가 있습니다. jQuery $(location).attr('href', 'https://shanepark.tistory.com'); Javascript window.location.href = 'https://shanepark.tistory.com'; 보통 아마 위의 두가지를 많이 사용하셨을 겁니다. 대다수의 상황에서 window.location.href 는 별 문제 없이 작동하지만, 해당 리다이렉트 방법을 사용하면 안되는 경우도 있을 수 있습니다. 아마 이 포스팅을 읽고 있는 분들도 많이들 겪어 보셨을 거라고 생각합니다. 그 상황을 한번 임의로 만들어 보겠습니다. window.lo..

최종프로젝트를 진행하며, 막바지에 추가했던 '단축키' 기능입니다. 생각보다 어렵지는 않은데 발표할때 반응은 꽤나 좋았던 걸로 기억합니다. 실제로 싱글페이지로 웹 어플리케이션을 설계 하면서, 그 난이도 상승에 비해 얻은 설계상 이점이 크지 않다고 느꼈지만 반대로 싱글페이지가 아니었으면 추가하지 못했을 기능 중 하나 입니다. ( 뭐 억지로 할라면 했겠지만 싱글페이지가 아니라면 그 의미가 떨어지는 기능입니다) 아이디어와 디자인 단축키 아이디어는 Google Docs와 Figma 에서 얻었습니다. 요즘 왠만한 어플리케이션들은 정말 전부 웹에서 자유자재로 실행할 수 있게끔 세상이 흘러가고 있다고 생각되는데요, 우연히 단축키 기능을 찾게 되었는데 이게 정말 웹 어플리케이션을 사용하고 있다는 사실을 잊..