permission_hanlder 라이브러리 flutter 에서 카메라와 같이 기기 권한 획득을 위해 편리하게 사용할 수 있는 라이브러리가 있습니다. 본 글에서는 permission_hanlder 라이브러리를 사용하면 쉽게 권한 획득을 할 수 있기 때문에, 해당 라이브러리를 사용해서 권한 획득하는 방법에 대해 소개합니다. 우선 아래 명령어를 통해 설치합니다. flutter pub add permission_handler 권한 획득하기 가이드 문서에도 설명이 잘되어 있으나 간단하게 정리하면, 아래와 같이 권한 획득 요청을 할 수 있습니다. if (await Permission.camera.request().isGranted) { // 권한 획득에 성공했을때에 대한 처리 로직 } else { // 실패한 경..

Intersection Observer API 이전에는 스크롤 위치에 따라 화면을 변화시키기 위해, 아래와 같이 scroll event listener 를 추가하여 사용했습니다. document.addEventListener("scroll", callback); 이렇게 스크롤로 화면 내의 요소(element)의 변화를 감지하는 일은, 스크롤을 조금만 움직여도 이벤트가 발생하며 사이트에 부하를 줄 수 있기 때문에 비효율적이었습니다. 비교적 최근 브라우저에서는 Intersection Observer 라는 API를 지원해주기 때문에 이전 방법(스크롤 이벤트를 이용한 방법)보다 효율적이고, 쉽게 컨트롤 할 수 있게 됐습니다. Intersection Observer 사용하기 사용하는 방법은 관찰자(Observer..

플러터 프로젝트에 원하는 프로젝트 적용하기 본 글에서는 네이버 나눔글꼴을 플러터(flutter) 프로젝트에 적용하는 방법에 대해 소개합니다. https://hangeul.naver.com/font/nanum 네이버 글꼴 모음 네이버가 만든 150여종의 글꼴을 한번에 만나보세요 hangeul.naver.com 물론 어떤 폰트를 사용하더라도 적용하는 방법은 동일합니다. 우선, 적용할 폰트를 다운로드 받은 뒤에 프로젝트에 옮깁니다. 본 글에서는 프로젝트 root에 assets/fonts 라는 디렉토리를 생성하도록 하겠습니다. 그리고, 해당 폴더에 다운로드 받은 폰트를 넣습니다. pubspec.yaml 폰트 설정 이미지든 폰트든 리소스 파일을 사용하려면 pubspec.yaml 파일에 정의해햐 합니다. 플러터 프..

WebView 웹뷰(webview)는 네이티브 앱에서 웹 컨텐츠를 띄우기 위해 사용하는 기술입니다. 예시를 들면, 모바일 앱 내에서 결제를 진행할 때, 결제 창을 별도의 브라우저를 띄울 필요 없이 앱 내부에서 바로 웹 화면을 띄울 수 있습니다. 위와 같은 방법으로도 사용할 수 있지만, 스타트 업과 같이 작은 규모의 회사에서는 안드로이드와 iOS 개발, 2개 플랫폼에 대해 모두 개발하기에 리소스가 많이 들기 때문에 웹 개발을 한 뒤 네이티브 앱에 웹 뷰를 띄어서 서비스를 제공하기도 합니다. Flutter에서 Webview 띄우기 flutter에서 손쉽게 웹 뷰를 사용 할 수 있도록 도와주는 라이브러리가 있습니다. 본 글에서는 flutter 개발 팀에서 만든 라이브러리인 webview_flutter 를 사용..

tailwindcss tailwindcss는 자주 사용하는 css를 모아놓은 라이브러리로 편리한 유틸리티 css 라이브러리입니다. tailwindcss에는 정말 많은 스타일들이 이미 정의가 되어있어서, 따로 css를 작성할 필요없이 class(className)에만 추가를 하면 스타일이 입혀집니다. 예를 들어, 둥근 사각형을 만든다고 했을때 아래와 같이 html 코드에 class 속성을 추가하고, border-radius 값을 정의해줘야 합니다. .rounded-rectangle { width: 50px; height: 50px; border-radius: 0.25rem; } 만약, tailwindcss 를 사용하게 된다면 훨씬 간단해집니다. (사용하지 않았을때 코드와 비교했을때, 훨씬 간단하게 작성할 ..

여러가지 방법으로 크롬 extension을 만들 수 있지만, 본 글에서는 React 를 사용해서 크롬 extension을 만드는 방법에 대해 소개합니다. React 프로젝트 생성하기 우선 extension으로 만들 리액트 프로젝트를 CRA를 사용해서 생성합니다. 본 글에서는 타입스크립트 기반의 리액트 프로젝트를 생성하도록 하겠습니다. yarn create react-app my-chrome-app --template typescript chrome extension 만들기 manifest 설정 변경 생성된 프로젝트의 public 디렉토리를 보면 manifest.json 파일이 있습니다. manifest.json 파일은 브라우저에 이 앱에 대한 정보를 알려주는 파일입니다. 이 앱이 크롬 익스텐션이라고 브라..

nextjs를 사용하는 이유 Link 컴포넌트를 사용하는 이유에 대해 알아보기 전에 CSR과 SSR에 용어 정리가 필요합니다. nextjs를 사용하는 이유 중 가장 큰 이유는 서버 사이드 렌더링(Server Side Rendering) 이라고 할 수 있습니다. 서버 사이드 렌더링은 줄여서 SSR이라고 부르기도 합니다. 반대로 React의 경우는 Client Side Rendering, CSR 입니다. 단어에서도 알 수 있듯이 SSR은 서버에서 미리 렌더링하여 html 파일을 만들어주고, 만들어진 html 파일을 사용자에게 전달하는 방식으로 동작합니다. 반면에 CSR의 경우는 javascript에 의해 클라이언트에서 화면을 렌더링한다는 차이점이 있습니다. SSR은 서버에서 미리 html 파일을 만들어주기 ..

오류 내용 react native iOS 실행시 아래와 같은 오류가 발생했습니다. 자주 발생하는 오류 코드라서 조치 방법을 쉽게 찾을 수 있었습니다. CommandError: Failed to build iOS project. "xcodebuild" exited with error code 65. 오류에 대해 간략하게 요약하면 캐싱된 pod file과 현재 패키지의 pod file 내용이 매치되지 않아서 발생하는 오류입니다. 따라서, 캐시를 제거해주고 다시 빌드를 수행하면 됩니다. 오류 조치 Xcode 디렉토리에 Derived Data를 삭제합니다. cd ~/Library/Developer/Xcode rm -rf DerivedData 그리고 다시 iOS 빌드를 수행합니다. 만약, 동일한 error 65 ..

브라우저 창에 url을 입력했을때 보통 어떤 내용을 검색하기 위해 브라우저 창에 url을 입력합니다. 이때 내부적으로 이루어지는 일을 살펴봅니다. 브라우저에서 동작하는 과정을 알아보기 전에 DNS에 대해 먼저 알아야 합니다. DNS 서버로 부터 서버 IP 조회 구글 사이트(google.com)에 접속한다고 가정해봅시다. 브라우저 주소창에 https://google.com을 검색할 것 입니다. 브라우저는 화면을 그리기 위해 서버로부터 HTML, CSS, JS, 이미지 등의 리소스 파일들을 가지고 오려고 할 것입니다. 하지만 브라우저는 입력받은 url(https://google.com)로는 서버의 ip를 주소를 알 수 없기 때문에, DNS 서버에 요청하여 서버의 ip 주소(예: 13.123.55.23)를 가..

이벤트 버블링 (Event Bubbling) 이벤트 버블링은 한 요소에 이벤트가 발생하면 해당 요소의 이벤트 핸들러가 실행이 되고, 부모 요소의 이벤트 핸들러도 순차적으로 실행이되는 현상을 말합니다. 예시 코드로 설명해보면 FORM DIV P 만약 사용자가 P를 클릭했습니다. 간단하게 생각하면 p 라는 글씨만 표시가 될거라고 생각 할 수 있습니다. 하지만, 실제로는 아래와 같이 부모 요소의 이벤트 핸들러가 실행되는 것을 볼 수 있습니다. 요약하면 이벤트가 자식 요소부터 시작해서 부모 요소로 거슬러 올라가며 이벤트가 발생하는 것을 이벤트 버블링(Event Bubbling)이라고 합니다. 버블링 중단하기 원치 않은 이벤트 버블링을 막는 방법이 있는데, event.stopPropagation()을 이용할 수 ..