안녕하세요 백자까입니다. 이번에 반복문에 대해서 알아보도록 하겠습니다. 

반복문(for, while, for in등)을 사용하면 동일한 일을 반복적으로 처리해야 되는 경우 한 번에 처리할 수 있습니다. 

반복문을 사용하면 코드양도 줄일 수 있고 개발의 효율성도 높일 수 있습니다. 반복문을 사용하면 코드양도 줄일 수 있고 개발의 효율성도 높일 수 있습니다. 또한 소스 수정 시 한번만 수정하면 모두 반영이 되기 때문에 작업이 수월합니다. 반복문에는 여러 종류가 있는데, 그 중 for문을 가장 많이 사용합니다. 그 외 while문과 for in문도 많이 사용합니다.


for문

for문의 기본 사용법은 다음과 같습니다. for()문을 선언하고 ()안에 시작값을 설정합니다. 그리고 비교 연산자를 통해서 마지막 값을 설정하고 증가 또는 감소연산자가 사용하고 세미콜론(;)으로 구분합니다. 

for(시작; 끝; 증가 or 감소) {

}


for문을 사용하여 변수 i의 값을 2씩 5번 증가 시켜 document에 출력하기

for()문을 선언하고 시작값으로 변수i에 숫자2를 할당하고 변수i가 10보다 작거나 같은동안 i를 2씩 증가시키며 출력합니다.

1
2
3
for(var i=2; i <=10; i+=2) {
    document.write(i);
}
cs


while문

while문은 for문과 비슷한 역할을 하지만 마지막 값만 설정해 준다는 점에서 차이가 있습니다. 

while(조건) {

}


while문을 사용하여 변수 i의 값을 1씩 증가시켜 document에 출력하기

시작 값인 변수i를 while문 밖에서 선언합니다.

while문을 선언해주고 i가 5보다 작으면 반복하도록 조건을 설정합니다. {}안의 내용을 조건이 마족하면 계속 반복하게 되는데, 증가 연산자를 while안에 넣어 while문이 무한 루프(loop)에 빠지지 않도록 주의합니다.

1
2
3
4
5
var i = 0;
while(i<5) {
    document.write(i);
    i++;
}
cs


for in문

for in문은 객체를 순회하면서 객체의 프로퍼티명을 넘겨줍니다. 또한 뒤에 나올 배열의 원소를 순회하면서 배열의 index를 넘겨주기도 합니다. for in문의 기본 사용법은 다음과 같습니다. 

for(변수 in 객체 또는 배열) {

}

for문을 선언하고 객체 또는 배열을 순회하면서 넘어오는 객체의 프로퍼티나 배열의 원소를 담을 변수를 넣은 후 in 다음에 객체 또는 배열이 들어갑니다. 그 결과 객체의 프로퍼티 갯수나 배열의 원소 갯수만큼 {}안을 반복합니다.


baby라는 객체를 생성하여 프로퍼티 3개를 추가합니다. 스리고 7번 라인에서 baby객체르르 순회하면서 변수 property에 추가시켜준 프로퍼티의 이름이 순차적으로 넘어옵니다. 8번 라인에서 넘어온 프로퍼티명의 객체 baby에 해당 프로퍼티의 값을 읽어와 document에 출력합니다.

실행하면 "2살", "남자", "9월22일"이란 값이 순차적으로 출력됩니다.

1
2
3
4
5
6
7
8
9
var baby = {
    age:"2살",
    sex:"남자",
    birthday:"9월22일"
}
 
for(var propety in baby) {
    document.write(baby[property]);
}
cs


break로 반복문에서 빠져 나오기

break는 반복문이 반복적으로 구문을 수행하는 과정에서 어떠한 조건에 만족했을 때 반복을 멈추고 반복문을 빠져 나올 수 있게 만듭니다.

반복문으로 0부터 9까지 i값을 증가시키는 중에 i가 5값이 되었을 때 break문이 실행되어 반복문을 벗어나게 됩니다.

1
2
3
for(var i=0; i<10; i++) {
    if(i==5) break;
}
cs


참고서적 : JavaScript+jQuery입문+실전북

저작자표시 비영리 변경금지

'Language > Javascript' 카테고리의 다른 글

HTML 태그 설명  (0) 2018.03.12
7.javascript배열  (0) 2017.09.22
5.javascript객체  (0) 2017.09.22
3.javascript 조건문  (0) 2017.09.19
2.Javascript 연산자  (0) 2017.09.19

이번에는 객체에 대해서 알아보도록 하겠습니다.

 

객체(Object) 변수와 함수가 모여 만든 하나의 꾸러미라고 볼 수 있습니다. 빈 객체를 생성하여 변수와 함수를 그 안에 추가하여 만들 수 있는데

이때 선언된 변수를 '프로퍼티'라고 부르고, 함수는 '메서드'라고 합니다. 객체 자체는 프로퍼티와 메서드를 갖는 역할만 합니다.

그럼 코드로 확인해보도록 하겠습니다.

 

객체를 생성해보도록 하겠습니다.

객체는 New Object() 또는 {} 등 두 가지의 방법으로 생성할 수 있습니다.

1
2
var obj = new Object();
var obj = {};
 cs

 

객체를 생성했으면 프로퍼티를 추가하고 읽어보도록 하겠습니다.

먼저 baby라는 객체를 생성합니다. 그리고 2~4번 라인에서 age, sex, birthday라는 프로퍼티를 추가하고 값을 할당합니다.

6번 라인에서는 baby객체의 age값인 '2살'을 읽어 출력하고 7번 라인에서는 "남자"라는 값을 읽어 출력합니다.

1
2
3
4
5
6
7
var baby = {};
baby.age = "2살";
baby.sex = "남자";
baby.birthday = "9월22일";
 
document.write(baby.age);
document.write(baby.sex);

cs


