개발
-
[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; 한방에 된다..ㅎㅎ..
-
웹 성능 최적화를 위한 Image Lazy Loading 기법개발 블로깅/Improving Performance 2020. 11. 29. 10:37
현재 화면에 보여지지 않는 lazy loading된 이미지들은 웹 페이지 초기의 로딩 시간을 단축하여 웹 성능을 향상시킵니다. 이 글은 lazy loading 처리 기법과 관련된 모든 것들을 깊게 다루게 됩니다. 해당 글은 작성자 imagekit.io 의 동의하에 'Lazy Loading Images - The complete Guide'의 아티클을 번역하였습니다. 외국 아티클 번역은 처음으로 도전하다보니, 거의 발 번역 수준입니다.. 하지만 내용 이해에는 문제가 없을 듯 하여, 귀엽게 봐주시면 감사드리겠습니다! 이미지는 모든 웹 사이트와 어플리케이션에서 매우 중요한 요소입니다. 마케팅 배너 혹은 상품 이미지, 로고 등 이젠 웹 사이트 내에서 이미지가 없다는 것은 상상할 수 없을 정도입니다. 그러나 슬프..
-
[2020.08.27] 우아한 테크러닝 3기에 선발되었다핵인싸 개발자의 길/Life Log 2020. 8. 27. 16:27
평소 리액트를 이용하여 여러 페이지와 서비스 기능들을 구현할 때마다, 항상 컴포넌트를 어떤 식으로 설계해야 재활용성을 높이고 효율적인 개발을 할 수 있을지 고민이 많았다. 같은 패턴일지라도 재활용을 하기에는 내부적으로 각기 다른 기능과 디자인 요소들이 너무나 다양했고, 이를 구분하기 위해 요구되는 파라미터들이 하나하나 추가될 때마다 코드의 가독성과 효율성이 극도로 떨어지는 것을 많이 느꼈기 때문이다. 나름 시간을 들여 고민도 많이 해보고 시도도 해봤지만, 항상 만족스럽지 않은 방향으로 컴포넌트를 사용하게 되었고 그때마다 정말 컴포넌트 설계를 잘하는 고수에게 제대로 배워보고 싶다는 생각을 많이 했다. 우아한 테크러닝 3기 그러다 며칠 전, 우아한 형제들에서 리액트와 타입스크립트를 이용하여 컴포넌트 설계와 ..
-
[2020.04.26] Javascript 깊은 복사의 함정... 모르고 사용하다 뒤통수 맞았다...개발 블로깅/오늘의 TIL 2020. 4. 26. 22:32
사이드 프로젝트 진행 중, 내게 엄청나게 스트레스를 안겨준 요소가 있었다. Javascript의 깊은 복사의 함정.. 우선 이 깊은 복사의 함정을 설명하기 위해서, Object 복사의 개념에 대해 간단히 설명을 해보려고 한다. Javascript의 복사 개념 얕은 복사(Shallow copy) 우리가 흔히 알고 있듯이, 객체가 담겨있는 변수를 다른 변수에 할당하면 call by reference (데이터 복사가 아닌 참조)가 일어나게 되어, 한 변수의 데이터를 변경하면 다른 변수의 데이터도 함께 변경이 된다. const person1 = {name:'inyong'}; const person2 = person1; person1.name = 'jung'; // result person2.name // 'ju..
-
트레바리 앱 개발하기 2일차 - 네비게이션 바 페이지 확정핵인싸 개발자의 길/트레바리 활동(2019.8~2020.07) 2020. 3. 5. 23:32
※ 해당 내용은 트레바리에서 정식으로 진행하는 프로젝트가 아닌, 제 개인적으로 진행하는 서브 프로젝트 임을 알려드립니다. 오랜만에 서브 프로젝트를 또 진행했다. 아직 정해야 될 것이 많아서 막막하다. 역시나 제일 고민은... 그 많은 기능들을 복잡한 느낌 없이 어떻게 전부 담아낼 것인가 이다. 그래도 오늘 나름 아이디어가 뻥 뻥 터져서 네비게이션 바 쪽 기획에 진도가 많이 나갔다. (나름...) 첫 번째 탭 - 각 정보 제공 요소들이 모인 페이지 첫 번째 탭은, 사용자가 앱을 실행시키면 제일 먼저 나타나는 화면이다. 그만큼 내가 제일 알기를 원하는, 또는 내가 알면 유용한 내용들로 보여주는 것으로 구성하도록 했다. (못 그림 주의..) 상단부터, 보여주는 요소들을 단락으로 나누어서 보여준다. # 첫 번째..
-
[2020.01.05] Next.js에서 document가 undefined으로 나타나는 이유개발 블로깅/Next.js 2020. 1. 5. 15:39
이번에 트레바리에서 각종 이벤트와 마케팅, 모임 안내 등 여러 수신 알림 채널을 계획 중이다. 기존에는 이러한 정보를 수신받기 위한 채널이 문자전송 밖에 없었는데, 앞으로는 문자뿐 아니라 이메일과 다른 요소 등 전송 채널을 더 넓혀서 유저들이 누릴 수 있는 유용한 정보를 놓치지 않고 더 최대한 많은 혜택을 누릴 수 있도록 하기 위함이다. 그래서 이러한 마케팅 정보 수신 안내를 기존 멤버들에게 알리고 동의를 받고자, '트레바리 마케팅 정보 통합 수신 동의' 기능을 구현하기로 했는데, 해당 기능을 구현 중 맞닥뜨린 이슈사항이 하나 있었었으니...바로 document가 undefined로 나타나는 것이었다.. 처음이 이러한 현상이 어떻게 일어날 수 있는지 몰랐으나, 알고보니 내가 CSR과 SSR의 동작원리에 ..
-
온디맨드 이미지 리사이징 아키텍처로 트레바리 웹 페이지 성능 최적화 시키기핵인싸 개발자의 길/트레바리 활동(2019.8~2020.07) 2019. 12. 23. 01:53
이번에 트레바리 서비스의 웹 성능 향상을 위해서, '온디맨드 이미지 리사이징'이라는 새로운 아키텍처를 구현하고 도입하게 되었다. 그래서 이번 글을 통해 트레바리 서비스에 적용된 과정을 글로 공유해보려고 한다. 트레바리 서비스의 이미지 처리에 대한 필요성 현재 트레바리 홈페이지에서는 배너와 클럽 썸네일 등 이미지가 꽤 많이 사용되고 있다. 그만큼 사용자가 처음 화면에 접속할 때, 이미지 수와 용량에 비례하여 다운로드 시간이 길어지고 페이지 로딩에 엄청난 영향을 미치고 있었다. 또한 기존에는 웹 화면과 모바일 화면 모두 동일한 고화질의 원본 이미지로 사용되었으며, 웹 화면 뿐 아니라 모바일 환경에서도 필요 이상의 고화질을 이용하므로써 불필요한 성능을 낭비하고 있었다. 이러한 과도한 용량 사용과 로딩 시간을 ..
-
[2019.11.17] ES2019(ES10) 새로운 기능을 습득하자~!개발 블로깅/Modern script 2019. 11. 17. 17:31
# Object.fromEntries 배열로 가지고 있던 값을, 알맞게 매칭시켜서 obj 형식으로 변환시킨다. 첫 번째 배열 인자를 key, 두 번째 배열 인자를 value로 한다. 기존의 Object.entries 기능의 반대 기능을 한다. const entry = Object.entries({name:'inyong', age: 27, family: ['father', 'mother', 'brother', 'sister']}); console.log(entry); // [['name','inyong'],['age',27],['family',['father','mother','brother','sister' ]]]; const fromEntry = Object.fromEntries(entry); cons..