분류 전체보기

[객체지향] SOLID 예제(1) - 단일 책임의 원칙(SRP)

객체 지향 프로그래밍의 가장 중요한 원칙이라 알려진 SOLID 원칙이다. 단일 책임의 원칙 개방-폐쇄의 원칙 리스코프 치환의 원칙 인터페이스 분리의 원칙 의존성 역전의 원칙 각 원칙에 대해 알고는 있었다. 하지만, 각 원칙을 적용했을 때 어떤 장점이 있는지 말로 설명할 수 있었지만 어떻게 구현하는지 막막했다. 이번에 기회가 있어 SOLID 원칙을 다시 공부해볼 수 있었고 이해한 내용과 책을 바탕으로 예제 코드와 함께 정리하고자 한다. 아래와 같은 예시를 개선하는 과정을 통해 SOLID 원칙을 간단하게나마 이해할 수 있도록 해보자. class Person { wakeUp() { console.log('아침에 일어난다.'); } goToBathroom() { console.log('화장실로 간다.'); } ..

[네이버 부스트캠프] 네이버 부스트캠프 웹・모바일 8기 멤버십 1 ~ 4주차 회고

내용에 문제가 있는 경우 삭제 또는 수정하겠습니다. 운이 좋게도 네이버 부스트캠프 웹・모바일 8기 멤버십에 입과할 수 있었다. 기회를 제공한 만큼 열정적으로 임해야 겠다는 생각이 든다. 챌린지와 달라진 점으로 미션의 주기가 길어졌다. 챌린지 때는 하루 ~ 이틀동안 미션을 수행했다면 멤버십에서는 약 한 달에 걸쳐 미션을 수행했다. 또한, 현업 개발자의 코드리뷰를 받을 수 있었고 마스터 클래스를 통해 마스터와 소통할 수 있는 기회도 제공되었다. 챌린지 때는 한 주의 회고를 했다면 멤버십에서는 한 미션(프로젝트) 단위로 회고를 하고자 한다. (그래서 1 ~ 4주차 회고가 한 번에 올라온 것이다..) ✨ 좋았던 점(잘한 점) 멤버십에서 현업 개발자의 코드리뷰를 받아볼 수 있었다. 현업 개발자의 리뷰를 받을 수 ..

[JavaScript] 클로저

JavaScript에는 클로저라는 개념이 있다. 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있으며 이러한 중첩 함수를 클로저라 부른다. 아래 예시를 보자. const x = 10; function fn1() { const x = 20; const fn2 = function () { console.log(x); }; return fn2; } const closure = fn1(); closure(); // 20 fn1 함수가 호출되며 fn2를 반환하고 생명주기가 마감된다. 생명주기가 마감되면서 fn1 함수의 실행 컨텍스트가 제거되었고 변수 또한 생명주기가 마감된다. 변수에 접근할 수 없는 상태인데 실행 결과가 20인 이유는 무엇일까..

[JavaScript] querySelectorAll VS getElementsByClassName

위와 같은 코드가 있다. 두 방식 중 어떤 것을 사용해도 div 태그 다섯 개를 찾아올 수 있다. 두 방식의 차이점은 무엇일까? 1. querySelectorAll querySelectorAll은 선택자에 일치하는 모든 요소를 반환한다. 이 때 반환하는 타입은 NodeList다. NodeList는 노드의 컬렉션이라 한다. NodeList는 Array는 아니지만 forEach 등의 문법을 사용할 수 있다. 또한, Array.from을 사용하여 Array로 변환할 수 있다. 하지만, NodeList는 정적 콜렉션이다. 이는 DOM을 변경해도 콜렉션 내용에는 영향을 주지 않는다는 뜻이다. 따라서, 항목을 순회하거나 리스트의 길이를 캐시할 때 도움이 된다. 2. getElementsByClassName getE..