반응형

IT Tech 42

Vue.js 3에서 이미지 파일 Post 요청

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

IT Tech/vue.js 2024.03.06

vue3 의 로그인 상태 관리, reactive - watchEffect

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

IT Tech/vue.js 2024.03.05

[미니 프로젝트] 미군 근처 카페에서 사용할 메뉴 한화 달러 자동 계산기(1)

지인이 미군 근처의 카페에서 일하게 됐다고 한다. 그 카페는 당연히 미군들이 많이 와서 달러로 메뉴가 되어있고, 달러를 받는다. 그런데 한국이니 한화도 사용할 수 있다. 여기서 문제가 생긴다. 하루하루 환율에 따라서 메뉴의 가격이 변동된다는 것이다. 그러니 한화 계산은 계산기로 매번 환율을 적어가며 계산하는 노동이 생긴다는 것이다. 그 이야기를 듣다가 아무 생각없이 말했다. "자동 계산하는 프로그램 만들어줄까?" 아... 사실 진짜 만들기 전까지는 그냥 뚝딱 하면 만들어질 줄 알았다. 뚝딱 만들기는 했다. 디자인은 안건들어서.. 그런데 뚜~~~~~~~~~~~~~~욱 다~~~~~~~~~~~~~~~~~~~~~~악 만들었다. 굉장히 길고 험난한 여정이었다. 다시는 함부로 이야기 하면 안되겠다는 생각을 하기도 ..

Docker란 무엇인가? 사용하면 어떤 좋은 점이 있을까?

Docker의 존재를 알고는 있었는데, 지금 당장 중요한 건 다른 것이라는 판단으로 다른 것들을 조금 더 공부하고 있었습니다. 당연히 다른 공부를 하면서 배포를 하는 상황도 많았고, 그런 상황들마다 배포하는데 굉장히 많은 고생을 하기도 했습니다. 특히 서버에 설치 되어있는 언어나 라이브러리들이 아주 오래전에 설치되어있던 것들이라면 정말 고생해서 서버에 배포했었습니다. 그러던 중 Docker라는 걸 쓰면 배포하는데 조금 더 쉽게 할 수 있다는 이야기를 듣고, 너무 흥미로워서 공부를 하고, Docker를 통해 배포를 하는 방법에 대해서 공부해봤는데, 정말 편합니다! 물론 시스템의 자원을 그냥 쌩으로 배포할 때보다 조금 더 먹는 건 사실입니다. 그런데 내가 개발한 환경 그대로 서버의 설정 없이 그냥 배포할 수..

IT Tech/docker 2024.02.25

[2024.02.21] 버전관리의 중요성을 또 체감하다.

회사에서 배포를 하면서 처음 느꼈고, 교육원에서 선생님들이 그렇게도 이 부분에 대해서 예민하셨던 버전관리. 정말 매번 서버에 배포할 때마다 느끼는 것 같다. PHP 같은 경우는 공부를 아직 제대로 하지 않아서 언어도 잘 모르는데 버전 오류로 실행이 안될때면 정말 난감한 것 같다. 그래도 이렇게 뭔가를 하나하나 해결해 나가면서 문제 해결 능력이 조금 향상되는 것 같은 느낌이 들기도? PHP를 모르기 때문에 더 힘든 것 이라 생각이 들기도 했지만, 저번에 자바 버전 문제로 고생을 한 적도 있어서 이제는 그냥 버전이 안 맞으면 고생하는구나 옛날 버전 코드로 작성된 프로젝트를 다른 서버에 배포하는 것 자체가 엄청난 일이구나라는 것을 깨닳게 되는 것 같다. 그래도 처음보다는 쉽게 문제 해결을 하고, 서버에 배포를..

Ubuntu(우분투)에 PHP 7.2버전 설치하기

