개발 (50) 썸네일형 리스트형 [Capacitor] 하이브리드앱 만들기 Vue3 + Capacitor 조합으로 프로젝트를 하게 됐다. Vue3는 마스터는 아니지만 어느정도 작동방식은 알고 있으니 Capacitor에 대한 개괄적인 학습부터 진행해보려고 한다. capacitor.config.ts 파일 설정법도 공부해야한다. 터미널에 입력하여 vue 프로젝트를 생성한다. npm create vite@latest 웹 프로그램이 다 만들어지면 npm run build capacitor 라이브러리를 받는다. npm install @capacitor/core @capacitor/cli capacitor를 초기화한다. npx cap init android, ios 프로젝트를 만든다. npm i @capacitor/android @capacitor/ios npx cap add android.. [Vue3] Life-Cycle(라이프사이클) composition api를 사용하는 경우에는 setup hook에서 beforeCreate, created에 해당하는 과정이 한꺼번에 처리됩니다.. 이제까지 코드를 작성하면서 써온 setup() 메서드가 바로 setup hook입니다. 생명 주기 훅 등록하기 예를 들어 onMounted 훅은 컴포넌트가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행하는 데 사용할 수 있습니다: 인스턴스 생명 주기의 여러 단계에서 호출되는 다른 훅도 있으며, 가장 일반적으로 사용되는 것은 onMounted, onUpdated, onUnmounted가 있습니다. onMounted를 호출하면, Vue는 등록된 콜백 함수를 현재 활성 컴포넌트 인스턴스와 자동으로 연결합니다. 이를 위해서는 컴포넌트 설정 중에 이러.. [TypeScript] 타입스크립트 인터페이스(interface) 첫 번째 인터페이스 (Our First Interface) 어떻게 인터페이스가 동작하는지 확인하는 가장 쉬운 방법은 간단한 예제로 시작하는 것입니다: function printLabel(labeledObj: { label: string }) { console.log(labeledObj.label); } let myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj); 타입 검사는 printLabel 호출을 확인합니다. printLabel 함수는 string 타입 label을 갖는 객체를 하나의 매개변수로 가집니다. 이 객체가 실제로는 더 많은 프로퍼티를 갖고 있지만, 컴파일러는 최소한 필요한 프로퍼티가 있는지와 타입이 잘 맞는지만 검사합니다. Typ.. [TypeScript] 타입스크립트 기본 타입 배열 (Array) TypeScript는 JavaScript처럼 값들을 배열로 다룰 수 있게 해줍니다. 배열 타입은 두 가지 방법으로 쓸 수 있습니다. 첫 번째 방법은, 배열 요소들을 나타내는 타입 뒤에 []를 쓰는 것입니다: let list: number[] = [1, 2, 3]; 두 번째 방법은 제네릭 배열 타입을 쓰는 것입니다. Array: let list: Array = [1, 2, 3]; -> 제네릭 타입은 Array의 형식을 취하고 있다. 튜플 (Tuple) 튜플 타입을 사용하면, 요소의 타입과 개수가 고정된 배열을 표현할 수 있습니다. 단 요소들의 타입이 모두 같을 필요는 없습니다. 예를 들어, number, string 이 쌍으로 있는 값을 나타내고 싶을 수 있습니다: // 튜플 타입으로 .. [TypeScript] 타입스크립트에서 사용 가능한 모든 타입 기본 타입 (Primitive Types) boolean: 논리적인 값 true와 false를 가질 수 있습니다. number: 모든 숫자, 정수나 실수, NaN, Infinity 등을 나타낼 수 있습니다. string: 문자열을 나타냅니다. void: 반환값이 없는 함수의 반환 타입을 나타냅니다. null: 값이 없음을 나타냅니다. undefined: 값이 할당되지 않음을 나타냅니다. 객체 타입 (Object Types) array: 배열을 나타냅니다. number[], string[] 등으로 표기할 수 있습니다. tuple: 고정된 요소 수 만큼의 타입을 미리 선언하고, 그에 맞는 값을 배열 형태로 표현합니다. enum: 열거형으로, 숫자값 집합에 이름을 지정한 것입니다. any: 모든 타입을 허용합.. [Babel] CSS 설정법 Babel은 JavaScript를 사용하는 개발자들이 최신 JavaScript 구문을 사용하면서 구식 브라우저에서도 코드를 작동시킬 수 있게 해주는 도구입니다. CSS와는 직접적인 관련이 없지만, CSS 전처리기인 Sass, Less, Stylus와 같은 도구들과 함께 사용될 때 유용합니다. CSS 전처리기를 사용할 때, 브라우저는 이를 이해하지 못합니다. 따라서 CSS 전처리기를 사용하는 개발자들은 CSS 파일을 생성하기 위해 전처리기를 사용하고, 이 파일을 브라우저에서 사용합니다. 이때 Babel을 사용하면 전처리기에서 생성된 CSS 파일을 브라우저에서 사용 가능한 CSS 파일로 변환할 수 있습니다. Babel을 사용하여 CSS 파일을 변환하려면 다음 단계를 따르세요: Babel 설치하기: 먼저 Ba.. [Webpack] CSS 설정법 Webpack은 JavaScript 모듈 번들러로서, JavaScript, CSS, 이미지 등 모든 종류의 파일을 하나의 파일로 번들링할 수 있습니다. Webpack을 사용하여 CSS 파일을 번들링하려면 다음 단계를 따르세요: Webpack 설치하기: 먼저 Webpack을 설치해야 합니다. npm install --save-dev webpack webpack-cli 명령어를 실행하여 Webpack을 설치합니다. CSS 로더 설치하기: Webpack은 CSS 파일을 이해하지 못합니다. 따라서 CSS 파일을 로드하고 해석하기 위해 CSS 로더를 설치해야 합니다. npm install --save-dev style-loader css-loader 명령어를 실행하여 style-loader와 css-loader를.. [Vue3] Computed와 Methods 차이 methods나 computed나 그게 그거 아니야? 라는 생각이 들어 좀 더 공부를 하게 되었다. computed - template내부에 선언된 computed중에서 해당 함수와 연결된 값이 바뀔 때만 해당 함수만을 실행한다. methods -그런거 모르겠고 template내부에 선언된 methods중에서 update라이프사이클이 동작한(=아무 변수나 바뀐)다면 함수를 모두 실행한다. 고로, 딱 변화된 부분만을 감지해서 연산을 해주는 것이 computed이다. ChatGPT에게 둘의 차이를 예시를 들어 설명해달라고 부탁했다. Vue 3에서 methods와 computed 모두 컴포넌트 안에서 함수를 정의할 수 있는 방법입니다. 하지만 두 가지 기능은 차이가 있습니다. methods는 일반적인 함수이며.. 이전 1 2 3 4 5 6 7 다음
