본문 바로가기

전체 글92

[Flutter] 안드로이드 웹뷰 오류 net::ERR_CACHE_MISS > 이슈 프로젝트를 webview_flutter로 개발하여 구글 플레이 스토어에 배포하였고 1.0.0 최초 업데이트된 앱을 다운받아 접속해보았더니, 아래와 같은 창이 열렸다;; > 해결 웹뷰는 인터넷에 엑세스 할 수 있도록 권한을 부여해주어야 하는데, 아래의 코드가 debug/AndroidManifest.xml과 profile/AndroidManifest.xml에는 설정되어 있었지만 정작 main/AndroidManifest.xml에는 설정되어 있지 않았다! // 네트워크 접속 권한 main/AndroidManifest.xml에도 해당 위치에 해당 로직을 적용해주고 재배포 하면 된다. [참고 URL] https://stackoverflow.com/questions/60829199/flutter-webvi.. 2023. 4. 9.
[iOS] 수출규정 관련 문서 누락 메시지 없애기 xcode에서 배포하려는 앱을 아카이브 한 이후 App Store Connect에서 TestFilght에 들어가보면 아래와 같은 경고 문구가 뜬다. > 수출규정 관련 문서 누락 메시지가 뜨는 이유 결론적으로 말하면, 앱스토어에 앱을 올려서 배포한다 = 미국 애플 서버에서 다른 나라로 수출이 된다이기 때문에 미국 정부의 수출규정에 통제를 받는 것이다. 그로 인해 해당 규정과 관련해서 내용이 누락되었기 때문에 발생한다고 생각하면 된다! > 수출규정 관련 문서를 없애는 방법 이미지에서 추가 정보를 눌러보면 해당 정보가 나온다. info.plist에 App Uses Non-Exempt Encryption : NO를 넣어주면 된다. 코드로 작성하는 법은 아래와 같이 넣어주면 된다! // info.plist ITS.. 2023. 4. 6.
[Flutter] Module 'fluttertoast' not found. GeneratedPluginRegistrant.m 배포를 위해 build mode를 debug → release로 변경한 적이 있다면 다시 debug모드로 변경해주어야 xcode에서 오류없이 빌드가 실행된다! 배포시(archive) => build mode release 빌드시(build) => build mode debug xcode → Runner 클릭 → Edit Scheme 으로 다시 debug모드로 설정해주고 재빌드시 해당 오류는 사라진다! 2023. 4. 6.
aws S3, CloudFront, Route53 연동하기 자체 개발한 플랫폼을 실제 도메인과 서버와 연결하기 위해 S3를 처음 사용해 보았다. 대략적 흐름은 이렇다. - 로컬에서 파일 build (npm build / yarn build) - 생성된 build 폴더 안의 파일들을 S3에 업로드 -> cloudfront 연동 -> Route 53 연동 s3와 cloudFront Route 53에서 기본 설정값에서 변경사항 위주로 기록하였다. 1. S3 생성하기 ACL 활성화: 객체 라이터로 변경. 퍼블렉 엑세스 차단 비활성화. 이 버킷과 그 안에 포함된 객체가 퍼블릭 상태가 될 수 있음을 알고 있습니다 체크. 여기는 수정할게 없으니 버킷 만들기 클릭 로컬에서 build한 파일들을 드래그 앤 드롭 이제 할 일은 버킷에 퍼블릭 권한을 활성화 해주어야 한다. 모든 버.. 2023. 4. 5.
Axios 호출시, Proxy를 이용하여 크로스브라우징(CORS) 해결하기 > 이슈 타사이트 api에 접근하여 데이터를 받아 프론트에서 활용해야 하는 업무가 있었다. 포스트맨으로 호출 했을때는 정상 작동했는데, localhost 또는 우리 웹사이트에서 호출하면 CORS 에러가 발생하였다. Access to XMLHttpRequest at “타사이트 URL” from origin "localhost:8080” has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. > 원인 브라우저에서는 내가 IP마다 CORS 정책을 허용해주.. 2023. 2. 1.
PDF 다운로드 기능 구현(html2pdf.js) 회사 웹사이트에서 특정영역을 pdf 파일로 다운로드가 필요하여 라이브러리를 찾아보게 되었고 html2pdf.js와 vue-html2pdf가 있었다. > vue-html2pdf "vue html to pdf" 라고 구글에 검색하면 가장 먼저 나오고 사용량이 가장 많은 vue-html2pdf은 html2pdf.js를 vue 컴포넌트 형식으로 제공한다. 기존 html2pdf.js와 다르게 미리보기 창을 띄워주는 preview-modal 옵션처럼 장점이 있는 반면, slot으로 pdf에 들어갈 내용을 넣어야 하는데 slot안에 내용이 있는 태그들을 넣게 되면 해당 태그들은 웹에서 보여지지 않기 때문에 같은 내용을 한번 더 써줘야 하는 번거로움이 생긴다. 단시간에 단순구조로 pdf를 다운로드 할 수 있도록 하는 .. 2022. 12. 15.
딥셀렉터(v-deep) 설정하는 방법 > 자식 컴포넌트의 CSS(SCSS)를 정의할 수 있는 딥셀렉터(v-deep) vue 프로젝트를 진행하다 보면 vuetify나 quasar 등 매우 다양한 프레임워크나 컴포넌트를 사용하게 된다. 그러면서 그 컴포넌트를 내 Vue 프로젝트의 자식 컴포넌트로 불러와서 사용하는 경우가 있는데, 그 컴포넌트에 내가 원하는대로 CSS를 적용해서 스타일을 변경하고 싶으나 그게 쉽지 않은 경우가 발생한다. > 자식 컴포넌트의 CSS에 쉽게 접근이 되지 않는 이유 웹 컴포넌트의 중요한 측면인 "스타일 캡슐화" 때문이라고 한다. 현재 컴포넌트에 적용된 css(scss)가 현재의 컴포넌트에만 적용되고 다른 컴포넌트에는 간섭이 되지 않도록 하기 위함이다. 그래서 Vue컴포넌트에서 scoped를 지정하게 되면 자식 컴포넌트에.. 2022. 12. 13.
패키지 업데이트하며 발생한 에러 정리 # 패키지 업데이트 (yarn.lock만 변경됨) $yarn upgrade # yarn.lock에서 설치된 버전으로 package.json을 업데이트 $yarn global add syncyarnlock $syncyarnlock -s -k # package.json의 현재 버전 제약 조건으로 yarn.lock을 업데이트 $yarn react-typescript 프로젝트를 패키지 업데이트 이후 여러가지 에러들이 발생하였는데, 해결한 내용들을 정리하였다. 🚫 node_modules/@types/babel__traverse/index.d.ts: ']' expected. 66 | } 67 | > 68 | export type ArrayKeys = keyof { [P in keyof T as T[P] extend.. 2022. 11. 30.
CSS 테두리 선으로 삼각형 화살표 만들기 CSS 트릭을 활용하면 제한적이지만 삼각형 도형을 만들어 활용할 수 있다. 삼각형을 만드는 트릭은 두꺼운 상하좌우의 테두리선(border)을 맞붙여서 삼각형 형태를 만드는 것으로 다음과 같은 원리로 만들어진다. .arrow-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #000; /* ▲ */ } .arrow-down { width: 0; height: 0; border-top: 10px solid #000; /* ▼ */ border-left: 10px solid transparent; border-right: 10px so.. 2022. 11. 24.

티스토리툴바