본문 바로가기

IT 인터넷

 (53)
[javascript 언어공부] 언어소개 / 언어와 환경의 차이점 생활코딩으로 공부시작~! 1. 언어소개 자바스크립트란 무엇일까?? 자바스크립트를 이야기할 때 빼놓을 수 없는것이 웹브라우저이다. 자바스크립트는 웹브라우저로 분류되는 소프트웨어를 프로그래밍 적으로 제어하는 언어이기 때문이고,그 이유로 탄생했기 때문이다. 그럼 프로그래밍 적 제어한다는 것이 무슨말일까? 아래 예시 html 코드를 보자. 코드 중 빨간색 부분이 자바스크립트이며, '사용자가 버튼을 클릭하면 hello world가 뜬다.' 라는 의미를 가지고 있고, 실행 후 사용자가 버튼을 클릭하면 - 경고창에 hello world가 뜬다. 브라우저가 이미 가지고 있는 경고창 기능을 코드를 통해 제어할 수 있게 되는 것이다. 이렇게 브라우저 위에서 동작하면서, 사용자와 상호작용 할 수 있는 언어는 오직 javas..
[javascript 언어공부] 시작 더이상 미룰 수 없다.javascript 언어 공부 시작! 언어 공부 빨리 끝내고node js 부분 마무리 해야겠다. 나는 e로 접할 때 더 자주, 많이 들여다 보기 떄문에생활코딩으로 공부하기로 했다. 이번엔 제발.. 완주하길 !!
[node js]post방식 이해하기 앞서 보았던 form.pug 파일에서 method를 post로 변경해보자. doctype htmlhtmlheadmeta(charset='utf-8')bodyform(action='/form_receiver' method='post')pinput(type='text' name='title')ptextarea(name='description')pinput(type='submit') 이후 input -> hellotextarea -> world 라 입력하면 url 이 다음과 같다. http://localhost:3000/form_receiver 쿼리스트링으로 데이터를 전송하는게 아니란 뜻이다. 일단 app.js에 /form_receiver 의 포스트 경로르 추가해보자 app.post('/form_receive..
[node js]get 방식 이해하기 get 방식은 앞서 공부했던 쿼리스트링을 통해 데이터를 가져오는 방식이다. get방식을 공부하기 위한 세팅을 먼저 해보자. get 방식을 위해 views 파일 밑에 form이라는 pug 파일이 로드될 수 있도록 세팅한다. app.get('/form',function(req,res){res.render('form')}) 이제 form.pug 파일을 만든다. doctype htmlhtmlheadmeta(charset='utf-8')bodyform(action='/form_receiver')pinput(type='text' name='title')ptextarea(name='description')pinput(type='submit') 이렇게 한 후 localhost:3000/form 을 로드하면 input ..
[node js] get 방식과 post 방식 차이 get 방식과 post 방식이 둘은 사용자에게 입력받은 데이터를 가져오는 방식이다. 그럼 둘의 차이점은 무엇일까? 일단 get을 한번 보자.get의 뜻은 무수히 많다. 그중에서도 '가져오다'라는 뜻! 사용자에게 데이터를 받으면 그걸 가져와!! 그걸 겟해!!라는 뜻으로 받아들이면 쉽다. 근데 너무 당연한 말 아닌가? 사용자에게 데이터를 받으면 가져와야지..그럼 post는 사용자에게 받은 데이터 안가져 온다는 뜻???? 왜 하필 post 라고 했지?? 결론적으로 말하면 post와 get 모두 사용자에게 입력받은 데이터를 가져온다.but 포장에 차이다. post도 여러가지 뜻이 있지만 '우편물' 이라고 해보자우리는 남의 우편물을 들여다 볼 수 있을까?아니 없다!!! 왜냐면 종이로 쌓여있거나, 박스로 포장돼있기..
[node js]semantic URL 방식 앞서 쿼리스트링에 대해서 공부했다. 쿼리스트링이 달린 url을 한번 살펴보자. http://estelar.tistory.com/form/id=3&name=yeseul 위 url이 너무 복잡하지 않은가? url을 간단하게 만들 수 있는 것이 semantic URL 방식이다. 예를 들어 위와 같은 코드는 http://estelar.tistory.com/form/3/yeseul 이렇게 줄일 수 있다. sementic url은 어떻게 사용하는 걸까?? 저번시간에 봤던 코드를 살펴보자 app.get('/topic',function(req,res){var topics = ['javascript is','nodejs is','express is'] var output = ` Javascript Nodejs Expre..
[node js]쿼리스트링과 쿼리스트링을 이용한 페이지 값 출력 쿼리스트링이란 무엇일까? http://estelar.tistory.com/topic?id=3 먼저 이런 url을 분석해보자 http는 hyperTextTransferProtocol 의 약자이며, 웹 페이지 맨 앞에 사용된다.:// 은 단순 문법이고 estelar.tistory.com은 해당 웹페이지를 제공하는 컴퓨터 주소로 이동하는 것이다. 마지막으로 /topic이라는 것은 path로 estelar.tistory.com/topic estelar.tistory.com/yes 이런식으로 해당 컴퓨터의 서로 다른 페이지로이동할 수 있는 경로 역할을 한다. 그럼 그 뒤에 붙은 ?id=3은 뭘까? 이게 바로 쿼리스트링이다. 쿼리스트링이 만약 ?id=1 이고 ?id=3 이면, 서로 다른 페이지는 아니지만 다른 값을..
[node js]templete, pug 설치 / 적용하기 앞서 정적 파일과 동적파일을 봤는데, 이 모든걸 합산한 장점을 가지고 있는 것이 templete다. 우선 templete를 설치한다. $ npm install pug --save 그리고 Express가 templete를 렌더링 하기 위한 코드를 입력해준다. app.set('view engine','pug') view engine은 templete엔진을 세팅한다는 약속이고, pug는 templete엔진 중 pug를 세팅한다는 뜻이다. app.set('views','./views') 그러면 pug파일이 어디 위치해있는가.. 현재 디렉토리 에서 views 라고 하는 파일에 위치한다고 설정한다. 그리고 현재디렉토리에 views 라는 폴더를 설치한다. 이제 기본적인 세팅은 끝났다.본격적으로 templete 을 사..
[node js]정적 페이지와 동적 페이지의 장단점 정적 동적 페이지의 차이점은 무엇일까? 쉽게 예를 들어보겠다. 정적 페이지는 정적 페이지 codingcodingcodingcodingcoding 위와 같은 html코드처럼 코드를 전부 적어놓은 페이지를 정적 페이지라고 한다. 그럼 동적 페이지는 무엇일까? 저번 시간에 작성했던 app.js 코드에 동적인 파일을 추가해보자 var express = require('express');var app = express(); app.use(express.static(public)); app.get('/',function(req,res){res.send('welcome to the main page ')}); app.get('/login', function (req, res) { res.send('Login Plea..
[node js]Express로 정적 페이지 로드하기 이전에 만들었던 app.js라는 파일을 보면 var express = require('express');var app = express(); app.get('/',function(req,res){res.send('hello main page')}); app.get('/login',function(req,res){res.send('login please')}); app.listen(3000,function(){console.log('Connected 3000 port');}); 이다. 여기서 정적 페이지를 로드하기 위해서는 한줄의 코드만 추가하면 된다. 바로바로바로 app.use(express.static('public')); 이다. 여기서 초록색의 public은 폴더 이름이다.현재 프로젝트에 public..
[node js]Express로 웹 페이지 생성 EXPRESS로 웹 페이지를 생성해보자. [app.js]라는 파일을 생성한다. var express = require('express') //를 통해 express모듈을 호출해 변수 express에 저장한다. var app = express(); //express 모듈이 저장된 변수 exrpess는 함수이다. 따라서 app에 express()라는 함수를 실행해서//return한 값을 저장하는데 이것이 express를 사용하기 위한 기본 규칙이다. 규칙은 정해진 것이 아니라 모듈마다 다르기 때문에각각 홈페이지나 사용법을 보고 쓰면 된다. 이제 페이지를 만들어보자. 사용자가 접속 할 떄는 get방식과 post방식이 있는데, 보통 url을 치고 들어오는 것은 get 방식이다. app.get('/',functi..
[node js] Express 설치 앞 포스팅에서 모듈은 nodejs가 기본적으로 제공하는 것, 자바스크립트 기본 제공 모듈 , 그리고 다른 사람이 만든 모듈이 있다고 했다. express는 다른사람이 만든 모듈로 다운받기 전에 해당 폴더에 들어가 npm init이라는 명령을 주어 지금 프로젝트를 하나의 패키지로 먼저 만들어야 한다. 이후 express를 설치하면 된다. EXPRESS 홈페이지 바로가기 에 들어가면 cmd 창에서 npm install express --save 라는 명령을 통해 express를 설치 할 수 있다.
[node js] 서버 만들기 코드 분석 const http = require('http'); const hostname = '127.0.0.1';const port = 3000; const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello World\n');}); server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`);}); 이 코드는 node js의 대표 코드라고 할 수 있는 서버를 만들 수 있는 코드이다. 코드를 하나씩 분석해보자. var http ..
[node js] 동기와 비동기 프로그래밍 동기와 비동기의 차이점을 먼저 알아보자. 만약 해야 할 일이 일이 다음과 같이 있다고 하자 - 청소,빨래,설거지동기방식은 청소를 하고 빨래를 하고 설거지를 하는 것이다. 그렇다면 비동기는 청소 업체에 전화해서 청소를 맡기고,청소 업체가 처리하는 동안 빨래 업체에 빨래를 맡기고, 설거지 업체에 설거지를 맡기는 식이다. 이렇게 비동기 방식은 효율적이면서 빠른 일처리를 할 수 있게 한다. 완전 일치하지 않지만 대략 이렇다고 한다. node js는 비동기 방식이 기본이다. node js 에서 DOCS에 들어가면 동기방식 function과 비동기 방식 function이 있다. 먼저 동기방식 function을 알아보자. 아래 코드를 살펴보면 //sync - 동기 fs = require('fs'); // filesy..
[node js] 콜백 함수 cmd에서 node sample.js라고 하면 sample.js 안에 있는 javascript명령 하나하나 실행 만약 cmd에서 node라고만 치면 바로 적어서 실행 가능 > a = [3,1,2]; console.log(a) > [3,2,1] >a = [3,1,2]; a.sort();console.log(a)>[1,2,3] 만약 반대로 정렬하려면 ? >a = [3,1,2]; function b(v1,v2){return v2-v1};a.sort(b);console.log(a) //b라는 함수에의해서 sort의 기본적 동작 방법이 바뀐다..>[3.2.1] >a = [3,1,2]; function b(v1,v2){console.log('c',v1,v2)};a.sort(b);console.log(a);c 3 1..
[node js] 다른 사람이 만든 npm 사용해보기 유명한 모듈이 있는데 underscore.js가 있다. npm install underscore 를 하기 전에 // 현재 사용하고 있는 디렉토리를 하나의 패키지로 만들어야 한다. : npm init 라는 명령어로 입력하면 패키지로 만들기 위한 여러가지 질문들이 나온다. 질문을 답하고 나면 package.json 이라는 파일이 생성된다. 이제 언더스코어를 다운받는다. 그러면 해당 디렉토리 안에 node_module이라는 폴더가 생기고, 밑에 underscroe 폴더가 생성된다. 근데 extroneous라는 메세지가 뜨는데 불완전 하다는 뜻이다. npm install underscore --save 라고 저장하면 package.js 파일에도 dependencies안에표시된다. 있는 것은 package.jso..

티스토리툴바