본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Javascript72

데이터 전송, 415 오류 (415 Unsupported Media Type) 웹 프론트에서 form 데이터 형식을 통해 서버와 응답하는 경우 만날 수 있는 오류 입니다. form 데이터에서 특정 데이터의 타입을 application/json으로 지정하지 않으면 발생 할 수 있습니다. 기본적인 form 데이터를 통해 데이터를 전송하는 방법 입니다. const formData = new FormData() formData.append('키', '값') formData.append('파일데이터키', file) const header = { headers: { 'Content-Type': 'multipart/form-data' }, transformRequest: [ function () { return formData } ] } axios.post('주소', formData, type.. 2023. 9. 8.
Javascript debounce throttle(이벤트 제어) 세상은 넓고 다양한 기술은 언제든 빠른 속도로 나오는 것 같습니다! 역시 개발자는 끊임없이 노력하고 공부해야 하나 봅니다..;ㅁ; 효과적인 이벤트 제어를 위해 lodash-es 에서 제공하는 2개의 기능을 사용하여 보았습니다. 1. debounce : 여러번 클릭(다른 이벤트도 가능)했을 때 마지막 한번 행위가 동작 debounce 함수는 이벤트의 행위를 가장 마지막에 한 행위만 하도록 합니다. 가령, 게시글 등록, 문의사항 수정 등 데이터의 변경에 대한 행위가 딱 한번만 되야하는데... 사용자가 실수로 클릭을 여러번 하게되면 클릭 한 횟수만큼 이벤트가 동작하게 됩니다.(또는 화면 리사이징??) 그 때 사용 할 만한 함수가 debounce 입니다. 사용법은 debounce 함수를 호출하고 원하는 시간값(.. 2023. 3. 14.
Javascript 에니메이션 (svg, canvas, gif)의 렌더링 개발간 반짝반짝(?) 거리는 아이콘이 필요하여 아래처럼 svg를 활용하여 제작을 해 보았습니다. svg 엘리먼트로는 circle과 text 및 animate를 사용 하였습니다. 이렇게 제작한 엘리먼트를 원하는 기능에 붙여서 사용을 하였는데.. 10개 내외정도만 사용할때는 문제가 없었습니다. 그러다가 대략 3,000개 이상을 웹 브라우저에 그렸는데 브라우저가 먹통이 되었습니다. 뭔일인지 보려고 개발도구를 켜 측정을 해보니 아래와 같은 상황이 벌어졌습니다. animate 엘리먼트를 통해서 브라우저에서 지속적인 렌더링이 이루어지다보니... 3천개나 되는 많은 갯수를 감당하지 못하고 메모리소비 + CPU점유가 발생 하였습니다. html canvas를 사용하여도 CPU에서의 연산이 계속 발생하므로 비슷하게 느렸습.. 2023. 1. 13.
자바스크립트 Object(Json) 객체에서 원하는 값 찾기(Javascript find data from json) 어떤 개발자 커뮤니티 사이트에서 매번 같은 내용을 올리시는분이 있었습니다. 특정 데이터 값이 아래와 같이 존재할 때 해당 값을 찾는 기능을 필요로 하셨었습니다..흠... 아래 코드는 원하는 데이터를 찾는 함수샘플코드 입니다. let json = { "data":{"number":"111", "test":"asdfasd"}, "data2":{"number":"222", "test":"asdf23123"}, "data3":{"number":"333", "test":"g3453"}, "data4": [ {"address":"1111", "string":"asdf"}, { "address":"2222", "array":[ {"number" : 5678} , { "address" : "3333"} ] } ] };.. 2022. 8. 30.
Jquery ajax 뒤로가기 (ajax 브라우저 뒤로가기) SPA 기술이 보편화된 요즘에 Jquery나 순수 바닐라 스크립트는 잘 쓰이지는 않는다고 합니다. 그러나 관공서 프로젝트, 이미 구축된 기업들의 프로젝트를 유지보수, 개선하는 경우에는 거의 대부분 Jquery로 되어있는 경우가 많습니다. 데이터를 동적으로 가져오기 위해서는 대표적인 함수인 Ajax(에이작스, 아작스)를 사용 합니다. 간혹 아래와 같은 경우를 만나면 "버그" 라고 불리는 것을 종종 들을 수 있습니다. 1. 어떤 페이지에서 ajax를 활용해 데이터를 동적으로 바꾼뒤 다른 페이지로 이동 합니다. 2. 뒤로가기를 하면 브라우저에서 마지막으로 동적으로 바뀐 데이터가 나오는게 아니라 처음 접근할때 보았던 데이터가 보입니다. "뒤로가기" 라는 기능은 브라우저가 이전 페이지로 돌아가는 것을 의미 합니다.. 2022. 7. 28.
Javascript for in 반복문 자바스크립트에서 사용되는 반복문인 for 명령어는 in 이라는 명령어와 같이 사용할 수 있습니다. 일반적으로 for in 문법을 사용하면 데이터의 인덱스(색인) 을 반환하는 것 으로 알고 있습니다. 그러나 결론부터 이야기하면 for in 반복문을 통해서 나온 대상은 단순한 인덱스라 할 수 없습니다. let array = ['a', 'b', 'c']; for(let i in array) console.log(i); //0,1,2 값이 반환됩니다. 자바스크립트(Javascript)에서 배열은 객체 입니다. 함수나 클래스가 아니기 때문에 prototype 프로퍼티를 갖지 않고 __proto__ 프로퍼티를 가지고 있습니다. 이러한 프로퍼티는 Array.prototype으로 상속을 받고, 이 Array 객체는 O.. 2022. 6. 20.

티스토리툴바