쉬어가는 타임😒
어제 밤 프로젝트 이슈를 마무리하느라 늦게 잤더니 오늘 하루 종일 골골대서 차라리 이럴꺼면 일찍 자고 낮에 마무리하는게 맞지 않았나 싶었다. 한 것도 없이 TIL을 작성하려고 하니 민망하기 까지 했다. 그래도 오늘 한걸 정리해보자면
- 팀원이 작성한 프로젝트 코드를 보면서 Switch에 대한 구문도 배웠고,
- 스파르타 AWS 온라인강의도 들었다.🤔
이 글에서는 Switch 구문에 대해 정리해보려고 한다.
- Switch 기본 사용하는 방법에 대해 알아보자.
- Switch 응용한 코드에 대해서 알아보자.
💻본론
Switch 구문
Why Switch?
페이지를 늘리지 않고 페이지 하나에 여러 컨텐츠를 넣고싶었던 나는 show(),hide() 무진장 많이 사용해서 페이지를 구성했다. 이렇게 작성하고 나니깐 겉은 멀쩡해 보이는데 코드를 보면 이렇게 엉망진창도 없다고 생각했다. 이때, 팀원 분이 Switch를 구문을 이용해서 컨텐츠 별로 묶어 가독성을 왕창 늘려주시니 내가 이 구문에 안빠지고 배기겠는가?
정리 : 컨텐츠 단위로 묶어서 이벤트나 매소드를 할당할 때 편리하기 때문이다
Switch 기본 코드
- switch문은 case와 break로 이루어져있다.
- switch문에 할당된 변수가 case와 매칭된다면 해당 case문 아래로 실행된다.
- case문은 break를 만날 때 까지 멈추지 않는다.
- 매칭되는 case가 없으면 default값을 출력한다.
- break가 있는 구문의 경우
<script>
let count = 1;
switch (count) {
case 0:
console.log('나는 0이야');
break;
case 1:
console.log('나는 1이야');
break;
default:
console.log('매칭되는 숫자가 없어!');
}
</script>
// 다음 구문의 경우 '나는 1이야'가 출력된다.
- break가 없는 경우
<script>
let count 1;
let text = 'TEXT: ';
switch (count) {
case 0:
text += 'So ';
case 1:
text += 'hello ';
case 2:
text += 'world';
case 3:
text += '!';
console.log(text);
break;
default:
console.log('bye')
}
</script>
// 다음 구문의 경우 'hello world!'가 출력된다.
// case 1과 매칭되었지만 break가 없기 때문에 break가 있는지 case 3까지 쭉 실행된다.Switch 코드 응용
프로젝트에서 사용한 방법을 예시로 가져왔다.
- 버튼을 눌렀을 때, #content1과 #content2를 번갈아 가며 보여준다.
<script>
let contentFirst = "contentFirst";
let contentSecond = "contentSecond";
function showControl(display) {
switch (display) {
case contentFirst:
$('#contentFirst').show();
$('#contentSecond').hide();
break;
case contentSecond:
$('#contentFirst').hide();
$('#contentSecond').show();
break;
}
}
</script>
<body>
<div id="contentFirst">
1번 컨텐츠
<button onclick="showControl(contentSecond)">2번 보기</button>
</div>
<div id="contentSecond">
2번 컨텐츠
<button onclick="showControl(contentFirst)">1번 보기</button>
</div>
</body>
✔생각 정리
팀 프로젝트를 진행하며 나의 지식과 팀원의 지식의 다름을 느꼈다. 특히 코드를 짤 때 이런 생각이 많이 들었는데 비슷한 기능이라도 내가 짠 코드와 팀원이 작성한 코드가 많이 달랐다. 팀원의 코드를 보면 이렇게도 생각할 수 도 있구나라는 감탄사가 절로 나올때가 많았다.😁
역시 공부는 팀 단위로 하는게 효율이 최고인거 같다👍
- 팀원이 작성한 코드 리뷰해보기!
- 마음에 든다면 나의 것으로!
잘 부탁드려요