초보 웹 개발자를 위하여 - 정호영님

21 Feb 2017 | 가이드 웹개발 초보

초보 웹 개발자를 위하여 build #3

작성: 호도르 (honux77@gmail.com)

코드스쿼드 정호영님의 깃헙에서 읽은 글입니다.
앞으로 계속 참고하고 싶어서 이곳으로 가져왔습니다. 출처

로그

2016년 12월 21일 링크 등 아주 조금 수정
2015년 9월 24일 일부 내용 수정 및 추가
2015년 3월 14일 초안 작성

들어가기 앞서

이 글은 개발자가 되고 싶지만 실상은 컴맹인 분들을 대상으로 쓰고 있습니다. 주로 웹 개발자를 대상으로 하고 있으며 내용들은 다소 실용적인 쪽으로 치우쳐져 있습니다. 여러분이 대학에서 배울 수 있는 컴퓨터 공학 커리큘럼을 병행해서 배우고 있다는 가정으로 내용을 적었습니다.

2015년 3월 14일 NEXT의 기초 과목 담당 교수님께서 추가 조언을 해 주셨습니다:

깊이 있는 개발자가 되려면 논리력, 분석력, 비판적 사고 역량이 매우 매우 중요합니다. 이 요소들이 개발자 역량 그릇의 크기를 결정하는 제일 중요한 요소들이고요. 이 역량의 큰 틀은 이산수학의 논리, 증명 등의 학습에 의해서 만들어집니다. 이산수학 교재의 연습문제를 가능한 한 많이, 혹은 모든 문제를 풀어보라고 강력하게 추천합니다.역량 상승이 눈에 쉽게 보이지 않지만, 어느 순간 다른 사람에게 역량있고 스마트한 느낌을 전달하는 이미지를 갖추게 될 겁니다. 이 부분은 고급/핵심 개발자들이 갖는 공통적인 모습이고요. 역량있는 개발자로 성장하기를 바랍니다.

1. 우리나라 IT 개발자 직군의 종류

우리 나라 산업의 형태로 볼 때 과거에는 대다수가 자바를 기반으로 하는 웹 서버 개발자였는데 현재는 다양한 직군이 늘어나고 있습니다.

웹 서버 (백엔드) 개발자: 자바, C#, 루비, 파이썬 등의 언어로 서버 쪽의 로직을 개발하는 역할을 합니다. 대부분의 경우 데이터베이스도 잘 알아야 합니다. 최근에는 NoSQL, 클라우드, 컨테이너, DevOps 같은 분야도 조금 알아야 할 필요성도 생겼습니다.
웹 프론트엔드 개발자: HTML/CSS, 자바스크립트를 주로 사용하며 디자이너와 협업을 하는 개발자입니다. 센스와 끈기가 필요합니다. 최근에는 JQuery나 React.js와 같은 라이브러리도 잘 사용해야 하고, node.js를 통해 백엔드 개발, 아이오닉이나 react native와 같은 도구를 이용 모바일 웹앱도 제작할 수 있게 되어 풀스택 개발자로 성장하기도 합니다.
모바일 앱 개발자: 2016년 12월 현재, 자바 기반의 안드로이드 개발자와 오브젝티브C 기반의 iOS 개발자가 이 범주에 속합니다. 안드로이드 개발자가 수요가 더 많은 반면 iOS 개발자가 조금 더 멋있어 보입니다. iOS의 경우 최근에 개발된 Swift도 배워야 합니다.
기타: 시스템 프로그래머, 임베디드 개발자, 모바일 게임 개발자, 게임 서버 및 게임 클라이언트 개발자가 있는데 이 직군들은 상대적으로 높은 실력에 비해 구직이 어렵고 대우가 좋지 않습니다. ‘이 직군이 매력적이다’라고 생각하시면 해외 취업을 권하고 싶습니다.
비개발자 직군: 중요한 비개발자 직군으로 DBA, 시스템 엔지니어, 빅데이터 전문가가 있습니다. 빅데이터 전문가가 최근 매우 유망하고요. 시스템 엔지니어들은 클라우드가 나타난 이후로 DevOps 엔지니어로 직무전환을 할 수 있고 이 경우 과거에 비해 대우가 좋아진 듯 합니다. DBA는 실력과 연륜에 따라 연봉의 차이가 매우 크게 나는 직업으로 알려져 있습니다.

2. 개발자들에게 유용한 웹 사이트들

먼저 개발자들이 좋아하는 사이트들을 알아봅시다. 이들 사이트에 방문해서 익숙하게 사용할 수 있도록 노력해 봅시다.

