분류 전체보기
-
자바스크립트 클린 코드Note 2021. 8. 21. 17:56
클린 코드로 가독성을 높이는 것이 개발할 때 중요하다고 한다. 보통 개발을 할 때 여러 명의 개발자와 함께 협업이 이루어지는데 다른 사람이 읽기 쉽고 가독성이 좋으면 시간도 절약될 것이고 유지 보수하는데 그만큼 유리해지게 된다. 주석 없이도 코드 자체로 스스로 설명이 되고 쉽게 이해될 수 있는 코드는 과연 어떻게 써야 할까? 변수(Variables) 의미 있고 발음하기 쉬운 변수 이름을 사용 Bad 😭 const yyyymmdstr = moment().format('YYYY/MM/DD'); Good 😍 const currentDate = moment().format('YYYY/MM/DD'); 동일한 유형의 변수에 동일한 어휘를 사용 Bad 😭 getUserInfo(); getClientData(); ge..
-
이벤트 루프Note 2021. 8. 13. 17:16
자바스크립트라는 언어는 싱글 스레드(Single Thread) 언어라고 알려져 있다. 보통 싱글 스레드라고 하면 한 번에 하나의 작업만 수행할 수 있다고 생각한다. 하지만 실제로 자바스크립트가 사용되는 환경을 생각해보면 많은 작업이 동시에 처리되고 있는 걸 볼 수 있다. 어떻게 동시에 처리할 수 있는 걸까? 자바스크립트는 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원한다고 한다. 자바스크립트 엔진에서 제공되는 것은 아니고 브라우저나 NodeJS에서 지원되는 것이다. 그렇다면 비동기 방식은 어떻게 동작하는 것일까? 자바스크립트 비동기 런타임 과정 자바스크립트가 비동기 코드를 어떻게 동작시키는지 알아보기 위해선 일단 자바스크립트 런타임 환경에 대해 알아야 한다. 여기서는 간단하게 비동기를 동작하는데 ..
-
브라우저 작동 원리Note 2021. 8. 10. 12:20
브라우저 HTML 문서와 그림, 멀티미디어 파일 등 월드 와이드 웹을 기반으로 한 인터넷의 컨텐츠를 검색 및 열람하기 위한 응용 프로그램의 총칭 사용자에게 보이는 부분을 담당하는 프론트엔드 개발자에게 브라우저는 특히 필수로 알아야 하는 부분이다. 프론트엔드 개발자는 브라우저를 통해 개발을 하고, 브라우저를 통해 테스트와 배포를 진행한다. 최종적으로 사용자들은 브라우저를 통해 웹 애플리케이션에 접속할 수 있다. 그만큼 프론트엔드 개발자에게 브라우저는 뗄 수 없는 부분이다. 브라우저의 내부에서 일어나는 모든 일에 대해 이해하는 것은 너무나도 어렵다. 그래서 작성한 HTML, CSS, JavaScript가 의도한 대로 동작되는지만을 확인해도 크게 문제 되지는 않는다. 하지만 복잡한 웹 애플리케이션을 만들어야 ..
-
반응형 테이블(Responsive Table)Note 2021. 8. 6. 12:04
이번에 팀 프로젝트를 진행하면서 관리자 페이지를 만들었는데, 유저들의 정보를 테이블로 보여주고 검색이나 수정 및 삭제 기능을 구현하였다. 기능을 모두 구현하고 반응형 웹을 적용하려고 보니 칼럼이 많은 테이블을 어떻게 처리해야 할지 고민이 되었다. 반응형 테이블의 경우 대체로 두 가지 형태로 보여준다고 한다. 테이블 첫 번째는 화면이 작아지면 테이블에 가로 스크롤을 추가하여 스크롤을 통해 다 볼 수 있게 하는 방법 overflow-x:auto; 두 번째는 큰 화면에 제목(thead)을 화면이 작아지면 각각의 행마다 모두 추가해주는 방법 // 기존 thead 숨김 thead tr { position: absolute; top: -9999px; left: -9999px; } // 열에 thead 값 추가 td..
-
페이지네이션(Pagination)Note 2021. 8. 2. 13:46
많은 데이터를 한 화면에 전부 보여줄 수 없는 경우에 무한 스크롤, 페이지네이션이 사용된다. 페이지네이션이란 한정된 네트워크 자원을 효율적으로 활용하기 위해 결과값으로 리턴된 리소스를 `분할하여 전달`하는 것을 의미한다. 즉, 데이터베이스에 만 개의 아이템이 있을 때, 한 번에 만 개를 돌려주는 대신 0번부터 49번까지 50개씩 돌려주는 것을 의미한다. 여기서 다음 요청이 들어오면 50번부터 99번까지, 또 다음 요청이 들어오면 100번부터 149번까지 돌려준다. 이렇게 함으로써 네트워크의 낭비를 막고, 빠른 응답을 기대할 수 있게 된다. 오프셋 기반 페이지네이션(Offset-based Pagination) 전통적인 페이지네이션 방식인 오프셋 기반 페이지네이션은 offset : 데이터가 시작하는 위치(현..
-
무한 스크롤(Infinite Scroll)Note 2021. 7. 26. 20:45
많은 데이터를 한 화면에 전부 보여줄 수 없는 경우에 무한 스크롤, 페이지네이션이 사용된다. 무한 스크롤 - 한 페이지를 아래로 스크롤 하면 끝없이 새로운 화면을 보여준다. - 화면이 작은 모바일에 적합하다. 페이지네이션 - 콘텐츠를 여러 개의 페이지로 나누어 보여준다. - 상대적으로 PC에 적합하다. 무한 스크롤 무한 스크롤을 구현하는 방법은 여러 가지가 있겠지만 페이지 맨 마지막 요소에 도달하면 다음 데이터를 불러오는 방식이 있는데, scroll event와 IntersectionObserver을 사용하여 구현할 수 있다. scroll event scroll event는 보통 document에 스크롤 이벤트를 등록하고, 특정 지점(스크롤 최하단)을 관찰하며 엘리먼트가 위치에 도달했을 때 실행할 콜백함..