손으로 코드를 작성한다는 생각이 어리석은 것처럼 보인다면 그것이 불가피하다는 사실에 놀라실 것입니다. 확신이 서지 않는다면 마지막 면접을 생각하고 면접실 주변에 컴퓨터가 없었다는 것을 기억하십시오. 면접관, 백지, 파란색 볼펜뿐입니다.
여러분 중 학생들에게는 답안지의 가용 공간에 전략적으로 짜넣은 코드 줄에 의해 성적이 좌우되기 때문에 더 큰 문제입니다.
뿐만 아니라 숙련된 프로그래머는 사무실 복사기에서 제거한 A4 용지 묶음을 가리키며 작업한 특히 복잡한 알고리즘을 낙서할 수 있습니다.
따라서 여러분이 시험 학생이든, 잠재적인 면접 대상자이든, 프로그래밍 막다른 골목을 해결하려는 사람이든 간에 이 기사가 종이에 펜을 대고 코딩할 때 도움이 되기를 바랍니다.
코드 작성의 아날로그적 측면에 중점을 둘 것이지만 이러한 단계를 모든 형식이나 언어로 코딩하는 데 적용할 수 있습니다. 따라서 이것은 나를 위해 특별히 작동하지만 작업에서 매우 유용할 수 있는 일반적인 코딩 지침과도 같다고 생각하십시오.
왜 적어?
시작하기 전에 아무도 여러분이 노트북에 프로덕션 준비 코드를 기록할 것으로 기대하지 않는다는 점을 이해하는 것이 중요합니다. 그것을 코드 편집기에 넣고 오류 없이 컴파일할 수 있는 것과는 다릅니다. 완벽한 코드를 만드는 것이 목표였다면 면접실과 시험장에서 컴퓨터 앞에 앉았을 것입니다.
손으로 코드를 작성하는 목적은 사전에 논리를 통해 작업하는 것입니다. 디자인에는 가능한 한 빨리 "브라우저에 들어가고" 싶은 욕구가 있지만 손으로 디자인을 스케치하는 데에는 통념이 있습니다. 저충실도 매체는 빠른 실험과 값싼 실수를 조장합니다.
주로 구문과 의미를 연구할 때 코드에서도 마찬가지입니다. 즉, 올바른 구문과 의미를 얻는 것은 항상 전체 필기 연습의 유일한 초점은 아니지만 플러스 포인트입니다.
필기 코드와 관련하여 어디서부터 시작할 수 있는지 봅시다.
귀하의 질문을 알고
대학 마지막 XNUMX년 동안 건강상의 이유로 인턴십도 하지 못하고 캠퍼스 인터뷰도 하지 못했습니다. 그 결과, 나의 첫 취업 면접은 말 그대로 큰 부담을 안고 진행되었습니다.
지금 돌이켜보면 면접은 꽤 쉬웠다. 그러나 한 번도 참석한 적이 없었기 때문에 나는 이성적으로 불안했습니다. 면접관이 프로그래밍에 대해 가장 먼저 질문한 것은 별표로 구성된 역삼각형을 출력할 수 있는지였습니다. 내가 말했듯이, 그것은 쉬웠다 - 아무것도 for 루프는 처리할 수 없습니다. 하지만 내가 말했듯이 내 불안은 지붕을 통해서이기도 했다.
나는 심호흡을 하고 그들이 나를 위해 펼친 백지에 손바닥을 대고 테이블 위의 나를 향해 가능한 한 천천히 밀고(물론 시간을 벌고) 펜을 눌렀다. 오른쪽.
먼저 별표로 만든 역삼각형을 그렸습니다. 그렇게 해서 나는 그들의 질문에 답하기 시작했습니다.
나는 그렇지 않으면 뛰어난 개발자들이 그들이 해결하는 것이 무엇인지 완전히 이해하지 못하기 때문에 단순히 뭔가 잘못하는 것을 보았습니다.
우리가 작업하는 질문은 물리학자나 수학자가 푸는 질문과 다릅니다. 그들은 매개변수 세트를 얻고 누락된 매개변수를 찾습니다. 우리의 질문은 우리의 결과이기도 합니다. 우리는 이미 우리의 결과가 무엇인지 들었습니다. 우리는 그 결과에 도달하는 방법을 알아내야 합니다. 결과를 볼 수 있기 때문에 질문을 잘 아는 것이 중요합니다.
출력하고 싶은 것을 적거나 그리는 것은 코딩을 시작하는 가장 좋은 방법 중 하나입니다. 급변하는 업계에서 "hello world" 데모를 실행하여 프로그래밍에 바로 뛰어들어야 한다는 것을 이해합니다. 그리고 익숙하지 않은 구문에 익숙해지고 새로운 시도에 대한 불안을 떨쳐버리기에 좋습니다.
그러나 누군가가 당신에게 질문을 하고 당신에게 노력할 결과를 준다면, 그것을 먼저 내려놓는 것이 낫지 않을까요? 그 질문/결과는 출발점일 뿐만 아니라 참조점이기도 합니다. 코딩의 어느 단계에서나 코딩을 통해 작업하고 있고 올바른 방향으로 가고 있는지 확인할 수 있습니다.
따라서 답안지나 작성하려는 빈 A4 용지에 상관없이 잠시 시간을 내어 출력하려는 내용을 적어 보십시오. 답변의 일부가 되는 것을 원하지 않으면 여백이나 모서리에 넣을 수 있습니다. 계속 참조할 수 있는 위치에 있는지 확인하십시오.
코드 개요
이 단계는 양날의 검과 같습니다. 프로그램에 대한 로드맵을 얻거나 시간을 낭비할 수 있습니다. 내 일은 전자인지 확인하는 것입니다.
그래서 무엇보다 먼저 다음과 같이 말하고 싶습니다. 문제나 질문의 범위가 작은 경우 개요 코드가 필요하지 않습니다. 다시 말하지만, 이 관행은 모든 프로젝트나 상황에 규범적이거나 보편적이지 않습니다. 내가 면접관이라고 상상하고 가능한 한 많은 방법으로 CSS를 사용하여 웹 페이지의 요소를 중앙에 배치하는 방법을 작성해달라고 요청합니다. 이에 대한 개요가 필요하지 않을 것입니다. 코드 조각은 각 메서드에 대해 상대적으로 작습니다.
그러나 이제 터치스크린 인터페이스를 통해 사용자 서명을 캡처한 다음 서버에 서명을 저장하는 웹 응용 프로그램을 작성하도록 지정했다고 가정해 보겠습니다. 그렇게 간단하지 않습니까? 알아낼 것이 한 가지 이상 있습니다. 아마도 약간의 개요가 도움이 될 것입니다.
- 서명 캡처를 위한 UI — HTML Canvas? 웹지엘?
- 사용자가 서명할 때 웹 페이지의 나머지 부분에서 포인터 이벤트 비활성화
- 캡처한 이미지를 PNG 파일로 변환 및 저장 — JS
- 그런 다음 blob(아마도)으로 변환하고 방문자의 로그 데이터 테이블에 저장합니다.
코딩해야 할 것 같은 대략적인 일련의 작업을 작성했습니다. 내가 무엇을 원하느냐에 따라 더 짧을 수도, 더 길 수도 있었다.
클라이언트 프로젝트를 위한 코드 개요를 작성하는 것이 좋습니다. 사용자 요구 사항과 함께 또는 인쇄한 와이어프레임 뒷면에 개요를 작성합니다.
글머리 기호에 대한 빠른 스냅샷은 지도, 할 일 목록 및 프로젝트 끝에 도달했을 때 확인할 체크리스트를 제공합니다. 거의 전체 프로젝트의 요약이 낮은 충실도 목록에 있습니다. 또한 다음 유사한 프로젝트를 시작하기 위한 템플릿이 될 수도 있습니다.
하지만 앞서 말했듯이 이 단계는 양날의 검과 같다. 시간 제약이 있을 때 수험자와 인터뷰 대상자를 위해 이 내용을 짧게 유지해야 합니다.
어디서부터 시작해야 할지 모르겠다면 애플리케이션에서 코딩해야 할 세 가지 필수 기능만 적고 시간이 있다면 XNUMX개로 만드십시오.
하지만 그게 전부입니다. 이것에 가능한 한 적은 시간을 할애하고 세부 사항에 대해 땀을 흘리지 마십시오. 개요는 추가 점수를 주지 않습니다. 모든 것이 포함되어 있는지 확인하는 데 도움이 될 뿐입니다. 그것은 당신의 초기 직감 반응을 포착하고 프로젝트의 수명 동안 당신을 정직하게 유지합니다.
장수 대 속기
코딩을 시작할 시간입니다. 그래서, 당신은 무엇을 작성합니까? "Bdrs" 또는 "border-radius"; "div -> p"또는"<div><p></div></p>"; "pl()"또는"println()"; "q()"또는"querySelector()"?
다른 사람이 귀하의 코드를 평가하고 있다면 선택의 여지가 없습니다. 약어, 의사 코드, Emmet 단축키 및 기타 모든 형태의 속기 작성을 생략하십시오. 그렇지 않으면 이 글을 읽는 누군가가 당신의 약어가 무엇을 의미하는지 알고 있다고 가정할 이유가 없습니다.
그것은 정말 당신에게 달려 있습니다.
손으로 쓰는 것에 익숙하지 않다면(그리고 우리 중 많은 사람들이 그러합니다) 장문의 표기법이 지루해지기 때문에 지나치게 사용하지 않는 것이 좋습니다. 동시에, 당신의 글에 너무 검소한 것은 없습니다. 언젠가 그것을 되돌아보고 당신이 적었던 것을 이해할 수 있기를 원한다면 그렇지 않습니다.
메모 작성 앱에 파일이 열려 있고 책상 위에 줄을 긋는 메모장이 있어 나중에 참조할 수 있도록 저장하고 싶은 코드 조각을 적습니다. 그것들은 조직화되지 않았으며, 단편의 긴 스트림일 뿐입니다. 그렇기 때문에 오래된 노트를 훑어볼 때 명확하게 기록하지 않았다면 무엇을 썼는지 몰랐을 것입니다.
나는 항상 구문을 잊어 버립니다. 예를 들어, JavaScript 함수가 도입된 이후로 화살표 표기법을 사용해 왔으며(더 짧기 때문에) 누군가 갑자기 다음을 사용하여 함수를 정의하도록 요청하면 function 키워드를 사용하면 괄호나 함수 이름을 잘못 배치하여 구문 오류가 발생할 수도 있습니다.
한동안 사용하지 않은 구문을 잊어버리는 것은 드문 일이 아닙니다. 그렇기 때문에 나중에 참조할 수 있도록 메모가 필요할 때 메모를 명확하게 작성하는 것이 좋습니다.
코드의 비순차적 흐름
인터뷰 대상자 및 응시자에게 적용되지 않는 마지막 단계와 달리 이 단계는 특히 귀하에게 제공됩니다.
대부분의 프로그래밍 언어는 소스에 미리 작성된 코드가 호출될 때 나중에 실행되도록 해석, 컴파일 및 실행됩니다. 예를 들어 함수 호출을 사용하여 JavaScript에서 수행합니다. 함수는 처음에 정의한 다음 나중에 실행할 수 있습니다. 수험자와 인터뷰 대상자는 이를 사용하여 먼저 답변의 중요한 지점에서 작업을 시작할 수 있습니다.
내가 처음부터 말했듯이, 손으로 코드를 작성하는 목적은 프로그램이 무엇이든 간에 논리를 테스트하거나 테스트하는 것입니다. 먼저 해결하는 데 집중할 때 가장 좋습니다.
고전적인 교과서의 예를 들어보겠습니다. n번째 값을 찾는 프로그램 피보나치 수. 이에 대한 간단한 개요를 작성한다면 다음과 같을 것입니다.
- 입력을 받습니다.
- 피보나치 수를 계산합니다.
- 출력을 요약합니다.
- 출력을 인쇄합니다.
해당 개요의 모든 단계는 필수적입니다. 그러나 1, 3, 4는 더 의무적입니다. 그것들은 필요하지만 즉시 집중할 만큼 중요하지 않습니다.
입력을 가져오는 것보다 피보나치 수를 계산하기 위해 코드를 작성하는 것이 좋습니다. 함수로 래핑한 다음 코드를 순차적으로 작성하고 적절한 위치에서 해당 함수를 호출하는 줄을 작성하십시오.
문제의 핵심에 초점을 맞춘 코드를 작성하는 데 시간을 할애하십시오.
진정한 전문가는 건너뛸 수 있습니다. 클라이언트 프로젝트가 있고 삼각형 기하학으로 작업해야 한다고 가정해 보겠습니다. 두 면이 있고 반대 각도가 있고 세 번째 면의 길이를 찾아야 합니다. 그리고 시작하기 위해 종이에 낙서를 하기로 결정했습니다. IDE.
첫째, 물론 삼각형을 그릴 것입니다(알 수 있듯이 이것은 제가 매우 경험한 것입니다). 나는 몇 가지 샘플 길이와 각도를 기록할 것입니다. 그런 다음 공식(물론 온라인 검색에 대한 칭찬)을 작성한 다음 해당 함수의 코드로 바로 이동합니다.
프로덕션 준비 코드에서 필요하더라도 필수 단계를 적어두는 것은 의미가 없습니다. 하지만 그것을 시험에서 답안지에 적어야 한다면 얘기가 달라지겠죠. 다른 단계를 건너뛸 수 없습니다. 그러나 여전히 수식 코드로 시작할 수 있습니다.
의사 코드
Chris는 이미 작성했습니다. 의사 코드에 대한 유용한 기사 나는 당신이 확실하게 읽을 것을 강력히 권장합니다.
전체 필기 코드가 차 한잔처럼 느껴지지 않지만 여전히 도움이 될 수 있는지 궁금할 수 있는 모든 전문가를 위해 의사 코드 당신이 찾고있는 균형이 될 수 있습니다.
이전 단계 중 하나에서 언급했듯이 코드 개요와 유사합니다. 그러나 더 짧고 속기 코딩처럼 느껴집니다. 때로는 "스켈레톤 코드"라고도 합니다.
다음은 CSS 그리드 레이아웃에 대한 몇 가지 빠른 의사 코드입니다.
Grid
5 60px rows
6 100px columns쓸일이 별로 없어요! 따라서 종이에 연필을 놓는 것이 이런 종류의 일에는 탁월하지만 사용 중인 프로그램에 의사 코드를 기록하는 것만큼 효과적이고 빠르고 저렴합니다.
공간과 코멘트
나는 코드가 90% 키워드와 10% 탭이라고 생각합니다. 공백이 없으면 단어의 가독성이 떨어집니다. 손으로 쓴 코드에도 들여쓰기가 필요합니다. 그러나 용지의 너비가 제한되므로 모든 수준에 사용하지 마십시오. 공백을 신중하게 사용하되 사용하십시오.
사용할 코드를 작성 중이라면 지금까지 내가 언급한 모든 것을 따랐고 이미 페이지에 출력과 개요를 적어 둔 경우 주석을 포함할 필요조차 없을 수도 있습니다. 주석은 다음 코드 세트가 수행하는 작업을 빠르게 알려줍니다. 코드에 대한 개요를 이미 작성하고 읽었다면 주석은 중복되는 메모입니다.
그러나 당신의 판단이 하나를 내려놓으라고 한다면 그렇게 하십시오. 코드의 오른쪽에 추가합니다(예: VS 코드에서와 같이 이미 작성된 줄 사이에 삽입할 수 없기 때문에). 슬래시, 대괄호 또는 화살표를 사용하여 주석임을 나타냅니다.
특정 구문에 자신이 없는 수험자의 경우 메모를 작성합니다. 이렇게 하면 최소한 종이를 채점하는 사람에게 잘못된 형식의 코드로 의도를 알릴 수 있습니다. 그리고 주석을 표시하기 위해 올바른 구분 기호만 사용하십시오. 예를 들어 JavaScript의 경우 슬래시가 사용됩니다.
아날로그 대 디지털
앞서 언급했듯이 여기에서 제공하는 모든 것은 일반적인 코딩 조언입니다. 실제 종이로 이것을 시도하고 싶지 않다면 모든 메모 응용 프로그램도 작동합니다.
하지만 디지털 경로를 사용하려는 경우 스트레이트 메모 앱이 아닌 다른 앱을 사용하는 것이 좋습니다. 흐름 다이어그램, 마인드 맵, 와이어프레임 등 더 많은 시각적 디지털 도구로 작업하세요. 결과, 개요 및 코드 자체를 시각화하는 데 도움이 될 수 있습니다.
저는 디지털 시민이 아니기 때문에(웹에서 작업하고 최근에 전자책 읽기로 전환한 경우를 제외하고) 실제 노트북을 사용합니다.
내가 좋아하는 필기 코드 도구
어떤 연필과 종이도 할 것입니다! 그러나 거기에는 많은 옵션이 있으며 다음은 내가 사용하는 몇 가지 선택 도구입니다.
코딩에는 "쓰기" 방법이 없습니다.
연필과 종이로 코드를 손으로 쓰는 제 작은 방식이 여러분이 이미 코드를 계획하고 작성하는 방식을 평가하는 데 도움이 되기를 바랍니다. 나는 다른 개발자들이 그들의 작업에 어떻게 접근하는지 아는 것을 좋아하며, 이것이 내가 일을 하는 방식을 엿볼 수 있는 방법입니다.
다시 말하지만, 여기에 있는 어떤 것도 과학적이거나 정확한 예술이 아닙니다. 그러나 손으로 쓴 코드 계획을 시도해보고 싶다면 다음은 우리가 잘 정리된 목록에서 다룬 모든 것입니다.
- 코드의 출력(필요한 경우 샘플 데이터 포함)을 기록하는 것으로 시작합니다.
- 코드에 대한 개요를 작성하십시오. 소규모 프로젝트나 덜 복잡한 프로젝트의 경우 XNUMX단계로 유지하십시오.
- 긴 표기법을 사용하십시오. 스스로 글을 쓰는 개발자는 글을 읽을 수 있고 나중에 참조할 때 이해하기만 하면 속기 표기법을 사용할 수 있습니다.
- 시간 제약이 있을 때 먼저 문제의 핵심을 해결하는 코드를 작성하는 것을 고려하십시오. 나중에 순차 코드의 올바른 위치에 해당 코드에 대한 호출을 기록합니다.
- 자신이 있다면 주요 아이디어를 다루는 의사 코드를 작성해 보십시오.
- 적절한 들여쓰기와 공백을 사용하고 용지 너비에 유의하십시오.
그게 다야! 손으로 코드를 작성할 준비가 되었을 때 이 기사를 통해 쉽게 시작할 수 있기를 바랍니다. 그리고 시험이나 인터뷰를 위해 자리에 앉는다면 이것이 문제를 푸는 데 집중하는 데 도움이 되기를 바랍니다.