google.com: 모르는 내용을 위한 검색은 구글을 사용합니다. 네이버, 네이버 지식인, 페이스북 생활코딩 그룹, 빙 등의 사용은 다소 비추라고 생각합니다.
stackoverflow.com: 개발자들의 지식인 같은 곳입니다. 구글에서 프로그래밍 문제를 검색하면 상당부분 이쪽으로 연결이 됩니다. 질문을 올리고 답변을 달아 보기를 권해 드립니다.
github.com: 소셜 코딩이라고 부르기도 합니다. **git의 사용법과 함께 필수적으로 알아야 합니다.** github 자체의 사용법을 배우는 게 좋습니다. 참고로 git과 github는 전혀 다릅니다. 전자는 코드의 버전관리도구이고, 후자는 웹사이트입니다.
slideshare : 다양한 기술을 예쁘고 쉽게 볼 수 있습니다. 깊이가 깊지는 않은 경우가 많지만 그래도 매우 유용합니다. 새로운 기술이 무엇인지 보고 싶을 때 우선적으로 검색해 보실 것을 권해 드립니다.
trello: 칸반이라는 툴을 적용할 수 있는 도구인 것 같습니다. 개인적으로 좋아합니다.
facebook : 커뮤니티를 적극적으로 활용하면 조금 더 빠르게 성장할 수 있습니다. (페이스북, 구글 그룹스 등)
mooc 사이트들: 최근에는 다양한 mooc 사이트들을 통해서 공짜로 공부할 수 있는 곳이 많아졌습니다. tryhelloword, codecademy, codeschool, khanacademy 등을 통해 신규 언어를 직접 실습으로 익히길 권해 드립니다.

3. 처음에 배워야 하는 것들

맥 / 리눅스 사용법: 개발자 커뮤니티에 초보 개발자들이 가끔 떡밥으로 ‘맥을 사용하면 개발이 잘 되나요?’ 라는 글을 던지고 싸움이 일어납니다. 답은 yes입니다. 맥에서 맥os를 사용하는 것 자체가 개발자에게 도움이 됩니다. 더불어 리눅스를 배워야 합니다. 예쁜 맥을 사서 부트캠프 + 윈도우를 사용하는 건 자제 부탁드립니다.
다양한 프로그래밍 언어: 쉽고 재미있는 프로그래밍 언어를 배우는 것을 추천합니다. 개인적으로 파이썬을 선호하는데, 처엄에는 자바스크립트와 파이썬을 배우면 좋을 것 같습니다. 나중에 실력이 조금 붙으면 C 언어와 포인터에 대해 배우길 권합니다. 그리고 모바일 개발자라면 ObjectiveC도 공부하세요. 마지막으로 내공이 쌓이면 함수형 프로그래밍 언어(Scala, Haskell, Rust 등)을 배우는 게 좋겠습니다.
- 웹 개발자를 위한 권장언어: HTML + CSS + javascript (필수), python, Java, bash
내 전문분야에 대한 방향성을 결정하자: 웹 개발자라 하더라도 전문 분야는 앞서 본 것처럼 백엔드 개발자와 프론트엔드 개발자로 나뉘게 됩니다. 사물의 내면이나 돌아가는 원리를 생각해 보는 걸 좋아한다면 백엔드 개발자가 되는 걸 권장합니다. 디자인 감각이 있고 꾸미는 걸 좋아하고 반복작업도 질리지 않고 잘 할 수 있다면 프론트엔드 쪽일 가능성이 높습니다. 프론트엔드 분야는 jquery, v8등의 등장과 더불어 비교적 최근에 고도화가 되었습니다. 앞으로 더 많은 수요가 필요할 것으로 예상됩니다.
처음에는 프론트와 백엔드 모두를 배워야 한다: 백엔드 개발자는 자바, 프론트 엔드 개발자는 HTML/ CSS/ Javascript가 핵심 역량이 됩니다. 그러나 처음에는 둘 모두 알아야 합니다. 가장 널리 사용되는 백엔드 언어는 자바와 스프링 프레임워크이지만 초반에는 장고를 권하고 싶습니다. 꼭 두 분야의 기초 정도는 함께 공부하기를 권합니다. 그리고 Java와 Javascript는 전혀 다른 언어입니다. 공부의 순서는 (1) HTML (2) CSS (3) Javascript (4) 파이썬 (5)장고 순으로 공부하시고 이후에 자유롭게 본인이 좋아하는 언어를 선택하시면 되겠습니다.

4. 일단 시작해 보자

여기에 나와 있는 실습들은 상당 부분 내용이 중복됩니다. 하지만 코딩이라는 우리에게 필요한 작업은 머리와 손이 함께 배우는 부분이 많습니다. 반복이 매우 중요하기 때문에 아는 거 또 나왔네? 라고 넘어가지 말고 반복해서 학습을 하길 권합니다.