이번에는 객체 생성시 동시에 프로퍼티를 추가하는 방법에 대해서 알아보겠습니다.
baby객체를 생성하면서 {}안에 프로퍼티를 넣어주면되는데요 콤마(,)로 나누고, 세미콜론(;)을 사용해서 값을 넣어줍니다.
1
2
3
4
5
6
7
8
var baby = {
                age:"2살",
                sex:"남자",
                birthday:"9월22일"
            };
 
document.write(baby.age);
document.write(baby.sex);
cs



객체에 메서드를 추가하는 방법도 프로퍼티를 생성하는 방법과 유사합니다.

baby객체에 getAge() 라는 메서드를 추가합니다. 값으로 함수(function)선언과 동시에 할당합니다.

10번 라인에서 baby객체에 getAge()메서드를 호출하여 5번라인에 등록한 메서드가 호출되어 함수가 동작하게 됩니다.

여기서 주의깊게 살펴볼 사항은 this입니다. 여기서 this는 baby객체가 됩니다. 메서드를 호출하면 this를 통해서 메서드를 가지고 있는 객체가 넘어 옵니다. 

그렇기 때문에 this에서 age프로퍼티의 값을 읽어서 반환(return)해준 것입니다. 그럼 반환된 값은 10번라인에 age변수에 할당되고 11번 라인에서 변수 age를 documnet에 출력해주면 "2살"이라는 값이 출력됩니다.

이러한 개발 패턴은 jQuery나 자바스크립트 개발에서 자주 사용되는 형태이기 때문에 반드시 숙지해야 합니다.

메서드는 미리 선언한 함수를 참조할 수도 있습니다.

1
2
3
4
5
6
7
8
9
10
11
var baby = {
                age:"2살",
                sex:"남자",
                birthday:"9월22일"
                getAge:function(){
                    return this.age;
                }
            };
 
var age = baby.getAge();
document.write(age);
cs


이번에는 미리 선언되어 있는 함수를 메서드로 넣는 방법에 대해서 살펴보겠습니다.

8번 라인에 getAge()함수를 미리 선언하고, 5번 라인에서 객체에 함수명을 차조하여 메소드로 추가시켰습니다. 

12~13번 라인의 수행결과는 위와 동일합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
var baby = {
                age:"2살",
                sex:"남자",
                birthday:"9월22일"
                getAge:getAge
            };
 
function getAge(){
    return this.age;
}
 
var age = baby.getAge();
document.write(age);
cs


참고서적 : JavaScript+jQuery입문+실전북

저작자표시 비영리 변경금지

'Language > Javascript' 카테고리의 다른 글

7.javascript배열  (0) 2017.09.22
6.javascript 반복문  (0) 2017.09.22
3.javascript 조건문  (0) 2017.09.19
2.Javascript 연산자  (0) 2017.09.19
1.Javascript변수  (0) 2017.08.15

가만히 눈감고 이불에 몸을 담고 따사로운 햇살의 눈초리를 무시하며,


오늘은 자체휴강이다!


-이희야-

저작자표시 비영리 변경금지

▷HTTP 서버 생성

HTTP 서버를 생성할 때는 각 HTTP 요청을 어떻게 처리해야 하는지 정의한 콜백 역할을 하는 익명함수가 createServer에 이자로 전달됩니다. 콜백 함수는 request 와 response 두개의 인자를 받습니다. 콜백이 실행될 때 HTTP 서버는 두개의 인자로 사용될 객체를 생성해 전달하게 되는데 이를 이용해 세부적인 요청사항에 대한 처리와 응답을 보내게 됩니다. server.js 파일에 아래의 코드를 추가해 줍니다.

 server.js

1
2
3
4
5
6
7
8
9
10
var server = http.createServer(function(request, response) {
  var filePath = false;
  if(request.url == '/') {
    filePath = 'public/index.html';
  } else {
    filePath = 'public' + request.url;
  }
  var absPath = './' + filePath;
  serveStatic(response, cache, absPath);
});
 cs

 

▷HTTP 서버 시작

지금까지 HTTP 서버를 생성하는 코드를 작성했지만, 아직 서버를 구동하는데 필요한 로직을 추가하지 않았습니다. TCP/IP 3000번 포트로 요청받는 서버를 구동할 수 있게 로직을 추가해보겠습니다. 3000번 포트는 임의로 선택한 숫자입니다. 1024보다 큰 숫자중에서 사용되지 않는 번호를 선택해 포트로 사용할 수 있습니다.  server.js 파일에 다음의 코드를 추가해보겠습니다.

 server.js

1
2
3
server.listen(3000, function() {
  console.log("Server listening on port 3000.");
});
 cs

 

이제 어플리케이션이 어떻게 동작하는지 보기 위해 다음 명령을 명령행 프롬프트(CMD)에 입력해 서버를 구동해보겠습니다.

먼저 CMD창을 열어줍니다. (윈도우키 + R 을 눌러 실행창에 cmd라고 입력 or 윈도우키를 누르고 명령 프롬프트 찾기) 

그리고 프로젝트 폴더로 이동한뒤에 node server.js 라고 입력해줍니다.

 

그럼 서버가 시작되었을텐데요 이 상태에서 웹 브라우저에서 'http://127.0.0.1:3000 ' or 'http://localhost:3000' 에 방문하면 404 오류 함수가 실행돼 "Error 404 : resource not found" 라는 메시지가 출력될 것입니다. 정적 파일을 처리하는 로직을 추가했지만, 아직 정적 파일을 추가하지 않았기 때문입니다. 실행 중인 서버는 Ctrl-C 를 눌러 중단할 수 있습니다.

 

 

▷HTML, CSS 파일 추가

이제 가장 먼저 추가할 정적 파일은 기본 HTML파일 입니다. public 디렉토리에 index.html 파일을 생성하고 코드를 작성하겠습니다.

