개발자가 생각하는 방법 : 계획 및 계획의 연습을 통해 간단한 웹 응용 프로그램의 설계 

다른 웹 앱을 만드는 방법에 대한 훌륭한 자습서가 많이 있습니다. 그러나 이것들 만큼이나, 나는 종종 내 자신의 웹 앱을 시작할 때 붙어 있다고 느꼈습니다.

그래서 저는 이 기사를 작성하여 내 사고 과정을 안내합니다. 이것이 내가 직접 프로젝트를 계획하고 개발하는 방법입니다.

https://www.freecodecamp.org/news/a-walk-through-the-developer-thought-process/ 

시작하기 전에 간단히 살펴보기 :이 기사는 모든 프로젝트를 작성하는 방법에 대한 "실버 글 머리 기호"안내서가 아닙니다. 이것은 내가 개인적으로 내 프로젝트에 접근하는 방법입니다. 그것은 당신을 위해 작동 할 수 있습니다, 그렇지 않을 수 있습니다.

앱을 만드는 "올바른"방법은 없습니다. 기억하십시오 : 여행의 끝까지 가는 많은 길이 있습니다. (만약 모르도르에 반짝이는 고리를 타지 않는다면 불행히도 1 개의 도로 만 있습니다).

React.js를 사용하여 예제 앱을 코딩하겠습니다. 이 기사의 끝 부분에서 완성 된 앱에 코드 샌드 박스를 포함 시켰습니다.

따라서 React 프로젝트 설정에 대한 기본 지식이 필요합니다. 이 기사의 원칙은 앱을 코딩하는 데 사용하는 언어에 관계없이 여전히 적용됩니다.

오늘 우리는 ... 간단한 계산기를 만들겠습니다.

"무엇을 합니까?" 

이것은 측면 프로젝트를 시작하기 전에 내가 묻는 첫 번째 질문입니다. 내 계산기를 사용할 수 있기를 원합니다.

• 숫자 더하기, 빼기, 나누기 및 곱하기
• 계산 결과 표시
• 디스플레이 재설정

지금은 충분해야 합니다. 이러한 방식으로 기능을 계획하면 앱이 수행 할 작업에 대한 아이디어를 얻을 수 있으며 "존에"있게 됩니다.

이 접근법은 또한 당신에게 향한 확실한 목표를 제공합니다. 모든 기능을 구현했으면 작업을 마치고 다음 프로젝트 인 Huzzah에 대해 생각할 수 있습니다.

그렇지 않으면 너무 많은 기능을 추가하려고 시도하고 수면에서 계산기를 볼 위험이 있습니다. 물론 원하는 경우 기능을 계속 추가 할 수 있습니다. 그러나 목표를 향해 노력해야 합니다.

실제 상황 (역할에 따라)에는 "업무 수행"부분을 정의하는 고객 또는 제품 소유자가 있을 수 있습니다. 개발자로서 귀하의 직무는 이러한 요구 사항을 보다 세부적인 작업으로 나눌 것이며, 나중에 자세히 설명하겠습니다.

"어떻게 생겼나요?" 

이제 기능에 대한 아이디어를 얻었으므로 어떻게 보일지 생각할 것입니다.

디자인을 생각해 내기 위해 고군분투하고 있다면, 여러 가지 방법으로 이를 수행 할 수 있습니다.

• 유사한 앱의 예를 살펴보십시오
• 사용할 수 있는 요소에 대한 CSS 프레임 워크 찾아보기
• 또는 당신의 상상력을 사용하십시오. (모든 측면 프로젝트가 "믿을 수 없는"것처럼 보일 필요는 없습니다.)

오늘은 특히 예술적인 느낌이 들기 때문에 계산기 모양을 빠르게 와이어 프레임으로 만들려고 합니다.

저는 제 기능이 있으며 Van Gogh 자신이 자랑스럽게 생각하는 스케치를 가지고 있습니다.

실제로는 팀의 일원으로 일할 때 디자이너가 이와 같은 것을 제안 할 수 있습니다. 또는 더 나은 방법으로 프로토 타입을 제공 받을 수도 있습니다.

"요소를 어떻게 배치하고 스타일을 지정합니까?" 

내 앱의 기능과 모양에 대해 좋은 느낌을 갖기 시작했습니다. 이제 좀 더 기술적 인 시간을 가지십시오.

이 시점에서 저는 "좋아요. 버튼이 있고 큰 올레가 있습니다. 모든 것을 어떻게 배치할까요?"