제일 먼저 해볼만한 것: 1시간 정도 투자해서 code.org 의 hour of code로 놀아 봅시다. 안나 + 엘사가 재밌는 것 같아요. 컴퓨터에서 중요한 기초 개념인 순차 + 반복 + 조건문의 개념을 배우시기 바랍니다.

프로그래머는 바보같은 일을 하는 천재적인 사람이다. 컴퓨터는 위대한 일을 하는 바보같은 기계이다. 이 둘은 그래서 찰떡궁합! 출처는 기억이 안 나네요.

링크: http://code.org/learn

하버드의 CS50 수업: 기사에 따르면 유명한 정의란 무엇인가보다 인기가 많은 수업이었다고 합니다. 개념을 조금 확실하게 하기 위해 추천합니다.
- https://cs50.harvard.edu/
- https://www.edx.org/course/introduction-computer-science-harvardx-cs50x
칸 아카데미의 컴퓨터 교육: 자바스크립트의 감을 잡게 해 줍니다. 참고로 이 페이지는 자바스크립트 분야의 세계 최고의 대가 중 한 분인 John Resig 님이 만들었습니다. John Resig 님은 유명한 JQuery도 만들었습니다.
- https://www.khanacademy.org/computing/computer-programming
HTML / CSS / Javascript (JQuery) 배우기 다양한 책들과 웹사이트를 통해 위 언어에 익숙해지시기 바랍니다. 책도 좋지만 먼저 웹사이트를 통해 공부하는 것도 좋습니다.
- codecademy (https://www.codecademy.com/learn): HTML / CSS/ JS / JQuery 등에 대해 직접 실습을 하실 수 있습니다.
- w3schools (http://www.w3schools.com/): 위 사이트와 병행으로 연습하면 좋습니다.
- 아주 쉬운 교재: fancy의 김태곤님이 번역하신 Javascript for Kids를 추천합니다. (http://www.yes24.com/24/goods/20156001?scode=032&OzSrank=13)
- 초급 교재: http://www.yes24.com/24/goods/17255377?scode=032&OzSrank=10
- 바이블 (책꽂이 소장용): http://www.yes24.com/24/goods/8858182?scode=032&OzSrank=12
(옵션): 파이썬 공부하기: 파이썬은 재밌는 언어입니다. 한번쯤 취미로 배워볼 만 하지요.
- 왕초보 파이썬: https://wikidocs.net/book/2
- byte of python: http://byteofpython-korean.sourceforge.net/byte_of_python.html
(옵션): tryhelloworld.co.kr 의 장고 강좌
- http://tryhelloworld.co.kr/courses/%EC%9E%A5%EA%B3%A0%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0

7.생활코딩 웹 서비스 만들기: 개인적으로 존경하는 이고잉님이 만든 강의입니다. 전체 개발의 흐름에 대해 느껴보시기 바랍니다. - 링크: https://opentutorials.org/course/1688

5. 조금 더 깊게

위 과정을 통해 가볍게 웹 백엔드와 프론트엔드에 대해 감을 잡으셨을 것 같습니다. 여튼 조금 더 들어가 봅시다.

협업하는 방법: 개발자에게 가장 중요한 자질 0번은 협업하는 자세입니다. 물론 동의하지 않는 천재 개발자들도 많으시지만, 저는 협업할 수 있는 열린 마인드가 가장 중요하다고 생각합니다. 술 한 잔 사주고 내가 일주일 끙끙될 걸 하루만에 해결하기도 합니다. 에자일 방법론과 스크럼, 칸반 등에 대한 좋은 책들을 한 번 읽어 보시기 바랍니다.
유닉스 콘솔 명령어 (bash) 배우기: 리눅스/ 유닉스의 터미널 명령에 대해 배우시기 바랍니다.
- linuxjourney.com
- 추천서적: http://www.yes24.com/24/goods/30705473?scode=032&OzSrank=2
git 의 원리와 사용법: 협업과 소스코드의 버전관리를 위해 최근에는 git의 사용이 필수적입니다. 다음 문서를 참고하시기 바랍니다.
- 자세한 링크: https://github.com/honux77/practice/wiki/learngit
- 이고잉님 git 강의: http://opentutorials.org/course/1492
github 배우기: 지금 여러분이 보고 있는 github 사이트의 사용법에 대해서도 익숙해 지시기 바랍니다. markdown, 이슈 등록, fork와 pull request, 다른 프로젝트 검색, 별 주기, static 웹 페이지 만들기
백엔드: 장고 배우기
- 편리한 장고의 기능을 이용해서 빠르게 웹을 개발하는 방법을 체험해 보면 좋을 것 같습니다.
- 앞 절의 tryhelloworld와 장고걸스 튜토리얼 등이 좋네요.
백엔드: 자바 기초 배우기
- 객체 지향 프로그래밍, 파일 IO, 멀티 스레드의 개념을 꼭 배우시길 바랍니다.
- 유닛 테스트를 꼭 잘 배우시구요. 로그 라이브러리 사용법도 알아야 합니다.
- 자료 구조 중 list, map의 용도와 사용법, 그리고 하위 클래스들의 사용법은 필수입니다.
- 가능하다면 TDD를 해 보시고, 좋은지 나쁜지는 스스로 판단하시기 바랍니다.
- 이클립스(혹은 inteliJ)와 같은 IDE 사용법, 그리고 maven과 gradle의 기초에 대해서도 배워야 합니다.
프론트엔드 분야: Javascript, HTML, CSS, JQuery, Angular.JS, React.JS 등의 지식을 습득합니다.
- box model의 이해, 프론트 엔드 개발 도구들, 기타 등
데이터베이스 기초: 관계형 데이터베이스, NoSQL(mongdb), 웹 서버와 데이터베이스의 연동에 대해 공부합니다.
VirtualBox또는 AWS, Heroku 등을 이용한 내 서버 마련하기, 그리고 추가적으로 클라우스 서비스에 대해서도 가볍게 공부하시길 권합니다.
네트워크의 기초: tcp/ip, 소켓의원리, http의 구조, 웹 서버와 웹 브라우저의 동작 원리 등에 대해서도 아시는 게 좋습니다.
REST API: 웹 페이지와 웹 서비스와의 차이점, REST API란 무엇인가?

백엔드 개발자 초보 탈출!

초보를 탈출하고 나서 여러분들에게 도움이 될 만한 것들을 나열해 보았습니다.

백엔드 심도있게 공부해보기 (아무래도 스프링이 좋은 것 같아요. 다른 것도 괜찮습니다.)
디자인 패턴 (head first desgin pattern이 좋다고 합니다.)
effective Java 읽어 보기
다른 소스 많이 읽고 많이 짜 보기 (개인적으로 이희승님의 netty를 공부하는 걸 추천합니다.)
reflection, generic에 대해 조금 더 깊게 배워야 할 것 같습니다.
virtual machine의 동작 원리, 가비지 콜렉션의 원리, bytecode의 이해
성능 프로파일링 도구
로그 수집 툴

프론트엔드 개발자 초보 탈출!

«니가요의 도움으로 채우자»

잉여력이 생긴다면

서버 개발자들은 C#을 공부해 봅시다. 여러분이 사용하는 언어가 java라는게 엄청 아쉬워 질지도 모릅니다. “Do you know why java devepers wear glasses? Because they can’t see #.” 그리고 groovy가 우리나라에서는 잘 사용되지 않지만 역시 한번쯤 공부해 볼 만합니다. 프론트 개발자들은 rust를 배우고 firefox와 함께 놀아 봅시다. 새로운 세상이 여러분에게 열릴 것 같습니다. 마지막으로 찰스 펫졸드이 CODE책, 그리고 조엘 온 소프트웨어 책을 추천해 드립니다. 멋지고 재미있는 책입니다.

마치며

좋은 개발자는 Why? 를 달고 사는 사람이 아닐까 생각을 합니다. 여러분이 무엇을 보든지 일상 생활에서 무엇을 하던지 why? 에 대해 한 번씩 스스로 생각해 봅시다. 예를 들어 지금 이 순간이라면 “google docs는 어떤 원리로 실시간 동기화 기술을 제공해 주는 걸까? 프론트 엔드 - 백엔드 - 네트워크 - 그리고 동기화 기술엔 어떤 것들이 있는 걸까? 내가 이걸 만들 수 있을까?” 이런 생각을 할 수 있을 것 같아요. 최근 저는 오일러 상수 e 가 왜 2.718일까? 를 생각하고 있어요. 아직 답이 나오진 않았는데 조금 실마리를 찾았습니다. 책을 보고 답을 찾는 것보다 즐거움을 위해서 ‘바퀴의 재발명’을 해 보시기 바랍니다.

Comment Read more

170221_TIL

21 Feb 2017 | TIL

오늘 한 일

윤지수님 JS OOP 강의를 들었다. 네임스페이스를 이용해서 모듈화 시키는 방법에 대해서 배웠다. 이것도 어려워서 한번 더 듣고 정리해야겠다.
생활코딩 nodejs DB(orientdb) 강의를 들었다. orientdb의 장점에 대해서 듣는데 아는게 없어서 크게 와닿지는 않는다. 코드스쿼드에서는 mongodb를 배운다는데 미리 db에 대해서 접해두면 도움이 되겠지?

오늘 느낀 것

모듈, API를 사용할 때 가이드 문서를 보고 적용하는 패턴에 약간은 익숙해 진 것 같다.
nodejs 수업 중에 ‘개발은 행정 업무에 가까운 것 같다’ 라는 이고잉님의 말이 신선했다. 아직은 잘 모르지만 개발이라는건 다른 개발자들이 만들어 놓은 많은 도구들을 잘 활용해서 원하는 걸 만들어 내는 일 같다. 도구를 잘 사용하려면 가이드 문서를 능숙하게 읽고 이해하는 기술이 정말 중요하겠다는 생각이 든다. 익숙하지 않은 내용들을 심지어 영어로 읽으려니 참 여려운데 점점 익숙해 지겠지?

내일 할 일

윤지수님 oop 강의 다시 듣기
nodejs 강의 듣기
알고리즘 문제 풀기

Comment Read more

nodejs 간단한 웹어플리케이션 제작

20 Feb 2017 | nodejs Express post

nodejs 간단한 웹어플리케이션 제작

생활코딩 Node.js 강의
전형적인 웹에플리케이션을 제작하는 방법을 알아봅니다. 현대적인 웹에플리케이션은 정보를 저장하는 공간으로 데이터베이스를 사용합니다만 우리는 수업의 난이도를 조절하기 위해서 배우기 쉬운 파일을 사용합니다. 데이터베이스를 활용하는 수업은 뒤에서 다시 다루겠습니다.

오리엔테이션

웹 어플리케이션의 전형적인 기능
- 사용자로 부터 정보를 입력 받아서 서버에 저장하고 필요한 정보를 요청하면 그것을 제공하는 것
만들어 볼 것
- 조회1 : 글 목록 출력
- 조회2 : 글 내용 조회
- 작성 : 글 내용 작성후 post 방식으로 전송
- 저장 : post 방식으로 전송된 데이터 저장
현대적인 웹어플리케이션은 사용자가 입력한 정보를 데이터베이스에 저장하지만, 이번에는 간단하게 파일에 저장한다.

만들어 볼 웹어플리케이션의 라우팅 구조

홈 : localhost:3000
작성 (글작성 폼) : localhost:3000/topic/new
저장 (폼 전송 타겟) : localhost:3000/topic
조회 (글 리스트) : localhost:3000/topic
조회 (글 내용) : localhost:3000/topic/nodejs(글제목)

라우팅

express 모듈 적용 및 서버 연결

express 가이드 문서
프로젝트 파일 내에 app_file.js 파일(main/entry file)을 작성한다.
코드 예시

var express = require('express'); //express 모듈을 가져온다
var app = express(); //  express 모듈을 사용하여 app 객체를 생성한다.
app.listen(3000, function() {
  console.log('connected, 3000 port!')
//app객체가 가진 listen 메소드를 사용하여
//어플리케이션이 특정 포트를 리스닝 하도록 만든다
})

연결확인
- 터미널에서 node app_file.js 혹은 supervisor app_file.js
- 브라우저에서 http://localhost:3000/ 접속

라우팅 및 템플릿 엔진 설정

라우팅 : 사용자의 요청을 적당한 콘트롤러와 연결시켜주는 연결작업
express 가이드 문서 - 라우팅
라우팅 작업 예시 (app_file.js)

app.get('/topic/new', function(req, res){
  res.send('topic/new 경로에요');
})

express-템플릿 엔진 연결 (app_file.js)

웹 어플리케이션에 템플릿엔진 (jade)를 연결하고 설정한다.

express 가이드 문서 - 템플릿 엔진
프로젝트 폴더 내에 템플릿 파일을 모아둘 views_file 폴더를 만든다.
entry file (app_file.js) 내에 템플릿 파일에 대한 설정을 한다.
탬플릿 설정 작업 예시 (app_file.js)

app.set('view engine', 'jade') // 탬플릿 엔진 사용 선언
app.set('views','./views_file') // 탬플릿 파일들의 경로
app.get('/topic/new', function(req, res){
  res.render('new')
  // render : 템플릿 파일 사용(렌더링) 하겠다.
  // render('new') : 템플릿 폴더 (./views_file) 내의 new 라는 파일을 콘트롤러로 쓰겠다.  
})

템플릿 문서 작성 (new.jade)

form 문서를 jade 템플릿을 사용하여 작성한다.
jade의 이름이 pug로 변경되었다. 참고

views_file 폴더 내에 템플릿 문서를 작성한다. (new.jade)
title과 description을 사용자로부터 입력받아, post 방식으로 /topic 경로로 전송하는 문서
탬플릿 설정 작업 예시 (new.jade)

doctype html
html
  head
    meta(charset='utf-8')
  body
    form(action='/topic' method='post')
      p
        input(type='text' name='title' placeholder='title')
      p
        textarea(name='description')
      p
        input(type='submit')

post로 전달받은 정보 사용

post 방식으로 전송된 데이터를 가져온다.

폼을 통해 전송된 post 정보의 라우팅 예시 (app_file.js)

app.post('/topic', function(req, res) {
  res.send('Hi, post!' + req.body.title)
})

post 전달 정보를 express 에서 사용하기 위해서는 미들웨어가 필요하다. (ex.body-parser)
- 설치 : 터미널에서 npm install body-parser --save 입력
- express-미들웨어(body-parser) 연결 및 설정(app_file.js)

var bodyParser = require('body-parser')
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))  

웹어플리케이션에 들어오는 모든 요청에 대해서 post 방식으로 들어오게 되면, body-parser가 어플리케이션 중간에서 요청을 가로채서 req 객체에 body라는 프로퍼티를 만들어서 post 데이터에 접근할 수 있게 해준다.

저장 - 본문저장

post 방식으로 전송된 데이터를 별도 파일에 저장한다.

데이터베이스를 사용하지 않고 파일에 저장하는 것은 아주 좋지 않은 방법이지만, 어플리케이션의 대략적인 구조를 이해하고 복잡도를 줄이기 위해서 데이터를 파일에 저장하여 연습한다.
프로젝트 폴더 내에 data 폴더를 만든다.
사용자가 전송한 title 을 파일의 제목으로, description을 파일의 내용으로 data 폴더 내에 저장한다.
파일을 제어하기 위해서는 nodejs 가 제공하는 file system 모듈 사용이 필요하다.
- fs.writeFile 가이드 참고
post로 전송한 데이터를 파일을 만들어 저장하는 예시 (app_file.js)

var fs = require('fs'); // file system nodejs 모듈 적용
var bodyParser = require('body-parser') // body-parser 미들웨어 설정
app.use(bodyParser.urlencoded({ extended: false }))  

app.post('/topic', function(req, res) {
  var title = req.body.title;
  var description = req.body.description;
  fs.writeFile('data/'+title, description, function(err){
    if(err){
      console.log(err);
      // 에러정보가 터미널에 표시된다.
      res.status(500).send('Internal Server Error');
      // send 메소드는, send가 실행되면 그 다음코드는 실행되지 않는다.
    }
    res.send('data saved!');
    // callback 함수가 실행된 후에 response가 가능하다.
  });
})

조회1 - 글 목록 만들기

별도 파일에 저장한 글들의 목록을 화면에 표시한다.

http://localhost:3000/topic 에 접속했을 때 저장한 글 제목 목록이 표시되도록 한다.
topic path에 대한 get방식 라우터를 만들고 콘트롤러로 템플릿 파일을 연결한다.
data 폴더에 저장된 파일들을 가져오기 위해서는 fs.readdir 메소드가 필요하다. 참고
라우터 코드 예시 (app_file.js)

// 조회 - 글목록 표시
app.get('/topic', function(req, res) {
  fs.readdir('data',function(err, files) {
    if(err){
      console.log(err);
      res.status(500).send('Internal Server Error');
    }
    res.render('view', {topics:files});
    // 변수 topic에 files 배열을 담아서 리턴
    // 이제 템플릿파일 view.jade에서 해당 변수를 사용할 수있음
  })
});

템플릿 코드 예시 (view.jade)
- 반복문을 통해서 리스트를 출력한다. jade 반복문 참고

doctype html
html
  head
    meta(charset='utf-8')
  body
    h1 Server Side Javascript
    ul
      each val in topics
        li
          a(href='/topic/'+val)= val

실행결과 (http://localhost:3000/topic)

조회1 - 본문 읽기

어떻게 라우터와 연결할 것인가? params
- path경로의 라우터 추가 코드 예시 (app_file.js)

app.get('/topic/:id', function(req, res){
// path 방식을 사용하는 url의 경우 params를 통해서 값을 가져올 수 있음
  var id = req.params.id;
  res.send(id);
});

파일 내용은 어떻게 읽어올 것인가? fs.readfile
- 파일을 읽어오려면 fs.readfile 메소드 사용 가이드 참고
- 별도 파일을 읽어오는 코드 예시 (app_file.js)

// 조회 - 글내용 조회
app.get('/topic/:id', function(req, res){
  var id = req.params.id;
  fs.readdir('data',function(err, files) {
    if(err){
      console.log(err);
      res.status(500).send('Internal Server Error');
    }
    fs.readFile('data/'+id, 'utf8', function(err, data){
      if(err){
        console.log(err);
        res.status(500).send('Internal Server Error');
      }
      res.render('view', {topics: files, title: id, description: data});
    });
  });
});

별도 파일을 읽어오는 코드 예시 (view.jade)

doctype html
html
  head
    meta(charset='utf-8')
  body
    h1 Server Side Javascript
    ul
      each val in topics
        li
          a(href='/topic/'+val) #{val}
    article
      h2 #{title}
      p #{description}

지금까지의 내용은 근대적인 어플리케이션을 구축하는데 있어서 소위 미들웨어라고 하는 웹서버와 데이터베이스 사이에 존재하는 nodejs, JS, express 등이 하는 역할의 가장 중요한 부분이다.

코드의 개선

중복 제거

app_file.js 에서 중복된 부분을 제거한다.
중복 제거의 장점
- 유지보수의 용이
- 코드의 양이 줄어들어 가독성 개선
중복 제거 연습방법
- 일단 중복과 상관 없이 코드를 짠다.
- 나중에 한발짝 물러나서 자신이 작성한 코드를 살펴본다.
- 중복이 보이면 제거한다.
중복 제거 이전 코드

// 조회1 - 글목록 표시
app.get('/topic', function(req, res) {
  fs.readdir('data',function(err, files) {
    if(err){
      console.log(err);
      res.status(500).send('Internal Server Error');
    }
    res.render('view', {topics:files});
    // .reder() 매소드의 2번째 인자로 템플릿 파일에서 사용할 변수를 객체에 담아 정의
    // 변수 topic에 files 배열을 담아서 리턴
    // 이제 템플릿파일 view.jade에서 해당 변수를 사용할 수있음
  });
});

// 조회2 - 글내용 조회
app.get('/topic/:id', function(req, res){
  var id = req.params.id;
  fs.readdir('data',function(err, files) {
    if(err){
      console.log(err);
      res.status(500).send('Internal Server Error');
    }
    fs.readFile('data/'+id, 'utf8', function(err, data){
      if(err){
        console.log(err);
        res.status(500).send('Internal Server Error');
      }
      res.render('view', {topics: files, title: id, description: data});
    });
  });
});

중복 제거 이후 코드
라우트는 배열로 여러개의 path를 가질 수 있다. express 가이드

// 조회 - 글목록 표시, 글내용
app.get(['/topic', '/topic/:id'], function(req, res) {
// 라우트는 배열로 여러개의 path를 가질 수 있음
  fs.readdir('data',function(err, files) {
    if(err){
      console.log(err);
      res.status(500).send('Internal Server Error');
    }
    var id = req.params.id;
    if(id){
      // id 값이 있을 때
      fs.readFile('data/'+id, 'utf8', function(err, data){
        if(err){
          console.log(err);
          res.status(500).send('Internal Server Error');
        }
        res.render('view', {topics: files, title: id, description: data});
      });
    }else{
      // id 값이 없을 때
      res.render('view', {topics:files, title:'welcome', description:'hello JS for server'});
    }
  });
});

스타일 통일

각 페이지의 (조회, 작성, 저장)의 스타일을 통일한다.

전체코드 링크

Comment Read more

지킬 블로그 구글 검색 가능하게 하는 방법

20 Feb 2017 | jekyll 지킬 검색 구글검색 sitemap

jekyll 블로그 글이 구글에서 검색되도록 만들기

jekyll로 만든 블로그 글은 구글에서 검색이 되지 않는다고 한다.
구글 검색이 가능하도록 하려면 몇가지 절차가 필요하다.

구글 웹마스터 도구(Search Console)에 속성 추가 및 인증

구글 웹 마스터 도구 접속
속성추가 버튼을 선택
자신의 jekyll 블로그 주소를 입력하여 속성 추가 (ex.https://wayhome25.github.io/)
구글에서 제공하는 html 다운로드
해당 파일을 자신의 github jekyll 블로그 루트 디렉토리에 올리고 (github 커밋 필요) 확인을 눌러서 인증 완료

sitemap.xml 파일 작성

sitemap.xml 파일을 작성하여 자신의 github jekyll 블로그 루트 디렉토리에 업로드 (github 커밋 필요) sitemap.xml 내용 참고
주의사항 1 루트 디렉토리에 존재하는 _config.yml 파일 내의 url 부분에 자신의 블로그 url을 입력해야 sitemap.xml에서 site.url 부분을 사용 할 수 있다.
```
url: https://wayhome25.github.io
```
주의사항 2 sitemap.xml은 파일링크 내용을 복사&붙여넣기 하여 작성한다. 1~2 행의 ------- 부분도 포함시켜야 한다.
(나는 포함시키지 않고 작성해서 여러번 테스트 에러가 발생했다.)

구글 웹마스터 도구(Search Console)에 sitemap.xml 제출

구글에게 sitemap.xml을 제출해야 구글이 내 블로그를 크롤링 하는 방식을 판단하고 검색엔진에 노출할 수 있다.

구글 웹 마스터 도구 접속
자신이 추가한 속성 (블로그)을 선택
왼쪽 메뉴 중 크롤링 > Sitemaps 선택
우측 상단의 SITEMAP 추가/테스트 버튼 선택
자신의 github에 커밋한 sitemap.xml 주소를 입력. (ex.https://wayhome25.github.io/ sitemap.xml)
테스트 후 문제가 발생하지 않으면 제출

참고 글

Comment Read more

170220_TIL

20 Feb 2017 | TIL

오늘 한 일

hack reactor 사이트에서 알고리즘 문제를 풀었다. Javascript 기초를 연습할땐 알고리즘 문제가 역시 좋은 것 같다. 기분 전환도 되고
생활코딩 nodejs 웹어플리케이션 강의를 드디어 들었다. 정리하고 실습하면서 들으려니 5시간 정도 걸린 것 같다. nodejs로 웹어플리케이션이 동작하는 구조를 큰 그림으로 볼 수 있어서 좋았다. 라우터, 모듈, path, 미들웨어, 쿼리 스트링 등 여러가지 새로운 개념들을 접할 수 있었다. 역시 명강의, 나중에 한번 더 봐야지.
윤지수님 JS OOP 강의는 어제 들었던 강의를 다시 듣고 블로그에 정리했다. 생성자 함수를 통해서 객체를 만들고, 모듈화에 활용하는 부분은 나중에 유용하게 사용할 수 있을 것 같다.(아직은 크게 와닿지 않지만)
모니터에 이어서 의자에 관심이 생긴다. 그동안 계속 나사 풀린 작은 나무의자를 사용했는데 오래 앉아 있으려니 허리가 뻐근하다. 찾아보니 시디즈 탭 TX200HF 이 상품이 상품평도 많고 가격대비 괜찮아 보인다.

오늘 느낀 것

백엔드 개발에 점점 관심이 생긴다. python 언어를 배워서 정호영님 Django 강의 를 듣고싶다. 목차를 보니 질문하는 방법 이라는 강의가 있다. (이런 주제를 다루는 것 너무 좋다!) 일단 결제하고 나중에 들을까..?
예전에는 강의를 빨리 듣고 싶다는 마음이 컸는데 최근 일주일 사이에 강의 듣는 속도가 전보다 중요하지 않게 되었다. 이고잉님 nodejs 강의를 듣다가, 중간부터 집중이 안되고 내용이 어렵게 느껴져서 3일정도 옆길로 새서 firebase로 todo 리스트 웹페이지를 만들어보았다. 데이터를 저장하고 출력하는 기능을 추가하려다 보니 nodejs로는 어떻게 하는지 궁금해졌다. 그리고 나서 noejs 강의를 처음부터 다시 듣기 시작, 4일 만에 다시 예전에 들었던 부분으로 돌아왔다. 처음 들었을 때보다 더 재미있게 들을 수 있었는데 강의 내용을 정리하면서 들어서일까? 아니면 2번째 듣는 거라서? 옆길로 샜다가 필요성을 느껴서? 전부 다 일지도 모르겠다.

내일 할 일

윤지수님 oop 강의 듣기
nodejs 강의 듣기
알고리즘 문제 풀기

Comment Read more

Older Newer

초보몽키의 개발공부로그

초보 웹 개발자를 위하여 - 정호영님

초보 웹 개발자를 위하여 build #3

작성: 호도르 (honux77@gmail.com)

로그

들어가기 앞서

1. 우리나라 IT 개발자 직군의 종류

2. 개발자들에게 유용한 웹 사이트들

3. 처음에 배워야 하는 것들

4. 일단 시작해 보자

5. 조금 더 깊게

백엔드 개발자 초보 탈출!

프론트엔드 개발자 초보 탈출!

잉여력이 생긴다면

마치며

170221_TIL

오늘 한 일

오늘 느낀 것

내일 할 일

nodejs 간단한 웹어플리케이션 제작

nodejs 간단한 웹어플리케이션 제작

오리엔테이션

만들어 볼 웹어플리케이션의 라우팅 구조

라우팅

express 모듈 적용 및 서버 연결

라우팅 및 템플릿 엔진 설정

express-템플릿 엔진 연결 (app_file.js)

템플릿 문서 작성 (new.jade)

post로 전달받은 정보 사용

저장 - 본문저장

조회1 - 글 목록 만들기

조회1 - 본문 읽기

코드의 개선

중복 제거

스타일 통일

전체코드 링크

지킬 블로그 구글 검색 가능하게 하는 방법

jekyll 블로그 글이 구글에서 검색되도록 만들기

구글 웹마스터 도구(Search Console)에 속성 추가 및 인증

sitemap.xml 파일 작성

구글 웹마스터 도구(Search Console)에 sitemap.xml 제출

170220_TIL

오늘 한 일

오늘 느낀 것

내일 할 일