Code/React - Node

    [React] 뒤로가기 막기, 감지하기 (history / react-router-dom)
    Code/React - Node

    [React] 뒤로가기 막기, 감지하기 (history / react-router-dom)

    오늘은 모달 React 에서 react-router-dom v6 이상의 환경에서 뒤로가기를 감지하거나 막는 방법에 대해 서술하려고 한다. 자사 서비스는 모바일 웹 / 앱에 최적화 되어있어 모바일 유저의 UX를 중요하게 여기고 있다. 문제는 웹의 경우에는 뒤로가기를 진행하면 페이지 자체가 이동되는 게 자연스럽다고 생각했으나, 모바일 기기 특히 안드로이드에서는 뒤로가기를 시도했을 때 기대하는 바가 다르다는 것이었다. 안드로이드는 페이지 이동이 아닌 레이어 정도의 뒤로가기 느낌이었다. 이전까지는 뒤로가기에 대한 핸들링은 페이지 단으로만 처리를 하고 있었는데 (커버하지 않았다) 가장 핵심 기능인 일정표 페이지에서 뒤로가기 기능을 통해 모달이 켜지거나 꺼지고, 모드가 바뀌는 등의 기능이 추가되었다. react-r..

    [React] 웹앱(webapp/webview) 에서 IOS/Android 비동기로 디바이스 위치 권한 받기 (kotlin / swift)
    Code/React - Node

    [React] 웹앱(webapp/webview) 에서 IOS/Android 비동기로 디바이스 위치 권한 받기 (kotlin / swift)

    결과물 (IOS / Android 앱 내 화면) 오늘은 웹앱에서 위치 권한 정보를 받아오는 기능을 구현한 과정에 대해 포스팅을 하려고 한다. 아 정말 상당히 복잡했던 기능이다. 이 꽉 깨물고 구현해냈다는 말이 알맞지 않을까 우선 개발 환경에 대해 설명을 하자면 자사 서비스는 React / typescript 를 기반으로 한 웹 애플리케이션이다. IOS 는 swift, Android는 Kotlin 을 통해 거대한 앱 껍데기를 만들고 내부는 모두 웹뷰를 보여주도록 구현 되어있다. 웹앱의 단점이라 하면 디바이스 권한 접근이 불가능하다라는 것인데, 설문 기능 내부 페이지에 위치 권한을 받아오는 기능이 추가되었다. 우선 요구사항에 대해 간략히 설명하자면, 1. 페이지 진입 시 위치 권한 약관에 동의한 유저이고,..

    [React] AF 플러그인으로 애니메이션 간단 구현 (lottie / bodymovin / adobe effects)
    Code/React - Node

    [React] AF 플러그인으로 애니메이션 간단 구현 (lottie / bodymovin / adobe effects)

    오늘은 video 태그의 autoplay 가 아이폰 저전력 모드 (iphone low power mode) 에서는 작동하지 않는 문제를 애니메이션을 구현하는 방법으로 해결하며 FE-designer AF 협업 세미나를 진행했던 내용을 포함해 작성하려고 한다. 상황 기존에는 메인에서 adobe-effects 를 사용해 만들어진 gif / video 형식을 가진 에셋들이 여러 개 포함 되어있었다. 다소 복잡한 애니메이션들이 많은 페이지였으나 당시 리소스를 생각해 현련한 애니메이션이 들어가는 부분은 1차로 gif 파일로 받았던 기억이 난다. gif로 받고 나니 용량이 큰 탓에 렌더링 속도에 이슈가 있어 이런 저런 방법을 찾아보다가 파일 형식을 webm 과 mp4로 바꾸고 렌더링 속도에 문제가 없을 정도로 용량도..

    [React/node] 하드코딩 방어하기 _ notion 문서 react 렌더링 (html-react-parser)
    Code/React - Node

    [React/node] 하드코딩 방어하기 _ notion 문서 react 렌더링 (html-react-parser)

    개발자 스타일마다 다를 순 있지만 개인적으로는 하드코딩을 피하기 위해 정말 노력하는 편이다. 데이터가 변경될 가능성 + 추후 유지보수 + 확장 가능성 등등을 고려하며 추후 데이터의 변경이 있을 때에도 간단하게 변경할 수 있는 구조를 생각하며 구현하는 편인데 처음엔 조금 공수가 드는 것 처럼 보여도 결국 조금만 지나도 큰 효용을 느낄 수 있다고 생각하기 때문이다. 문제 서비스 릴리즈를 앞두고 있던 때에 다양한 이용약관이 추가되어야 하는 상황이었는데 이용약관들은 법적 검토 등의 과정을 통해 다소 여러가지 형태의 각기 다른 레이아웃을 가진 채 노션 (notion)에 정의되어 있었고, 약관을 보여주는 공통 모달 컴포넌트 디자인은 타이틀, 소제목, 본문, bullet, numbering, 여백 등등이 따로 커스텀..

    [React/node] 한글 욕설 필터링 기능 구현하기 (node csv 파일 변환)
    Code/React - Node

    [React/node] 한글 욕설 필터링 기능 구현하기 (node csv 파일 변환)

    결과물 미리보기 자체 로그인 기능을 위한 기획 회의에 참여해 한창 얘기를 나누던 도중 나 : 닉네임에 욕설 필터링이 필요하지 않을까요? PM : 오!!!!!!! 아~~~~~ 예 그래야겠네요 나 : 어느정도까지 커버할 수 있는지 감이 잘 안 와서..리서치 후에 내용 공유 드리겠습니다 여러 정보를 찾아 보았을 때 욕설 필터링은 자체적으로 자연어 처리를 이용해 고도화된 엔진을 사용하여 검수하는 방법과 기타 라이브러리를 사용하는 방법이 있었는데 우선 자연어 처리를 하는 것은 현 상황에 적절하지 않은 방안이었기에, 라이브러리를 찾아보기 시작했다. bad-words (support only english) https://github.com/web-mech/badwords GitHub - web-mech/badwor..

    [React] svg 에셋을 컴포넌트로 변환하여 사용하기 - SVGR
    Code/React - Node

    [React] svg 에셋을 컴포넌트로 변환하여 사용하기 - SVGR

    현재 서비스의 클라이언트 프로젝트는 에셋은 거의 모든 것을 svg 파일을 사용하고 있는데, svg를 프로젝트에 유연하게 적용시키기 위해 여러가지 도전을 해봤던 것 같다. svg 파일을 Img 태그에 그대로 넣어 사용하기거나 svg를 임포트 해서 컴포넌트로 만들어 보기도 했었다. 컴포넌트화 시킨 svg 를 또 잘 활용할 수는 없을까 해서 current value 를 이용해 svg 프롭에 직접 접근하여 관리하는 방식도 고민했었는데 이건 디자인 쪽에서 넘어오는 에셋들이 current 를 사용해 관리하기 힘든 구조였기 때문에 사용하지는 못했다 (svg 스타일의 통일성 부족) vscode를 통해 코드 작성을 하는데, 에셋은 자동 임포트가 또 작동되지 않아서 파일 위치 찾아서 하나하나 경로 보고 import 문 작..

    [React / Typescript] IOS safari 상태바 색상 변경 / 커스텀 훅을 이용한 동적 처리
    Code/React - Node

    [React / Typescript] IOS safari 상태바 색상 변경 / 커스텀 훅을 이용한 동적 처리

    문제 : 반응형 웹 서비스 구현 중 IOS의 사파리 브라우저 환경에서 상단바가 페이지 배경색과 일치하지 않음을 확인 브라우저의 상단바 색상을 해당 페이지의 배경색과 동일하게 변경을 해야 했고, 페이지 별 상이한 배경을 갖고 있는 경우가 있기에 이를 핸들링할 수 있어야 했다. 1. 상태바 색상 변경 (change safari status bar color) - index.html html 파일 내부에 meta 태그를 위와 같이 작성할 경우 content의 색상을 고정으로 가지고 있을 수 있다. 나는 페이지 별로 다른 색상의 상태바를 보여주길 원했기에 커스텀 훅을 생성했다. 2. Custom hook 커스텀 훅 추후 유지 보수를 생각했을 때, 기본으로 설정된 흰색이 아닌 다른 색상이 필요한 경우만을 예외로 ..

티스토리툴바