프로그래머처럼 생각하는 법

원문 : How to think like a programmer | Zell Liew, 필요할 정도의 직역과 의역이 포함되어 있습니다.

“나는 자바스크립트를 잘 모른다. 컴포넌트를 밑바닥부터 만들 수 없다. 내 마음은 빈 자바스크립트 파일을 응시할 때 비워지게 된다. 나는 프로그래머처럼 생각하는 방법을 모르기 때문에 이 일을 할 수 없다고 생각한다.”

비슷하게 느껴지나요? 자바스크립트를 첫 프로그래밍 언어로 접한 많은 사람이 비슷한 문제를 마주하게 됩니다.

심지어 다른 언어를 통해 코딩을 시작한 개발자들도 자바스크립트와 함께 같은 문제를 마주합니다. “프로그래머처럼 사고할 수 없어” 대신에 “자바스크립트로 생각할 수 없어”로 말이죠.

하지만 더는 아닙니다. 오늘은 프로그래머처럼 생각하는 법에 대해 익히는 날이 될 것입니다.

이미 당신은 프로그래머처럼 생각할 수 있습니다.

Code Camp, Code academy (온라인 부트캠프) 혹은 Code Wars (온라인 저지) 같은 곳에서 자바스크립트에 대한 간단한 연습을 해보았나요?

해봤다면, 이미 프로그래머처럼 생각하는 방법을 알고 있습니다.

빈 자바스크립트 파일을 마주할 때 마음이 비어버리는 진짜 이유는 코더의 그늘 안에 있기 때문입니다. 당신은 작동하지 않는 자바스크립트를 작성할까 봐 두려움을 느낍니다. 에러를 마주하는 것에 두려움을 느낍니다. 어떻게 시작할지 모릅니다.

코더의 그늘을 극복하는 법은 간단합니다. 4단계를 따라해보세요:

1. 큰 문제를 작은 문제로 나누세요.
2. 작은 문제의 해결책을 찾으세요.
3. 나누어진 해결책을 모두 모으세요.
4. 수정하고 개선하세요.

1단계 : 문제를 작은 문제들으로 나누세요.

코끼리를 어떻게 냉장고에 넣을까요?

대다수의 사람은 이렇게 답합니다:

1. 냉장고를 연다.
2. 코끼리를 그 안에 넣는다.
3. 냉장고를 닫는다.

문제 해결됨.

