현재 운영중인 서비스는 처음에 Flutter로 개발되었었다.점주용 서비스를 담당하셨던 개발자분이 Flutter로 만드셨었고 시간 단축을 위해 고객용 앱 껍데기도 Flutter로 만들었었다.그런데 앱에 기능을 넣을 일이 점점 늘어나면서 웹을 React로 개발하면서 앱을

귀찮아서 웹에서 애플로그인 처리한 것도 안남겼는데..이번에 좀 고생을 해서 기록을 남긴다.우리 서비스는 웹으로 개발 후에 Flutter 웹뷰로 띄워서 서비스 하고 있다.(웹뷰 띄울 땐 inappwebview를 사용하고 있다.)이번에 결제 기능을 붙여야해서 토스 결제위젯

인풋 스타일에 -webkit-user-select: text; 를 추가해주면 된다.

내 경우에는 웹뷰 옵션으로 안드로이드 옵션에서 supportMultipleWindows 를 추가해 줬었다.이걸 지우니 shouldOverrideUrlLoading 가 호출됐다.

회사의 서비스를 이용하고 있는 업체 중 최근에 노트북을 구매하고 윈도우 패치를 한 고객들에게만, 고객 검색창에서 고객을 선택했을 때 정보가 제대로 바인딩 되지 않는 이슈가 발생했다.나름 급한 이슈였기 때문에 프론트엔드 두명 모두 붙어야 했다.특정 OS 패치에서만 발생하

개발하면서 이슈가 많긴 한데 일단 간단한 것부터 남긴다.현재 내가 맡은 서비스는 Nextjs로 개발했고, 얼추 1단계 개발은 완료했다. 앱으로 서비스할 예정이라 서비스를 Flutter로 래핑하는 작업을 하고 있다.그런 작업 중에 발견된 이슈들.다른데에선 그렇지 않은데

채용글에도 제법 보이고, 얼마전 면접을 볼 때도 react-query에 대해서 아는지 질문이 들어왔다.어...react-swr은 예전에 본적이 있는 것 같긴 한데 뭐지?결론을 위로 당겨써보자면, react query 를 사용하면 아래와 같은 장점이 있다.1\. 나는 이

실행 컨텍스트(execution context)란? >실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고(스코프 체인), t

본 글은 공부하면서 작성한 글로, 너무 깊게는 들어가지 않으려 합니다.최신 ECMAScript 표준은 다음과 같은 자료형을 정리한다.기본 자료형인 여섯가지 데이터타입 \- Boolean \- Null \- Undefined \- Number \- String

렌더링에 관해선 이전 글에서 작성했지만 다시 한번 간단하게 말하고 가자면, 렌더링이란 사용자가 웹 페이지에 접속했을 때 서버로부터 HTML 파일을 받아 화면에 그려주는 것이다. SSR(Server Side Rendering) 과거 그리고 현재도 그렇지만, 많은 웹사이

자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하는 인터프리터이다.대중적으로 알려진 엔진은 구글의 V8엔진인데, 아무래도 가장 많이 사용되는 크롬에서 사용되고, Node.js에서 사용되는 엔진이기도 하기 때문인 듯 하다.하지만 렌더링 엔진과 마찬가지로 브라우저마다

렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다.브라우저는 서버로부터 HTML 문서를 다운을 받는다.렌더링 엔진은 HTML 문서를 파싱해서 DOM 트리를 만든다.그 다음, 외부 css 파일과 함께 포함된 스타일 요소를 파싱하여 CSSOM 트리를

요소의 투명도를 조절하는 스타일 속성이며, 0.0부터 1.0 사이의 값으로 설정할 수 있다.요소의 위치를 설정할 수 있다.static : 기본 값이며, 마크업 순서대로 배치된다. top, left, right, bottom, z-index 값에 반응하지 않는다. rel

display는 요소의 종류를 선택하는 속성이다.block 형식은 한 줄 모두를 차지하며, 넓이와 높이 설정이 가능하다.inline 형식은 내용만큼 차지하며, 넓이와 높이 속성을 지정할 수 없다. 또한 margin 속성은 좌우로만 지정할 수 있다.inline-~ 형식은

css편은 자주 사용하는 속성들에 대해서만 기술css란 Cascading Style Sheets의 약자로, HTML문서를 꾸밀 때 사용하는 스타일 시트 언어이다.white-spacenormal : 기본값으로 연속하는 공백을 하나로 처리, 자동으로 줄을 바꿈nowrap

시맨틱(Semantic)은 "의미의, 의미론적인" 이라는 뜻, 즉 시맨틱 태그란 의미를 가지는 태그이다.시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다. 시맨틱 웹이란 웹이 존재하는 수많

본 글은 MDN의 자료를 요약한 것입니다.😄 HTML(Hypertext Markup Language)이란?HTML은 어떠한 형식으로 보이게 하거나 특정한 방식으로 동작하도록 하는 Element들로 이루어져 있다.각 Element는 속성을 가질 수 있는데, 속성은 실제

음...오늘 오후 내내 고생했던 이야기를 남겨본다.현재 진행중인 프로젝트는 React와 Typescript, Mobx 를 사용하여 진행 중이다.api를 공통으로 사용하는 페이지가 많아서, 공통 스토어를 두고 각 페이지에서 사용할 스토어들에서 상속을 받았다.common

아무래도 아직까지는 Mobx보다 Redux를 사용하는 사람들이 많아서 Mobx에 관한 자료가 적습니다.게다가 Mobx가 자유도가 높은 것인지 정형화 된 패턴이 보이지 않기도 하고, 리액트 Hook이 나오면서 클래스형 컴포넌트를 사용할 때와 Hook을 사용할 때 Stor

소셜로그인 기능을 붙이는건 처음이라 검색을 해봤더니, 온통 react-facebook-login 사용방법밖에 없어서 직접 써봅니다.(사실 위 라이브러리 가져다 쓰는게 편하..ㅂ...)본 글에서는 간단한 정보만 불러오는 내용만 기재하니 자세한 내용은 페이스북 개발자 사이