분류 전체보기 225

TIL 34 인앱브라우저 관련 처리 navigator.userAgent forkakao, naver, instagram, facebook etc..

트러블 우리 서비스를 이용하기위해선 fcm 서비스워커 권한을 허용 해서 서비스워커가 등록이되어야하는데 카카오톡에서 접속하면 크롬에 접속 되는게 아닌 카카오톡 전용 인앱에서 실행되기때문에 알림을 설정할수가 없었다. 이에 대해서 찾아본결과 아래와 같은 내용이 있었다. 슈팅 이를 위해서 어떻게 해야할까 찾아보다가 그전에 디바이스 검별, 웹브라우저 검별을 위해 navigator.userAgent 를 썼었는데 이때 만약 각 디바이스별로, 환경에 따라 어떤 브라우저를 쓰고있는지 이름을 찾아서 그 이름일때 새로운 크롬창을 뜨게 만들면 되지 않을까 생각하였다. 먼저 모바일 디바이스에서 카톡에 접속할때 console.log 는 볼수 없으므로 alert 창을 띄워서 어떤 환경을 가지고 있는지 보기로 했다. 위의 사진은 맥..

항해/항해99 2022.01.24

TIL 33 fcm, 서비스워커 푸쉬알림 완료

트러블 푸시서비스를 해주는 firebase를 통해 푸시메세지(알림)를 진행하기로했다. 푸쉬알림을 거의 1~2주는 계속해서 씨름했던거같다, public폴더에 서비스워커를 등록해야한다는점, 그럴때 import를 할수없던점, src폴더에서 서비스워커를 등록시 scope때문에 등록이 안된다는 에러, 만약 등록하더래도 public폴더가 아니라면 event가 발생하지 않는다는점 등이 많았다. 보는바와 같이 public폴더에 서비스워커.js 를 만들어 self 를 쓰면 빨간색으로 밑줄이 그어진다(하지만 잘 실행된다.) 이제는 fcm을 통해서 테스트를 하고 원하는시간, 그리고 따로 암호화를 한다거나 서비스워커 구독코드를 직접 써야한다거나(register) 하는 단점을 없애고 좀더 편리하게 이용할수있고, 웹과 앱 안드로..

항해/항해99 2022.01.16

TIL 31 JS 다른종류 모바일 기기 감지 구별하는 방법

개발환경과 사용환경 디바이스에 따라 어떤 기능이 되는것도 있고 안되는것도 있다(예를들어 현재 ios에선 볼륨조절과 푸쉬알림을 쓸수없다). 이럴때 해당 서비스에 대해서 해당 디바이스에 따라서 보여지는 거나 기능을 다르게 해주어야 하는데, 여러가지 방법이 있다고 하는데 먼저 내가 선택한 방법을 적어볼까하다. 매우 간단하면서도 참신한 방법이라고 생각한다. navigator.userAgent 와 정규식 이용 const isMobile = /iPhone|iPad|iPod|Android/i.test(window.navigator.userAgent) 형식은 이러하다. 정규식 // 안에 테스트하고싶은 디바이스 이름을 적고, .test() 함수를 써서 navigator.userAgent에 해당 디바이스가 있는지 확인 하..

항해/항해99 2022.01.13

TIL 30 환경에 따른 기능제한 IOS, Android, macOS etc..

현재 진행중인 프로젝트의 기능중 하나가 해당음원의 볼륨조절이다. 하지만 이 볼륨조절이 사용 환경에따라 될수도 있고 안될수도있다. 순수 JS 를 사용하여 input 태그의 type range로 하여 사용할때나 커스터마이징을 위해서 input 태그를 쓰지 않고 mouse 이벤트와 touch 이벤트를 통해 해당 x,y 좌표(y는 볼륨에선 쓰지않는다)를 받아 그값을 style.left 값에 넣어주고 그 left 값을 audio객체에 닮긴 변수의 .volume 에 넣어주게 하여 조절하게 했다. 하지만 문제는 웹브라우저에서 잘 기능이 되고 안드로이드 모바일을 통함 웹 pwa 를 통해서도 잘되지만 문제는 IOS아이폰 환경에선 볼륨컨트롤을 할수 없다는 것이다. iOS-Specific Considerations iOS-..

항해/항해99 2022.01.13

TIL 29 서비스워커, PWA

