본문 바로가기

전체 글

 (62)
모바일 웹뷰환경에서 영상을 제공하는 여정 목차 글을 시작하며 : 글또 커뮤니티 소개 및 주제 결정 서비스 영상 삽입 과정에서의 고민과 선택 Video 태그를 활용한 서비스 영상 삽입 및 Layout Shift 개선하기 iOS에서의 자동재생 이슈 Lottie를 활용한 영상 제공 및 Dynamic Import를 활용한 성능 최적화 운영하던 도중 발견한 추가 이슈사항 (2024.4.17 추가내용) Re-Cap 글을 시작하며 : 글또 커뮤니티 소개 및 주제 결정 이전 글에서 이야기했던 바와 같이 혼자서 파편화된 정보를 계속해서 축적해 나가기보다는 보다 정제된 글로 발전시키면서 가지고 있던 기억을 더 장기화하기 위해 많이 고민해 왔고, 이를 더 잘 수행하기 위해 글또라는 커뮤니티에 속하게 되어 앞으로 5개월간은 주기적으로 글을 작성할 예정입니다 :) 글..
useTouchNavigation 개발기 일단 너무 오랜만에 글을 올리게 되어 상당히 어색하지만, 계속해서 개발을 열심히 하고있고 개인적으로 노션에만 아카이빙하던 것들을 앞으로는 다시 공개적으로 아카이빙하면서 부족한점을 채워가야겠다는 스탠스로 방향을 정했습니다. (_ _) 만들게 된 계기 현재 현업에서는 속도감있는 서비스제공을 위해 메인 앱 내에서 웹뷰로 일부 피처 서비스를 제공하고있고, 이러한 웹뷰에서는 본앱과 유사한 경험을 주는 유저에게 제공하는 것이 주요한 목적 중 하나였습니다. 따라서 유저가 많은 컨텐츠를 접하고 이를 유연하게 이동하기 위해 우측 고정 네비게이션 바가 필요했고, 이러한 요구사항을 구현함에 있어서 custom hook으로 headless하게 기능을 제공할 수 있겠다는 생각에 작업하게 되었습니다. 기능적 한계 현 버전에서는 ..
React-Query(tanstack/query)의 Suspense 옵션을 사용할 때 주의할 점 모던 프론트엔드에서 대부분의 리액트 코드는 서버와의 통신상태에 따라 View를 나누어 보여주어야하기때문에 아래와 같은 형태로 코드를 작성하는 경우가 빈번하다. /** React */return ( {isLoading && } {apiError && } {data && }) <p data-renderer-start-pos="207" data..
Why use .jsx 현재 근황 5월에 연이 닿아 입사하게 된 회사에서 정신없이 일하느라 블로그 관리가 너무 소흘했던 것을 2021년이 되어서야 새삼 느끼게 되었다. 내부 일정, 상황 속에서 여러가지를 느끼며 개발하고 있는 와중에도 레거시에 흔들리지 않기 위해 항상 코드의 근거를 찾고 기본 개념을 잊지 않기 위해 노력해왔고, 이들을 시간을 내어 다시 정리하며 앞으로 나아가기로 다짐하여 오랜만에 다시 글을 적는다. ( 오랜만이라 정해진 틀 없이 의식의 흐름대로 적어보기로 한다. ) 왜 이런 주제를 다루게 되었을까 ? 사실 이런 주제는 처음 리액트를 접할 때부터 알아야하는게 아닌가 싶지만, 보통 토이프로젝트의 기본 틀을 잡을 때에는 기본 개발 템플릿인 create-react-app 을 사용했고, 또는 구글링을 통해 접한 코드들에..
What is REST API API란 ? API는 Application Programming Interface의 약자로, 응용프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제공할 수 있게 만든 인터페이스이다. 그렇다면 이를 활용한 REST API란 무엇일까 ? REST API ? 그렇다면 REST API란 무엇일까 ? 여기서 REST는 REpresentational State Transfer의 약자로 이는 웹에 존재하는 자원에 고유한 URI를 부여해 활용하는 방식으로 자원에 대한 주소를 지정하는 방법론을 말한다. 간단히 말하면, 자원을 주고받는 것을 어떻게 미리 알릴 것인지에 대한 것이다. REST API의 구성 REST API는 3가지 요소로 구성이 되어있는데 이는 자원(RESOURCE) - URI ..
GraphQL로 Redux Local 동작 대체하기 요즘 관심이 가는 기술 중에서 REST API를 대체할 수 있는 기술이라고 하는 GraphQL에 대해서 공부해보았다. 아무래도 REST API를 사용할 때보다 Front-end 측의 자유도가 높아진다는 말을 듣고 흥미가 생겼는데 이보다 더 흥미가 생긴 점은 Redux를 대체할 수 있다 는 것이였다. 따라서 이전에 toy-project로 진행하던 Infinite-Scroll 실행 코드를 GraphQL로 대체해보기로 했다. 시작하며 ... 지금부터 소개하는 프로젝트의 구조는 지극히 개인적인 구조이며, 틀린 점이 있을 수 있을 수 있습니다. (틀린 점이 있다면 누구든지 구원해주시길 ...) 한가지 더 당부하고 갈 내용은 Local 동작만을 제어해보는 것이다. 여기서 내가 생각하는 Local 동작으로는 기본 S..
Data type Type? 오늘 주제인 Javascript의 Data type에 대해 알아보기 전에 Type이란 무엇이고, 이를 왜 나누어서 사용하는 것인지에 대해 간단히 알아보자. 먼저 위의 내용에 접근하기에 앞서 poiemaweb에서는 '프로그래밍' 의 정의로부터 설명을 시작한다. 프로그래밍은 변수를 통해 값을 저장하고 참조하며 연산자로 값을 연산, 평가하고 조건문과 반복문에 의한 흐름제어로 데이터의 흐름을 제어하고 함수로 재사용이 가능한 구문의 집합을 만들며 객체, 배열 등으로 자료를 구조화하는 것이다. 여기서 주목해야 할 부분은 프로그래밍은 변수를 통해 ~~~ 한다는 점이다. 그렇다면 변수 란 무엇일까 ? 변수는 값의 위치(주소)를 기억하는 저장소이다. 여기서의 값의 위치 란 메모리 상에서의 위치로, 메모리 상에..
Koa + MongoDB + Apollo Server + Graphql 연동하기 시작하며 ... 요즘 공부하는 것중 Redux를 대체할 수 있는 Apollo + GraphQL 을 활용해서 새로운 프로젝트를 만들어보려고 하는데 프론트 위주로 공부하다보니 아무래도 백엔드는 다룰 줄 아는게 한정적인 것이 현실 ... 일단은 이전 프로젝트에서 다뤄봤던 Koa + MongoDB + Mongoose 를 백엔드로 잡고 이를 연동하기로 함. 둘러보면 Koa랑 MongoDB를 연동하시는 개발자분은 별로 못봐서 과정을 글로 남기기로 했음. 코드 설명 1. 프로젝트 생성 일단 프로젝트를 시작하기 위해 프로젝트를 만들어준다. mkdir mongo-apollo-project cd mongo-apollo-project yarn init 2. 사용해야하는 모듈 세팅 이후 사용해야하는 모듈을 설치해준다. yar..

티스토리툴바