TIL 20230607

오늘은 footer 테그 사용해서 사이트 맨 밑에 나 포함 팀원들의 깃헙 프로필로 넘어가는 버튼을 추가했다.

// footer에 있는 팀원별 버튼 클릭 이벤트 지정
const clickJH = document.getElementById('JH');
clickJH.addEventListener('click', () =>
  window.open('https://github.com/pesbg123')
);
const clickSH = document.getElementById('SH');
clickSH.addEventListener('click', () =>
  window.open('https://github.com/jrmun')
);
const clickJK = document.getElementById('JK');
clickJK.addEventListener('click', () =>
  window.open('https://github.com/jinkyung127')
);
const clickHW = document.getElementById('HW');
clickHW.addEventListener('click', () =>
  window.open('https://github.com/hyunwoo87')
);
const clickHK = document.getElementById('HK');
clickHK.addEventListener('click', () =>
  window.open('https://github.com/kwakhyunkyu')
);

이렇게 코드를 먼저 짜보았는데 .. 너무 너무 비효율적이고 길다고 생각이 들었따..
그래서 리팩토링에 대해서 좀 찾아보았따.
그렇다 .. 사실 뭐라는지 모르겠다. 팀원분중에 댓글 저장기능을 구현하신분이 로컬스토리지에
배열안에 객체로 댓글에 정보들을 저장하셔서 꺼내오시는걸로 구현하셨따. 그걸 보고 한번 나도 그렇게
해보면 어떨까? 싶었다. 일단 함수를 매개변수로 깃헙 url을 받게 만들었따.

// 팀원 깃헙 프로필로 넘겨주는 함수
function openGitHubProfile(url) {
  window.open(url);
}

그리고 배열안에 객체로 팀원분들의 깃헙 링크를 id와 url 프로퍼티로 할당했다.

// 배열안에 array로 각각 깃헙 주소 할당
const teamMembers = [
  { id: 'JH', url: 'https://github.com/pesbg123' },
  { id: 'SH', url: 'https://github.com/jrmun' },
  { id: 'JK', url: 'https://github.com/jinkyung127' },
  { id: 'HW', url: 'https://github.com/hyunwoo87' },
  { id: 'HK', url: 'https://github.com/kwakhyunkyu' },
];

teamMembers를 forEach로 반복해서 멤버 별 이벤트를 지정해준다.

// footer에 있는 팀원별 버튼 클릭 이벤트 지정
teamMembers.forEach((member) => {
  const clickMember = document.getElementById(member.id);
  clickMember.addEventListener('click', () => openGitHubProfile(member.url));
});

뭔가.. 더 이쁘고 간결하게 짤 수 있을거 같은데 나의 최선인것 같다..