Home
이 문서는 웹 서비스를 개발할 때 필요한 기반 배경 지식과 정보, 그리고 참고 자료를 제공합니다.
AWS는 구글 클라우드 플랫폼, 마이크로소프트 애저와 함께 모던 웹 서비스 개발에 많이 사용되는 클라우드 인프라 서비스(IaaS)입니다.
전통적인 웹 서비스는 물리적으로 독립된 개별 서버를 사용해 서비스되는 형태였습니다. 서버를 운영하시 위해서 서버 하드웨어 구매 비용, 서비스가 확장됨에 따라 추가되는 비용, 그리고 관리 인력에 소요되는 비용 등 투자 대비 효율이 상당히 낮은 형태였습니다. 또한 하드웨어가 고장나거나 천지재변으로 인해 데이터가 유실되는 경우를 대비해 별도의 백업 장치가 필요했습니다. 당장 i7의 경우만 봐도 서버 하드웨어가 동아리방에 위치해 있어 꾸준한 관리를 해줘야 하는 상황입니다.
또한 새로운 서비스를 시작하려면 새로운 하드웨어를 구매해야 했고, 새로 구매한 하드웨어는 웹 서비스에 필요한 여러가지 스택을 설치해야 하는 등 초기에 많은 시간이 필요했습니다.
클라우드 인프라 서비스는 이러한 문제를 해결하기 위해 만들어졌습니다. 클라우드 인프라 서비스는 거대한 데이터 센터 안에 서버 운영에 필요한 모든 인프라와 설비를 갖추고 가상화 기술을 통해 다양한 가상 머신(인스턴스)를 불과 몇 분만에 생성해 바로 서비스에 사용할 수 있는 환경을 조성해 줌으로써 신생 IT 회사나 개인 개발자들이 서버 운영 효율 대비 비용을 과하게 지출하지 않고 마치 휴대폰 요금처럼 쓴만큼만 지불하는 종량제 모델을 만들어냈습니다.
AWS를 사용하면 미리 만들어져 있는 수 많은 시스템 이미지를 설치함으로써 예전에는 몇 시간 ~ 며칠이 걸렸던 초기 설치 작업을 몇 분으로 줄여 더 빠르게 개발을 시작할 수 있으며, 첫 12개월은 무료로 사용 가능케함으로서 많은 기능을 테스트해볼 수 있습니다.
실무자를 위한 "아마존 웹 서비스를 다루는 기술" 원고가 인터넷에 공개되어 있습니다. 이 책으로 AWS EC2 인스턴스를 생성하고 관리하는 방법을 배워보세요.
클라우드 컴퓨팅에 대한 정보는 다음 문서를 참고해주세요.
리눅스 운영체제는 오픈소스, 범용성 등의 특성 때문에 서버용 운영체제로 많이 사용됩니다. 리눅스는 오픈소스이기 때문에 여러 종류의 배포판(distro)이 존재합니다. 많이 쓰이는 서버용 배포판은 다음과 같습니다.
다음은 위 운영체제에 대한 구글 트렌드 비교 차트입니다.
요즘 출시되는 리눅스 배포판은 대개 Graphical User Interface(GUI, 그래픽 사용자 인터페이스)를 가지고 출시됩니다. 그러나 개발용으로 사용하려면 결국 Command Line Interface(CLI, 명령줄 인터페이스)에서 리눅스를 다룰줄 알아야 합니다. 처음에는 적응하기 다소 어려울 수 있지만 명령어 치트 시트를 참고해서 사용하다 보면 금세 익혀서 사용할 수 있습니다.
또한 CLI에서 사용하는 텍스트 에디터인 vi의 치트 시트도 첨부합니다.
개발자라면 리눅스는 반드시 다룰줄 알아야 합니다(마이크로소프트에 입사하지 않는 이상... 하지만 요즘은 마소에서도 리눅스에 투자 많이합니다). 복잡해 보이더라도 충분한 시간을 들여 천천히 배운다면 나중에 반드시 유용히 쓸 때가 올 것입니다.
하나의 서비스를 완성하기 위해 여러 종류의 언어, 기술, 프레임워크, 라이브러리를 합친 형태를 Stack(스택)이라고 합니다. 보통 하나의 웹 서비스는 다음과 같은 구성을 가집니다.
- 서버의 운영체제
- Server-side 언어
- 해당 언어의 Framework(프레임워크)
- Database Management System(데이터베이스 관리 시스템)
- Web Server Application
- Front-end 언어(HTML, CSS, JS)
- 웹 사이트 디자인, 구성에 사용되는 라이브러리 또는 프레임워크
각 부분에 사용되는 언어나 프레임워크, 그리고 데이터베이스는 개발자의 취향대로 골라서 조합할 수 있습니다. 그러나 많은 개발자들의 경험을 토대로 가장 좋은 조합이 만들어졌습니다. 그리고 그러한 조합을 스택이라고 합니다. 예를 들어 PHP로 개발하는 웹 서비스는 Linux를 운영체제로, MySQL을 데이터베이스로, Apache HTTP Server를 웹 서버로 조합해 사용하는 형태가 보편적입니다. 이를 LAMP 스택이라고 합니다. 또 예를 들면, 서버사이드부터 프론트엔드까지 모든 개발을 JavaScript 언어로 하는 조합을 Javascript Full Stack이라고 합니다. 유명한 자바스크립트 풀 스택으로 MEAN(MongoDB, Express.js, Angular.js, Node.js) 스택이 있습니다. 이외에도 수 많은 종류의 스택이 존재합니다.
이러한 스택을 직접 설치해서 개발할 수도 있지만, 스택을 미리 구축한 다음 하나의 이미지로 배포하는 서비스를 사용하면 더 효율적인 개발이 될 것입니다(해당 스택을 잘 알고 있다는 가정 하에). Bitnami는 바로 이런 스택을 모아서 배포하는 서비스 중 하나입니다. Bitnami에서 개발에 필요한 스택을 선택에서 운영체제에 맞는 버전을 설치하면 바로 개발을 시작할 수 있습니다. 또한 Bitnami는 스택을 운영체제에 미리 설치한 이미지를 클라우드 인프라 서비스를 통해 제공합니다. AWS에서 인스턴스를 생성할 때 Bitnami에서 제공하는 사전 정의된 시스템 이미지를 선택하고 인스턴스로 런칭해서 바로 서버를 구축할 수도 있습니다.
PHP의 경우 많이 쓰이는 XAMPP 스택을 참고하세요.
XAMPP(Cross platform)
Python의 경우 Django 스택을 참고하세요.
웹 상에서 프로그래밍 강의/강좌를 제공하는 사이트는 예전에도 많았습니다. 하지만 요즘에는 단순한 단방향의 강의가 아닌 인터렉티브한 학습 코스도 만들어져 서비스되고 있습니다. 웹 상에서 프로그래밍을 배울 수 있는 사이트 주소를 모아봤습니다.
- 생활코딩 http://opentutorials.org/course/1 웹 서비스 개발에서부터 프로젝트 관리 방법까지 포괄적인 강의를 무료로 제공합니다. 웹 서비스를 배우고 싶다면 여기부터 둘러보세요.
- PHP 강좌 http://phpheaven.tistory.com/12 PHP에 대한 무료 강좌입니다. 기본 개념과 간단한 예제를 따라 만드는 형식으로 진행됩니다.
- 운영체제 강좌 http://snui.snu.ac.kr/ocw/index.php?mode=view&id=623#class_room-tab 서울대 평생교육원에서 무료로 제공하는 운영체제 강좌입니다.
- 웹동네 http://www.webdongne.com/bbs/ 웹 서비스에 대해 소셜 스터디라는 방식의 서비스를 제공합니다.
- CSS 레이아웃을 배웁시다 http://ko.learnlayout.com/ "이 사이트에서는 모든 웹 사이트의 레이아웃에 사용되는 CSS의 기초를 다룹니다."
- https://www.codeschool.com/ 다양한 프로그래밍 언어와 프레임워크에 대한 유료 강의를 제공합니다. 주로 웹 분야의 강의가 제공됩니다. 몇몇 강의는 무료입니다.
- https://www.codeschool.com/account/courses/try-git Git에 대한 인터렉티브 튜토리얼을 제공합니다. 무료입니다.
- http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro 자바스크립트 프레임워크인 Angular.js에 대한 강의입니다. 동영상 강의를 시청하면서 따라할 수 있는 인터렉티브 튜토리얼이 제공됩니다. 무료입니다.
- http://www.codecademy.com/ HTML & CSS, Javascript, jQuery, Python, Ruby, PHP에 대한 무료 인터렉티브 강의가 제공됩니다.
- https://www.khanacademy.org/ 프로그래밍뿐만 아니라, 수학, 경제학 등 다양한 분야의 강의를 무료로 제공합니다.
- https://thinkster.io/angulartutorial/a-better-way-to-learn-angularjs/ Angular.js 강의를 제공합니다.
소프트웨어 개발 방법에서 사용되는 디자인 패턴은, 프로그램 개발에서 자주 나타나는 과제를 해결하기 위한 방법 중 하나로, 과거의 소프트웨어 개발 과정에서 발견된 설계의 노하우를 축적하여 이름을 붙여, 이후에 재이용하기 좋은 형태로 특정의 규약을 묶어서 정리한 것입니다. 알고리즘과 같이 프로그램 코드로 바로 변환될 수 있는 형태는 아니지만, 특정한 상황에서 구조적인 문제를 해결하는 방식을 설명해 줍니다.(인용: 위키피디아)
대다수의 웹 서비스는 MVC 디자인 패턴을 따라 개발되었습니다. 이 디자인 패턴이 인기 있는 이유는 데이터가 저장되고 표시되는 방법 간에 경계를 긋기 때문입니다. 이는 클라이언트-서버 구조의 특성 때문이기도 한데, MVC 디자인 패턴을 적용하면 클라이언트단에서 표시되는 웹 페이지의 구조와 디자인(View)과 view에 내용을 보여주기 위해 데이터를 처리하는 controller, 그리고 데이터를 DB에 저장하고 읽어오는 model의 역할을 소스 코드 수준에서 분리할 수 있어서 한 쪽을 수정해도 다른 한 쪽에 큰 영향을 미치지 않도록 제어할 수 있습니다.
더 자세한 설명은 다음 문서를 참조하세요.
Bower는 Node.js 기반의 프론트엔드 패키지 관리 프로그램입니다. 프레임워크, 라이브러리, 에셋, 유틸 등 여러가지 기술이 모여서 하나의 웹 사이트를 구성하는데, Bower는 이러한 패키지를 설치, 업데이트, 삭제 등 관리를 한 곳에서 할 수 있게끔 설계된 프로그램입니다.
다음 링크에서 Bower에 대해 알아보세요.
Responsive Design(반응형 디자인)은 다양한 스크린 사이즈를 하나의 웹 사이트 레이아웃으로 대응할 수 있도록 고안된 디자인 기법입니다. 다음 문서를 참조하세요.
다음은 최근 많이 쓰이는 오픈소스 프론트엔드 프레임워크 목록입니다.
- http://getbootstrap.com/ "Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web."
- http://semantic-ui.com/ "User Interface | is the vocabulary of the web."
- http://foundation.zurb.com/ "The most advanced responsive front-end framework in the world."
- http://purecss.io/ "A set of small, responsive CSS modules that you can use in every web project."
- http://gumbyframework.com/ "Gumby 2 is an amazing responsive CSS Framework."
다음 내용은 개발에 완전 도움이 되는 웹사이트와 도구들의 내용과 제가 조사한 내용을 한 곳에 모은 것입니다. 웹 서비스 분야에 국한되어 있지는 않습니다.
- http://github.com/
- http://code.google.com/
- https://bitbucket.org/
- http://gitlab.org/ 서비스형 git 관리도구
- http://gitlab.com/ gitlab의 설치형 버전
- https://ovenapp.io/ "크리에이티브 프로젝트를 위한 세계에서 가장 진보된 온라인 프로토타이핑 툴"
- https://www.draw.io/ 구글 드라이브에 연동되는 다이어그램 도구
- https://marvelapp.com/ "Free mobile & web prototyping for everyone. No coding required."
- https://cacoo.com/
- http://pencil.evolus.vn/en-US/Home.aspx 파이어폭스 addon기반의 무료/오픈소스 기획도구
- http://yuml.me/diagram/nofunky/class/draw 다이어그램을 온라인에서 만들어주는 서비스
- http://www.exploratree.org.uk/ 마인드매핑을 넘어서 다이어그램 그리기 도구로도 사용할 수 있는 재미있는 서비스
- http://troy.labs.daum.net/ 다음에서 만든 반응형 웹 페이지 테스트 도구 (크롬 개발자 도구로 대체 가능)
- http://ondras.zarovi.cz/sql/demo/ 웹기반의 데이터베이스 모델링 도구
- http://ko.learnlayout.com/ "이 사이트에서는 모든 웹 사이트의 레이아웃에 사용되는 CSS의 기초를 다룹니다."
- http://www.google.com/fonts/earlyaccess 구글 폰트 베타, 여기서 나눔고딕 외 여러 종류의 한글 웹폰트를 웹 사이트에 적용할 수 있습니다.
- http://fortawesome.github.io/Font-Awesome/ 요즘 많이 보이는 오픈소스 픽토그램(글꼴형 아이콘) 서비스
- http://thenounproject.com/ "Creating, Sharing and Celebrating the World's Visual Language"
- http://playground.webflow.com/ CSS3를 GUI 환경에서 디자인하는 서비스
- http://css3maker.com/ CSS3 코드를 생성해주는 웹사이트
- https://www.nitrous.io/ 웹 기반의 IDE
- https://koding.com/ Go, Python, Node, Ruby, PHP, Docker, Wordpress, Django, Laravel, Android, iOS, HTML5 Web App 등의 개발을 할 수 있는 웹 서비스
- https://c9.io/ 웹 기반의 IDE
- http://goorm.io/ 클라우드 코딩 서비스
- http://www.regexr.com/ 정규표현식을 테스트하고 다른 사람이 만든 표현식을 사용할 수 있는 서비스
- http://txt2re.com/index.php3 정규표현식의 패턴을 추천해주는 서비스
- http://www.regexper.com/ 정규표현식을 시각화해주는 서비스
- http://www.olis.or.kr/ossw/license/license/list.do 오픈소스 라이센스 한글화한 문서
- https://gist.github.com/ 코드 조각 공유
- http://jsfiddle.net/ HTML,CSS,JavaScript 지원
- http://pastebin.com/ 코드 조각 공유
- http://ideone.com/ 다양한 언어를 지원하는 온라인 컴파일러
- http://www.tutorialspoint.com/codingground.htm "Free Online IDE & Terminal"
- http://jsbin.com/ HTML,CSS,JavaScript 지원
- http://www.dotnetfiddle.net/ .net 언어 지원
- http://codepad.org/ 코드 공유
###개발자 블로그 & 미디어
- http://dna.daum.net/lens/ - 다음 랜즈로 개발자 블로그/미디어의 신규글들
- http://www.bloter.net/
- http://www.zdnet.co.kr/
- http://www.etnews.com/
- http://helloworld.naver.com/
- http://dev.kthcorp.com/ - kth 개발자 블로그
- http://we.weirdmeetup.com/ - 개발자들의 블로그를 모아서 보여주는 페이지
- https://codeclimate.com/ "Automated code review for Ruby, JS, and PHP" 소스 코드의 품질, 보안성, 코딩 스타일, 적용 범위 등을 자동으로 분석해서 리뷰해주는 서비스. 오픈 소스 프로젝트는 무료로 제공됩니다.
- http://developers.google.com/speed/pagespeed/insights/ "모든 기기에서 웹페이지 속도가 개선됩니다."
- http://www.nhnopensource.org/ngrinder/ "nGrinder is a platform for stress tests that enables you to execute script creation, test execution, monitoring, and result report generator simultaneously."
- http://jsperf.com/browse JavaScript의 퍼포먼스를 최적화하는 방법을 알려준다.
- https://tools.percona.com/ MySQL의 설정과 쿼리 튜닝을 도와주는 웹서비스를 제공, 그 외에 다양한 데이터 베이스 서포트 도구를 제공
- http://pixlr.com/ 온라인 포토샵
- http://inkscape.org/download/?lang=en 일러스트레이터에 대응하는 백터 그래픽 도구, 어도비 일러스트레이터와 같이 백터를 그래픽을 핸들링 할 수 있는 오픈소스/무료 에플리케이션 잉크스페이스입니다.
- http://iconfind.co.kr/ 각종 아이콘 검색 사이트. 각 아이콘에 대한 라이센스가 표기가 잘되어있어 사용하기 편합니다.
- http://www.alessioatzeni.com/metrize-icons/ 퀄리티 높은 아이콘들을 다양한 포멧으로 무료로 다운로드 받을 수 있습니다.
- http://www.checktls.com/ 보안메일 기능 확인 (메일 서버 통신 로그 제공)
- https://www.ssllabs.com/ssltest/ 도메인 SSL 인증서 취약점, 호환성 확인 (do not show ... 체크박스를 체크할 경우 최근 검사 목록에 표시되지 않음)
- https://www.mavitunasecurity.com/communityedition/ XSS, SSRF 등 종합적 보안 점검 툴
- http://labs.securitycompass.com/exploit-me/ 파이어폭스 플러그인으로 제공되는 XSS, SQL Injection 테스팅 도구
- http://www.docircuits.com/ 전자회로를 드로잉하고 시뮬레이션 할 수 있는 온라인 기반의 도구 (제한적 무료)
- https://www.circuitlab.com/ 전자회로를 드로잉하고 시뮬레이션 할 수 있는 온라인 기반의 도구 (유료)
- http://www.cadsoftusa.com/ 전자회로를 설계하고 PCB를 드로잉 할 수 있는 도구(제한적 무료)
- http://www.kicad-pcb.org/ 전자회로를 설계하고 PCB를 아트웤 할 수 있는 C++기반 도구 (무료)
- http://fritzing.org/download/ 아두이노 회로의 디자인을 돕는 도구
- http://juso.monteapps.com/JusoWeb/ 지번주소를 도로명주소로 변환하는 API를 제공하는 서비스
- http://www.roesler-ac.de/wolfram/hello.htm 언어별로 Hello world를 출력하는 방법을 모아둔 서비스
- http://www.cheat-sheets.org/ 단축키나 주요 API를 모아둔 사이트
- http://www.quicklycode.com/cheatsheets 개발과 관련한 cheatsheet, 배경화면등을 공유하는 서비스
- http://www.addedbytes.com/cheat-sheets/ 치트 시트
- http://fontawesome.info/ Font Awesome Icon이 적용된 사이트들을 모아 놓은 웹서비스
- https://infogr.am/ 무료인포그래픽 툴
- https://www.hackerrank.com/x/codepair 코딩실력확인 할 수 있는 사이트(개발자 기술면접을 위한)
- http://www.slideshare.net/agebreak/0119-ver-2013 기술면접시 나오는 문제들 정리
- http://www.slideshare.net/rockdoli/frends-meetup?from_search=5 초급개발자들을 위한 슬라이드
- http://theonion.egloos.com/5752918 코딩면접관련 경험담