쿠키나 스토리지 없이 데이터를 공유/관리
1. 싱글톤 패턴이란?
싱글톤 패턴은 프로그램에서 하나의 인스턴스만 생성해서 모두가 그 인스턴스를 공유하는 방법이에요. 이걸 통해 여러 곳에서 같은 데이터를 사용할 수 있게 해줍니다.
예를 들어, 우리가 데이터를 한 곳에서 관리하고, 그 데이터를 여러 페이지에서 공유하고 싶을 때, 싱글톤 패턴을 쓰면 모든 페이지가 같은 데이터를 사용할 수 있습니다.
2. 어떻게 동작하나요?
singletone이라는 객체를 하나 만들고, 그 안에 데이터를 저장할 수 있어요.
데이터는 setData라는 함수를 통해 저장하고, getData라는 함수를 통해 불러올 수 있어요.
export const singletone = (function() {
let initData = null; // 여기에 데이터를 저장
return {
getData: () => initData, // 데이터를 가져오는 함수
setData: (newData) => { initData = newData } // 데이터를 저장하는 함수
}
})();3. 즉시 실행 함수와 클로저:
즉시 실행 함수: 코드를 한 번만 실행해서 singletone이라는 객체를 만듭니다.
클로저: 데이터를 외부에서 직접 접근할 수 없게 만들고, 특정 함수(getData, setData)를 통해서만 데이터를 읽거나 변경할 수 있게 합니다. 이 방식으로 데이터를 보호해요.
4. 단점은
하지만 페이지를 새로고침하면 initData에 저장된 값이 사라져요. 쿠키나 스토리지 같은 영구적인 저장소가 아니기 때문에, 로그인 상태를 유지하거나 중요한 정보를 계속 저장하는 데는 적합하지 않아요.
결론:
싱글톤 패턴은 페이지 간 데이터를 공유하는 간단한 방법이지만, 새로고침할 때 데이터가 사라지는 문제가 있어서 로그인 유지 같은 기능에는 적합하지 않습니다. 이런 경우에는 쿠키나 로컬 스토리지를 사용하는 것이 더 좋습니다.
코드 최적화
코드 최적화는 성능을 개선하고 유지보수를 쉽게 하기 위한 중요한 작업입니다. 최적화를 위해 불필요한 코드를 제거하고, 컨벤션에 맞는 읽기 쉬운 코드를 작성하는 것이 기본입니다. 특히, 규모가 큰 함수나 컴포넌트를 작은 단위로 나누어 필요한 만큼만 사용하는 것이 성능을 향상시키는 중요한 방법입니다.
1. 기본적인 최적화 방법
불필요한 코드 제거: 사용되지 않거나 중복된 코드를 제거해 성능을 높입니다.
함수나 컴포넌트의 구조를 나눔: 큰 함수를 작은 단위로 분리해 관리하면 성능이 향상되고, 유지보수가 쉬워집니다.
2. 성능을 측정하고 개선할 수 있는 도구
- Lighthouse:
- Chrome DevTools의 "Lighthouse" 탭에서 사용할 수 있는 도구입니다.
Performance, Accessibility, Best Practices, SEO 4가지 카테고리에서 성능을 측정하고, 개선할 부분을 제시해줍니다.
Lighthouse는 웹 페이지의 성능 최적화에 대한 구체적인 가이드를 제공하며, 문제점과 개선 사항을 알려줍니다. - PageSpeed Insights:
- 웹 페이지의 성능을 측정하고 개선할 수 있는 또 다른 도구입니다.
페이지 로딩 속도, 성능 점수, 개선 사항 등을 제시해주어 페이지 성능 최적화에 도움을 줍니다. - SonarQube:
정적 코드 분석을 통해 버그, 보안 위험, 중복 코드 등을 찾아내고, 코드 품질을 높이는 데 사용되는 전문적인 도구입니다.
사용법이 조금 복잡하지만, 큰 프로젝트나 코드 품질 관리에 매우 유용합니다.
3. 작은 프로젝트에서는 스스로 최적화하는 연습
작은 프로젝트에서는 도구를 사용하기보다는 직접 문제를 찾고 수정하는 연습을 하는 것이 더 유익할 수 있습니다. 코드를 나누고 성능을 향상시키는 과정을 통해 최적화 경험을 쌓는 것이 중요합니다.
HTML/CSS 클래스 네이밍
네이밍은 통일된 규칙이 있으면 구조를 더 파악하기 쉽게 만들 수 있습니다.
흔히 작업하다 보면 Div 안에 Div 안에가 반복되는데, 틀을 의미하는 단어도 box, frame, container, wrapper 등 많이 있기 때문에 컴포넌트 마다 다른 단어를 사용하는 것 보단 일치하는 것이 전체적인 내용 파악에 좋습니다.
이를 위해 CSS에는 BEM, OOCSS 등 여러 네이밍 방법론이 존재하기도 합니다.
네이밍을 통해 구조나 데이터의 특성을 빨리 파악할 수 있게 됩니다.
// (1) 네이밍을 고려하지 않은 경우
<div id="peoples">
<div classname="box1">
</div>
<div classname="box2">
</div>
</div>
// (2) 네이밍을 고려한 경우
<div id="user_list">
<div classname="user__online">
</div>
<div classname="user__offline">
</div>
</div>
// (3) 그런데 서로 다른 네이밍 규칙을 사용하는 경우
<div id="userLists">
<div classname="onlineUser">
</div>
<div classname="offlineUser">
</div>
</div>