Angular2 가 나온지 벌써 꽤나 긴 시간이 지났습니다. 최초에 이 프레임워크에 관심이 있어 관련 포스팅을 했었는데, 이미 구 버전이 되어버린지라 새롭게 포스팅을 시작하려고 합니다. 이전 포스팅들은 다음 주소에서 확인할 수 있습니다. http://dalkomit.com/category/Old/old-Angularjs2 공식 홈페이지의 주소는 다음과 같습니다. https://angular.io/ Angularjs 2 는 무엇이며, 왜 사람들이 배우려고 하는 것인지에부터 차근차근 알아보려 합니다.강좌 형식이지만, 정확히는 제 공부 내용을 정리하는 것입니다 ! 부족한 부분은 댓글로 달아주시면 찾아보도록 하겠습니다. Angular 2 는 무엇인가? 위의 Angular2 메인 사진에 보면 알 수 있듯이, On..

EJS 프레임워크 변수 처리 Express와 EJS 모듈을 사용하다 보면 같은 페이지에 다른 종류의 변수를 렌더해줘야하는 경우가 생긴다. 예를 들어 똑같은 login 페이지에, 성공할때에는 success 스트링을 출력하고, 실패할때에는 fail 스트링을 출력한다고 해보자. 123456router.get('/login', function(req, res, next){ if(req.body.id == "dalkom") res.render('login', {success:"로그인 성공!"}); else res.render('login', {err:"없는 아이디!"});})Colored by Color Scriptercs 위와 같은 라우팅 코드를 통해서 login.ejs 페이지를 렌더링한다고 할 때에, 아무 조..

