전체 글
-
옵셔널 체이닝Note 2021. 8. 24. 21:05
옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자. 이럴 때 user.info.name를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; // 이름 정보가 없는 사용자 alert(user.info.name); // TypeError: Cannot read property 'name' of undefined 또 다른 사례로는 브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제가 있다. 자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려 하면 문제가..
-
자바스크립트 클린 코드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..