가난한 코끼리. 냉장고 안에 있어서 슬퍼 보이네요 :(

이 대답은 왜 빈 자바스크립트 파일을 마주할 때 곤경에 빠지는지에 대한 훌륭한 예시입니다. 이것은 모든 단계들을 뛰어 넘깁니다.

질문을 논리적으로 생각한다면, 대답이 없어 몇 개 남겨진 반짝이는 문제들이 보일 것입니다.

1. 어떤 냉장고에 관해 얘기하고 있나요?
2. 어떤 종류의 코끼리를 얘기하고 있나요?
3. 만약 코끼리가 냉장고에 넣기에는 매우 크다면, 어떻게 해야 할까요?
4. 코끼리를 제일 처음 찾은 장소는 어디인가요?
5. 어떻게 코끼리를 냉장고로 운송할 것인가요?

코딩을 하면서 생각할 수 있는 작은 단위의 질문마다 해답이 필요할 것입니다. 이러한 이유로 문제를 작은 조각으로 나누는 필요가 있는 것입니다.

2단계: 작은 문제들의 해결책을 찾으세요.

두 번째 단계는 각각의 작은 문제의 해결책을 찾는 것입니다. 가능한 자세하고 중요한 사항들이 여기 있습니다.

1. 어떤 냉장고인가? – 주방에 있는 냉장고
2. 어떤 종류의 코끼리인가? – 아프리카코끼리
3. 코끼리가 너무 크다면 어떻게 할 건가? – 축소 건 (🔫)을 얻어 코끼리를 작아지게 한다 (😎).
4. 어디에서 코끼리를 찾는가? – 아프리카
5. 어떻게 코끼리를 운송할 것인가? – 축소한 뒤 가방에 넣어 집으로 돌아가 집어넣는다.

이따금, 필요한 해답을 얻고자 몇 계층의 굴을 더 팔 필요가 있을 것입니다. 위의 예제에서 세, 네 번째 해결책에서 더 깊게 파고들 수 있습니다.

1. 축소 건을 어디서 얻나요? – 옆문에 있는 미치광이 과학자에게 빌림
2. 코끼리를 찾을 수 있는 아프리카는 어디에 있나요? – 남아프리카의 아도 코끼리 국립공원

작은 문제들의 해답을 찾았다면, 그 조각을 뭉쳐 큰 문제를 해결할 수 있습니다.

3단계: 착 달라붙는 태도로 해결책을 모으세요.

코끼리를 냉장고에 집어넣는 예제에서 아마도 아래 단계를 따라갈 것입니다:

1. 축소 건을 옆문의 과학자에게 얻기
2. 남아프리카로 날아가기
3. 아도 코끼리 국립공원을 둘러본다
4. 코끼리를 공원에서 찾는다
5. 축소 건으로 코끼리를 쏜다
6. 가방에 축소된 코끼리를 집어넣는다
7. 공항으로 돌아온다
8. 고향으로 돌아간다
9. 집을 둘러본다
10. 코끼리를 냉장고 속에 집어넣는다

문제 해결됨.

흥미롭게 들리지만, 자바스크립트로 코끼리를 잡아 냉장고에 넣는 행동을 확실히 원하지 않을 것입니다. 대신 실제 예제를 살펴보겠습니다.

실제 예제를 사용해봅시다

클릭했을 때, 사이드바가 보여지는 버튼에 대해서 이야기해봅시다.

Zell Liew (@zellwk)님의 Sidebar for Thinking like a programmer article 을 CodePen에서 참고해주세요.

버튼-사이드바 컴포넌트를 만들기 위한 첫 번째 단계는 컴포넌트를 작은 조각으로 나누는 것입니다. 여기서 확인할 수 있는 몇가지 문제들이 있습니다:

1. 버튼의 마크업은 무엇인가요?
2. 버튼은 어떻게 보여야 하나요?
3. 버튼이 한번 클릭 되었을 때 어떤 일이 벌어지나요?
4. 버튼이 다시 클릭 되었을 때 어떤 일이 벌어지나요?
5. 3번째로 버튼이 클릭 되었을 때 어떤 일이 벌어지나요?
6. 사이드바의 마크업은 무엇인가요?
7. 사이드바가 보였을 때의 모습은 어떤가요?
8. 사이드바가 숨겨졌을 때 모습은 어떤가요?
9. 어떻게 사이드바가 보여 지나요?
10. 어떻게 사이드바가 나가 지나요?
11. 페이지를 불러올 때 사이드바가 보여야 하나요?

두 번째 단계 – 문제들을 위한 해결책 만들기

해결책을 찾을 때, 그걸 만들기 위한 적절한 지식이 필요할 것입니다. 우리의 경우에는 충분한 HTML, CSS 및 JavaScript 지식을 알아야 합니다.

어떠한 질문에 대한 대답을 모른다고 해서 걱정하지 마세요. 좌절한다 해도, 구글 검색을 통해 해답을 5분 안에 찾을 수 있습니다.

각각의 질문에 대해 대답을 해봅시다:

버튼의 마크업은 무엇인가요?

마크업은 <a> 태그와 .button 클래스로 이루어져 있습니다.

<a href='#' class='button'>
  Click me
</a>

어떻게 버튼이 보여야 하나요?

아래의 CSS 코드를 갖추어야 합니다:

.btn {
  display: inline-block;
  font-size: 2em;
  padding: 0.75em 1em;
  background-color: #1ce;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
}

버튼이 한번 클릭 되었을 때마다 어떤 일이 벌어지나요? 두, 세 번째는 어떤 일이 벌어지나요?

이 사이드바는 버튼이 한번 클릭 되었을 때 보여야 하고, 다른 시점에 클릭 되었을 때 사라져야 합니다. 또다시 버튼이 클릭되었을 때 다시 보입니다.

사이드바의 마크업은 무엇인가요?

사이드바는 링크들의 리스트를 포함한 <div> 가 있어야 합니다.

<div class="sidebar">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
  </ul>
</div>

사이드바가 보일 때의 모습은 어떤가요?

사이드바는 화면의 오른쪽에 있어야 합니다. 사용자가 볼 수 있는 고정된 위치가 필요하고 300px 가로 폭이어야 합니다.

문제를 해결했을 때, 아래와 비슷한 스타일 작성을 마무리했을 겁니다:

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 300px;
  background-color: #333;
}

