- go-mobile로 go로 작성한 코드 iOS 라이브러리로 빌드 후 웹뷰 구성 f-did library go ver. → go mobile iOS 빌드📌 사전설치(Mac OS) Xcode Xcode command line tool go 1.21.0 gomobile 설치하기 go.mod가 포함된 디렉토리에서 아래 명령어 입력 Bash복사캡션 $ go install golang.org/x/mobile/cmd/gomobile@latest $ gomobile init # 설치 확인 $ gomobile version 💡(24.07.02) 현재 gomobile version 명령어를 실행하면gomobile version unknown: binary is out of date, re-install it 라는 에러 메시지가 나타나는데 현재 무시하고 진행하여도 빌드하는 데에.. 2024.08.01
- Indexed DB와 dexie.js (feat. 브라우저에 데이터를 저장하는 방법 비교) 브라우저에 데이터 저장하는 방법과 비교 브라우저에 데이터를 저장하는 방법으로는 아래와 같이 크게 4가지가 있다. 방법 만료기간 설정 가능 여부 브라우저가 닫혀도 데이터 유지 오프라인 환경에서도 데이터 유지 저장공간 특징 쿠키 O O X 4KB local storage X (사용자가 수동으로 삭제하지 않는 이상 데이터가 계속 남아있음) O X session stotage와 함께 전체 10MB 같은 origin에서는 어떤 창이든, 탭이든 데이터를 공유함 session storage X (탭이 종료되면 데이터 삭제) X X session stotage와 함께 전체 10MB indexed db X (사용자가 수동으로 삭제하지 않는 이상 데이터가 계속 남아있음) O O 브라우저의 전체 Disk용량의 80%까지 사.. 2024.03.29
- [nuxt3] plugin 기능과 definePageMeta를 활용한 웹 내 페이지 검색 기능 구현 🎯목표 이렇게 페이지의 타이틀을 검색하면 검색 결과가 나오고, 클릭하면 routing이 되는 기능을 구현해 볼 것이다. 1. 먼저 plugins 폴더가 없다면 폴더를 생성하고 하위 파일을 생성한다. 공식문서에 따르면 "Nuxt는 자동으로 plugins 디렉토리의 파일을 읽고 Vue 애플리케이션 생성 시 로드합니다." 라고 되어있다. 이제 이 기능을 활용해서 웹페이지가 로드될 때 useRouter로 앱에 있는 모든 router 정보를 긁어올 것이다. https://nuxt.com/docs/guide/directory-structure/plugins plugins/ · Nuxt Directory Structure Nuxt automatically reads the files in your plugins di.. 2023.08.07
- [nuxt] nuxt3 + vue3 개념 및 용법 정리 🔎nuxt 폴더 구조 . ├── assets/ ├── components/ ├── layouts/ ├── middleware/ ├── pages/ ├── plugins/ ├── static/ ├── store/ ├── nuxt.config.js └── package.json assets 이미지, 스타일시트 및 기타 자산을 저장하는 디렉토리. 이 자산은 빌드 후에 /_nuxt/ 디렉토리에 복사됨. components Vue.js 컴포넌트를 저장하는 디렉토리. layouts 애플리케이션의 레이아웃을 저장하는 디렉토리. 레이아웃은 페이지 컴포넌트를 렌더링할 때 사용됨. middleware 미들웨어 함수를 저장하는 디렉토리. 미들웨어는 페이지 렌더링 전에 실행됨. pages 애플리케이션의 페이지 컴포넌트를 저장.. 2023.05.10
- 코드 스플릿팅(Code splitting) 이란? 코드 스플릿팅(Code splitting)은 웹 애플리케이션에서 자바스크립트 파일의 크기를 줄이고, 초기 로드 속도를 개선하기 위해 사용되는 기술입니다. 일반적으로, 웹 애플리케이션은 하나의 큰 자바스크립트 파일을 사용합니다. 그러나 이러한 방식은 파일 크기가 매우 크고, 브라우저에서 로딩하는 데에 시간이 오래 걸리므로 초기 로드 속도가 느려질 수 있습니다. 이를 해결하기 위해 코드 스플릿팅 기술을 사용합니다. 코드 스플릿팅은 큰 자바스크립트 파일을 작은 파일들로 분할하는 기술입니다. 이렇게 작은 파일들은 필요에 따라 로드되며, 초기 로드시 필요하지 않은 코드들은 로드되지 않습니다. 이를 통해 초기 로드 속도가 개선되고, 사용자가 웹 애플리케이션을 사용하는 동안 필요한 코드들만 로드하여 자원의 낭비를 줄.. 2023.03.14
- 서버 사이드 렌더링과 Nuxt.js 📝 목차 클라이언트 사이드 렌더링 서버 사이드 렌더링 서버 사이드 렌더링과 클라이언트 사이드 렌더링 차이점 서버 사이드 렌더링의 장점 서버 사이드 렌더링의 단점 Nuxt란? Nuxt를 쓰는 이유? 📌 클라이언트 사이드 렌더링 뷰 싱글 페이지 어플리케이션은 클라이언트 사이드 렌더링 방식 서버에서 브라우저로 빈 HTML을 보내고, 화면에서 js로 DOM을 그려주는 방식 이벤트가 발생할 경우 서버로 가지않고 화면에서 값을 변경하는 방식 클라이언트 사이드 렌더링을 이해하기 위해서 뷰 CLI로 생성된 프로젝트의 실행 결과를 살펴보겠습니다. 아래는 뷰 CLI로 생성한 프로젝트의 기본 코드입니다. // src/main.js import Vue from .. 2023.03.14