日本語에서 번역 • 원문 보기 저는 2월 1일에 직원이 되었습니다. 이게 제 첫 블로그입니다. 이게 제 첫 직장입니다. 오늘부터 직원이 되기 때문에 이게 제 첫 직장입니다.
참고로, 저는 디자이너입니다. 하지만 저는 프론트엔드 엔지니어가 되고 있습니다. 하지만 저는 디자이너입니다.
네, 의미 없는 서두를 그만두고 본론으로 들어가죠. 오늘은 프론트엔드 개발 도구에 대한 개요를 드리고자 합니다. "나는 결국 프론트엔드 엔지니어가 아니야!"라고 말하지 마세요.
HTML/CSS/자바스크립트.
프론트엔드 개발자들이 다루는 것에 대해 말하자면, 기본적인 인식은 HTML/CSS/JavaScript입니다. 다른 도구들은 브라우저와 편집기만 있으면 즉시 개발할 수 있지만, 매우 어렵긴 합니다. 쉽지 않나요? 대략 틀린 말은 아닙니다. 이렇게요.
프론트엔드 개발에 관여하지 않는 사람들의 인식은 대략 이런 식인 것 같습니다. 대체로 틀린 것은 아닙니다. (두 번째)
최선의 방법을 따르려고 노력했어요.
그렇다면 개발의 모범 사례를 찾으면 어떤 일이 일어날까요? 생각나는 만큼 목록을 만들려고 합니다.
이렇게요
응?
**거짓말이야・・・・・・ 꿈이야・・・・・・ 이건 꿈・・・・・・・・・・・・・・・ **
하지만 이건 꿈이 아니・・・・・・ ・・・・・・! 현실이야・・・・・・! 이게 현실이야...!
프론트엔드 엔지니어에 대한 수요는 계속 증가하고 있습니다. 물론 급여는 변하지 않을 것입니다. 세상은 무정합니다.
말할 필요도 없이, 기술을 계속 따라갈지 말지는 개인의 몫입니다.
왜 이런 일이 일어나는 거지?
/)( ◕ ‿‿ ◕ )(\ 왜 그런지 모르겠어.
요인 1 - 웹 풍부함과 모바일
아약스
비동기식 통신을 이용한 UI 구성 기술. 페이지 전환 없이도 데이터를 가져올 수 있습니다. 덕분에 구글 지도를 사용할 수 있다는 생각에 감사하지 않을 수 없습니다. 요즘은 페이지 전환 없이도 여러 가지를 할 수 있다는 것이 자연스러운 느낌이지만, 이 기술은 자연스럽게 그 혜택을 받고 있습니다.
그 외에도 많은 것들이 증가했습니다.
- 교차 사이트 스크립팅
- 사이트 간 요청 위조
- SQL 주입
주방병 같아요. 가슴이 간질거려요! 모두 보안 문제예요. 통계적으로 연간 약 1,000건 정도 발생해 총 세 건 중 하나 정도예요. 그때까지는 거의 없었어요. 통계 데이터 그래프를 인용하고 싶었는데 너무 엉망이라 못 찾았어요 (◠‿◠) 음 더 알고 싶으시면 아래 링크를 참고하세요. 정말 잘 정리되어 있어요.
HTML5/CSS3의 등장
HTML5는 이전 버전과 비교해 새로운 지침을 제시합니다. 곧 웹 애플리케이션의 플랫폼이 될 예정입니다. 최근 예로, 어제 유튜브 동영상이 플래시 기반에서 HTML5 기반으로 전환된다는 발표가 마침내 발표되었습니다. 그리고 CSS3의 등장과 함께 우리는 점점 더 많은 작업을 프론트엔드에서 하고 있습니다.
할 수 있는 일이 많을수록, 더 많은 요구가 들어올 것입니다. 해야 할 일이 많아지면, 지금까지 해온 방식에 불만을 느끼게 될 것입니다. 그때는 자연스럽게 해결할 도구가 생기게 됩니다.
모바일 붐
말할 필요도 없이요. 반응이 좋고, 모바일 우선으로 말하고, 단어가 먼저 나가려고 하는 경우가 흔합니다. 이해가 잘 안 되어도 말이 앞서 나가죠(설명이 안 되니까요). jQuery 모바일? 잘 모르겠어요.
- 할 수 있는 일이 더 많아
- **보안 조치도 필요합니다. **
요인 2 - CSS 및 자바스크립트 사양
CSS 느슨함
저는 CSS를 쓸 수 있어요! 사람이 많아도 저는 탄탄한 CSS를 설계할 수 있어요. 자신 있어요! 그렇게 말하는 사람은 많지 않은 것 같아요.
CSS는 배우기 비용이 저렴하지만 누구나 쓸 수 있어서 설계가 종종 복잡하고 유지보수가 어렵습니다. 한때는 개인적인 문제인 줄 알았는데, 그렇지 않은 것 같아 참고 링크를 올릴게요.
그렇다면 CSS 유지보수 걱정을 피하려면 어떤 조치가 있을까요? 이것이 이야기입니다.
대응책 1. 제대로 설계합시다
- OOCSS - 객체지향 CSS를 작성합시다. 구조와 외관의 분리. 컨테이너와 콘텐츠의 분리.
- SMACSS - 모듈로 분류됨. 베이스, 레이아웃, 모듈, 상태, 테마 등.
- BEM - 블록, 속성, 수정자로 나뉘며, 매우 어려운 도전입니다.
이것들은 도구가 아닙니다. 디자인 측면에서, 다른 명명 규칙과 연산에 대해 뭔가 해봅시다. 언젠가 블로그를 쓸 수 있길 바라지만, 지금은 더 알고 싶으시면 돌아가 주세요. (기타 사항)
대응책 2. CSS 전처리기 사용
또한 운영만으로는 관리하기 어려운 대규모 개발도 있습니다. 또한 CSS에 없지만 사용하고 싶은 함수도 사용할 수 있습니다. 변수, 연산, 네스트, 믹싱 등. 또한 글을 쓰기 쉽다는 느낌도 듭니다(중요하게)
결국, CSS가 컴파일하고 생성하기 때문에 설계에서 완전히 자유롭지는 않다는 점을 유념하는 것이 중요합니다.
- 새스 - 루비가 만들었다. 컴퍼스(나중에 설명됨) 덕분에 꽤 앞서 있다고 느낀다.
- LESS - Node.js에서 제작됨. Bootstrap에서 사용되며 좋은 위치를 확보했습니다.
- 스타일러스 - Node.js에서 만들어졌습니다. 늦게 오는 사람들에게 흔한 좋은 녀석입니다.
나침반은 사스의 틀이야. 뭔지 모르겠어 (◠‿◠)
자바스크립트 실행 환경
서버 측 자바스크립트
한때는 자바스크립트가 브라우저에서 실행될 거라 생각했는데 아무 문제 없었죠. 이제는 Node.js의 등장 덕분에 서버 사이드 자바스크립트를 무시할 수 없게 되었습니다. 참고로, 지금 제가 가장 주목하고 있는 것은 io.js입니다. 서버 사이드 자바스크립트가 무엇인지 알고 Node.js지만, io.js가 무엇일까요? 간단히 설명하자면, Node.js에서 한 시점의 복사본을 생성해 다른 시점으로 파생하는 포크(forked)된 io.js입니다. 왜 이렇게 파생되었는지는 자세히 다루는 블로그에 맡기겠지만, 제가 주목하고 싶은 것은 GitHub에서 커밋 수 차이입니다. 2014년 중반 포크 이후의 흥분에는 분명한 차이가 있습니다. 저는 Node.js의 운명이 걱정됩니다.
클라이언트 사이드 자바스크립트
JavaScript는 브라우저에서 실행됩니다. 말하고자 하는 내용은 각 브라우저마다 구현되어 있으니 차이가 있습니다. 요약하자면, 문제가 많습니다. JavaScript는 무언가를 시도하는 prototype.js으로 태어났고, 라이브러리 같은 것들이 만들어졌으며, 어느새 jQuery가 대세가 되었습니다. 대략 이런 식입니다.
jQuery는 매우 사용하기 쉽지만, 앞서 언급했듯이 최근 몇 년간 프론트엔드 표현식으로 할 수 있는 다양한 대규모 개발이 많아졌고, jQuery의 약점들이 드러났습니다.
유지보수가 어렵습니다. 이것은 대량의 DOM 조작이라는 메다파니 상태입니다. 많은 프레임워크와 라이브러리가 이를 해결하기 위해 등장했습니다. 이번에는 세부 사항이 끝이 없어서 단지 목록일 뿐입니다.
- Backbone.js - MVC 개념을 JS에 도입하며 단순한 구조가 특징입니다.
- Angular.js - 양방향 데이터 바인딩과 같은 고유한 사양을 포함하는 MVW 프레임워크입니다. 풀스택 느낌이 특징입니다.
- Knockout.js - MVVW 프레임워크. 인기 있는 프레임워크 얘기가 나와서 말인데, Angular, Backbone, Knockout 등도 말할 수 있죠?
- Vue.js - 이건 늦게 등장한 프레임워크라서 좋은 편이야.
- Ember.js - MVC 프레임워크. 귀여운 캐릭터네.
- React.js - 가상 DOM과 같은 멋진 개념을 채택했습니다. 최근에는 모바일 개발용 언어인 ReactNative도 출시하셨죠.
요약하자면, MVx에는 많은 것들이 정리되어 있습니다. jQuery UI? 잘 모르겠습니다.
요인 3 - 인간
진화에 반응하는 연쇄 반응으로 탄생한 도구들이 있습니다.
인간은 그것을 더 쉽게 만들기 위해 어떤 노력도 기꺼이 아끼고 있습니다
나 (1989~)
요컨대, 저는 편안해지고 싶습니다. 거칠게 만들어 좋은 것을 만들 수 있다면, 일하고 싶지 않을 것입니다.
HTML 작성이 번거롭다고 생각해서 일하기 싫어하는 분들을 위해요
Emmet HTML을 더 쉽게 작성하고 싶은 사람들을 위한 도구입니다. 과거에는 Zen-Coding이라고 불렸습니다. 쉽습니다. Emmet을 시작하려면 당분간 이 점을 기억하세요.
Jade의 Node.js HTML 템플릿 엔진 Express(Node.js)를 사용하면 특별한 설정 없이도 사용할 수 있습니다. 표기법은 배웠지만, 설정해야 해서 잘 어울리지 않는 조합을 쓰면 Emmet이 좋은 느낌입니다. Jade에 대하여. - 요약 - GitHub
Haml / 슬림 루비 템플릿 엔진: 사용 중이라면 레일 중에서 선택할 수 있습니다. 레일스 템플릿 엔진 비교: erb vs slim vs haml
업데이트 버튼을 누르는 것이 번거롭다고 생각해 일을 하기 싫어하는 분들을 위해(단축키를 탭하세요)
- Live Reload 업데이트 버튼을 누르고 싶지 않습니다. Command+R을 누르려고 하면 Command+T를 눌러 새 탭을 열고 삭제합니다. 손을 F5로 올리고 싶지 않습니다← 저장 후 파일을 다시 불러오는 도구입니다. LiveReload는 너무 편리합니다
- 브라우저 동기화 더 쉽게 만들려는 전형적인 예시입니다. gruntfile이나 gulpfile을 작성하지만, 결과물이 너무 커서 누군가 작성하면 미친 소리가 납니다. 브라우저 확인은 즉시 가능합니다! Grunt and Gulp 시작하기 브라우저 동기화 소개
위 두 가지 모두에 지원하는 분들을 위해 Emmet LiveStyle이라는 도구도 있습니다.
JS 작성이 번거롭다고 생각해서 일하기 싫어하는 분들을 위해,
AltJS라는 게 있어요. 결국 JS로 컴파일할 거예요.
CoffeeScript는 쉽습니다. 실제로 작성해야 할 코드의 양이 줄어드는 것은 장애물이 아닙니다.
세상에는 TypeScript임에도 불구하고 정확해지고 싶어 하는 사람들이 있으며, 이 도구가 바로 그런 사람들을 위한 도구입니다.
여보
신음
꿀꺽
나중에 내가 설명을 놓치고 있다는 걸 깨달은 사람.
이 사람들은 결국 편안해지고 싶어 하니까요.
4요인. 대규모가 되었을 때 테스트를 사용하기로 한 사람
시험지를 작성하고 싶어요. (기타 사항)
단위 테스트 도구
종합 테스트 도구
셀레늄과 Phantom.js (기타)
정보를 따라잡기 위해
이렇게 많은 정보를 가지고 어떻게 해야 할까요? 문제를 피하려면 어떻게 해야 할까요
- 관심 있는 정보를 포함할 수 있는 시스템을 만드세요. 관심 있는 블로그를 RSS를 사용해 요약할 수도 있습니다. 스터디 그룹 요약 사이트에 등록하면 관심 있는 내용을 하나하나 확인할 수 있습니다.
- 모든 걸 요구하지 마세요: 삼촌이 되었다고 생각한다면, 필요 없는 정보를 생각해 보세요.
- 자신을 위한 인플루언서를 찾아라. 어느 정도는 그 사람의 말을 믿는 사람들도 있다. 자신만의 시간을 확보할 수 없다면, 선배들의 지혜를 받아들이는 문제일 뿐이다.
- 연속은 끝나지 않는다.
그렇다면 무엇을 선택해야 할까요? 다음에는 이 질문에 대해 글로 쓰고 싶습니다.