.sidebar ul {
  margin: 0;
  padding: 0;
}

.sidebar li {
  list-style: none;
}

.sidebar li + li {
  border-top: 1px solid white;
}

.sidebar a {
  display: block;
  padding: 1em 1.5em;
  color: #fff;
  text-decoration: none;
}

사이드바가 숨겨졌을 때 모습은 어떤가요?

사이드바는 300px 만큼 오른쪽으로 옮겨져 스크린에서 빠져나옵니다.

이 질문에 답했을 때, 다른 두 가지가 머릿속에서 떠오를 것입니다:

1. 사이드바가 보이거나 숨겨지는지 어떻게 알 수 있나요?
2. 숨겨진 사이드바를 어떻게 꾸미나요?

그 질문에 답해봅시다.

어떻게 사이드바가 보이거나 숨겨지는지 알 수 있나요?

만약 사이드바가 .is-hidden 클래스를 가지고 있다면, 사이드바는 시야에서 숨겨져야 합니다. 그렇지 않으면 보일 것입니다.

숨겨진 사이드바를 어떻게 꾸미나요?

trasnlateX를 사용하여 300px 사이드바를 오른쪽으로 옮기려고 합니다. transform 은 애니메이션의 더 나은 속성 중 하나입니다. 스타일은 다음과 같이 변합니다:

.sidebar.is-hidden {
  transform: translateX(300px);
}

어떻게 사이드바가 보이나요?

사이드바는 즉시 보일 수 없습니다. 오른쪽에서 움직일 필요가 있습니다.

위의 CSS 코드를 이해했다면, transition 속성을 사용할 수 있을 겁니다. 만약 모른다면 구글 검색을 통해 답변을 얻기 바랍니다.

페이지를 불러올 때 사이드바가 보여야 하나요?

아닙니다. 우리가 가진 것을 고려하면, is-hidden 클래스를 사이드바 마크업 안에 넣을 수 있고 사이드바는 숨겨져 있어야 합니다.

<div class="sidebar is-hidden">
  <!-- links -->
</div>

하나를 예외로 모든 사항에 대해 대답을 했습니다. – 버튼이 한번 클릭 되었을 때마다 어떤 일이 벌어지나요? 두, 세 번째 때에는 어떤 일이 벌어지나요?

위의 대답은 너무나 모호합니다. 클릭했을 때야 사이드바가 나타나야 합니다. 하지만 어떻게 하면 그게 가능할까요? 또다시 클릭 되었을 때는 사라져야 하지만 어떻게 할 수 있을까요?

이 점에서, 이 질문에 대한 대답을 훨씬 더 많이 할 수 있습니다. 하지만 그 이전에, 어떻게 버튼을 클릭했는지 알 수 있나요?

버튼이 클릭됐는지 알 방법

만약 자바스크립트를 안다면, 버튼에 이벤트 리스너를 추가할 수 있다는 것을 알 겁니다. 그리고 click 이벤트를 기다릴 것입니다. 만약 모른다면, 구글 검색을 통해 답을 찾길 바랍니다.

이벤트 리스너 이벤트를 추가하기 이전에, 버튼을 마크업과 querySelector로 함께 찾을 필요가 있습니다.

const button = document.querySelector('.btn')

button.addEventListener('click', function () {
  console.log('button is clicked!')
})

버튼이 한번 클릭 되었을 때 어떤 일이 일어나나요?

버튼이 한번 클릭 되었을 때, is-hidden 클래스를 없애야 버튼이 나타납니다. 자바스크립트로 클래스를 삭제하려면, Element.classList.remove를 사용합니다. 즉, 사이드바를 먼저 선택해야 합니다.