HTML은 CSS 파일을 가져오고 어플리케이션 내용을 표시할 HTML div 요소를 만들며, 여러 개의 클라이언트 측 자바스크립트 파일을 불러옵니다.

불러온 자바스크립트 파일은 클라이언트 측의 Socket.IO 기능, 쉬운 DOM 조작을 위한 jQuery, 어플리케이션에 적합한 채팅 기능을 제공하기 위한 파일입니다.

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chat</title>
    <link rel='stylesheet' href="stylesheets/style.css"></link>
  </head>
  <body>
    <div id='content'>
      <div id='room'></div>
      <div id="room-list"></div>
      <div id="messages"></div>
 
      <form action="" id="send-form">
        <input type="text" id="send-message"/>
        <input type="submit" id="send-button" value="Send"/>
        <div id="help">
          Chat commands:
          <ul>
            <li>Change nickname:<code>/nick [username]</code></li>
            <li>Join/create room:<code>join [room name]</code></li>
          </ul>
        </div>
      </form>
    </div>
    <script src="/socket.io/socket.io.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="/javascripts/caht.js" type="text/javascript'/"></script>
    <script src="javascripts/chat_ui.js" type="text/javascript"></script>
  </body>
</html>
 cs

 

10행 : 현재 채팅방 이름을 표시할 div

11행 : 참여할 수 있는 채팅방 목록을 표시할 div

12행 : 채팅 메시지를 표시할 div

15행 : 사용자가 명령어와 메시지를 입력하라 Form 구성요소

 

 

다음으로 추가할 파일은 어플리케이션의 CSS 스타일을 정의한 파일입니다. public/stylesheets 디렉토리에 style.css 파일을 만들어줍니다.

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
  color: #00B7FF;
}
#content {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}
#room {
  background-color: #ddd;
  margin-bottom: 1em;
}
#messages {
  width: 690px;
  height: 300px;
  overflow: auto;
  background-color: #eee;
  margin-bottom: 1em;
  margin-right: 10px;
}
 
 cs

 

10행 : 어플리케이션은 800픽셀 너비에 가로로 중앙 정렬

15행 : 현재 참여하고 있는 채팅방 이름을 표시하는 영역의 CSS

19행 : 메시지 표시 영역은 가로 690픽셀, 세로 300픽셀 크기로 지정

 

HTML과 CSS작성이 완료되면 어플리케이션을 실행해 웹 브라우저에서 확인해봅니다. 

 

 

어플리케이션의 기능은 아직 구현되지 않았지만, 정적 파일이 서비스되고 기본적인 외형을 갖췄습니다. 이제 서버측에서 채팅 메시지를 전달하는 부분을 만들어 보겠습니다.

 

▷Socket.IO를 이용한 채팅 관련 메시지 처리방법

1부에서 말했던 필수기능 3가지 중 첫번재 항목인 정적 파일 서비스를 완료했습니다. 이제 두번째 항목인 브라우저와 서버 간 통신을 시작할 차례입니다.

최신 브라우저는 웹소켓을 사용해 브라우저와 서버 사이의 통신을 처리합니다.

Socket.IO는 노드와 클라이언트 측 자바스크립트 모두에서 사용하는 웹소켓과 그 외 다른 전송 방식을 위한 추상화된 계층을 제공합니다. Socket.IO는 웹소켓이 브라우저에 구현돼 있지 않더라도 같은 API를 사용할 수 있도록 적절한 전송 방식으로 대체합니다.

▶ Socket.IO가 제공하는 가상 채널을 이용하면 접속한 모든 사용자에게 메시지를 뿌리지 않고 특정 채널을 구독하는 사용자에게만 메시지를 전송할 수 있습니다. 이 기능을 이용하면 채팅 어플리케이션의 채팅방 기능을 매우 간단하게 구현할 수 있습니다.

그리고 Socket.IO는 이벤트 발생자의 유용함을 보여주는 좋은 예입니다. 이벤트 발생자는 원래 편리하게 비동기 롲기을 관리하기 위한 디자인 패턴입니다.

 

 

▷Socket.IO 서버 구성

다음 두 줄을 server.js 에 추가해줍니다. 첫번째 줄은 서버 측에서 Socket.IO 기반으로 대화 기능에 대한 로직을 제공하는 커스텀 모듈을 가져옵니다.

다음 줄은 Socket.IO 서버 기능을 시작합니다. 이미 정의한 HTTP 서버를 이용하므로 같은 TCP/IP 포트를 공유할 수 있습니다.

server.js

1
2
var chatServer = require('./lib/chat_server');
chatServer.listen(server);
 cs

이제 lib디렉토리에 chat_server.js 파일을 생성하고 다음 변수 선언문을 가장 앞에 추가합니다. 이 선언문은 Socket.IO의 사용과 상태를 정의하는 여러 변수의 초기화와 관련된 내용입니다.

chat_server.js

1
2
3
4
5
6
7
var socketio = rerquire('socket.io');
var io;
var guestNumber = 1;
var nickNames = {};
var namesUsed = [];
var currentRoom = {};
 
 cs

 

▷연결 맺기 로직

이제 로직을 추가해 서버 함수인 listen을 정의합니다. 이 함수는 server.js에서 호출하며 Socket.IO 서버를 시작하고 Socket.IO가 콘솔에 출력하는 로깅을 제한하며 유입되는 연결을 처리하는 방법을 담고있습니다. 연결 처리 로직은 수많은 헬퍼 함수를 호출하며 chat_server.js에 바로 추가할 수 있습니다.

chat_server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
exports.listen = function(server) {
  io = socketio.listen(server);
  io.set('log level', 1);
 
  io.sockets.on('connection', function(socket){
    guestNumber = assignGuestName(socket, guestNumber, nickNames, namesUsed);
    joinRoom(socket, 'Lobby');
 
    handleMessageBroadcasting(socket, nickNames);
    handleNameChangeAttempts(socket, nickNames, namesUsed);
    handleRoomJoining(socket);
 
    socket.on('rooms', function() {
      socket.emit('rooms', io.sockets.manager.rooms);
    });
    handleClientDisconnection(socket, nickNames, namesUsed);
  });
};
 cs

 