디자인을 구현하는 것은 집을 짓는 것과 비슷하다고 생각합니다. 기초 (레이아웃)를 배치하고 외부 구조 (단추, 입력)를 만들고 나중에 마무리 터치 (색상, 아이콘, 스타일)를 추가하십시오.

레이아웃에 관해 이야기 할 때 가장 먼저 떠오르는 것은 CSS Grid, Flexbox 또는 프레임 워크 (예 : Bootstrap)입니다. Flexbox는 반응성이 뛰어나므로 한 줄 내에서 항목을 정렬하기가 쉽고, 느낌이 좋기 때문에 Flexbox를 사용할 것입니다. 이를 통해 필요하지 않은 추가 종속성을 설치하지 않아도 됩니다.

"어떻게 동작합니까?" 

이제 앱의 작동 방식에 대해 생각할 차례입니다. 이것은 기본적으로 코드를 디자인하는 데 도움이 되는 기능을 더 자세하게 분류하는 것입니다.

나 자신에게 이것을 물을 때, 나는 다음과 같은 것들에 대해 생각하고 있습니다.

• 앱이 로드 될 때 어떤 모습입니까?
• 사용자가 버튼을 클릭하면 어떻게 됩니까? 스타일이 바뀌나요?
• UI는 다양한 사용자 작업에 어떻게 반응합니까?

이 질문에 대답하는 또 다른 방법은 기존 예제를 사용하는 것입니다.

작은 작업 : 컴퓨터에서 계산기를 열고 몇 가지 작업을 시작하십시오. 더하기, 곱하기 등

작업을 수행 할 때 가능한 한 자세하게 캡처 할 수 있는지 확인하십시오.

내가 찾은 것은 다음과 같습니다.

• 앱이 로드되면 디스플레이가 "0"으로 설정되고 모든 버튼이 "비활성"상태입니다
• 사용자가 숫자를 클릭하면 디스플레이가 새로운 값으로 업데이트 됩니다. 클릭 한 버튼은 스타일이 변경되어 클릭이 성공했음을 사용자에게 표시합니다.
• 사용자가 운영자를 클릭하면 선택한 운영자가 어떤 방식으로든 선택되었음을 나타냅니다.
• 운영자 버튼을 클릭 한 다음 사용자가 숫자 버튼을 클릭하면 사용자가 클릭 한 다음 숫자가 표시되기 전에 먼저 디스플레이가 0으로 재설정 됩니다.
• 같음 버튼을 클릭하면 초기 번호, 선택한 연산자 및 입력 된 다음 번호를 사용하여 계산이 수행됩니다.
• 사용자가 지우기 버튼을 클릭하면 디스플레이가 0으로 재설정 되고 앱이 재설정 됩니다.

실제 세계에서 우리는 항상 모범의 모범이나 프로토 타입을 가지고 있지는 않습니다. 그러나 경험이 커지면 와이어 프레임 또는 모형을 기반으로 이 작업을 수행하는 것이 더 쉬워집니다. 그렇기 때문에 초보자에게 기존 앱을 복제하도록 제안하는 것이 좋습니다. 이것이 중요한 사고와 분석을 연습 할 수 있는 예를 제공하기 때문입니다.

그러나 왜 우리는 그토록 세부적인 내용을 다루어야 합니까? 좋은 질문. 대답은 컴퓨터가 엄청 똑똑하지만 엄청나게 멍청하기 때문입니다. (나를 믿지 않습니까? 코드에서 임의의 중괄호를 제거하고 모든 지옥이 풀리는 것을 지켜보십시오.)

우리가 컴퓨터에 제공하는 지침은 매우 구체적이어야 합니다. 예를 들어 위의 동작을 되돌아 보면 숫자를 클릭하면 연산자 클릭 여부에 따라 다르게 작동합니다.

우리는 인간으로서 계산기의 작동 방식을 알고 있지만 컴퓨터는 우리에게 방법을 알려줄 때까지는 그렇지 않습니다.

"내 코드는 어떻게 생겼습니까?" 

UI를 디자인하는 데 시간을 보냈 듯이 코드에서도 마찬가지입니다. 이것에 많은 이점이 있습니다 :

• 필요한 구성 요소에 대해 자세히 생각하게 합니다.
• 워크 플로우에 대해 생각하게 합니다
• 계획이 있기 때문에 코드 작성이 더 쉽고 빠릅니다.
• 문제와 문제 영역을 조기에 파악

나는 이 프로젝트를 위해 일을 단순하게 유지하는 것을 목표로 할 것이라고 언급 했으므로 이 접근법을 고수 할 것이다. 처음에는 모든 것을 하나의 구성 요소로 유지합니다. 그러나 다음과 같은 경우 리팩토링하고 구성 요소로 분할하기 시작합니다.

