Youngble_개발스토리

드디어 99일이란 시간이 지나고(설날로인해 101일까지 진행하긴했다) 2022.02.09 항해99 4기로 수료를 하였다. 정말 짧다면 짧고 길다면 긴 100일동안 스스로 성장하는 시간과 혼자가아닌 팀으로써 협업해나가면서 여러가지 경험을 했던 기간이었다. 대표님이 마지막으로 졸업생들에게 앞으로는 어떤 개발자 혹은 마인드를 가지면 좋은지를 이야기해주셨고 주차마다 함께한 몇몇 동료들과 감사인사와 앞으로의 개발자로써의 응원을 남기며 끝마쳤다. 홀로 산책로를 걸으면서 그동안 있었던 일들을 생각하니 여러번 울컥했다. 탄탄대로 잘 흘러가면 좋겠지만 사람인생이라는게 순조롭지만은 않고 그 과정을 끝까지 완주할수있었던 스스로에게 위로를 하고싶었다. 항해99에 대한 후기는 나중에 자리를 잡고 여유가 생긴다면 좀더 디테일하게..

모든 프로젝트가 끝나고 바로 이력서 포트폴리오를 작성해서 예상 질문과 함께 고치고 또 고친다. 뭔가 정신없이 제대로 준비 안된상태로 쓰니깐 내가 잘하고 있나 라고 생각도 들고, 과연 누가 날 면접으로 부를까 생각도 하고 면접가면 어떻게 대답을 해야할까 라는 생각이 많아진다. 뭔가 마지막 마무리를 잘해야하는데 걱정이 앞서니 심리적으로 준비도 마무리도 잘안되는거같다. 원티드, 로켓펀치 등을 통해 15곳을 지원하라고 하는데 일단 4군데만 지원했다. 1~2일만에 내가 원하는데를 찾지않고 막 넣는것도 아닌거 같고 뭔가 준비도 안하고 많이 지원하면 면접볼땐 어떻게 하라는건지 생각이 들어서 일단 예전에 배웠던 내용들 다시 보고있다. 예상질문도 만들어야하는데 음.....내일까지 가능할까? 아직 학업도 마치지 못해 이도..

fcm 서비스워커 등록, 설치 fcm 과 서비스워커 글이 중복되듯이 계속 쓰는거 같다. 수정사항이 생기고 추가될게 생기다보니 이렇게 중복되는 이름으로 쓰게 되는데 오늘은 그전에 썼던 fcm을 구독을 하고 취소하는 방법 그렇게 하기위해선 어떤 코드를 써야하는지 써보도록 한다. 먼저 메인화면에서 fcm 정보를 가지고 초기화를 해주는 코드를 썼다. 이렇게 하면 자동으로 fcm의 서비스워커 또한 생기게 되는데 아래스크샷을 참고하면 fcm 공식문서에서 fcm 서비스워커는 firebase-messaging-sw.js 로 정의 되어야한다고 한다. 이를 위해 참고주소: Messaging | JavaScript SDK | Firebase Reference for Messaging firebase.google.com pu..

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

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

볼륨바를 만들고 x,y 좌표를 이용할때 해당 마우스나 터치 위치 이벤트를 알아야하기때문에 자바스크립트에서 제공하는 이벤트들을 써볼까한다.

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

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

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

특정한 경로 안에 있는 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를 불러..