const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')

button.addEventListener('click', function () {
  sidebar.classList.remove('is-hidden')
})

버튼이 두 번 클릭되었을 때 어떤 일이 일어나나요?

버튼이 다시 클릭 되었을 때, 사이드바로 돌아가서 is-hidden 클래스를 추가해야 사라집니다.

불행하게도, 이벤트 리스너로 얼마나 많은 횟수로 버튼이 클릭되었는지 알 수 없습니다. 제일 나은 방법은 사이드바에 is-hidden 클래스가 이미 있는지 확인하는 것입니다. 만약에 그렇다면 클래스를 삭제하고 아니라면 추가합니다.

const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')

button.addEventListener('click', function () {
  if (sidebar.classList.contains('is-hidden')) {
    sidebar.classList.remove('is-hidden')
  } else {
    sidebar.classList.add('is-hidden')
  }
})

이것으로, 첫 컴포넌트 프로토타입을 완성했습니다.

Zell Liew (@zellwk)님의 Sidebar for Thinking like a programmer article 을 CodePen에서 참고해주세요.

4단계: 리팩토링 하고 개선하세요

마지막 단계는 코드를 리팩토링 하고 개선하는 것입니다. 당장 이 단계는 자연스럽지 않을 수도 있습니다. 코드를 개선될 수 있는지 알기 전에는 노력과 연습이 필요하기 때문입니다.

위의 예제에서, 몇 가지의 질문을 더 던질 수 있습니다.

1. 시각장애를 가진 사용자를 위한 접근하기 쉬운 사이드바 컴포넌트를 어떻게 만들 것인가요?
2. 어떻게 사이드바 컴포넌트를 키보드와 함께 사용하기 쉽게 만들 것인가요?
3. 아무튼 코드를 개선할 수 있나요?

3번째의 질문을 위해, 조금만 더 구글 검색을 했더라면, 만약 클래스가 있으면 toggle 메서드가 클래스를 없애는 것을 알아차릴 겁니다. 만약 클래스가 없는 경우 toggle 메서드는 우리를 위해 클래스를 추가합니다:

const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')

button.addEventListener('click', function () {
  sidebar.classList.toggle('is-hidden')
})

마무리

프로그래머처럼 생각하는 법은 간단합니다. 해결책은 문제들을 하나의 작은 요소로 나누는 것입니다.

문제를 나누는 것을 마쳤을 때, 작은 문제를 위한 해결책을 찾고 그것들을 코딩하세요. 길을 따라가면 이전에 생각하지 못했던 많은 문제를 발견할 것입니다. 그것들을 같이 해결하세요.

각각의 작은 문제에 대한 답을 쓰는 것을 끝낼 무렵에, 큰 문제에 대한 답을 얻을 수 있습니다. 때로는 작은 문제에 대해서도 그렇게 해야 할 수도 있습니다.

끝으로, 첫 해결책을 찾았을 때 일은 끝나지 않습니다. 개선하기 위한 여지는 항상 있기 때문입니다. 하지만, 열에 아홉으로 지금 당장 개선하는 것을 원하지 않을 것입니다. 휴식을 취하고, 다른 일을 한 뒤 나중에 돌아오세요. 그러면 이전보다 더 나은 질문을 던질 수 있을 것입니다.

읽어 주셔서 감사합니다. 이 글이 도움이 되었으면 원문 혹은 이 번역본을 공유하는 걸 추천해드립니다. 이제 누군가 당신의 도움이 필요할지도 모릅니다.

역자 후기

“게시글 섬네일을 어떻게 구현하지? 스케치(디자인 도구)로 설계한 사용자 인터페이스를 어떻게 픽셀까지 맞추면서 구현할 수 있을까? 다른 도구의 도움 없이 반응형 페이지를 만들 수 있을까?"

저는 이 글을 통해 용기를 받아 위의 고민을 순차적으로 해결해서 저만의 블로그 스타일을 만들어 낼 수 있었습니다. 만일 프론트엔드 개발 학습에 도움이 필요하시다면 저자의 메일링 구독 서비스를 개인적으로 추천해드립니다.