본문 바로가기

생글이네 이야기

 (119)
[javascript 언어공부] 문자 이번에는 문자에 대해서 알아보자. alert("coding everybody") 라고 입력하고 실행하면경고창에 coding everybody가 출력된다. 문자를 감싸줄 때 큰따옴표, 작은따옴표 어떤 것을 사용해도 좋지만,큰따옴표로 시작해서 작은따옴표로 닫거나 하면 문법오류이다. 따옴표를 읽으면 '이제부터 문자야' 라는 소리이며, 컴퓨터는 다음 따옴표가 나올때까지 문자열이라고 생각한다. 만약 alert('안녕하세요' 생글이네 입니다.') 라고 입력하면자바스크립트는 안녕하세요 까지만 문자로 인식하고 나머지는 문자로 인식하지 않기 때문에 에러가 난다따라서 역슬레시를 사용해야 정상적으로 작동한다. alert('안녕하세요\' 생글이네 입니다.') 역슬래시 바로 뒤 문자는 정보로서 인식한다는 약속이 되어있다. 역슬..
[javascript 언어공부] 숫자 이번에는 숫자와 문자에 대해서 알아보자. 자바스크립트를 배우는데 있어서 기본적으로 알아야 할 것이 '데이터'이다.데이터는 정보이고, 그 정보는 프로그래밍에서그 정보가 무엇이냐에 따라 타입(숫자타입, 문자타입 등등)이 존재한다. 앞서 봤던 html 코드 안에 script를 작성해보자. 이후 이후 실행해보면 경고창에 1이 뜬다. alert()안에 있는 1이라는 숫자를 정수라 한다. 정수란 -3, -2, -1, 0, 1, 2, 3 실수는 -2.0, 0, 2.0 등 실수는 소수점이 있으며 0과 1.0사이만 봐도 0.222, 0.55555 등이 있다. 1.1 이라고 적어주면 실수가 되고, 1이라 적으면 정수가 되며, 자바스크립트에서는 포괄정으로 number라고 부른다. 만약 숫자를 더하고 싶으면alert(1+1)..
[javascript 언어공부] 실행방법과 실습환경 이번에는 실습환경, 작성한 코드 실행 방법, 가벼운 개발도구에 대해서 알아보자. 앞서 이야기했듯이 자바스크립트는 브라우저에서만 사용되는 것이 아닌 서버, 구글 앱스스크립트 등 기타 환경에서 사용되며그 환경을 프로그래밍적으로 제어하기 위해 사용되는 언어이다. 언어를 배우기 위해서 하나의 실습환경을 갖기 위해서자바스크립트가 생긴 시초인 웹브라우저에서 실습할 것이다. 또 필요한 것이, javascript 코드를 실행할 수 있는 에디터가 필요하다.윈도우면 메모장, 맥은 텍스트에디터 등 텍스트를 편집할 수 있는 에디터면 어느것이든 상관 없다. 우선 메모장을 켜고 다음 코드를 입력해보자. 빨간색으로 표시된 부분만 자바스크립트 코드이며, 이 외의 내용은 html이다.기본적으로 브라우저 위에서 동작하는 자바스크립트는 ..
[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 ..

티스토리툴바