이슬먹는 개발자

📸 서버에 올리면 사진이 옆으로 눕는다? Java 이미지 업로드의 숨겨진 함정"분명히 세로로 찍었는데, 서버에 올리면 왜 가로로 눕지?"이 글을 클릭한 당신, 아마 이 문장에 공감해서 들어왔을 겁니다. 저도 처음 이 문제를 만났을 때 꽤 오래 머리를 싸맸거든요. 오늘은 이 황당하고 은근히 까다로운 문제의 원인부터 해결책까지, 누구나 이해할 수 있도록 싹 정리해드리겠습니다.🤔 먼저 현상을 정확히 파악해보자시나리오는 이렇습니다.사용자가 스마트폰으로 세로 방향으로 사진을 찍습니다.그 사진을 웹사이트에 업로드합니다.갤러리에서는 분명히 세로로 잘 보입니다.그런데 서버를 통해 처리된 이미지는 가로로 90도 누워버립니다.처음엔 "내가 뭘 잘못 코딩한 건가?" 싶지만, 사실 이건 여러분의 실수가 아닙니다. Java..

https://fvm.app/docs/getting_started/installation Installation | Flutter Version Management There are a few ways to install FVM, and we are working on other ways to make it even simpler. fvm.app # fvm 저장소 등록 brew tap leoafarias/fvm # fvm 설치 brew install fvm # 설치 가능 버전 확인 fvm releases # 설치 된 버전 목록 확인 fvm list # 설치 fvm install {버전명} # fvm 글로벌 적용 fvm global {버전명} # 기존 flutter 명령어 사용법 fvm flutter 명령..

플러터 설치 https://flutter.dev/ 접속 Flutter - Build apps for any screen Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase. flutter.dev Get Started 클릭 MacOs 선택 한다 인텔 맥인 경우 아래 명령어를 실행시키지 않아도 되며 실리콘 맥인 경우 아래 명령어를 필수로 터미널에서 입력해야 한다 sudo softwareupdate --install-rosetta --agree-to-license 인텔 맥 또는 실리콘 맥에 맞..

다트는 google에서 개발한 고급 프로그래밍 언어 이다 google에서 처음 만들었을 때 JavaScript에서 영감을 받아 개발한 언어로 JavaScript와 유사한 점이 많으며 다른 언어들에 비해서 학습하기 쉽다 객체지향 프로그램밍 언어이며 안정적이고 빠르게 어플리케이션을 만들기 위해 개발 되었다 다트는 다양한 플랫폼에서 실행 될 수 있도록 설계 되었고 두 가지의 컴파일러(JIT, AOT)를 가지고 있는 것이 특징이며 강력한 타입 시스템을 갖추고 있어 코드의 안정성과 가독성을 높일 수 있다 Dart의 컴파일러(compiler) - JIT Compiler (Just In Time) 코드 실행 시점에 컴파일을 수행할 수 있는 컴파일러 빠른 개발과 디버깅을 할 때 주로 사용되는 컴파일러 Flutter 개..

기존에 chart.js 를 이용 하다가 chart.js 보다 그래프 종류도 다양하고 사용하기도 편한 것 같아서 eCharts를 도입하기로 결정 했다 단점은 중국에서 만든거라 자료가 좀 부족한 것 말고는 괜찮다 이 마저도 공식문서를 보면 거의 다 컨트롤 가능 한 수준이다 SyntaxError: Cannot use import statement outside a module .... import { __extends } from "tslib"; eCharts를 설치하고 사용하려고 하면 위와 같은 에러가 날 수 있다 여러 가지 검색을 해서 찾아봤을 땐 package.json 에 "type": "module" 을 추가하라는 글 들이 많아 적용해 보았지만 nuxt3에서는 작동하지 않았다 그래서 한참을 찾다가 nu..

nestjs 를 사용하면서 내장 로거로 로그를 남길 수 있는데 파일 저장은 지원하지 않기 때문에 winston 이라는 패키지를 사용해 로그를 파일로 기록 해야 한다 npm i nest-winston winston winston-daily-rotate-file winston-daily-ratate-file 패키지와 함께 사용하면 로그파일을 날짜별로 관리 할 수 있다 그 다음 src 폴더 아래에 utils 라는 폴더를 생성하고 winston.util.ts 파일을 생성한다 import { utilities, WinstonModule } from 'nest-winston' import * as winstonDaily from 'winston-daily-rotate-file' import * as winston ..

기본적으로 설정할 것들은 거의 다 했기 때문에 간단하게 TODO앱을 만들어보면서 nuxt3에 조금씩 적응해 나가보겠다 nuxt.config.ts 파일 설정 // https://v3.nuxtjs.org/api/configuration/nuxt.config export default defineNuxtConfig({ typescript: { shim: false, }, app: { head: { charset: 'utf-8', viewport: 'width=device-width, initial-scale=1', title: 'My Todo App', }, }, css: ['~/assets/scss/main.scss'], }) 전역으로 설정할 Head 태그를 config 파일에 설정해 주었다 css 설정이 ..

이번에 nuxt3를 도입하기로 결정한 가장 큰 이유는 SEO 문제를 해결하기 위해서이다 nuxt3 공식문서에 SEO를 설정하기 위한 3가지 방법을 제시하고 있다. 1. App Head nuxt.config.ts 파일에 아래와 같이 설정을 하면 전역으로 설정이 가능하다 export default defineNuxtConfig({ app: { head: { charset: 'utf-16', viewport: 'width=500, initial-scale=1', title: 'My App', meta: [ // { name: 'description', content: 'My amazing site.' } ], } } }) 공통된 항목은 nuxt.config.ts 파일에 설정 한뒤 각 페이지마다 동적으로 변경되..

sass/scss 를 사용 할 것인데 따로 패키지를 설치해 줘야 한다 yarn add -D sass sass-loader 위 두 패키지를 설치만 해주고 따로 설정은 하지 않아도 scss를 사용 할 수 있다 이제 root 경로에 assets 폴더를 만들고 scss 파일을 여기서 관리 하면 된다 nuxt 에서는 assets 폴더에서 css, image, font 등의 파일을 넣어놓고 관리 하기 때문에 scss 라는 폴더로 구분을 해서 관리하면 좋다 assets/scss/main.scss 라는 파일을 vue 파일에 임포트 하려면 style 태그 아래에 @import '~/assets/scss/main/scss'; 이런식으로 사용 하면 된다. style은 적용하기가 매우 쉽기 때문에 패키지만 잘 설치하면 문제 ..

typescript + eslint + prettier 를 설정 하기 위해 아래의 패키지를 설치해 준다 yarn add -D eslint vue-eslint-parser eslint-plugin-vue eslint-config-prettier @nuxtjs/eslint-config-typescript @typescript-eslint/eslint-plugin typescript 패키지 설치가 끝났으면 파일들을 만들어 줘야 한다 처음으로 .prettierrc 파일을 root 경로에 생성 한다 { "semi": false, "singleQuote": true, "tabWidth": 2 } 위와 같이 옵션을 설정 해서 쓸 수 있다. 필요한 옵션은 그때 그때 찾아서 사용하면 된다 그리고 vscode에 setti..