Dev Log
Permission_handler 비디오 접근
Permission_handler 비디오 접근
2022.09.06현재 경매 정보 서비스 비드를 개발하고 있습니다. 플레이스토어에 올라간 상태인데 앱을 업데이트하려다 리젝을 먹었습니다. TL;DR 비디오 접근은 카메라 권한과 마이크 권한을 모두 고려해야 합니다.. 첫 번째 리젝 애플에서는 리젝 사유를 친절하게, 스크린 샷까지 찍어서 알려줍니다. 채널톡에는 상담자가 파일을 전송할 수 있는 기능이 있습니다. 카메라로 사진이나 비디오를 전송할 수도 있습니다. 과거에는 플러터 공식 웹뷰인 webview_flutter를 사용하고 있었는데요, 파일 전송을 하거나 카메라에 접근하는 경우 권한이 없으면 앱이 그냥 튕겼습니다. 안드로이드와 아이폰이 다르게 동작했는데, 아이폰의 경우 앱이 강제 종료되고, 안드로이드의 경우 클립모양 버튼 자체가 클릭이 안됐습니다. 그런데, 기존 웹뷰에 큰..
gitlab에서 github으로 미러링 과정 중 인증 문제 해결하기
gitlab에서 github으로 미러링 과정 중 인증 문제 해결하기
2022.08.30프로젝트를 깃랩에서 관리하고 배포를 위해 깃허브로 미러링을 시켰습니다. 액세스 토큰을 다시 발급받으면서 토큰이 갱신되었는데, 갱신된 토큰을 다시 입력해도 깃랩에서 계속 오류가 뜨면서 미러링이 안되는 문제가 있었습니다. 해결 방법 Mirroring Repository에 username 뒤에 토큰을 같이 입력해주면 됩니다. https://username:personalacesstoken@gihub.com/repo.git Reference https://forum.gitlab.com/t/authentication-fails-when-trying-to-mirror-gitlab-com-repo-to-github/3137
Lighthouse로 성능 개선하기
Lighthouse로 성능 개선하기
2022.08.30Lighthouse 성능 개선하기 경매정보 검색 앱 '비드'를 만드는 과정에서 Lighthouse를 이용해 성능을 개선해보았습니다. 발단 LightHouse 는 클라이언트 사이드에서 웹 성능을 측정해주는 간편한 도구입니다. 퍼포먼스, 접근성, SEO 등을 평가합니다. 아무런 생각 없이 기능위주의 구현을 했다가 뭔가 느린 것 같아서 측정을 해보니 Performance 31점, TTI 11초라는 참담한 결과를 맞이하였습니다... 문제 진단 우선 어디가 문제인지 점검하기 위해서 @next/bundle-analyzer를 설치해서 파일 크기를 확인해보았습니다. 일단 const.ts의 파일이 매우 크다는 것을 알 수 있었습니다. 필터가 굉장히 덩치가 큰데, 필터 구조가 복잡하기 때문입니다. 지역, 법..
gitlab에서 github으로 미러링 과정 중 인증 문제 해결하기
gitlab에서 github으로 미러링 과정 중 인증 문제 해결하기
2022.08.07프로젝트를 깃랩에서 관리하고 배포를 위해 깃허브로 미러링을 시켰습니다. 액세스 토큰을 다시 발급받으면서 토큰이 갱신되었는데, 갱신된 토큰을 다시 입력해도 깃랩에서 계속 오류가 뜨면서 미러링이 안되는 문제가 있었습니다. 해결 방법 Mirroring Repository에 username 뒤에 토큰을 같이 입력해주면 됩니다. https://username:personalacesstoken@gihub.com/repo.git Reference https://forum.gitlab.com/t/authentication-fails-when-trying-to-mirror-gitlab-com-repo-to-github/3137
플러터로 웹뷰 세팅하기
플러터로 웹뷰 세팅하기
2022.08.01Flutter 앱에 WebView 추가 를 읽으면서 정리한 글입니다. pubspec.yaml에 의존성 추가 아래 명령어로 플러그인을 추가합니다. flutter pub add webview_flutter flutter pub get main.dart 에 웹뷰 추가 import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; void main() { runApp( const MaterialApp( home: WebViewApp(), ), ); } class WebViewApp extends StatefulWidget { const WebViewApp({Key? key}) : super(key: key..
온룸 파일 다운로드 관련 이슈와 해결한 방법
온룸 파일 다운로드 관련 이슈와 해결한 방법
2022.02.11export const downloadConsultingReportAsync = createAsyncThunk( 'user/DOWNLOAD_APPLICATION', async (customer: string) => { const response = await axios({ url: `https://api.ownroom.link/api/consultings/report/download?nickname=${customer}`, method: `get`, headers: { Authorization: `Bearer ${getCookie('token')}`, }, }); const a = document.createElement('a'); a.href = response.data.url; a.click(); r..
TypeScript Object, object, {} 비교
TypeScript Object, object, {} 비교
2021.11.26들어가며 타입스크립트의 객체는 세 가지 타입이 있는데, 헷갈릴 수 있기 때문에 정리해보았다. Object 자바스크립트 객체와 완전히 동일하다. 즉, toString(), hasOwnProperty() 등을 가지고 있다. Object.prototype. ...으로 쓸 수 있는 API들을 다 쓸 수 있다. primitive type, none-primitive 모두 할당될 수 있다. {} Object와 비슷하지만 비어있다. runtime에는 Object와 같지만 컴파일 시에는 다르다. 컴파일 시에는 Object의 멤버를 가지고 있지 않고, Object가 더 엄격한 객체이다. object typescript에서 추가된 객체 타입으로, non-primitive type을 할당할 수 있지만, primitive t..
오픈소스에 기여하는 법 : MDN 문서에 기여하기
오픈소스에 기여하는 법 : MDN 문서에 기여하기
2021.11.10들어가며 MDN에서 이벤트 관련 내용을 학습 중이었는데, 연결된 문서인 Web/API/AbortSignal에 어체가 단순히 번역만 되어 있는 것을 발견했다. 이것을 고쳐보고 싶었다. Mozilla 한국어 문서 번역 스타일 가이드에 따르면 경어체, 합쇼체로 수정이 필요해 보였다. 별 것 아닌 일이지만 그동안 오픈 소스에 기여해보고 싶었는데, 내친 김에 해봐야겠다 싶었다. MDN에 기여하는 법 1. 우선 가장 먼저 MDN Korea 오픈 톡방에 들어갔다. 2. 아래의 가이드라인을 따랐다. [ko] 한국 첫 기여자들을 위한 가이드라인 [ko] 한국 첫 기여자들을 위한 가이드라인 · Issue #827 · mdn/translated-content Progress 한국 첫 기여자들을 위한 가이드라인 우선 작성 한..
크롬 글자 일그러짐 현상 해결법
크롬 글자 일그러짐 현상 해결법
2021.11.09블로그 글을 쓰다가 문득 글자 두께가 일정하지 않은 버그가 있음을 발견했다. 블로그 스킨편집에 가서 폰트도 바꿔보고 css font weight도 바꿔보고 여러 설정을 바꿔봤는데.. 삽질을 하다가 결국에 브라우저 문제라는 걸 알게 됐다. 해결 방법 chrome://flag 에 접속 후 우측 상단의 Reset all 클릭
React Vercel로 배포 시 TypeError: Object(...) is not a function
React Vercel로 배포 시 TypeError: Object(...) is not a function
2021.11.04(Vercel Eng (베르셀 TypeError: Object(...) is not a function 수정하기 (Vercel 배포 중) 로컬에서 멀쩡히 잘 실행되던 프로젝트가 vercel로 배포하자 에러를 띄우면서 렌더링이 안 되었다. 문제는 `react hooks` 가 import될 때 'react'가 아닌 다른 경로로 자동 import 돼서 그랬다. import 부분을 다시 체크해보자!
Vanila JS로 TO DO LIST 만들기
Vanila JS로 TO DO LIST 만들기
2021.11.03들어가며 신촌IT연합동아리 CEOS에서 프론트엔드 스터디를 하면서 진행한 미션을 되돌아본다. 미션 주제는 Vanilla JS로 To-do list를 구현하는 것이었다. 할 일과 한 일을 구분하여 보여주고 클릭 시 반대편으로 이동하는 기능이 있다. 또 외부 폰트와 localStorage를 이용하는 것이 미션의 내용이었다. 자세한 미션의 내용은 여기서 볼 수 있다. 결과를 github Pages로 배포했는데 여기서 체험할 수 있다. github 주소 https://github.com/BonJunKu/vanilla-todo-14th index.html ```html ✍진행 중인 작업(0) 😆완료된 작업(0) + ``` Style.css ```css /* Global */ :root { /* Color */ -..