✅ 웹개발자가 모바일 웹뷰 디버깅하기 회사 서비스는 웹뷰 환경이다. 기존에 웹뷰 디버깅 환경이 구축되어있지 않아 처음엔 alert찍어가며 값을 확인해보곤 했다. 그러나 웹뷰 브라우저를 디테일하게 디버깅 해봐야 하는 상황이 왔고, 디버깅 방법을 알아보았다. 시도1. chrome 디버깅을 하기 위해선, 앱개발 쪽에서 setWebContentsDebuggingEnabled(true) 함수를 실행해야 한다. 그러나 회사 유니티팀에선 디버그모드를 켜는 기능이 없어서 저 함수를 실행할 수 없다고 한다. 덧붙여서 안드로이드에 디버깅 툴을 쓸 수 있는 방법이 없을거라 한다..! 시도2. charles라는 Proxy툴을 사용해서 디버깅하는 법을 선택하기로 했다. 모바일 -> 프록시 서버(charles) -> 서버 모바일..
최근 웹앱에서 백그라운드 푸시알림 기능을 구현하게 되었다. 푸시알림 기능을 위해 pwa 방식 웹앱이 앱처럼 설치될 수 있도록 하고자했다. (근데 알고보니 pwa가 아니여도 백그라운드 알림이 구현가능한다고 한다) pwa방식 웹앱이 설치될 수 있기위해 manifest.json 파일을 적용시키면 된다. ✅ manifest.json 이란? - 앱에 대한 정보를 제공함. - 웹앱을 사용자 모바일의 홈 화면에 저장하는 데 필요한 필수 정보와 사용자 경험 측면에서 어떻게 보일지에 대한 정보가 담긴 json 파일. (배경색, 앱 이름, 앱 아이콘, 등등...) manifest.json 예제 { "name": "Rice Bowl", "short_name": "Rice Bowl", "description": "Fluffl..
사실 나는 웹뷰에 대해 막연히 '모바일위에 브라우저 띄우는거~' 라고만 생각했다. 그러나 최근에 여러 상황으로 인해 이 개념에 대해 제대로 파악할 수 있는 계기가 되었다. 상황1 회사에서는 유니티(모바일)과 웹뷰(브라우저)간에 통신이 안되는 에러를 해결하며 이 둘이 통신하는 원리에 대해 알게되었다. 또한 우리회사 제품은 웹앱이 아닌 웹뷰 개발 방식이다. 웹앱과 웹뷰의 차이에 대해 알게되었다. 상황2 그리고 최근 사이드 프로젝트를 진행하면서 팀원 모두 어플 개발을 원했는데, 나는 웹 개발자라 웹뷰 형태로 가는 것에 대해 설명하느라 좀 애먹었던 시간이 있었다. 프론트 개발자 끼리라면 그냥 용어를 말하면 되지만, 웹,앱 개발을 모르는 분들에게 설명하는건 좀 당혹스럽기도 했다. 나에겐 당연한 개념이 이들에겐 당..
axios로 params를 붙여 get요청한 url을 unity팀에 그대로 보내줘야 했다. api호출시 url의 쿼리스트링은 내가 직접 작성한게 아니라 axios라이브러리가 처리해주었고, 게다가 url안에 특수문자가 있어서 인코딩한 url을 보내야 하는게 어떻게 할지 고민이였다. 그 해결 방법은 URLSearchParams 1. 필요성 URL 쿼리스트링 문자열을 쉽게 만들수 있음. 쿼리스트링 형식의 URL에서 쉽게 키,값을 조회할 수 있음. (url에서 특수 문자나 공백을) 자동으로 인코딩해줌. 2. 쿼리스트링 url 만들기 ✅ 생성자 함수 new URLSearchParams : url에서 쿼리파라미터 관련 정보를 파싱한 인스턴스 객체를 리턴함 new URLSearchParams(); // URLSear..
vuelayers 라이브러리 사용도중 data가 변경되었지만 반응형으로 리렌더링 되지 않는 문제가 발생했다. 비슷한 로직이 다른곳에서는 잘 작동 됐는데, 한 곳에서만 작동되지 않아 분명 라이브러리의 문제라고 확신한다. (vuelayers 라이브러리에 대한 불만이 아주 많아진다... vue2에 멈춰있고 유지보수도 안된다 -_-) 방법1. key속성 컴포넌트에 key를 붙여 리렌더링이 필요한 시점에 key를 업데이트 하기 v-for에서 key를 붙이는 이유는 실제 dom tree와 가상 dom tree 간의 변화를 key값만을 활용해 빠르게 캐치하기 위해서다. 이런 특성을 이용해 key를 변화시켜 리렌더링 시키는 방법이다. (이게 강제 리렌더링 시키기 위한 베스트 방법이라 한다.) 방법2. vue 내장 메서..
✅ 문제-해결 문제1. api get요청시 쿼리스트링 문자로 호출하면 에러나는 문제 처음엔 일단 통신이 잘 되는지만 확인해보려고 axios url에 파라미터를 쿼리스트링으로 직접 작성해줬다. 그런데 400 에러가 발생하였고, 이것 때문에 파라미터 값에 문제가 있는 줄 알아 애먹었다. 그러다 axios의 params로 파라미터를 담아줬더니 정상적으로 응답이 되었다. 결국 두 url 다 동일한 주소일텐데 왜 다른걸까 의문이다. → 두 url이 실제 api를 요청할 때 인코딩여부가 다른데 이게 영향이 있는 것 같다. params : 인코딩을 해준다. (axios 라이브러리에서 해주는듯) 쿼리스트링 : 인코딩 안해줌, 인코딩을 안하면 문제가 되는 문자열이 있어서 오류난 것 같음 (url주소에 backslash"..
6.4버전의 라우터를 쓰면 data Apis 기능을 사용할 수 있다. createBrowserRouter createMemoryRouter createHashRouter createStaticRouter 이 라우터는 data Apis 사용X 1. createBrowerRouter 모든 리액트 웹 프로젝트에서 권장되는 라우터임 History API를 사용해서 히스토리 스택을 관리할 수 있음 리액트 트리 외부에 라우터를 만들어야 됨 : component fetching and render fetchchains (https://remix.run/blog/remixing-react-router#component-fetching-and-render-fetch-chains) import React from 'rea..
공식문서 : https://styled-components.com/ vue styled-component: https://github.com/styled-components/vue-styled-components 1. 기본 사용법 - 컴포넌트를 생성하는 동시에 스타일을 정의할 수 있음 import styled from "styled-components" const Father = styled.div` display: flex; color: royalblue; ` function App() { return( 1 2 ) } 2. prop : styled-component 템플릿 리터럴의 함수에서 props를 받을 수 있다. import styled from "styled-components" const Fa..
이 셋 각각의 개념을 알고있다고 생각했는데, 또 모아놓고 생각해보니 뒤죽박죽이 되어버렸다. 이 꼴은 개념을 정확히는 모르고 있다는 말이겠지! 이번에 확실히 정리해보겠다. ✅ rest 파라미터 - 파라미터에 ...를 이용해서 받으면 나머지 인자를 받아 하나의 "배열"로 만들어 사용하게 됨. - ( "배열"이기 때문에 배열의 메소드 사용가능함.) - rest 파라미터는 항상 마지막에 있어야 함. function x(a, ...rest) { console.log(Array.isArray(rest)); // true console.log(a, rest); // 1, [2,3,4,5] } x(1, 2, 3, 4, 5); ✅ arguments - 함수를 호출할때 입력한 모든 인자가 담겨있음. - rest는 배열, ..
