이번 포스트에서는 React Native Webview에서 페이지 전환 애니메이션에 대해서 다뤄보려고 합니다. 처음에 검색해서 얕봤다가 되게 고생한 기능 중에 하나네요 😂 웹 보다 사용자 경험이 좋다고 느껴지는 앱에서 웹뷰를 사용하게 되는 이유는 당연하게도 배포에 대한 부담이 적기 때문이라고 볼 수 있습니다. 앱의 문제가 생기거나 A, B 테스트를 해야 하는 상황에서 사람이 직접 검수하는 스토어 심사를 기다리면 너무나도 비효율 적이기 때문에 많이 채택이 되는 이유라고 볼 수 있습니다. 그러나 이 웹뷰를 통해서 앱을 개발했을 때 중요한 포인트 중 하나가 과연 Native 스러운가?를 빼놓을 수 없습니다. 좋은 앱을 만들어두고 사용자 경험을 해치는 걸 원하는 client 개발자는 없겠죠. 그럼 이번에 어떤 ..
왜 만들게 되었나? Frontend 개발자로서 일을 하게 되다 보면 저희는 수도 없이 API를 마주치게 됩니다. 하나의 완성도 있는 프로젝트를 만들다 보면 기획이 변경되고, API 스펙이 변경되는 일들은 어쩔 수 없는 문제 들이죠. 😅 TypeScript가 필수 스택으로 자리 잡게 된 지금으로서는 API에 대한 request, response 타입에 대해서도 정의해서 저희는 코드를 써내려 가야 하죠. 카카오 기술블로그 - Mocking으로 생산성까지 챙기는 FE 개발 https://tech.kakao.com/2021/09/29/mocking-fe/ 만약 API 스펙에 변경이 생긴다면? request, resposne 타입 재정의 API 코드 수정 비지니스 로직 변경 에 대한 일련의 과정은 빼놓을 수 없는..
이번 포스트에서는 저번 포스트에서 Json에 대해 알아보았으니 이번에는 AST 추상 구문 트리와 nearly.js를 이용한 Json Parser를 만들어보는 것을 다뤄보도록 하겠습니다. https://ww8007-learn.tistory.com/13 [1] Json에 대해서 알아보기 - 기초 웹 개발을 하다 보면 Json을 수도 없이 마주치게 되는데요 요번 글에서는 Json에 대해서 좀 더 깊이 알아보고 이를 파싱할 수 있는 Parser까지 만들어보는 포스트를 1, 2 편에 나눠서 다뤄보려고 합니 ww8007-learn.tistory.com parser를 만들기 위한 첫 번째 관문 : AST - 추상 구문 트리 AST가 뭘까요? 위키백과에 따르면 다음과 같습니다. 컴퓨터 과학에서 추상 구문 트리 (abs..
웹 개발을 하다 보면 Json을 수도 없이 마주치게 되는데요 요번 글에서는 Json에 대해서 좀 더 깊이 알아보고 이를 파싱할 수 있는 Parser까지 만들어보는 포스트를 1, 2 편에 나눠서 다뤄보려고 합니다. 그럼 일단 Json에 대해서 알아볼까요? Json 이란? Json 이란 경량화된 데이터 교환 방식으로 JavaScript Object Notation의 약자입니다. 사람이 읽고 쓰기 쉽고, 기계가 파싱하고 생성하기 편리하다는 장점을 가지고 있죠. Json은 JS의 언어의 부분적인 서브셋으로 ECMAScript의 표준 사양인 ECMA-262에 정의되어 있습니다. Json은 2000년대 초반에 개발되었고 XML이나 YAML과 같은 기존의 데이터 표현 방식에 대한 대안으로 제안되었습니다. XML 태그..
1. 무한 스크롤 이란? 흔히 저희가 웹 서핑을 하다 보면 수많은 글 들이 세로로 끝이 없이 나열되어 있는 것을 보실 수 있습니다. 그렇다면 이들은 어떻게 구성되는 걸까요? 1. 한 번에 모든 게시물을 불러온다. 2. 10 ~ 15개씩 끊어서 부른다. 단순하게 생각해 봐도 게시물의 개수가 500개 이상이 된다면 한 번에 모든 데이터를 단일 통신으로 받아오는 데는 latency와 서버에 부하가 될 수 있겠죠? 요번에는 FE 관점에서 무한 스크롤을 적용할 수 있는 방법에 대해서 알아보려고 합니다. 2. 어떤 식으로 구성할까? 무한 스크롤을 적용하는 방법은 생각보다? 간단합니다. 다음과 같은 방식으로 스크롤을 쭉 내리다가 초록색이 보였을 때 다음 아이템들을 불러올 수 있는 API를 call 하면 됩니다. 물론..
전에 RN을 이용해서 프로젝트를 진행해 본 경험이 있는데 너무나도 많은 오류를 봐서 손 놓고 있었는데 요번 프로젝트에서도 webView와 firebase OAuth를 이용할 일이 생겨서 다시 손을 잡게 되었습니다... 이번 포스트에서는 firebase + expo auth를 이용해서 소셜 로그인을 구현하는 방법을 다뤄보려고 합니다. 좀 더 프로젝트 setting을 편하게 가져가보려다가 역시나 많은 오류를 만났기에 😂 그럼 같이 차근차근 해나 가볼까요? 환경은 expo : ~48.0.15 react-native : 0.71.1 react : 18.2.0 입니다. 요번에 expo sdk48에서 새로운 기능으로 expo-router가 새로 나와 프로젝트에 적용해 본 버전입니다. 기본적인 expo 설치의 경우 ..
저번 4월 30일에 점핏 개취콘에 당첨이 되어 컨퍼런스에 다녀왔습니다. 이번이 4번째 컨퍼런스인데 희한하게 오프라인 컨퍼런스에 당첨이 잘되는 편이어서 신기하네요...(4번 신청해서 4번 당첨) 오늘은 간략하게 후기를 적어보려고 합니다. 그리고 요번에 테오 님을 뵙고 왔습니다 😃 현재 테오의 프론트엔드 톡방에 참여 중이고 저번에 테오의 스프린트 5기로 참여해서 좋은 경험을 가지고 있었는데 옆 자리가 비어계시길레 냉큼 가서 앉았습니다 ㅎㅎ 요즘 개인적으로 고민이 많아서 조언을 구했었는데 정말 성심성의껏 답변을 해주셔서 너무나도 감동을 많이 받았습니다. (감사합니다 테오🙇♂️) 행사장 소개 위치는 강남이었고 지하에서 컨퍼런스가 개최되었습니다. 입구는 대략 요렇게 생겼고 들어가니 책을 주시더라고요? 되게 여러..
발단 회사 점심시간에 회사 분과 이야기를 하는 도중에 "Github Pull Request를 자동으로 승인해 주면 있으면 어떨까?" 하다가 간단하게 만들어보기로 하고 코드가 완성 되었습니다. 물론 이걸 가지고 승인을 하지는 않았습니다 저는 좋은 코드 리뷰 문화를 지향합니다 🤣 도전하실 분들은 팀원들의 원망을 각오하셔야 할지도... const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); (async () => { const anchorElem = document.querySelector(".markdown-title"); const hrefValue = anchorElem.getAttribute("href"); const regex..
스토리북 상태 변경 이번 팀 프로젝트를 하면서 미루고 미루던 공통 UI 컴포넌트들을 스토리북을 통해 제공을 하기로 마음을 먹었습니다. 단순하게 컴포넌트에 대한 UI 적인 스토리북을 만드는 것은 정말 많은 곳에서 찾아볼 수 있는데 Controls를 통해 제공하는 상태값을 통해 화면을 핸들링할 수 있는 요소에 대한 예제는 정말 없는 것 같아서 이번 기회를 통해 정리를 해두려고 합니다 😃 1. 컴포넌트 준비하기 일단 요번 예제에서 사용될 컴포넌트 입니다. 토글 형식으로 ON, OFF 상태를 바꿀 수 있는데요 아래의 코드를 보고 어떤 UI를 가지는지 혹시 예상이 가시나요? interface Props { offText: string; onText: string; isToggle: boolean; setToggl..
스켈레톤 UI에 대하여 우리가 흔히 웹사이트나 앱들을 이용하면 서버에서 필요한 응답을 받아오기 까지 시간이 걸리기 때문에 본문 내용 대신 애니메이션이 포함된 로딩되는 화면을 바라볼 때가 많습니다. 지나가며 본 글로 사용자는 3초 이상 빈 화면을 바라보게 되면 페이지를 이탈하게 된다는데 어찌 보면 저도 "이거 왜 이래" 하면서 껐다 켜는 경우가 많은 것 같네요🧐 이를 개선하는 과정에서 SSR, SSG, ISR 같이 여러 노력이 있었지만 결국 클라이언트에서 비동기 데이터가 필요한 시점에서는 이를 해결할 무언가가 필요한 거죠. 로딩 상태를 표현하는 법 우리가 흔히 봐왔었던 로딩 표시는 어떤 것들이 있을까요? 1. 로딩 스피너 2. 프로그래스 바 3. 스켈레톤 UI 그럼 WHY 스켈레톤? 일단 제 마음에 들었습..