파일 업로드 구현 시 보안상의 이유로 파일 검증 로직이 포함되어야 한다. 검증은 파일명, 파일 크기, 확장자, 위변조에 대해 수행되어야 하며 위변조의 경우 MIME 타입과 시그니처를 확인하면 된다. 파일 위변조 검증 방식1) MIME 타입 검증MIME 타입(Multipurpose Internet Mail Extensions)은 파일의 형식을 나타내는 표준 방식으로, Content-Type 헤더에서 확인할 수 있고 브라우저나 서버에서 파일이 어떻게 처리될지를 결정하는 데 사용된다.파일 확장자 기반 검증 (위험)example.jpg 같은 확장자를 보고 image/jpeg인지 확인하는 방식 → 쉽게 변경 가능하여 보안성이 낮음OS 또는 언어별 내장 MIME 타입 검출 기능 사용 → 신뢰할 수 있으나 MIME ..

[Vue] 파일 업로드 구현 - 반응형 API 시스템에서 File 객체 불러오는 방법반응형 APIVue는 반응형 API 시스템을 이용한다. 아래와 같은 기능들이 있는데, 자세한 내용은 따로 포스팅을 쓸 예정.reactive() : 반응형 객체를 만들 때 사용 - 객체만 가능ref() : 단일 값을 반응형으idox.tistory.com 이전 포스팅에 업로드한 바와 같이, Vue에서는 반응성 객체 내에서 file_, blob_ 정보를 유지하기 위해 Base64 인코딩 방식을 사용해야 한다. 하지만 서버에 Base64 형태로 데이터를 전송하게 되면 용량이 33% 증가한다는 점을 비롯한 단점이 존재하여 MultiPart 형태의 File 객체로 다시 변환하여 전송하는 과정이 필요하다. BLOB이란?BLOB(Bin..

반응형 APIVue는 반응형 API 시스템을 이용한다. 아래와 같은 기능들이 있는데, 자세한 내용은 따로 포스팅을 쓸 예정.reactive() : 반응형 객체를 만들 때 사용 - 객체만 가능ref() : 단일 값을 반응형으로 만들 때 사용 - 숫자, 문자열, 배열 등 모든 타입에서 사용 가능 / .value로 접근 및 변경computed() : 계산된 값을 자동으로 업데이트watch() : 특정 반응형 값의 변화를 감지하여 추가적인 작업을 수행할 때 사용watchEffect() : 종속성을 자동으로 추적하여 실행되는 반응형 감시자toRef(), toRefs() : reactive() 객체의 특정 속성을 ref()로 변환할 때 사용customRef() : 직접 반응형 상태의 동작을 제어할 때 사용Vue.j..

VSCode의 많은 확장 플러그인 중 Vue.js 개발을 돕는 플러그인 추천 목록! VSCode Vue.js 플러그인Indent-Rainbow : Tab 영역을 색상별로 다르게 표시하여 라인이 길어도 가독성을 높여 줌Auto Rename Tag : HTML 태그 이름을 변경하면 쌍을 이루는 여는/닫는 태그명을 실시간으로 함께 수정CSS Peek : HTML 문서에서 정의된 CSS를 빠르게 찾을 수 있도록 도움 (Ctrl + 클릭)HTMl to CSS autocompletion : HTML 문서에 선언된 클래스명을 .css 파일에서 입력할 때 자동완성 기능 제공HTML CSS Support : HTML 문서에서 CSS 자동 완성 이용Tailwind CSS IntelliSense : Tailwind CSS ..

Frontend 프레임워크로 Vue.js를 선정하고, 설치부터 시작하는 과정까지를 기록한다.Vue.js 버전 : 3.5.13 (최신 안정 릴리즈) VS Code 설치터미널을 사용해야 하고, 비교적 가볍게 운영 가능한 IDE로 VS Code를 선택. Extension을 이용하면 더 편하기도 하고? Visual Studio Code - Code Editing. RedefinedVisual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite p..