웹 어플리케이션 개발 언어의 버전을 서버에서 맞추는 것은 굉장히 까다롭습니다. 최신 버전으로 설치해도 된다면 별로 까다롭지 않지만, 그게 아니라 예전에 만든 웹 어플리케이션을 서버에 배포하는 것이라면, 당연히 개발할 때 사용했던 버전으로 서버에 설치해서 배포하는 것이 가장 좋은 방법입니다. 이전에 회사에서 개발할 때 7.2버전을 사용해서 개발했고, 현재 PHP 버전은 8버전이고, 현재 PHP버전에서는 사용하지 않는 함수를 사용해서 개발한 웹 어플리케이션이라서 현재 버전으로는 실행이 되지 않습니다. 어쩔 수 없이 서버에 PHP 7.2버전을 새로 설치해줘야하는 상황이 왔습니다. 그래서 설치하는 과정을 살펴보도록 하겠습니다. 1단계 : Ondřej Surý의 PHP PPA 추가 Ondřej Surý의 PPA는..

IT Tech/linux 2024.02.21

2024.02.20 개발일기 작성 첫 날.

글을 쓴다는 것은 참으로 어려운 일 같다. 매일 매일 블로그를 작성하려고 해도 블로그를 작성할 주제를 선정하는 것, 그리고 그 주제를 그래도 잘 정리되게 보이게 하기 위해서 글을 쓰는 것. 이렇게 하다보면 하루 중 많은 시간을 블로그 작성에 쓸 수 밖에 없다. 물론 하다보면 글을 작성하는 시간도 줄어들 것이고, 작성하면서 나에게 남는 것도 있겠지만, 작성하는게 쉬운 일이 아니라는 것은 분명하다. 그렇다고 그냥 블로그를 작성해야 할 주제가 생겼을 때만 작성하자고 해도, 블로그를 작성하지 않다보면, 블로그라는 것이 존재한다는 것을 까먹어버린다. 지금 내 상황이다. 블로그 쓸 주제가 생겼을 때 작성하자 했더니 아예 블로그를 쳐다보지도 않는 날이 블로그에 접속한 날보다 많아지고 있는 상황이 됐다. 그래서 일기 ..

Vue.js, vuex에서 state 배열 변수가 forEach 함수가 안될때

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

IT Tech/vue.js 2024.02.02

자바 - 최대공약수를 가장 빠르게 찾는 방법: 유클리드 호제법 알고리즘

백준 문제에서 최대공약수를 찾는 문제가 나왔어요. 당연히 무식한 저는 그냥 두 수의 모든 배수를 찾아서 그 중에서 가장 큰 수를 검색하는 방식으로 했는데 시간초과에 걸리는 것이 아니겠어요? 그래서 그럼 어떤 방법으로 최대공약수를 찾을 수 있을까 찾아봤더니 유클리드 호제법이라는 아주 유명한 수학공식이 있더군요. 1. 무식한 방법 public static int maximumCommonMultiple(Integer a, Integer b) { Map aCommonMultiple = new HashMap(); List bCommonMultiple = new ArrayList(); int resultCommonMultiple = 0; for (int i = 1; i

IT Tech/Java 2024.01.24

JPA의 영속성 전파 cascade 옵션에 대해서 알아보기

JPA를 가지고 데이터베이스를 설계할 때, 아무 생각없이 cascade 속성을 사용해왔습니다. cascade란 무엇일까요? 이 옵션을 통해서 어떤 일들이 일어나는 걸까요? 한 번 알아보도록 해봅시다. cascade? JPA에서 'cascade' 속성은 엔티티 간의 관계에서 한 엔티티에 대한 영속성 관리 작업을 관련 엔티티에도 적용할지 여부를 정의하는 속성입니다. 즉, 한 엔티티의 생명주기 이벤트(예: 저장, 업데이트, 삭제)가 연관된 엔티티에도 전파되도록 할지를 결정하는 설정입니다. 말이 되게 어려운데요. 간단하게 삭제로 알아보면, 부모 엔티티를 삭제하면, 해당 부모 엔티티와 연관되어 있는 엔티티들도 삭제가 됩니다. @Entity @Table public class CouponBookmark { @Id ..

IT Tech/Java 2024.01.17
728x90
반응형