2행 : 기존의 HTTP 서버에 피기백방식으로 SocketIO서버를 시작

5행 : 각 연결을 어떻게 처리해야 할지 정의

6행 : 사용자가 접속하면 손님 닉네임을 부여

9~11행 : 사용자의 메시지, 닉네임 변경, 채팅방 생성이나 변경에 관한 처리를 수행

13행 : 요청 시 이미 생성된 채팅방 목록을 사용자에게 제공

16행 : 사용자가 접속을 끊었을 때 관련 데이터 정리를 위한 로직을 정의

 

연결 처리에 관한 내용을 완료했다면 이제 어플리케이션의 요구 사항을 처리할 수 있는 각 헬퍼 함수를 추가해야 합니다.


출처 : Node.js 인 액션 

(3부에서 계속)

 

 

 


저작자표시 비영리 변경금지

'Language > Node' 카테고리의 다른 글

2.다중 채팅방 만들기  (0) 2017.08.29
1.Node(노드)란? (2부)  (0) 2017.08.29
1.Node(노드)란?  (0) 2017.08.28

안녕하세요 백자까입니다. 이번에는 함수에 대해서 알아보겠습니다.


함수(Function)란 미리 만들어진 구문을 불러서 사용 또는 재사용하는 형태입니다. 주로 반복적으로 사용디는 구문을 미리 작성해 두고 활용할 때 호출하여 사용함으로써 반복적인 작업을 줄여 주므로 개발효율과 코드의 양을 줄여 주는데 많은 도움이 됩니다.


함수 선언하기

함수는 다음 소스코드와 같은 방법으로 선언합니다.

1
2
3
function send() {
    alert('전송');
}
cs

function은 함수를 사용하겠다는 선언부를 의미합니다. send는 함수의 이름입니다. 변수의 이름과 같은 의미로 생각할 수 있습니다. 함수의 이름 뒤에는 ()가 들어가고 옆에 {}가 오며 그 안에 함수가 호출되었을 때 수행되는 구문이 들어갑니다.



함수 호출하기

1
2
3
4
5
function send() {
    alert('전송');
}
 
send();
cs

1번 라인에서 send라는 함수가 미리 선언되어 있고, 5번 라인에서 send() 함수를 호출합니다. 함수가 호출되면 선언되어진 함수의 안의 구문인 2번 라인이 실행되어 alert 창에 "전송"이라는 메시지가 나타납니다. 


인자값과 매개변수


함수를 선언하면서 ()안에 매개변수를 설정할 수 있습니다. 

선언된 함수의 ()안에 인자값을 넘겨 매개변수를 통해서 함수안의 구문에 값을 전달할 수 있습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
var a = 10;
var a = 20;
 
var sum = add(a,b);
document.write(sum);
 
function add(v1, v2) {
    var sum = v1 + v2;
    return sum;
}
 
document.write(sum);
cs

4번 라인에서 add(a, b) 에서 a와 b가 '인자값'이라 하고 호출한 함수에 인자값을 넘겨줍니다. 그러면 7번 라인에 호출당한 add함수의 매개변수 v1, v2에 인자값이 들어가게 됩니다. v1에는 a의 값이 v2에는 b의 값이 들어갑니다. 8번라인에서 값을 더한 후 출력합니다.


반환값(return)

함수가 호출되면 함수를 호출한 구문으로 값을 반대로 보내줄 수 있습니다. 그 역할을 해주는 것이 반환(return)됩니다. 반환값을 이용하면 프로그램을 유연하게 개발할 수 있습니다.  반환값에 대해 조금 더 자세히 알아보겠습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
var a = 10;
var a = 20;
 
var sum = add(a,b);
document.write(sum);
 
function add(v1, v2) {
    var sum = v1 + v2;
    return sum;
}
 
document.write(sum);
cs

같은 코드인데 9번 라인에서 return을 해주게 되면 add(a,b)에서 함수를 호출했었던 곳으로 return 값이 들어가게 됩니다. 그래서 4번라인에 sum변수에 return값이 들어가게 됩니다.



참고서적 : JavaScript+jQuery입문+실전북

저작자표시 비영리 변경금지

안녕하세요 백자까입니다. 이번에는 javascript의 조건문에 대해서 알아보겠습니다.


조건문은 특정한 조건을 만족하는지 여부를 계산하여 조건을 만족한다면 프로그램 구문을 수행되도록 설정할 수 있습니다. 또한 여러 조건을 설정한 후 그 중 만족하는 조건을 찾을 수 있으며 모든 조건을 만족하지 않을 때 구문이 수행되도록 설정할 수 있습니다.



if문

1
2
3
4
5
6
var a = 10;
var b = 20;
 
if(a < b) {
    documnet.write("a가 b보다 작습니다.");
}
cs


if()를 호출하고 a가 b보다 작다면 이라는 조건을 만족한다면 {}안에 구문이 호출됩니다. a는 b보다 작기 때문에 그 아래 조건을 만족하여 document에 "a가 b보다 작습니다."라고 출력됩니다.



if, else문

1
2
3
4
5
6
7
8
var a = 10;
var b = 20;
 
if(a > b) {
    document.write("a가 b보다 큽니다.");
} else {
    document.write("a가 b보다 작습니다.");
}
cs


if()를 호출하고 a가 b보다 작다는 조건을 만족한다면 {} 안에 구문이 호출되고 그렇지 않으면 else의 {}가 호출됩니다. a는 b보다 작기 때문에 if의 조건을 만족하지 않아 else구문이 호출되어 document에 "a가 b보다 작습니다."라는 메시지가 출력됩니다.



if, else if, else문