• 코드가 관리하기 어렵거나 추론하기 어려운 지점까지 커짐
• 중복 된 코드가 많이 있습니다
• 페이지의 단일 요소에는 자체 기능과 상태가 필요합니다

프로젝트가 끝날 무렵에 "sh * t!이 모든 것을 재 설계해야 할 것을 잊어 버렸습니다."라고 생각한 적이 있습니까? 미리 계획하면 이 함정을 피할 수 있습니다. 그것을 염두에 두고, 내가 필요하다고 생각하는 것들이 있습니다. 하루 종일 생각하지 말고 계획과 시작 사이의 균형을 찾으십시오. UI 모형을 개별 부분으로 나누고 어떤 코드가 필요한지 생각해 봅시다.

디스플레이 

내 디스플레이에는 사용자에게 현재 번호가 표시되므로 이에 대한 일종의 상태(state) 값이 필요합니다. 클릭해도 아무런 변화가 없으므로 아무 것도 필요하지 않습니다.

숫자 버튼 

숫자 버튼이 디스플레이에 표시된 숫자에 영향을 주므로 이를 관리하기 위해 onClick 이벤트에 의해 호출되는 기능이 필요합니다. 선택한 번호를 현재 상태로 저장할 필요가 없습니다.

연산자 버튼 

오퍼레이터 버튼은 흥미로운 일입니다. 다른 일이 발생함에 따라 위의 "어떻게 작동합니까?" 현재 선택된 연산자를 알아야 하므로 상태 값(state value)으로도 저장합니다.

The equals buttons 

등호 버튼은 표시 값, 연산자, 이전에 입력 한 값을 가져와 결과를 계산해야 합니다.

확실히, 우리는 첫 번째 문제를 겪었습니다! 우리의 행동을 되돌아 보자

연산자 버튼을 클릭 한 다음 사용자가 숫자 버튼을 클릭하면 사용자가 클릭 한 숫자가 표시되기 전에 먼저 디스플레이가 재설정 됩니다 

사용자가 디스플레이에 입력 한 첫 번째 숫자는 연산자를 클릭 할 때 재설정(reset) 되고 다음 숫자를 입력하기 시작합니다. 이는 사용자가 클릭 할 때 첫 번째 숫자가 무엇인지 알 수 없음을 의미합니다. 이것에 대해 생각해 보자.

연산자 버튼을 클릭하면 디스플레이가 재설정되고 사용자가 입력 한 다음 번호로 업데이트 됩니다. 논리적으로, 연산자를 클릭하면 이전 표시 값을 저장하는 것이 좋습니다. 이것이 작동하려면 연산자를 클릭 할 때 표시 값을 저장하는 함수(function)와 상태 값(state value)이 필요합니다.

지우기 버튼 

이것은 쉬운 방법입니다. 상태 값을 0으로 재설정(state values to zero)하여 사용자가 다시 시작할 수 있게 하십시오. 이를 처리하려면 버튼에 간단한 onClick 기능이 필요합니다.

"무엇을 테스트해야합니까? 그리고 무엇이 잘못 될 수 있습니까?" 

대화 상대에 따라 테스트에 접근하는 다른 방법이 있을 수 있습니다. 어떤 사람들은 테스트를 먼저 작성하는 TDD를 좋아하고 어떤 사람들은 마지막에 테스트를 작성합니다. 나는 프로젝트에 따라 둘 다합니다. 그러나 중요한 것은 당신이 언젠가 그것들을 쓰는 것입니다.

테스트에 대해 생각할 때 요구 사항을 살펴 봅니다. 첫 번째 요구 사항 (또는 기능)은 다음과 같습니다.

• 숫자 더하기, 빼기, 나누기 및 곱하기

따라서 앱이 이러한 작업을 수행 할 수 있는지 테스트해야 합니다. 테스트 작성 방법에 대해서는 자세히 설명하지 않겠지 만 좋은 테스트 스위트는 다음을 포함해야 합니다.

• 요구 사항 및 일반적인 사용 사례
• 에지 케이스 (예 : 사용자가 99999999999999999999 + 9999999999999999999999 입력)
• 오류 사례 및 문제가 발생할 수 있는 위치 (예 : 사용자가 0으로 나누려고 시도)

"내가 몇 번의 테스트를 작성해야 합니까?"는 아마도 다음 질문입니다. 불행히도 이것에 대한 단단하고 빠른 숫자는 없습니다. 무한한 양의 입력이 가능합니다. 위의 사항을 준수하면 모든 프로젝트에 대한 견고한 테스트 스위트가 제공됩니다.