웹 스크래핑이란 ? 웹 스크래핑은 웹페이지의 정보를 프로그램을 통해서 가져오는 것을 뜻한다. 우리가 신문을 스크랩 하듯이, 웹페이지를 스크랩 해서 정보를 저장하는 것이 가능하다. 그러나 비정상적인 접근으로 금지하는 경우도 있으니 조심해야 할 것 ! 오늘 사용할 모듈은 2가지인데, Request와 Cheerio 이다. Request 모듈은 Node.js 내장 모듈로, 인터넷에 요청을 보내고, 요청에 해당하는 페이지를 가져온다. Cheerio 모듈은 그 받아온 페이지를 파싱하여 전체 페이지 중에서 필요한 부분의 정보만을 가져올 수 있다. Cheerio의 장점은, jQuery 문법을 그대로 사용할 수 있다는 것이다. 따로 공부할 문법이 없이, 그냥 jquery 선택자를 이용해서 쉽게 사용할 수 있다.(jque..

Socket.io 이번 포스팅은 Socket.io 최신버전의 새로운 기능들에 대해서 알아보자. 먼저 프론트엔드 측에서, socket.io 서버로 연결할 때에 호스트를 입력하지 않아도 되도록 바뀌었다. 기존의 코드가 다음과 같다면, 1var socket = io('http://localhost:3000/');cs 이제는 다음과 같이 써도 된다는 것이다. 1var socket = io();cs io는 자동으로 현재 접속해 있는 사이트의 호스트를 찾고, 해당하는 호스트에 socket.io 서버가 열려있다면 연결하게 된다. 무척이나 편리한 기능이 아닐 수 없다 ! Namespace 기존에 Socket.io 에는, Room이라는 기능이 있었다. 소켓에 접속하고, 같은 room 내부의 사람들과 통신할 수 있는 방식..

개발 환경 - Express 기본 모듈들(express-generator를 통해 설치된 모듈들) - Express-session 위의 두개만 설치하면 된다. 딱 로그인의 기능만 넣을 것이기 때문이다. ./app.js Express - session 세팅은 저번 포스팅대로 app.js에 해주면 된다. 즉 모듈을 불러들여서 기본 암호 등을 세팅해주면 끝난다. ./views/login.ejs , logout.ejs 보여줄 view는 2가지이다. 로그인을 위한 페이지, 로그아웃을 위한 페이지의 2가지이다. 먼저 login을 위한 페이지이다. 12345678910111213141516171819202122 Dalkom Login ID PW 로그인 Colored by Color Scriptercs 단순하게 아이디와..

Bower ?혹시나 프론트 엔드라는 개념을 아직 모르시는 분이 계시는 분을 위하여 , 프론트 엔드는 사용자가 마주하는 부분을 의미합니다. 백 엔드는 프론트와 반대 개념으로, 사용자가 마주하지 못하는 뒤에서 돌아가고있는 서버를 뜻합니다. 따라서 웹 개발에 있어서 프론트엔드는 브라우저에서 보는 화면들 에 해당합니다. Bower는 이 프론트엔드에서 필요한 라이브러리들을 관리해줍니다. 웹페이지를 만들다 보면, 많은 라이브러리 들을 사용하게 됩니다. jquery, angularjs, bootstrap, materialize ..... 따라서 파일이 많아질수록 관리하는 것은 힘들어(귀찮아) 집니다. 그런 어려움을 극복하기 위한 모듈이 bower입니다. 설치 및 사용법Bower 또한 node.js 의 모듈 중 하나이..

Express-session 모듈HTTP 는 Stateless 한 통신을 한다. 즉 현재 상태에 대한 정보를 프로토콜 내부에서 기록하지 않는다는 것이다. 따라서 로그인 정보, 고객 정보 등을 브라우저에서 가지고 유지할 방법이 없었다. 따라서 이러한 필요에 의해서 나온 것이 쿠키 / 세션 의 개념이다. (자세한 설명은 네트워크 공부를!) 세션은 정보를 서버에서 저장한다. Express 에서 또한 이 세션을 유지하기 위한 모듈을 제작해 두었는데, 이것이 Express-session 이다. 기존에는 Express 모듈 내부에 자체 내장된 session 기능이 있었는데, 이를 따로 자체 모듈화 하였기 때문에 직접 설치하고 세팅해주어야 한다. 보통 세션을 통해서 로그인 정보를 서버 메모리에 저장한다. 또는 인터넷..

EJS?이번 포스트는 저번 포스트에 이어서 Express의 템플릿 엔진에 대해서 공부한다. EJS 는 Embedded JavaScript 의 약자로, 내부에 javascript 를 집어 넣어둔다는 의미인데, 사실 조금 다르다.

Callback 함수 흔히 Node.js 에 대한 정보들을 검색하다 보면, Callback 지옥에 빠진다 ! 라는 글이 눈에 종종 띈다. 그렇다면 Callback 함수 는 무엇인가 ? 아주 간단한 예로 이해해보자. 콜백 함수 의 이름에서부터 알 수 있듯이, 전화를 다시 하다 (?) 라는 뜻이다. (물론 그런 의도가 아니었을지라도) 친구들과 즐겁게 시내를 돌아다니다가, 집에 갈 때 사갈 떡볶이를 사가려고 한다.그런데 이게 무슨일이람. 떡볶이가 너무 많이 밀려서 시간이 조금 걸린다고 한다 !그래서 나는 전화번호를 주고, 조리가 끝나면 받아갈테니 전화를 다시 주라고 하였다! 무슨 말인지 이해가 왔는가 ? 그렇다면 독자는.. 정말 똑똑한 사람일지도 모르겠다. 무엇인가 일을 다른 객체에게 시키고, 그 일이 끝나는..

Jade ?Jade는 Express가 기본으로 제공하는 템플릿 엔진이다. 템플릿 엔진이란, 파일을 읽어들일 때에 엔진의 규칙과 설정에 의해 파일을 변환시키고, 화면에 출력시켜주기 위한 HTML 형식으로 바꿔주는 모듈을 의미한다. Jade 모듈 또한 같은 역할을 한다. Jade 문법대로 파일을 작성하면, 이를 Express에서 엔진을 사용하여 사용자에게 보여지기 위한 형태로 바뀐다. 이를 설정하는 곳은 express 폴더 내부의 ./app.js 파일인데, 그 중에서 다음의 내용에 해당한다. 14번 15번 줄이 엔진을 설정하는 곳인데, 14번은 엔진을 통해서 렌더링할 파일이 들어갈 폴더를 지정해준다.15번은 14번에 해당하는 폴더의 파일을 jade engine으로 변환하겠다는 내용이다. Jade는 굉장히 뭐..

Socket.io ? Socket.io는 저번에 나왔듯이, 소켓을 통해서 다른 환경의 프로그램들끼리 통신이 가능하게끔 해주는 모듈이다. 인터넷에서 사용하는 Websocket도 포함되어진다. Socket.io의 특징은, 연결 - 통신 - 종료 의 단계로 이루어진다. 따라서 크게 구분을 나누자면, Persistent 와 Non-Persistent의 두가지 방식이 있겠다. Non-Persistent는 socket 연결을 하고, 통신을 하고, 종료를 한다.다음 통신을 하기 위해선 다시 연결을 하고, 통신이 끝나면 또 종료를 한다.보통 페이지가 계속해서 움직이는 경우에는 이런 상황이 된다.페이지가 넘어가면, js 파일을 다시 불러서 socket을 연결해야하는 과정을 거친다. 그런데 여기에서 지연시간(delay)가..

웹페이지 준비웹페이지 뷰를 위한 css 파일과, ejs 파일을 먼저 만들어야겠죠? dalkom_talk.ejs 라는 파일을 먼저 만들어 봅시다. 위 파일 클릭시 다운로드할 수 있습니다. 지정된 폴더에 집어넣어주셔야 정상 작동합니다 123456789101112131415161718192021222324252627282930313233343536373839404142434445 Dalkom Talk $(function(){ var socket = io('http://localhost:3000/'); socket.on('my message', function (msg) { $('#messages').append($('').text(msg)); }); socket.on('other message', functi..

Socket.io ? 네트워크에 대해 공부했다면, 소켓 이라는 단어를 들어본 적이 있을 것입니다.혹은, 전구를 갈아본 적이 있다면, 혹은 설치해본 적 이있다면 소켓이란 말을 들어보았을 것입니다.전구와 전선의 연결 부분이 바로 전구 소켓입니다. 네트워크 상에서도 동일한 역할을 합니다.서로 다른 종류의 구동 환경에서, 서로를 연결해주고 데이터를 주고 받을 수 있도록 도와주는 것이 통신에서 말하는 소켓입니다. 이 Socket.io 모듈을 통해서 웹 서버는 웹 브라우저와 실시간 통신이 가능하게 됩니다. 그러기 위해서는 웹 서버, 즉 HTTP 서버를 구성할 때에 socket.io가 서버에 들어오는 소켓 통신을 받을 수 있도록 설정해주어야 합니다. 포스팅에서는 socket.io를 이용하여 간단한 채팅 웹 어플리케이..

Express 시작하기 Express 서버를 실행해 봅시다.저번 포스트에 package.json에 대해 배울때에, start라는 scripts에 ./bin/www 를 실행하는 코드가 있었습니다.따라서 npm 명령어로 실행해봅시다. npm start 그러면 위와 같이 node ./bin/www 명령어가 실행되는 것을 알 수 있습니다.PORT는 3000으로 설정되어 있습니다. 주소에 접속해봅시다. 인터넷 주소는 http://localhost:3000 혹은 http://아이피:3000 으로 접속하시면 됩니다. Express 기본 페이지가 뜨는 것을 볼 수 있습니다. 위 사진은 서버를 실행했던 CMD 창인데, morgan 모듈을 통해서 로그가 되고 있는 것을 볼 수 있습니다. GET method로 접근한 클라이..

모듈 분석이번 포스팅은 저번 포스팅에 express 명령어로 파일들을 만들었을 때, 자동으로 포함되는 모듈들에 대해 알아볼 것입니다. express --ejs --css sass 위의 커맨드를 쳐서 만들어진 폴더입니다.웹 템플릿으로 ejs 모듈을 사용하고, css 모듈로 sass를 사용합니다. 그럼 본격적으로 package.json 파일 분석과 기본 코드를 확인해보겠습니다.Package.json설치된 파일에서 package.json을 열면 다음과 같은 내용이 들어있습니다. 위에서부터 이름, 버젼, 배포 여부를 알려주는 name, version, private의 값이 있습니다. npm scripts로는 start를 하면 bin 폴더에 있는 www.js를 실행하도록 스크립트가 짜여 있습니다. 아래의 설치 모..