1
2
3
4
5
6
7
8
9
10
11
var a = 10;
var b = 20;
var c = 30;
 
if(a > b) {
    document.write("a가 b보다 큽니다.");
} else if( b > c) {
    document.write("b가 c보다 큽니다.");
} else {
    document.write("모든 조건을 만족하지 않습니다.");
}

cs


5, 7라인의 조건은 만족하지 않기 때문에 조건문안의 구문이 실행되지 않습니다. 9, 11번은 조건을 만족하지만 9번의 조건문 안의 구문만 호출됩니다. 그 이유는 조건은 위부터 순차적으로 조건을 비교하며 만족하는 조건이 있으며 더 이상 비교하지 않기 때문에 위의 예를 실행 하면 10번 라인의 구문만 실행됩니다.



조금 특별한 조건문 ?


조건문을 조금 더 간결하게 사용할 수 있습니다. else if없이 if와 else만 사용한다면 조금 더 간결하게 작성할 수 있습니다.

1
(a > b) ? document.write("a는 b보다 큽니다.") : document.write("a는 b보다 작습니다.");
cs
위의 예는 if와 else문을 좀 더 간결하게 작성합니다. '?' 뒤가 조건을 만족할 때 이고, ':' 뒤가 조건을 만족하지 않을 때입니다.



참고서적 : JavaScript+jQuery입문+실전북


저작자표시 비영리 변경금지

'Language > Javascript' 카테고리의 다른 글

6.javascript 반복문  (0) 2017.09.22
5.javascript객체  (0) 2017.09.22
2.Javascript 연산자  (0) 2017.09.19
1.Javascript변수  (0) 2017.08.15
Window 객체  (0) 2017.07.20



이번에는 연산자에 대해서 알아보겠습니다.


연산자는 값을 계산하거나 증가 또는 감소 그리고 문자열을 이어 붙이는 등 다양한 연산을 처리합니다.

다음은 연산자들을 정리한 표 입니다.


종류 

설명 

예시 

+,-,*,/ 

숫자 연산 

사칙연산을 수행합니다.

 +

문자열 연산 

문자열을 이어줍니다. 

%

숫자 연산 

나머지 값을 구합니다. 

++ 

숫자 연산 

1씩 증가합니다.

--

숫자 연산 

1씩 감소합니다. 

 +=,-=,*=,/=,%=

숫자 연산 

연사을 수행하고 값을 대입합니다.


그럼 연산자를 사용한 예를 들어 보겠습니다.

1.사칙 연산

1
2
3
4
5
6
var a = 10;
var b = 20;
var c = 30;
var d = 40;
var e = 50;
var result = a + b - c*d/e;
cs

결과 값 : 10 + 20 - 30*40/50 = 6



2.문자열 연산

1
2
3
var a = "baekjakka";
var b = "tistory";
var result = a + b;
cs

결과 값 : baekjakkatistory



3. 문자열 + 숫자 연산

1
2
3
4
var a = "baekjakka";
var b = 1;
var c = "tistory";
var result = a + b + c;
cs

결과 값 : baekjakka1tistory 

문자열과 숫자를 +연산하면 문자열끼리 연산하는 겻과 같이 연산합니다.


비교 연산자

조건문의 조건을 만들기 위해서는 비교연산자를 사용해야 합니다.


연산자

사용 예 

설명 

 ==

 a == b 

 a와 b가 같다면 

 != 

 a != b 

 a와 b가 다르면 

 && 

 a == b && a == c 

 a와 b가 같고 a 와 c가 같다면, 두 조건이 모두 참이어야 합니다. 

 ||

 a == b || a == c 

 a와 b가 같거나 a 와 c가 같다면, 두 조건 중 하나라도 만족해야 합니다. 

 >

 a > b 

 a 가 b보다 크다면 

 < 

 a < b 

 a가 b보다 작으면 

 >= 

 a >= b  

 a가 b보다 크거나 같으면 

 <=  

 a <= b 

 a가 b보다 작거나 같으면 



** 논리곱과 논리합 연산 부가 설명 **

논리곱(&&) 와 논리합(||)


&& 논리곱은 좌측 표현식의 평가가 false일 경우 우측 표현식은 실행되지 않는다.

|| 논리합은 좌측 표현식의 평가가 true일 경우 우측 표현식은 실행되지 않는다.


실습 예제로 살펴 보겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
&& 와 ||을 이용한 조건문
 
var arr;
 
//arr이 undefined일 경우 비어있는 배열 객체를 대입합니다.
arr=arr || [];
 
arr[0] = "홍길동";
arr[1] = "홍길서";
arr[2] = "홍길남";
arr[3] = "홍길북";
 
//arr이 배열 객체가 존재할 경우 arr 배열의 길이를 출력합니다.
arr && document.writeln("arr.length: " + arr.length + "<br/>");
cs







참고서적 : JavaScript+jQuery입문+실전북

코드작성 : https://colorscripter.com/

저작자표시 비영리 변경금지

'Language > Javascript' 카테고리의 다른 글

5.javascript객체  (0) 2017.09.22
3.javascript 조건문  (0) 2017.09.19
1.Javascript변수  (0) 2017.08.15
Window 객체  (0) 2017.07.20
오브젝트모델(Object Model)  (0) 2017.07.20

이번에는 Git에 대한 사용법을 먼저 익히고 싶은 사람들을 위한 글입니다. 그래서 명령어를 중심으로 글을 작성하겠습니다.

