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

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

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


Javascript73

[VUEJS] Nuxtjs 3 적용 후기 오랜만에 여유가 있어서 포스팅을 하나 남겨봅니다! SSR 기능을 제공하는 넉스트(nuxt) 프레임 워크를 적용 하여 보았습니다.확실히..뷰가 리엑트에 비해 사용하는 사람이 적고, next보다 레퍼런스가 훨씬 적어서인지 기존 공식사이트에 나온 방법이 적용되지 않는 부분이 여러군데 있었던 거 같습니다.버전을 올리고나서 홈페이지 업데이트가 안되었나 싶기도 합니다만, 간단하게 nuxtjs를 사용하는 것은 매우 좋다고 생각 하지만 가령 nuxt-auth 같은 조금 더 정형화된 프레임 워크를 사용하는 것에 대해서는 많은 고민을 해 보아야 할 거 같았습니다.nuxt-auth 같은 경우에는 nuxtjs버전 2에서만 사용이 가능하고, nuxt3 버전에서 이러한 권한 라이브러리를 사용 하려면 "@sidebase/nuxt-.. 2024. 10. 15.
데이터 전송, 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.

티스토리툴바