전체 글

sveltekit + capacitor을 이용해 하이브리드앱을 개발할 수 있는데요. 개발한 후 아이폰으로 테스트를 하려고 하면 xcode가 필요하다며 맥북 없이는 테스트 하기 힘듭니다. 그러나 app flow를 이용하면 윈도우로도 아이폰에서 확인할 수 있습니다. 크게 1. sveltekit+ capacitor 설치 2. live reload 기능 사용하기 3. app flow 연결하고 ipa 설치 로 알려드리겠습니다. 1. Sveltekit 설치 npm init svelte@next [프로젝트명] //스벨트 킷을 설치 해줍니다. cd [프로젝트명] //프로젝트 폴더로 이동합니다 npm install //의존성 패키지를 다운로드 합니다. npm run dev //잘 작동하는지 확인합니다. 저는 스벨트킷 설..

1. 문제 상황 앱을 개발한 후에 한국인데도 기본 언어가 영어로 설정되어 보기 불편했다. 2. 문제 해결 2.1 app.json파일에 ko.json 추가. 여기서 ko.json은 임의로 만들어주세요! { "expo": { ... "locales": { "ko": "./locales/ko.json" }, } } 2.2 ko.json 파일을 만들어 빈 객체 추가 원래는 ko.json 안에 언어 설정이 들어가겠지만, 저희는 ios의 기본 언어만 바꿀 것이므로 빈 객체를 넣어 주세요! //ko.json {} 3. 결과 한국어로 기본언어가 잘 바뀌는 모습입니다. 참고: https://stackoverflow.com/questions/45962000/set-up-different-language-for-ios-ap..

안녕하세요. 이번 글에서는 타입스크립트 사용 이유 핵심만 알려드리겠습니다. 1. 타입스크립트 사용 이유 타입스크립트는 자바스크립트의 타입 부분을 업그레이드 한 언어입니다. 그냥 타입체크와, 자동완성을 도와주는 부가기능 정도로만 생각하시면 쉽게 도입하실 수 있을 거예요! 1.1 타입 체크 자바스크립트는 변수의 타입이 실행 시점에 결정되고 변경될 수 있는 동적 타이핑(Dynamic typing)을 지원하는 언어입니다. 그래서 아래와 같이 숫자와 문자를 연산하거나, 숫자만을 넣어야 하는 함수에 문자열을 넣어도, 제지를 하지 못합니다. //1. 숫자와 문자 연산 console.log("100" + 5); //1005 //2.숫자만을 넣어야 하는 함수 function add (a, b) { return a + b..

1. 문제사항 앱을 개발한 후, 플레이 스토어에 올리자 아래와 같은 에러 메세지가 나왔다. "앱이 Android 13(API 수준 33) 이상을 타겟팅해야 함" 2. 문제 해결 위의 문제를 해결하려면 아래 방법대로 Target sdk를 올려주면 된다. 2.1 expo-build-properties 설치 npx expo install expo-build-properties 터미널에 위의 명령어 치기 2.2 app.json 수정 { "expo": { ... "plugins": [ [ "expo-build-properties", { "android": { "compileSdkVersion": 33, "targetSdkVersion": 33, "buildToolsVersion": "33.0.0" } } ] ] ..

1. 문제 상황 expo로 개발이 완료된 후 아래 명령어로 빌드를 시작했다. eas build --platform ios 그러자 아래와 같은 에러가 뜨며 빌드를 하지 못했다. Failed to patch capabilities: [ { capabilityType: 'APPLE_ID_AUTH', option: 'OFF' } ] ✖ Failed to sync capabilities "..." Unexpected error occurred while attempting to update capabilities for app "...". Capabilities can be modified manually in the Apple developer console at "..." Auto capability sync..

1. 파일 용량 제한하기 const file_list = [{ "name":"IMG_1378.HEIC", "size":1918839, "uri":"...." }, { "name":"IMG_3017.HEIC", "size":1789432, "uri":"...." }]; const total_file_size = file_list.reduce((total, file) => total + file.size, 0); const MB = 1048576; if ((MB * 50)

안녕하세요. 이번 글에서는 자바스크립트에서의 import / export 핵심만 알려드리겠습니다. 1. 사용이유 코드가 많아지면 파일을 분리해서 작업하는 게 좋은데요. 이렇게 분리된 각각의 파일을 모듈이라고 부릅니다. 즉 모듈(module)은 파일 하나입니다. 이 모듈에 export와 import를 이용하면 만들어진 모듈의 코드(변수, 함수 등)를 사용할 수 있습니다. 2. 사용방법 먼저 index.html파일에 scipt.js의 코드를 가져오는 경우를 들겠습니다. html파일에서 import를 사용하시려면 type을 module로 설정해줘야 합니다. //index.html 2.1 단일 export, import (export default) 단일 값을 가져오고 싶으면 default키워드를 사용해야 합니..

안녕하세요. 이번 글에서는 자바스크립트에서의 ?. / ?? 핵심만 알려드리겠습니다. 1. ?.(optional chaining operator) 1.1 사용이유 용도는 .과 같습니다. 근데?. 왼쪽의 값이 null 혹은 undefined일 경우 .을 찍는 대신 undefined를 반환합니다. 중첩 객체에서 안전하게 데이터를 꺼내고 싶을때 사용합니다. 1.2 사용방법 예를 들어 중첩 객체에서 없는 값을 가져와 보겠습니다. var person = { name: 'kim', }; console.log(person.height.value); 당연히 없는 값을 가져오려 하기 때문에 에러가 나고, 하단의 코드들은 실행하지 못하게 됩니다. 이럴 땐 if를 통해 중첩 객체에서 데이터를 꺼내게 에러처리를 하는데요. 귀찮..

안녕하세요. 이번 글에서는 자바스크립트에서의 Map, Set 핵심만 알려드리겠습니다. 1. Map 1.1 사용이유 객체처럼 key, value형태로 자료를 저장하는 자료형입니다. 근데 객체는 key 값이 문자열과, Symbol만 가능하지만, Map자료형은 어떠한 타입이어도 상관없습니다. 어떠한 값도 넣을 수 있기에, 자료의 연관성이 클 때 쓰입니다. 1.2 사용방법 const human = new Map(); human.set('name', 'kim'); human.set([1,2], 30); console.log(human) //{'name' => 'kim', Array(2) => 30} 위처럼 key값으로 배열도 들어갈 수 있습니다. 객체처럼 key값이 자료의 이름보다는, 배열 [1, 2]가 30과 ..

안녕하세요. 이번 글에서는 자바스크립트에서의 상속 - (Prototype) 핵심만 알려드리겠습니다. 1. 알아야 하는 이유 자바스크립트에서 자료형은 6개의 원시 타입(number, string, boolean, null, undefined, symbol)과 한 개의 객체 타입(object)을 가지고 있습니다. 그중에서 es6부터 추가된 symbol은, 객체에서 유일한 key값을 만들고 싶을 때 사용합니다. 2. 사용방법 const my_symbol = Symbol('description'); 이렇게 Symbol함수 안에 설명을 적으면 사용할 수 있습니다. 그냥 설명을 저장할 수 있는 유일한 자료형입니다. Symbol()은 사용할 때마다 유일한 Symbol이 생성됩니다. 심볼 안에 넣는 설명이 같아도, 비..