Developer JS's It BLog

데이터 전송에 있어서 HTTP 프로토콜을 사용한다면, 전송하는 데이터의 종류에 따라 적절한 인코딩 방식을 선택해서 사용하게 됩니다. 일반적으로 문자열이나 객체와 같은 구조화된 데이터를 전송하는 경우, JSON 인코딩을 사용하는 것이 일반적입니다. JSON은 데이터를 효율적으로 표현하고, 다양한 플랫폼 간 데이터를 쉽게 주고받을 수 있는 형식을 제공하기 때문에 널리 사용되는 방식입니다. 예를 들어, 서버에 사용자 정보를 전송하는 경우 다음과 같은 JSON 사용될 수 있습니다. { "userName": "KIM JUNSU" "age": 36 "email": "zzansu01@gmail.com" } 이미지 파일이나 비디오 파일 같은 이진 데이터를 전송할 때는 JSON 인코딩이 적합하지 않은데요. 이진 데이터는..

vue3를 사용해서 Admin 사용자의 관리 어플리케이션을 구현을 하고 있습니다. 기존에 사용하던 어플리케이션의 로그인 방식을 카카오 로그인과 구글 로그인 등 api를 통해서 구현했기 때문에 관리 어플리케이션도 동일하게 카카오 로그인등의 외부 인증 api를 통해서 로그인을 구현했습니다. 로그인을 성공한 후 전달받은 유저의 정보를 백엔드 api 어플리케이션으로 전달해서 해당 유저의 role을 전달받아서 관리 어플리케이션에서 관리자 이상의 등급을 가진 유저만 관리 어플리케이션에 접속 할 수 있게 하려고 합니다. 그러면 당연히 전달받은 유저의 role 값을 vue3 어플리케이션에서 유지하며, Router Guard를 통해서 role 검증을 한 후 이동 할 수 있게 해야합니다. 여기서 사용가능한 것이 react..

TypeError: uploadImageList.forEach is not a function 분명히 배열로 설정한 변수를 forEach로 각 요소를 순회하려고 했을 때, 위와 같은 에러가 발생했습니다. 너무 당황스럽죠. 이런상황은 언제 만나도 정말 당황스러운 것 같습니다. 천천히 로그를 찍어보면서 분석한다면 이 세상에 해결 못 할 오류는 없다! 1. 문제 분석 왜 이렇게 될까요? Vue.js가 저를 싫어하는 걸까요? 그럴수도 있어요. 절대 방심하면 안됩니다. 일단 로그를 찍어보도록 하겠습니다. state.uploadImages.forEach(image => formData.append('couponImages[]', image)); 처음에는 이런 코드로 실행하려고 했는데 ForEach가 function..

안녕하세요. 미래를 개발하는 남자... ㅎ 김준수입니다. 스터디에서 진행하고 있는 프로젝트를 진행하는 도중, 레퍼런스를 보고 있는데 참 신기한 것을 봤습니다. 요즘은 모바일 환경에서도 웹에 접속을 많이 하기 때문에 웹 페이지를 반응형으로 다 만듭니다. 그걸 쉽게 구현할 수 있는 것이 바로 부트스트랩 같은 프레임 워크를 이용하는 것이죠. 저도 왠만하면 부트스트랩이나 vue 같은 경우는 quasar를 통해서 구현을 하고 있었습니다. 그런데 이 레퍼런스는 조금 다른 방식을 이용해서 반응을 하도록 만들었더라구요? 바로 window의 width크기에 반응해서 요소의 right padding이 줄어들었다가 늘어났다가 하는 방식으로 반응을 하더라구요. 처음에 쉬워보여서 바로 구현에 들어갔다가 두드려 맞고 나왔습니다...

Vue.js 3에서 버튼은 어떻게 만들까요? 사실 버튼을 만드는 것은 정말 쉽죠. 그냥 버튼 태그만 붙이면 되니까요. 그럼 버튼을 만들 수 있습니다. 버튼을 만드는 것을 모른다면 아마 이 글을 읽을게 아니라 HTML 기본서를 읽고 있어야하겠죠. 맞아요. 사실 이 글을 쓸 필요가 없을지도 모르겠습니다. 그런데 매일매일 포스팅하리라고 마음 먹었지만, 어느새 저장해놓은 글이 다 사라지고 지금 작성하지 않으면 오늘 업로드할 포스트가 없어서 어쩔 수 없이 버튼 만드는 방법이라도 글을 써야할 것 같습니다. 그래서 이번 포스팅에서는 버튼을 생성하고, 그 버튼을 원하는 스타일로 변경시켜가는 것을 세세하게 해보도록 하겠습니다. 그냥 quasar 프레임워크나 bootstrap 프레임워크를 통해서 해도 되는데 왠지 그러면 ..