본문 바로가기

프론트엔드25

프론트엔드 개발에 대한 생각 개인적으로 공통단에 대해서 관심이 많다. 개발을 처음 독학으로 시작할때 부터 어지간한 프로그램을 이해하는데 큰 어려움이 없었고 어지간한 것들은 그 내부를 보지 않고도 어떻게 구현해야할지 직관이 가능했는데(분야에 상관없이 허와 실을 직관하는데 재능이 있는 편이다.) 그래서 그런지 처음부터 개발을 하면서 클린코드나 설계등에 대해서 꾸준히 관심을 가지고 관련해서 공부도 해보고 나름대로 이해도 하고 직접 적용해보고 응용도 하는 등 꾸준히 행해왔다. 더욱이 웹이라는 고수준으로 추상화된 환경에서 보편적인 기능을 개발하는데 특이한 경우가 아니라면 사실 특출난 알고리즘이나 최적화를 통한 성능적인 고려를 할 필요가 거의 없고 문제 없는 설계에 집중하는 것 만으로도 성능을 어느 정도 잡아 낼 수 있었기에 더욱 그러했다.(.. 2022. 9. 14.
[오픈소스][React] react-custom-swipe 모바일 앱을 그대로 웹으로 옮기면서 좌우 스와이프를 통한 인피니티 스크롤을 구현해야했다. 관련해서 여러 제약 조건들을 충족 시켜주는 오픈소스 라이브러리를 찾을 수 없어서 스와이프 기능을 분석하고 하드코딩으로 개발을 하였는데 해당 기능에 흥미를 느껴서 오픈소스로 개발해서 정리를 해보고 싶은 생각으로 개발 해보았다. 개인적으로 찾아본 결과로는 기존 웹사이트나 관련 오픈소스의 경우 스와이프에서 레이지로딩이나 페이지네이션을 지원하는 케이스를 발견하지 못했다.(핀터레스트 등) 보통 스와이프 기능이라고 부르는 스와이프 모션과 플립 모션을 감지하여서 데스크탑과 모바일에서 스와이프 기능을 제공해준다. 또 내부 아이템들이 페이지네이션처럼 비동기적으로 추가되어도 index 쿼리스트링을 통해서 데이터(item)의 index.. 2022. 8. 3.
[프론트엔드] 코드 스플릿에 대한 정리 벡엔드뿐 아니라 프론트엔드 개발에서 성능 최적화를 위해서 고려해야 할 요소는 상당히 많다. 디테일한 부분을 제외하고 큼직만 한 요소들을 축약해서 꼽자면 리소스 용량을 줄이는 것(압축 및 캐시와 분할), 렌더링 비용을 줄이는 것(DOM, CSSOM, VDOM), 네트워크 비용을 줄이는 것(커넥션 릴리즈) 정도로 분류할 수 있을 거 같다. 그중 리소스 용량 즉 js나 html, css, image등의 파일의 용량을 관리하는 방식으로 웹을 최적화할 수 있는데 단순히 압축(webp, gzip 등)을 통해서 해당 리소스들의 용량을 줄이는 방향과 cache를 통해서 중복 요청을 줄이는 방법 등이 존재한다. 그리고 단순히 용량을 줄인다는 측면이 아닌 꼭 필요한 부분만을 미리 가져다 쓴다는 측면의 분할을 적용하기도 하.. 2022. 7. 20.
프론트엔드 설계 고민 -5- 큰틀은 대략적으로 잡았으니 조금 더 작은 부분들을 고민해보자. SPA 개발 즉, 모던 웹개발로 들어오면서부터 웹프론트의 UI의 경우 기본적으로 기존의 페이지 단위나 템플릿 단위의 개발에서 컴포넌트 단위의 개발로 개념이 조금 변경 되었다. 기존에는 마크업이나 스타일링을 HTML과 CSS로 그리고 JS로 필요한 동적인 조작을 하는 정도 였다면 모던 웹개발에서는 JS를 기반으로 HTML(마크업)과 CSS(스타일링)등을 모두 관리한다. (예: JSX) 그러다보니 기존 HTML, CSS와 많은 부분 같으면서도 다른 특징을 가지는데 HTML,CSS와 JS로 된 DOM, CSSOM의 차이점에서 오는 부분이라고 볼 수 있다. HTML과 CSS, JS로 개발을 진행할때는 각 영역이 독립적이고 서로 침범하지 않는게 미덕이.. 2022. 7. 10.

티스토리툴바