LHJ

I'm a FE developer.

1.2 사용할 프로그램

11 Apr 2020 » js_lj

목수는 톱이 있어야 책상을 만들 수 있고, 우리는 몇 가지 프로그램이 있어야 소프트웨어를 만들 수 있습니다.
다행히 많은 준비가 필요하지는 않습니다.
이번 장에서 우리에게 필요한 것은 브라우저와 텍스트 에디터뿐입니다.

이 소식을 전하게 되어 무척 기쁩니다.
현재 사용되는 브라우저는 모두 이 장의 예제를 잘 실행할 수 있습니다.
심지어 오랫동안 프로그래머들을 괴롭혔던 인터넷 익스플로러도 충분히 발전해서
이제는 크롬이나 파이어폭스, 사파리, 오페라에 뒤떨어지지 않습니다.
필자는 파이어폭스를 선택했고, 프로그램을 배울 때 도움이 되는 파이어폭스의 기능을 설명할 겁니다.
다른 브라우저에도 이런 기능이 있지만,
이 책에서 브라우저의 기능을 설명할 때는 파이어폭스를 기준으로 설명합니다.
따라서 이 책을 공부할 때는 파이어폭스를 사용하는 게 가장 쉽습니다.

코드를 작성하려면 텍스트 에디터가 필요합니다.
텍스트 에디터의 선택은 매우 논란이 많은 주제입니다.
어떤 사람들은 종교적으로 보일 정도로 열띤 토론을 하기도 합니다.
텍스트 에디터는 크게 [텍스트 모드 에디터]와 [창 모드 에디터] 두 가지로 나눌 수 있습니다.

텍스트 모드 에디터 중 가장 널리 쓰이는 것은 vi/vim과 이맥스입니다.
텍스트 모드 에디터에 익숙해지면 SSH 등으로 원격 컴퓨터에 접속한 상태에서도 익숙한 에디터로 파일을 편집할 수 있다는 장점이 있습니다.
창 모드 에디터는 더 세련돼 보이고, 친숙하고 유용한 사용자 인터페이스를 갖추고 있습니다.
하지만 가장 중요한 것은, 결국 텍스트를 편집하는 것이 목적이므로 창 모드 에디터가 텍스트 모드 에디터보다 본질에서 우수하다고 볼 수는 없습니다.
창 모드 에디터 중에서는 아톰(Atom), 서브라임 텍스트(Sublime text), 코다(Coda), 비쥬얼스튜디오(Visual Studio), 노트패드++(Notepad++), 텍스트패드(TextPad), Xcode 등이 널리 쓰입니다.
이들 에디터 중 하나에 익숙하다면 굳이 다른 에디터로 바꿀 필요는 없습니다.
하지만 윈도우 메모장을 사용하고 있다면 바꾸길 강력히 권합니다.
노트패드++은 무료이고 사용하기도 쉽습니다.

에디터의 기능을 모두 이 책에서 설명할 수는 없지만, 다음 몇 가지 기능은 꼭 익혀야 합니다.

  • 문법하이라이트
    문법 하이라이트 기능은 프로그램의 문법적 요소를 색깔로 구별하는 기능입니다.
    예를 들어 리터럴은 주황색으로, 변수는 하늘색으로 표시하는 등입니다(이들 용어의 의미는 곧 알게됩니다).
    이 기능은 코드에서 문제가 있는 부분을 쉽게 찾도록 도와줍니다.
    최신 텍스트 에디터는 대부분 문법 하이라이트 기능을 기본으로 활성화해 놓습니다.
    만약 코드가 단색으로 표시된다면 에디터의 설명서를 읽어보십시오.

  • 괄호 맞추기
    프로그래밍 언어는 대부분 괄호를 아주 많이 사용합니다.
    괄호로 둘러싼 내용이 여러 줄인 경우도 있고, 심지어 괄호 하나가 화면을 넘어갈 때도 있습니다.
    괄호 안에 다른 괄호를 쓰는 일도 아주 많습니다.
    괄호는 반드시 짝이 맞아야 하며, 짝이 맞지 않으면 프로그램이 정확히 동작하지 않습니다.
    괄호 맞춤 기능은 괄호가 어디서 시작하고 어디서 끝나는지 알기 쉽게 표시해줍니다. 괄호의 짝이 맞지 않아서 생기는 문제를 해결하기도 쉽습니다.
    괄호 맞춤 기능은 에디터마다 다릅니다.
    보일 듯 말듯한 표시를 하는 에디터도 있고, 아주 분명히 표시하는 에디터도 있습니다.
    초보자들은 괄호의 짝이 맞지 않아 생기는 문제를 많이 겪는 편이니 에디터의 괄호 맞춤 기능에 익숙해지길 강력히 권합니다.

  • 코드 접기
    코드 접기 기능은 괄호 맞춤 기능과 조금 관련이 있습니다.
    코드 접기는 지금 당장 하는 일과 무관한 코드를 임시로 숨겨서 지금 하는 일에 집중하도록 돕는 기능입니다.
    이 용어는 종이를 접어서 중요하지 않은 세부사항을 가린다는 의미에서 만들어졌습니다.
    괄호 맞춤처럼 코드 접기도 에디터마다 다른 형태로 일어납니다.

  • 자동 완성
    자동 완성은 단어 일부를 타이핑하기만 해도 어떤 단어를 타이핑하려 했는지 짐작해서 제시하는 간편한 기능입니다.
    이 기능은 단어 완성(word completion) 또는 인텔리센스(마이크로 소프트에서 쓰는 용어)라고도 합니다.
    자동 완성에는 두 가지 목적이 있습니다.

하나는 타이핑 시간을 줄이는 겁니다.
예를 들어 encodeURIComponent를 타이핑하고 싶다면, enc까지만 타이핑해도 나타나는 리스트에서 encodeURIComponent를 선택할 수 있습니다.

두 번째 목적은 발견입니다.
예를 들어 encodeURIComponent를 쓰고 싶어서 enc를 타이핑하면 리스트에서 encodeURI라는 함수를 발견하게 됩니다.
에디터에 따라서는 두 함수의 차이에 대한 간단한 설명이 나타날 수도 있습니다.
자바스크립트는 느슨한 타입을 사용하는 언어이고 스코프 규칙도 독특해서 다른 언어에 비해 자동 완성을 구현하기 어렵습니다.
자동완성이 꼭 필요하다고 느낀다면 잠시 시간을 들여 어떤 에디터가 자신에게 가장 맞는지 알아보는 것도 좋습니다.
일부 에디터는 자동 완성이 매우 잘 만들어져 있습니다.
vim 같은 에디터는 매우 강력한 자동완성 기능을 제공하지만 사용자 설정이 필요합니다.