테스트를 조기에 생각하면 코드에서 오류가 발생할 수 있는 위치를 생각하는 데 도움이 되며 설계 초기에 이를 처리 할 수 ​​있습니다.

코드를 보자 

이것은 코딩 자습서가 아니므로 이 기사의 각 단계에 대한 핵심 내용은 다루지 않겠습니다. 아래에 설명 된 각 단계의 코드 / 워크 스루를 포함한 실제 예제를 보려면 끝에 있는 코드 샌드 박스를 참조하십시오. 코드를 포크하고 마음의 내용을 재생, 파괴 및 실험하십시오!

코드를 작성할 때 계획에 충실합니다.

• 와이어 프레임을 참조로 사용하여 UI 레이아웃 및 요소를 먼저 배치하는 데 집중
• 로직 구현 (JS, 이벤트 핸들러 등)
• 최종 수정
• 처음부터 리팩토링 및 성능에 대해 걱정할 필요 없이 모든 것이 작동하도록 가장 간단한 작업을 수행하십시오!

1 단계-레이아웃 및 기본 UI 요소 

(아래 링크 된 코드 샌드 박스에서 1 단계 단추를 클릭하여 작업 예제를 확인하고 app-step-1.js를 참조하여 코드를 확인하십시오!)

레이아웃부터 시작하여 앱의 "스캐 폴딩"을 함께 가져 오십시오. 여기에는 HTML을 추가하고 Flexbox를 사용하여 디스플레이와 버튼을 배치하는 작업이 포함됩니다. 그들은 아직 아무것도 하지 않지만 멋지게 보일 것입니다. 

2 단계-논리 추가 

(아래 링크 된 코드 샌드 박스에서 2 단계 단추를 클릭하여 작업 예제를 확인하고 app-step-2.js를 참조하여 코드를 보십시오!)

이 부분에 대한 계획을 마쳤으므로 다시 참조하겠습니다. "내 코드는 어떻게 생겼는지"노트에서 이벤트를 처리하기 위해 여러 가지 상태 객체와 함수를 만들어야 합니다.

이를 위해 "내 코드는 어떤 모양입니까?"에서 하나의 항목을 가져옵니다. 한 번에 나열하고 "어떻게 작동합니까?"를 다시 참조하십시오. 모든 것을 하나로 모으기 위한 메모 기능을 구현하고 작동하는지 테스트합니다 (일반적으로 자동화되었지만 수동으로 수행함). 예:

목록의 첫 번째 요소는 디스플레이입니다. 이를 위해 상태 변수와 논리를 추가하겠습니다. 작동하는지 테스트하고 숫자 버튼으로 이동 한 후 반복하십시오. 테스트를 조기에 작성하는 것이 도움이 되는 곳입니다. 스위트를 너무 자주 실행하여 아무것도 깨지지 않도록 할 수 있습니다.

3 단계-종과 휘파람 추가 

(아래 링크 된 코드 샌드 박스에서 3 단계 단추를 클릭하여 작업 예제를 확인하고 app-step-3.js를 참조하여 코드를 보십시오!)

우리는 거의 다 끝났습니다! 이제 논리가 작동하므로 이제 더 미세한 터치 (둥근 버튼, 테두리, 더 큰 표시 등)를 앱에 추가하면 완료됩니다! 우리의 매우 기본적인 계산기는 이제 일을 합니다!

4 단계-끝났습니다! 

나는 의도적으로 느끼고 시도해 볼 수 있는 것들을 의도적으로 생략했습니다. 지금까지 배운 접근법을 사용하십시오. 동작, 필요한 기능 / 상태 객체 등을 생각하십시오.

• 우리 계산기가 와이어 프레임과 일치하지 않습니다. 버튼에 색상을 추가 할 수 있습니까? 선택한 버튼을 클릭 할 때 색상을 변경하는 것은 어떻습니까?
• 테스트가 없습니다! 이런! 추가 할 수 있는지 확인
• 일부 중복 코드가 존재합니다. 버튼을 렌더링 하는 방법을 찾을 수 있으므로 16 개의 버튼 요소를 하드 코딩 할 필요가 없습니까?
• 오류 처리-없습니다! 이것은 나쁘다. 0으로 나누려고 하면 어떻게 됩니까? 또는 디스플레이보다 넓은 숫자가 있다면?
• 사용자가 숫자를 입력하기 시작하면 선행 0이 디스플레이에 추가됩니다 (예 : 000003) 이것은 UX가 좋지 않습니다. 수정할 수 있습니까?

CodeSandbox-완성 된 예 

https://codesandbox.io/s/code-thought-process-2imft?from-embed