Vuejs CDN Vue를 처음 개발할 때 일반 html 파일에서 Vue를 사용해 보고 싶은 분들이 있을 것 같습니다. React와 Vue를 비교했을 때 훨씬 개발하기 쉽고 단순하며 초보 웹 개발자들이 웹 개발에 접근하기 쉽고 개발에 능숙한 사람들도 쉽게 웹 개발에 입문할 수 있을 것 같습니다. 오늘은 일반 html 파일에 Vue를 이용해서 데이터를 정의하고 간단하게 바인딩해서 표시하는 방법을 알아보겠습니다. ▼ 1. 우선 빈 프로젝트를 만듭니다. 만약 IDE 로 개발하는 환경이 아니라면 단순히 빈 폴더를 만드시면 됩니다. ▼ 2. 프로젝트(폴더) 안에 새로운 HTML 파일을 만들어줍니다. (파일명 index.html) 파일명은 마음대로 정해도 상관없습니다. 확장자만 html 파일로 만드시면 됩니다. ▼..
Swift 오디오 재생 iOS 개발을 할 때 오디오를 플레이하려면 AVFoundation을 import 해야 합니다. 우선 간단한 beep 음을 재생하기 위해서 wav 파일을 준비했습니다. 총 3개의 파일이고 시작음과 종료(성공, 실패)음이 있습니다. 다음과 같이 정의 Beep 음 타입을 정하는 BeepType이라는 enum을 하나 정의합니다. 타입은 String타입으로 정의해서 해당 타입의 문자열은 파일이름과 매칭시켜 줍니다. 이제 재생을 할 클래스를 만들고 다음과 같이 AVFoundation을 임포트 해줍니다. 또한 soundEffect라는 AVAudioPlayer 객체를 선언합니다. 아직 객체를 할당하지는 않았지만 강제 옵셔날 언래핑(!) 해서 선언합니다. 다음 함수는 오디오 재생을 위한 함수입니다..
xcframework 오류 앱스토어에 앱을 올릴때 라이브러리에 문제가 있다면 앱스토어에서 업로드를 거부합니다. 기존에 다양한 라이브러리들이 존재하지만 새롭게 추가된 xcframework의 경우 처음 추가해보기 때문에 문제가 발생해도 어떻게 처리해야 할지 난감하더군요. 다음은 에러에 대한 내용입니다. Asset validation failed Invalid bundle structure. The "AIA.app/Frameworks/sdk.framework/Frameworks/native_engine.framework/native_engine" binary file is not permitted. Your app cannot contain standalone executables or libraries, o..
WKScriptMessageHandler 구현하기 자바스크립트에서 네이티브로 특정 메시지를 호출할때는 iOS 스위프트에서 WKScriptMessageHandler 프로토콜을 구현해줘야 합니다. 자바스크립트 메시지 핸들러를 구현하면 WKScriptMessage 타입의 message 객체를 파라미터로 전달 받을 수 있습니다. 해당 데이터는 body와 name으로 구현되어 있습니다. name은 보내는 쪽과 맞춰서 String 타입으로 구현되고 실제 사용될 데이터는 message.body에 담기게 됩니다. 하지만 약속된 데이터가 JSON일 경우 전달 받은 데이터를 디버깅해보면 문자열이 아닌 딕셔너리(NSFronzenDictionaryM) 타입이라는 것을 확인할 수 있습니다. 이 데이터를 파싱하기 위해서는 우선 ..
인텔리제이 줄 번호 다양한 IDE 개발툴을 사용하다보면 줄 번호를 표시하는게 개발 작업시 훨씬 도움이 됩니다. 다양한 사람들과 개발 하는 경우에도 줄 번호가 있어야 해당 위치를 확인하고 서로 대화할 수 있기 때문입니다. 줄 번호를 끄거나 킬때 설정에서 옵션을 주어야 하는데 찾기 어려운 분을 위해서 블로그 글을 남깁니다. ▼ IntelliJ IDEA 툴에서 Settings... 메뉴를 선택합니다. 윈도우의 경우 File > Settings 입니다. ▼ 다음으로 Editor > Appearance 메뉴를 선택합니다. 해당 메뉴 옵션중에 Show line numbers의 체크박스를 활성화 합니다. ▼ 줄 번호가 잘 표시되는 것을 확인할 수 있습니다. 저는 처음에 Setting > Appearance 에서 설정..
SwiftUI에서 UIKit을 사용해 화면을 표현할 수 있다는 것은 스위프트 UI 개발을 하시는 분이라면 대부분 알고 계실겁니다. 이 UIView 또는 ViewController를 프리뷰(Preview)를 이용해서 띄워보겠습니다. ▼ 다음과 같이 ViewController를 하나 생성합니다. 만약 PreviewProvider 프로토콜을 구현한 preivews 반환 값이 View 타입이 아니라면 보시다시피 에러가 납니다. UIKit의 뷰 컨트롤러를 반환하기 때문입니다. ▼ 이제 Preview 를 extension해서 UIViewControllerRepresentable 프로토콜을 구현합니다. 이때 필요한 함수가 makeUIController, updateUIViewController입니다. updateUI..
인텔리제이 한글 설정 인텔리제이에서 한글을 설정하는 방법은 매우 간단합니다. JetBrain ToolBox의 경우 사용자 설치 OS 가 한글이라면 최근에는 자동으로 한글로 설치됩니다. 물론 옵션을 바꿔서 설치도 가능합니다. 이제 영문으로 된 어려운 개발툴 대신 한글 지원이 되는 인텔리제이로 설정해 보겠습니다. ▼ 1. 우선 환경설정으로 이동해서 좌측 설정창 메뉴에서 플러그인(Plugins) 메뉴를 선택합니다. (단축키 Ctrl + Alt + S, 맥의 경우 Command + ,) ▼ 2. 다음으로 플러그인 검색창에 Korean이라고 검색합니다. 그럼 최상단에 보이는 Korean Language Pack / 한국어 언어 팩을 Install 버튼을 눌러서 설치해 줍니다. ▼ 3. 이제 설치가 완료되면 Res..
인텔리제이 (IntelliJ IDEA) 마우스 휠 폰트 변경 평소에 Xcode를 많이 사용하는데 Xcode의 경우 작업 중에 쉽게 폰트 사이즈를 늘렸다가 줄였다가 할 수 있습니다. 하지만 인텔리제이(IntelliJ IDEA)의 경우 설정에서 기본 폰트 사이즈를 수정할 수 있지만 마우스나 키보드 단축키로 쉽게 폰트사이즈를 조절하는 방법을 몰랐습니다. 하지만 손쉽게 폰트 사이즈를 늘렸다 줄였다 할 수 있고 쉽게 초기화할 수 있는 방법이 있어 소개해드립니다. 마치 크롬 브라우저의 폰트 사이즈를 변경하는 것만큼이나 편리합니다. ▼ 우선 인텔리제이의 설정창을 열어줍니다. 단축키로 Command + , 단축키를 누르면 설정화면으로 이동할 수 있습니다. ▼ Editor > General 메뉴에서 Change font..
▼ 아이폰 (iOS) 개발을 하다보면 Failed to prepare device for development.와 같은 에러를 볼 수 있습니다. 테스트 단말이 Xcode에 제대로 연결되지 않아서 발생하는 문제인데 다음 몇가지 방법으로 문제를 해결 할 수 있습니다. 컴퓨터를 재부팅한다. 아이폰을 재부팅한다. 클린빌드를 시도한다. 단말의 연결을 다시 시도한다. Failed to prepare device for development. This operation can fail if the version of the OS on the device is incompatible with the installed version of Xcode. You may also need to restart your mac a..
UIKit과 SwiftUI 통합하기 SwiftUI 이전에는 iOS 개발을 위해 UIKit을 사용하였습니다. SwiftUI로 화면을 개발한다고 해도 UIKit을 사용할 수 밖에 없는데요. SwiftUI 화면을 UIKit에서 사용하려면 UIHostingController를 사용해서 쉽게 사용할 수 있는 것처럼 SwiftUI에서는 UIViewRepresentable이라는 프로토콜을 구현함으로써 UIView를 쉽게 SwiftUI에 반영할 수 있습니다. ▼ UIViewRepresentable 프로토콜은 UIKit을 SwiftUI에서 사용하기 위해 SwiftUI 형태의 화면으로 만들기 위한 프로토콜입니다. 다음과 같이 일반 UIKit 화면을 UIViewRepresentable를 구현을 통해 SwiftUI 에서 손쉽..
https://docs.flutter.dev/get-started/install/macos 설치 환경 플러터를 개발하기 위한 환경의 조건은 다음과 같습니다. macOS 2.8GB의 저장 공간 (개발툴 저장 공간을 제외한 크기) git, Xcode 가 설치된 환경 만약 git이 설치되어 있지 않다면 Xcode를 설치하거나 직접 git을 설치해야 합니다. Xcode를 설치하면 자동으로 git이 설치되며 따로 git을 설치 않아도 되는 장점이 있습니다. 만약 homebrew를 통해 설치하려면 다음 가이드를 참고하시면 됩니다. https://git-scm.com/download/mac Git - Downloading Package Download for macOS There are several options ..
▼ 스위프트 UI는 선언형 UI를 사용합니다. 예를 들면 다음과 같이 Color.red 에 .ignoresSafeArea() 라는 ViewModifier를 추가해서 화면에 SafeArea를 포함해서 전체화면을 빨간색으로 채울 수 있습니다. 마찬가지로 .frame을 이용해서 화면 사이즈를 변경할 수도 있습니다. ▼ 이번에는 ZStack을 사용해서 Color와 Text를 중첩해서 표현하겠습니다. ZStack의 alignment를 .bottomTrailing 옵션으로 Text를 우측 하단에 포함시킵니다. Text에도 역시 font, foregroundColor 와 같은 다양한 modifer가 추가되어있습니다. 때문에 코드가 복잡해지고 재사용하기 힘든 코드가 됩니다. ▼ ViewModifier를 확장한 Wate..
집합함수 집합함수는 다음과 같은 특징이 있습니다. 집합함수는 값을 계산해서 하나의 값으로 반환하는 함수입니다. 보통 group by 자주 같이 사용됩니다. where 절에서 바로 사용할 수 없기 때문에 group by 이후에 having 또는 서브쿼리를 사용합니다. 함수 리턴타입 설명 count Long 개수를 구함 max, min Long 최대, 최소값 구함 avg Double 평균 구함 sum Long 합 구함 ▼ 예제의 Player 엔티티는 Team 엔티티와 관계하고 있습니다. ▼ max, min, avg, sum은 해당 값이 존재하지 않는 경우 null을 값으로 리턴합니다. 다음과 같이 TypedQuery를 생성해서 getSingleResult() 메서드를 실행하면 각각 salary의 평균과 최고..
▼ 텍스트 필드를 만들기 위해서 다음과 같이 TextField 요소를 추가합니다. 첫 번째 파라미터는 Placeholder를 의미하며 두 번째 파라미터는 실제 입력 텍스트로 Binding 값이 들어갑니다. 때문에 @State 지시자를 통해서 새로운 변수를 추가합니다. @State는 내부적으로만 사용하기 때문에 private로 선언하는 것이 기본이며 값은 빈 문자열로 해줍니다. ▼ 텍스트를 입력하면 첫 글자가 대문자인 것을 알 수 있습니다. textInputAutocapitalization 를 .never로 설정하면 대문자가 아닌 소문자로 시작합니다. 그리고 틀린 문자에 대해 자동으로 수정해주는 기능이 있는데 사용자가 불편할 수 있습니다. .disableAutocorrection(true) 로 방지할 수 ..
기본 생성자 인자를 가진 생성자가 필요하다면 반드시 기본 생성자도 함께 정의해야 한다. 기본 생성자의 접근 범위는 public 이나 protected이어야 한다. private일 경우 JPA의 특정 기능이 올바르게 동작하지 않을 수도 있다. 클래스 타입 엔티티는 클래스여야 한다. 인터페이스나 열거 타입으로는 엔티티 생성 불가 final 엔티티 클래스나 영속대상 필드는 final이면 안된다. EntityManager의 엔티티 관련 기본 기능 (find, persist, remove …) find() 메서드 entityManager의 find 메서드를 통해서 엔티티를 가져온다. 메서드의 첫번째 파라미터는 엔티티 클래스이며 두번째 파라미터는 키 값을 의미한다. getReference() 메서드 find() 메..
@Table @Table 어노테이션에는 catalog와 scheme 속성도 있다. catalog - 테이블의 카달로그를 지정한다. MySQL의 데이터베이스가 카달로그에 해당한다 schema - 테이블의 스키마를 설정한다. 오라클의 스키마 지정 @Basic JPA는 영속 대상 필드 (또는 자바빈 프로퍼티)가 int, long, String과 같은 기본 타입일 때 @Basic 애노테이션을 사용한다. int, long, double 등 자바 기본 데이터 타입 Integer, Long, Double등 기본 데이터 타입에 대응하는 래퍼 타입 java.math.BigInteger, java.math.BigDecimal java.lang.String java.util.Date, java.util.Calendar ja..
Loerm Ipsum 최근에는 다국어 서비스를 하는 앱들을 많들게 됩니다. 아무래도 국내 서비스를 하는 것 보다 다양한 국가에 서비스를 하는 것이 훨씬 효율적이기도 하기 때문이죠. 하지만 번역과 디자인에 여러가지 힘든 부분이 있는 것이 사실입니다. 다국어 앱은 앱 구조도 조금 더 복잡해지는 것이 사실입니다. 이러한 부분은 프로토타입을 잡을 때도 고려해야 하는 부분이 되어버렸습니다. 이 때 유용하게 사용할 사이트를 소개해드리겠습니다. https://www.lipsum.com/ Lorem Ipsum - All the facts - Lipsum generator What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetti..
Lottie Animation ▼ 모바일 개발시 많이 사용되는 Lottie 애니메이션을 SwiftUI에서 구현하는 방법을 알아보겠습니다. 우선 새로운 패키지를 추가하기 위해서 로티를 사용하기 위해서 다음 주소를 복사합니다. (Swift Package를 사용하지 않고 CocoaPods을 사용해도 됩니다.) https://github.com/airbnb/lottie-ios.git ▼ Xcode의 File -> Add Packages... 메뉴를 통해 새로운 패키지를 추가합니다. ▼ 우측 상단에 검색창에 복사한 주소를 넣고 엔터를 치면 lottie-ios 패키지를 찾을 수 있습니다. 우측 하단에 Add Package 버튼을 눌러 패키지를 추가합니다. ▼ 로티 애니메이션 이미지를 다운로드 받습니다. 해당 서비스..
JPQL 특정 속성 조회 JPQL 을 사용할 때 select 절에 선택한 대상이 두 개 이상일 때 결과 타입은 Object 배열이 됩니다. select 결과가 Object 배열이므로 getResultList() 메서드가 리턴한 List에 담긴 데이터도 Object 배열입니다. JPQL 특정 객체로 속성 조회 Object 배열을 사용해서 데이터를 조회하면 형변환이 필요하며 해당 객체를 사용하기 불편해집니다. 그래서 클래스를 만들어 새로운 객체에 대입하면 조회시 해당 클래스에 맞게 객체가 생성됩니다. 우선 다음과 같이 조회될 객체에서 필요한 속성을 포함한 클래스를 선언합니다. select 구분에 새로운 객체를 할당하고 데이터를 조회합니다.
systemctl 우분투를 Docker 컨테이너로 만들어서 사용하면 몇가지 문제점이 있습니다. 그중에서도 불편한 것은 systemctl 명령이 동작하지 않는 점인데요. 매번 설치해주는 것 보다 Dockerfile을 만들고 이미지를 만들어 놓고 사용하는것이 편리합니다. ▼ Docker 파일 생성 ▼ Docker 빌드 ▼ 컨테이너를 생성하고 접속합니다.