현재 우리가 진행하고있는 프로젝트의 화면이다. 왼쪽은 모바일로 볼때와 오른쪽은 웹사이트나 일정 크기이상일때 보이는 화면이다 우리는 웹앱으로 앱에서 좀더 사용자들이 많고 접근하기 좋게 만들기 위해서 반응형웹이면서 PWA로 앱처럼 설치하여 쓸수있게 하기로했다. 이때 서비스 기능중 푸쉬알림 기능을 사용하기로 했었는데 서비스워커를 이용한 방법을 사용해야했다. 테스트하면서 적용한 순서는 다음과 같다. 먼저 npx create-react-app my-app --template cra-template-pwa 를 터미널에 입력하여 새로운 cra 프로젝트 파일을 pwa 형식으로 만들어준다. https://create-react-app.dev/docs/making-a-progressive-web-app 그런후 공식문서 사..

항해/항해99 2022.01.11

TIL 28 img 태그 src 쓰는법

특정한 경로 안에 있는 src 경로를 쓸때, 인터넷에 있는 url을 쓰는게 아닌 정적파일 static으로 저장하여 쓸때 src에 require를 사용하여야 절대경로? 를 알수있게된다. Webpack file-loader outputs [object Module] I am using webpack with HtmlWebpackPlugin, html-loader and file-loader. I have a simple project structure in which I use no frameworks, but only typescript. Thus, I write my HTML code directly to i... stackoverflow.com 위에서 보듯이 리액트에서 정적인 파일 경로의 src를 불러..

항해/항해99 2022.01.05

WIL 9 실전프로젝트 2주차 회고록

지난 1주일동안 기획밖에 한게없었기 때문에 요번 주차때 80% 기능구현을 하기로 계획을 잡았다. 각각 맡고싶은 파트가 미리있다면 이야기를해서 진행을 하고 그게 아니라면 우선순위 페이지마다 기능을 처리하는 방식으로 했다. github의 projects 를 통해 각각 진행상황을 todo리스트, in progress, done 식으로 작업과정을 알수있게 활용하기로했다. 내가 맡아서한 부분을 이야기하면, 원하는 기상시간에 맞춰 최적의 수면시간을 계산해주는 페이지 및 기능, 푸시알림 기능, 마이페이지 기능(알람설정), asmr 음원 볼륨 조절 및 삭제 기능 팝업페이지, 로그인 유도 팝업 페이지, 그 해당하는 리덕스 및 api 추가 및 관리를 했다. 디자이너분들이나 프론트분들과 수정사항이 생기거나 추가,변경이 있을..

항해/항해99 2022.01.03

TIL27 export, import, useState 값 props로 사용,변

우리가 보통 함수를 export 하고 import 해서 쓴다고 배우게 되는데 오늘은 이걸 이용하여 js 파일이 다르더래도, 기존값을 가져오거나 변경해도 js가 다른곳에서도 변경된게 적용되도록 해주기로 했다. 이걸 쓰는 이유는 해당 음원 볼륨을 조절하기위한 팝업에서 삭제를 눌르게 되면 음원은 멈추게 되고 음원 리스트에서도 클릭되었던것이 클릭되지않은것처럼 색을 변화 시켜주어야한다. 하지만 이때 음원리스트js와 음원볼륨조절js가 다르기때문에 이를 통제하기위해 선택한것이 1. 함수를 export로 넘겨주어 쓰는것 2. 해당 js 태그에 useState로 쓰고있는 state를 props로 넘겨줘서 쓰는 것 이였다. 먼저 테스트겸 해당 팝업에서 delete를 눌르면 test라는 함수로 url를 보내서 해당 url ..

항해/항해99 2022.01.02

TIL26 토큰, 토큰을 불러오는 위치의 중요성

보통 웹사이트나 앱을 이용하게 되면, 로그인을 했는지 안햇는지에 따라 컨텐츠를 이용할수있고 없고의 제한이 생긴다. 이때 보통 로그인을 했는지의 여부를 프론트쪽이나 백엔드쪽에서 체크하는게 토큰이 있는지 없는지 여부를 묻는다. 만약 해당 토큰을 가지고있지 않다면 해당 컨텐츠 접근에 제한을 두게 된다. 또는 api 연결을 할수가 없게 된다. 현재 진행중인 프로젝트에서는 localStorage에 로그아웃으로 해당 토큰을 지우지 않는한 영구적으로 저장하기로 했다. (나중에 푸시알림을 위해서 이렇게 했다.) 이때 로그인을 하게되면 받아오는 response 에서 해당 토큰을 localStorage에 저장하고, 있다면 db요청을 보내거나 해당페이지를 넘어갈때 localStroage.getItem("token")을 사용..

항해/항해99 2022.01.02