분류 전체보기
-
[2021.03.23] 라이브러리 모듈 단에서 ES5 에러 발생시 확인할 요소개발 블로깅/Modern script 2021. 3. 23. 07:28
프로젝트 내에서 로그 수집을 위해 fireBase 라이브러리를 이용 중이다. 그런데 해당 라이브러리를 거쳐서 요청된 API 쪽에서 아래와 같은 에러가 발생하는 것이었다. Object.values is not a function Object.values는 자바스크립트 공식 함수이며 ES6부터 사용할 수 있는 명령어임으로 ES5환경에서는 지원이 되지 않는다. 그런데 이게 라이브러리 단에서 이러한 에러가 발생하니 어떻게 조치를 해야할지 몰랐었다. 그러나 알고보니 방법은 굉장히 간단했다. 해결 방법 해당 fireBase를 이용하기 위해서 코드 내에 Account Set을 하는 부분이 있다. import * as firebase from 'firebase'; let database; let config = { a..
-
[2021.03.12] (TIL)Iphone 6이하 WebView 환경에서 스크롤 기능 막는 법개발 블로깅/오늘의 TIL 2021. 3. 12. 15:01
웹뷰 작업 중에, 영역 밖으로 튀어나와 스크롤이 생겨서 이 스크롤이 안되도록 막아야 하는 일이 있었다. 주로 스크롤이 안되고 화면이 고정되도록 하는 방식은 아래와 같다. // css file overflow: hidden; touchAction : none; // 웹뷰 환경 그런데 이 방식이 아이폰 옛날 버전에서는 먹히지 않는 것이다. 확인해보니 웹, 안드로이드, 아이폰 7 이상부터는 모두 괜찮은데, 아이폰 6 이하부터는 이게 먹히질 않는다. 시뮬레이션으로 확인해보니 touchAction: none 이란 속성이 옛날 IOS에서는 invalid 된다. 그래서 아래처럼 해결할 수 있었다. position: 'fixed'; top: 0; bottom: 0; left: 0; right: 0; 한방에 된다..ㅎㅎ..
-
[2021.02.18] (TIL)DOM 요소를 가로, 세로 반대로 배치하는 법개발 블로깅/오늘의 TIL 2021. 2. 18. 23:15
가볍게 CSS 관련 TIL 하나 작성해보려고 한다. 일반적으로 DOM 요소를 그리는 순서는 위에서 아래로, 좌에서 우로 되어있다. 그러나 특정 상황으로 인해 DOM 요소를 아래에서 위로, 혹은 오른쪽에서 왼쪽으로 그려야 할 때가 있다. 아래 코드를 통해 가볍게 DOM을 그렸다. const ARRAY = ["하나", "둘", "셋"]; const App = () => { return ( {ARRAY.map(str => ( {str} ))} ); }; export default App; CSS에서 display와 flex-direction 속성을 이용해서 해당 요소의 내부 요소들을 반대로 배치할 수 있다. 아래에서 위로 배치 .wrapper { display: flex; flex-direction: colu..
-
[2021.02.04] 브라우저 스크롤 기능 유지하면서 스크롤 바 없애기개발 블로깅/오늘의 TIL 2021. 2. 4. 23:06
, 태그를 작업하다가 내 맥북 환경 설정으로 인해 로컬에서 보이지 않던 UI적인 에러를 마주치게 되었다... 맥북 환경설정의 '일반'에서 스크롤 막대 보기에서 내 로컬 환경에서 View가 길면 스크롤 막대를 어떻게 보여줄지 선택할 수 있는 설정 기능이 있다. '마우스 또는 트랙패드에 따라 자동으로' 혹은 '스크롤 할 때'를 선택하면 위 이미지처럼 기존의 페이지 상태를 유지한 채, 플로팅 방식으로 스크롤 막대가 살짝 비춰지는 방식으로 보여진다. 그러나 여기서 스크롤 막대보기 설정을 '항상'으로 하면 아래 처럼 된다... 스크롤을 보여지도록 설정을 해버리니, 아예 브라우저 화면 크기에서 스크롤 막대 영역에 대한 공간을 만들어 버린다.. 이로 인해서 페이지 전체가 차지하는 공간이 맥북 환경설정으로 인해 차이가..
-
[2021.01.24] Next.js에서 페이지 뒤로가기 시 이전 페이지 스크롤 위치로 돌아가기개발 블로깅/오늘의 TIL 2021. 1. 24. 14:00
이번에 새로 입사하게 된 기업에서 프로젝트 코드 파악 겸 작은 기능 하나를 구현하는 첫 업무를 맡게 되었는데, 페이지에서 '뒤로 가기' 시 이전 페이지의 스크롤 위치 그대로 유지하도록 하는 기능이었다. 이전에는 무조건 페이지 이동이 생기면 스크롤 최상단으로 이동하도록 되어있었는데, 그러다 보니 상품 리스트가 나열된 페이지에서 어느 정도 하위에 배치된 상품을 클릭한 뒤 '뒤로 가기'를 하면, 스크롤 최상단부터 다시 서치를 해야 되는 문제가 발생하던 것이다. 이를 방지하고자, 이전 페이지로 되돌아가도 최근에 탐색했던 위치부터 이어서 탐색할 수 있도록 하기 위해 이 기능을 구현하게 되었다. 처음 이 기능에 대한 내가 들었던 생각은 이러했다. 1. 이전 페이지를 캐싱 시켜서, 뒤로 가기 시에 캐싱된 페이지와 스..
-
[2021.01.09] 시각적 요소의 중요성을 보여준 서비스 '타입캐스트'핵인싸 개발자의 길 2021. 1. 9. 15:38
최근 흥미로운 서비스 하나를 알게 되었다. 서비스를 둘러보면서 기술이나 사업성도 꽤 좋아 보였고, 특히나 프론트엔드 개발자로서 시각적인 요소에 대해 생각해볼 수 있는 계기가 되어서 가볍게 소개해 보려고 한다. 먼저 서비스를 소개하자면, 음성AI 기술로 텍스트 대본을 대신 읽어주는 타입캐스트라는 서비스이다. 작성한 텍스트를 인식하고 실제 사람이 말하는 듯 소리를 내어 읽는다. 물론 목소리 톤 높낮이나 말투 등 세부적인 설정이 가능해서 여러 가지 자연스러운 음성을 만들어낼 수 있다. 처음에는 이러한 서비스의 사업 방향성과 기술로만 봤을땐 운영하는 홈페이지가 약간 아래와 같은 느낌일 줄 알았다. 내가 생각했던 보통의 AI 서비스 홈페이지 위 이미지들과 같이, 일반적인 IT 스타트업의 렌딩 페이지 느낌. 웹 페..
-
[2020.12.28] React 내 Render Stream 처리 기법(with kefir.js)개발 블로깅/기타 개념 2020. 12. 28. 21:41
Render Stream이란, 기능을 동작시키는데 필요한 로직들을 Stream으로 처리하여 단순하게 렌더링 기능을 구현할 수 있는 방식을 말합니다. 아래 예시 코드를 보시면, 각 로직 처리 부분을 단순히 FromStream 컴포넌트의 Stream props로만 내려주기만 하면, FromStream 컴포넌트에서 어떠한 로직이든 상관없이 로직을 수행하고 따로 상태 변경 로직 없이도 리렌더링을 처리하기 때문에, 코드 로직이나 상태가 매우 Less되어 프로젝트 관리나 메모리 성능면으로도 엄청난 이점을 주게 됩니다. Render Stream기법은 반응형 프로그래밍(Reactive Programming) 기반으로 구현한 방식입니다. 해당 글은 작성자 Dmitriy Kharchenko 님의 'how to Render..
-
웹 성능 최적화를 위한 Image Lazy Loading 기법개발 블로깅/Improving Performance 2020. 11. 29. 10:37
현재 화면에 보여지지 않는 lazy loading된 이미지들은 웹 페이지 초기의 로딩 시간을 단축하여 웹 성능을 향상시킵니다. 이 글은 lazy loading 처리 기법과 관련된 모든 것들을 깊게 다루게 됩니다. 해당 글은 작성자 imagekit.io 의 동의하에 'Lazy Loading Images - The complete Guide'의 아티클을 번역하였습니다. 외국 아티클 번역은 처음으로 도전하다보니, 거의 발 번역 수준입니다.. 하지만 내용 이해에는 문제가 없을 듯 하여, 귀엽게 봐주시면 감사드리겠습니다! 이미지는 모든 웹 사이트와 어플리케이션에서 매우 중요한 요소입니다. 마케팅 배너 혹은 상품 이미지, 로고 등 이젠 웹 사이트 내에서 이미지가 없다는 것은 상상할 수 없을 정도입니다. 그러나 슬프..