우선 Git을 먼저 다운받도록 하겠습니다. Git(https://git-scm.com/) Git 홈페이지를 들어가서 Git을 다운 받으시면 됩니다.

 

 

그럼 Git이 설치 되었다는 가정하에 진행하도록 하겠습니다.

 

Git을 이용해서 GitHub와 연동되어 사용을 하고 싶은 분들이 많을 것이라고 생각됩니다.

그럼 우선 GitHub에 가서 로그인을 하고 난 다음에 Start a project 버튼을 눌러주도록 합니다.

 

 

그러면 아래와 같은 페이지가 나타나게 됩니다.

 

그러면 Repository name에 저장할 이름을 설정해 주고 Description 에 이 저장소에 대한 설명을 작성해주고 생성해 주면 됩니다.

그리고 나면 아래와 같은 페이지가 나오는데 첫번째 칸(빨간 네모칸)에 쓰여있는 명령어대로 실행을 해주시면 됩니다.

아니면 이미 저장소가 있다면 두번째 칸(파란 네모칸)에 쓰여있는 명령어를 이용하면 됩니다.

일일이 쓰기 귀찮으면 옆에 복사버튼이 있으니 누르고 CMD창에서 붙여넣기만 해주면 됩니다.

 

GitHub에서의 준비는 이것으로 끝입니다. 저장소만 만들어 주면 됩니다. 간단하죠?

그럼 이제 D드라이브로 이동해서 작업할 폴더하나를 만들겠습니다. GitHub와 연동해보도록 하겠습니다.

먼저 CMD창을 열어 명령어를 순서대로 작성을 하면됩니다.

 

 

1
2
3
4
5
6
7
8
9
d:                //D드라이브로 이동합니다
mkdir Git_test    //mkdir은 폴더를 생성하는 명령어 입니다. Git_test 라는 이름의 폴더를 생성합니다.
cd Git_test        //cd는 디렉토리를 이동할 수 있는 명령어입니다. Git_test 폴더로 이동합니다.
echo "#Git_test" >> README.md    //내용이 #Git_test인 README.md라는 파일을 생성합니다.
git init        //현재 폴더에 git저장소를 생성합니다.
git config user.name "YOUR NAME" //사용자명을 등록하는데 꼭 작성해줘야합니다.
git config user.email "YOUR EMAIL" //사용자의 이메일을 등록하는데 꼭 작성해줘야합니다.
git add README.md  //git이 README.md라는 파일을 추적하도록 스테이징 영역에 올려줍니다. 쉽게말하면 git은 add된 것만 관심을 가집니다.
git commit -m "first commit" // -m 옵셥을 이용해서 커밋할 때 변경사항에 대한 메시지를 작성할 수 있습니다.
 cs

 

 

remote add origin " 깃허브 저장소 " 를 적어주면 되는데요 빨간 네모칸에 쓰여있는 내용그대로인데 길어서 쓰기 귀찮다면 위쪽에 https|SSH 로 되어있는 이곳의 오른쪽에 복사할수 있는 버튼이 있습니다. 그 버튼 눌러다 붙여넣기를 해도 됩니다.

 

1
2
git remote add origin https://github.com/SeungHyunBaek/Git_test.git    //원격저장소를 추가합니다. github에 저장할 저장소입니다.

                                                                      //origin은 추가하는 원격저장소의 이름입니다.

git push -u origin master    //작업한 내용들을 github에 저장합니다.

cs

    

그러면 아래처럼 github에 commit했던 부분까지 원격저장소에 저장된 것을 볼 수 있습니다. 간단하죠?

 

 

초간단 Git 사용방법이었습니다.

저작자표시 비영리 변경금지

'Git' 카테고리의 다른 글

Commit 메세지 작성 : Fix 편  (0) 2020.02.18
1.Git 시작하기  (0) 2017.08.30

C# 맛보기입니다.

 

먼저 C#의 특징에 대해서 알아보겠습니다.

○ 형식 안정적인 객체 지향 언어입니다.

○ 기존 프로그래밍언어의 생산성을 개선하여 성능이 굉장히 높습니다.

○ 현재 윈도, 맥, 리눅스, 안드로이드, 아이폰 등의 다양한 운영체제나 플랫폼에서 동작합니다.

○ 윈도에서 동작하는 닷넷 플랫폼과 대부분의 운영체제에서 동작하는 모노 플랫폼에서 작동하는 프로그램을 만들 수 있습니다.

 

라이브러리 vs 프레임 워크

라이브러리

코드를 쉽게 사용할 수 있게 미리 만들어준 코드

프로그램 소프트웨어를 만들 때 사용하는 클래스 또는 서부루틴의 집합

 

프레임 워크

제어 역전이 있는 대규모의 라이브러리

  ※제어 역전 : 원래 개발자가 제어하던 코드를 프레임워크가 제어하는 것

C#으로 할 수 있는 일 GUI개발, 웹 개발(ASP.NET 프레임워크, ASP.NET MVC), 게임 개발, IoT개발 등 여러 작업을 할 수 있습니다. 그런데 과연 C#이란 프로그래밍의 문법만을 배워서 개발을 할 수 있을까요? 아닙니다. 개발 도구도 필요하고 실행환경(Platform)도 필요합니다. 최소한 이 3가지가 있어야 개발을 할 수 있습니다. 그럼 개발도구에는 어떤 기능이 있을까요? 편집기능, 디버거, 컴파일/링크, 배포 등의 기능이 있습니다. 저는 개발도구로 Visual Studio2017 을 사용하며 실습을 진행하도록 하겠습니다.

그럼, Visual Studio를 사용할 때 솔루션과 프로젝트가 만들어지는데요. 솔루션과 프로젝트의 차이가 무엇이 있을까요? 프로젝트는 하나의 실행파일(exe)를 만들어내기 위해서 필요한 여러 개의 소스파일과 헤더 파일등을 하나로 묶어 놓는 것을 말합니다. 솔루션은

왜 솔루션이 있을까요? 작업을 할 때 파일이 이곳 저곳 여러군데에 나눠져 있다면 작업을 하는데 있어서 많은 불편함이 생깁니다. 그래서 관련있는 작업을 하는 프로젝트들을 모아서 하나의 솔루션에 담아두면 작업을 하는데 불편함을 줄여줄 수 있기 때문입니다. 그럼 가장 먼저 Hello World를 출력하는 방법에 대해서 알아보도록 하겠습니다.

 

Hello World 출력하기

program.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Hello
{
    class Program
    {
        static void Main(string[] args)
        {
            //한줄 주석입니다.
            Console.WriteLine("Hello World");

            /* 여

               러

               줄

               주

               석

            */

        }
    }
}

cs

 

콘솔창에 Hello World를 출력해보는 간단한 에제입니다. 콘솔창에 출력을 할 때에는 Console.Write()또는 Console.WriteLine()을 이용해서 출력할 수 있는데요 Console.WriteLine의 경우에는 출력이 끝난후 줄바꿈이 자동으로 실행되는 차이가 있습니다.

 

주석

주석의 방법은 두가지가 있습니다.

1. 한줄 주석 : //

2. 여러줄 주석 : /* 주석할 내용 */
1번의 경우 //뒤에 쓰여진 내용들이 주석처리 되고, 2번의 경우 /* 이 선언되고  */을 만나기 전까지의 내용들 모두를 주석처리해줍니다.

 

연산할 때 주의사항

정수끼리의 연산을 할 때 생각해야 할 부분이 있습니다. 예를 들어 10/4를 계산하면 2.5 의 값이 나오는데요 C#에서 정수끼리의 연산은 정수만 나올 수 있습니다. 그래서 2.5가아닌 2라는 정수라는 결과값을 가지게 됩니다. 그럼 정리해 보겠습니다.

정수+정수 = 정수, 정수 - 정수 = 정수, 정수*정수 = 정수, 정수/정수 = 정수 모두 결과값이 정수가 나옵니다

 

 

저작자표시 비영리 변경금지

'Language > C#' 카테고리의 다른 글

1.C# 변수선언  (0) 2017.08.07

안녕하세요 백자까입니다. 오늘은 네트워크에 대해서 알아보겠습니다.

 

○ 네트워크 공부를 시작했지만 어디서 무엇부터 공부해야 좋을지 모르겠다는 사람

○ 과거에 네트워크 책을 많이 읽었지만 내용이 어려워서 포기한 사람

○ 스위치, 라우터, 보안, PI 전화에서 무선 LAN까지 넓게 공부하고 싶은 사람

○ 네트워크의 각 기술이 아닌, 네트워크 전체와 실무에서의 상황을 알고 싶은 사람

○ 깊이 있는 기술까지는 아니더라도 대화가 가능한 수준 정도는 되었으면 하는 사람 

 

이런 분들이라면 이 네트워크 카테고리의 글이 공부하는데 도움이 될 것입니다.

 

● 누가 네트워크를 사용하는가?

먼저 네트워크는 누가 사용하는가에 따라 크게 두가지로 나눌 수 있습니다. 바로 일반사용자와 법인용입니다.

일반 사용자 : 회사나 학교에서 집으로 돌아와 PC를 켜고 네트워크에 '개인'으로 접속하면 일반 사용자가 되는 것입니다.

법인용 : 반대로 회사에 출근하여 네트워크에 접속하면 '회사원'으로써 사용하면 법인용 네트워크 사용자가 됩니다.

 

● 가정용과 기업용의 차이

가정용과 기업용의 차이는 크게 두가지가 있습니다.

 1. 사용자가 사용하는 어플리케이션의 종류 (어플리케이션 : 전자 우편 소프트 or 웹 브라우저와 같은 사용자가 이용가능한 소프트웨어)

 2. 네트워크의 물리적 규모

가정용 네트워크 : 네트워크 인프라 부분에 ADSL이나 광회선 등의 액세스 회선을 이용해 인터넷을 사용하는 경우가 대부분입니다.

기업용 네트워크 : 네트워크 인프라 부분에 인터넷 회선만이 아닌 사내 전용 내선 전화망이나 IP 네트워크망이 존재합니다. 또한, 인터넷 접속 이외에 거점 간 통신도 추가 됩니다.

 

가정용과 기업용 네트워크에는 규모 면에서 커다란 차이가 있습니다. 이에 따라 네트워크 기기의 사양도 달라지는데, 기업용 기기에는 그만큼 고성능과 신뢰성이 요구됩니다. 기기의 가격도 고가이며 보안 측면의 고려가 필요해지는 등의 도입 작업도 복잡합니다. 법인으로서의 사회성도 요구 됩니다.

※사회성 : 기업 활동을 통한 공헌, 예을 들어 네트워크를 구축하는 회사라면 '사람과 사람을 안심하고 연결할 수 있는 네트워크 구축' '편리하고 풍족한 사회를 만든다.' 라는 것을 나타낸다. 수익을 확보하고 사업을 계속 이어가는 것만이 기업의 목적은 아닌 것이다.

 

● 서비스 프로바이더 네트워크

기업용 네트워크로는 별개의 네트워크가 존재합니다. 그것은 서비스 프로바이더용 네트워크와 기업 전용 네트워크입니다. 기업전용 네트워크는 엔터프라이즈 네트워크라고도 합니다.

서비스 프로바이더용 네트워크 : 통신 사업자나 ISP의 네트워크를 말합니다. 이것은 통신 캐리어 사업자용 네트워크라고도 합니다. 대표적인 통신 캐리어 사업자로 KT,SK텔레콤,LG유플러스가 있습니다.

그리고 네트워크 형태에서 보면 WAN의 부분이 됩니다. WAN 회선을 법인 기업용으로 제공하기 위해 네트워크를 구성합니다. 구축할 네트워크는 규모가 크고 들어가는 네트워크 기기도 고도의 성능과 높은 신뢰성이 요구됩니다.

※WAN : LAN과 LAN을 연결하는 대규모 네트워크.

 

기업 전용 네트워크 : 위에서 설명한 그대로지만, 이것을 세분화하면 업종별로 나눌 수 있습니다. 예를들어 금융업이라면 보안을 고려한 기밀성이 높은 네트워크 구성이 대전제로서 구축될 것이고, 제조업라면 CAD 데이터 등 대용량 데이터를 송신하는 경우가 있을 것입니다. 그러므로 대용량 처리를 위한 회선 확보나 음성과 데이터의 우선순위를 정하는 등을 고려한 네트워크를 만드는 것이 중요한 열쇠가 됩니다.

이와 같이 업종에 따라 네트워크에 대한 접근 방법이 조금씩 다릅니다 그러나 어떤 형태의 네트워크라도 사용되는 기기의 기술 기반은 같습니다. 즉, 네트워크의 최대 사명인 사용자로부터 만들어진 데이터를 상대방에게 전달이라는 기본은 어떤 형태의 네트워크에서든 동일합니다. 그러므로 서두르지 않고 네트워크의 기초를 정확히 아는 것부터 시작하도록 해야 합니다.

 

SUMMARY

· 네트워크는 이용하는 입장에 따라 일반 이용자와 법인용으로 나누어집니다.

· 네트워크는 이용하는 장소에 따라 가정용과 기업용으로 나누어집니다.

· 가정용과 기업용의 차이는 다음의 두 가지가 있습니다.

   1.사용자가 이용하는 어플리케이션의 종류

   2.네트워크의 물리적인 규모

· 서비스 프로바이더용 네트워크는 기업에 통신회선 서비스(WAN)를 제공하기 위해 통신 사업자나 ISP에 의해 구축됩니다.

 

● LAN/WAN/MAN

네트워크는 범위에 따라 크게 세가지로 나뉩니다.

○ LAN(Local Area Network) - 회사 건물 내부나 가정 내부의 비교적 작은 범위의 컴퓨터 네트워크

○ WAN(Wide Area Network) - 멀리 떨어진 LAN 끼리 이어 주기 위한 것. 기업의 본사와 지사를 연결하는 네트워크처럼 광범위하고 규모가 큰 네트워크를 말합니다. KT나 SKT 등의 통신 사업자망(광역 이더넷, IP-VPN등)을 사용하여 구축된 네트워

○ MAN(Metropolitan Area Network)은 LAN과 WAN의 중간 범위에 위치합니다. LAN의 범위를 지역 레벨까지 확대하여 특정 지역을 담당하는 것.

 

● 인트라넷(사내 인트라넷)

인트라넷(Intranet)이란, 일반적으로 독립적인 사내 네트워크를 말합니다. 인트라넷의 '인트라'는 '내부'라는 의미입니다. 기업 내 인터넷에 도입하고 정보 공유나 업무 지원에 활용하는 것을 목적으로 구축된 시스템입니다. 인트라넷은 현장에서 사내 인트라넷이라고 불립니다. 사내 인트라넷의 범위는 기업 내부가 되고 인터넷은 포함하지 않습니다. 그럼 사내 인트라넷에서는 구체적으로 무엇을 하는가? 일반적으로 기밀성이 높은 업무 어플리케이션이 사내 인트라넷으로 구성되어 운용 가능해집니다.

 

SUMMARY

· 네트워크는 범위에 따라 LAN,WAN,MAN 세가지로 나뉜다.

· LAN은 회사 건물 안이나 가정 등의 비교적 작은 범위의 컴퓨터 네트워크다.

· WAN은 멀리 떨어진 LAN간을 서로 이어주는 통신 사업자망을 이용하여 구축된 네트워크다.

·인트라넷은 인터넷 기술을 이용하여 구축된 기업 내부의 독립적인 네트워크다.

 

이번에는 네트워크 기초에 대해 쉽게 이해할 수 있게 네트워크 전체 구성을 파악해보겠습니다. '나무를 보고 숲은 보지 못한다.' 라는 말이 있듯이 네트워크는 여러 기술들의 집합체이기 때문에 기술 일부분만을 배운다고 해서 이해할 수는 없습니다. 그러므로 네트워크의 전체 구성을 이해한 후 각각의 기술들을 공부하는 것이 중요합니다.

 

● 네트워크의 전체 구성

네트워크 구성은 대규모 거점, 중규모 거점, 소규모 거점으로 구분합됩니다.

대규모 거점은 회사에 비유할 경우, 본사와 자사와 지사를 생각하면 될 것입니다. 대략 다섯 영역 이상으로 한 영역에 200명(또는 200포트) 이상의 규모를 생각하면 됩니다. 일반적으로 서울이나 대전, 부산에 본사와 지사를 구성하는 회사가 많습니다. 이런 경우 일하는 사람이 많아지면 당연히 네트워크 사용자도 많아집니다. 또한, 네트워크 기기의 수도 많아지고 네트워크 구성도 복잡해 집니다.

※포트 : PC나 기기를 네트워크에 접속하기 위한 접속 통로입니다.

 

중규모 거점은 회사로 말하자면 지점 규모입니다. 대략 다섯 영역까지로 한 영역에 100~200명(또는 100~200포트)의 규모를 생각하면 됩니다. 대구, 울산, 세종, 광주에 대입하면 적절합니다.

 

소규모 거점은 대략 세 영역 이내로, 하나의 영역에 50~100명(또는 50~100포트)인 규모를 생각하면 됩니다. 네트워크를 사용하는 사용자도 대규모 거점이나 중규모 거점에 비교해서 적은 편이고, 네트워크 구성도 단순해집니다. 지금까지 설명한 도시 이외의 장소를 생각하면 됩니다.

 

그러나 지금까지 이야기한 내용은 단편적인 예입니다. 예를 들어, 본사 기능과 공장이 목포 지구에 있다면 광주를 중심으로 네트워크가 구성될 수 있습니다. 또는 서울과 대전이 중규모 거점이 되거나 목포 지역에 제한된 네트워크가 될 수도 있습니다. 

 

저작자표시 비영리 변경금지

+ Recent posts

티스토리툴바