개발 블로깅
-
[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. 이전 페이지를 캐싱 시켜서, 뒤로 가기 시에 캐싱된 페이지와 스..
-
[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'의 아티클을 번역하였습니다. 외국 아티클 번역은 처음으로 도전하다보니, 거의 발 번역 수준입니다.. 하지만 내용 이해에는 문제가 없을 듯 하여, 귀엽게 봐주시면 감사드리겠습니다! 이미지는 모든 웹 사이트와 어플리케이션에서 매우 중요한 요소입니다. 마케팅 배너 혹은 상품 이미지, 로고 등 이젠 웹 사이트 내에서 이미지가 없다는 것은 상상할 수 없을 정도입니다. 그러나 슬프..
-
데이터베이스 인덱스는 왜 'B-Tree'를 선택하였는가개발 블로깅/Server&DataBase 개념 2020. 10. 25. 13:17
데이터베이스의 탐색 성능을 좌우하는 인덱스. 인덱스는 데이터 저장, 수정, 삭제에 대한 성능을 희생시켜 탐색에 대한 성능을 대폭 상승하는 방식이라 볼 수 있다. DB의 인덱스는 B-tree 자료구조를 이용하여 테이블의 요소를 빠르게 탐색하도록 설계되어있다. 그러면 인덱스는 그 많은 자료구조 중에 왜 하필 'B-tree'를 사용하는 것일까? 참고로 해당 글에서는 데이터베이스의 인덱스가 무엇인지에 대해서는 다루지 않는다. 하지만 인덱스에 대해 잘 몰라도 이 글을 읽는 것에 큰 어려움이 없을 것이다. DB를 직접 다루는 개발자가 아니더라도 SW 성능에 관심이 많거나 자료구조, 알고리즘 공부를 하는 사람이라면 관심을 가지고 읽어볼 만한 글이 될 것 같다. 인덱스가 B-Tree를 이용하는 이유에 대해 알기 위해,..
-
[2020.10.16] Google Chrome V8 엔진을 파헤쳐보자개발 블로깅/기타 개념 2020. 10. 17. 00:56
Google V8 엔진 V8은 Google Chrome과 Node.js에서 사용되고 있는 구글에서 제작한 자바스크립트 엔진이다. C++로 작성되었고 고성능의 자바스크립트 전용의 웹 어셈블리 엔진이라 할 수 있다. 일반적으로 자바스크립트 엔진은 코드 한 줄을 해석하고 바로 실행하는 인터프리터 형식이지만, V8 엔진은 자바스크립트 코드를 바이트코드(ByteCode)로 컴파일하고 실행하는 방식을 사용한다. 또한 V8엔진은 독립형으로 개발되었기 때문에 웹 브라우저 뿐 아니라 C++ 프로그램에 별도로 내장하여 실행시킬 수도 있다. 이러한 점은 엄청나게 강력한 기능이다. C++자체가 하드웨어 레벨에 훨씬 더 가까운 언어인 만큼 자바스크립트보다 더 많은 특성을 가지고 있다. 그렇기에 C++로 작성한 언어를 V8엔진을..
-
Netflix의 웹 성능 최적화를 위한 기법 소개개발 블로깅/Improving Performance 2020. 9. 30. 00:21
넷플릭스는 전 세계적으로 유명한 스트리밍 콘텐츠 서비스이다. 그만큼 서비스 내 사용되는 콘텐츠 데이터가 엄청나며 이를 이용하는 대용량 트래픽 또한 만만치 않을 것이다. 그럼에도 불구하고 신기한 점은, 수많은 트래픽 처리 속에서도 저렇게 많은 섬네일 이미지와, 이미지 위에 마우스를 올리면 보여지는 일부 영상이 매우 빠른 로딩 속도를 자랑한다는 것이다. 넷플릭스는 과연 어떻게 이러한 성능을 만들어 낼 수 있었을까? 지금부터 넷플릭스 페이지의 비밀에 대해 알 수 있는 만큼 최대한 파헤쳐 보도록 하자. 섬네일 이미지 사용 우선 개발자 도구-네트워크 탭을 열어, 페이지 로드 시 요청받는 리소스 목록들을 확인해 보았다. 페이지 렌더링이 완료된 후에도 쉬지 않고 계속해서 많은 리소스가 다운로드되며 리스트가 쭉쭉 늘어..