코딩유치원

안녕하세요, 왕초보 코린이를 위한 코딩유치원에 오신 것을 환영합니다.

오늘은 HTML, CSS, JavaScript 등의 웹 프로그래밍 공부를 위한 개발환경을 구축해보는 시간을 갖겠습니다.

가장 먼저 해주셔야 할 것은 VS code의 설치입니다.

아직 설치가 되지 않으신분들께서는 아래의 글을 참고하셔서 설치를 완료한 후에 아래의 내용을 따라 와주세요!

2021.03.05 - [파이썬 기초/개발환경 구축] - [코딩유치원] 파이썬 개발환경 구축 3편 (VS code 설치 및 초기설정)

1. 프로젝트 폴더 만들기

가장 처음할 것은 HTML이나 기타 파일들을 전부 넣어두는 하나의 프로젝트용 폴더를 만드는 것입니다.

위치는 원하시는 어느 곳이든 상관없습니다. 이름은 제가 테스트해보니 한글로 만드셔도 작동하지만 웬만하면 영어로 해주세요.

보통 외국 프로그램들은 한글이랑 안 친해서 오류가 생기는 경우가 많거든요.

그리고 폴더를 생성하지 않고 그냥 바탕화면이나 기존 폴더를 사용해도 되지만 추천드리지 않아요.

나중에 파일을 찾을 때도 힘들고, 프로젝트를 하면서도 직관성이 떨어지니까요!

폴더를 만드셨으면 메뉴 텝에서 파일-열기를 선택하셔서 생성하신 폴더를 열어주세요.

2. HTML 파일 만들기

그러면 위의 그림처럼 화면이 나올텐데요. 좌측 상단을 보시면 +표시가 있는 아이콘이 2개 보이실 거에요.

왼쪽이 파일을 생성하는 아이콘이고, 오른쪽이 폴더를 생성하는 아이콘입니다. (물론 우리가 방금 만든 프로젝트 폴더 안에요)

html 문서(.html)를 작성하기 위해서는 파일 생성 아이콘을 클릭 후, 파일 이름.html으로 이름을 지어줍니다.

저는 first_web.html로 파일을 생성했습니다. 그리고는 아래와 같이 아주 기초적인 html 문서를 만들어 보았습니다.

워낙 간단한데다가 한 번 직접 입력해보시라고 소스코드는 별도로 올리지 않겠습니다.

자 여기까지 따라 하셨으면 html 파일을 한 번 실행시켜 볼 차례인데요.

해당 폴더에 직접 들어가셔서 파일을 더블 클릭 하셔도 되지만, 매번 그러기엔 번거롭잖아요?!

그래서 VS code에서 아래의 확장(Extension)을 설치해줍니다.

3. Open in Browser Extension 설치

Open in Browser는 VS Code에서 즉시 html 문서를 기본 웹 브라우저로 실행시킬 수 있도록 해주는 익스텐션입니다.

이 익스텐션으로 인해 우리는 html을 작성한 후, html 문서가 있는 파일에 들어가서 직접 클릭해서 열어주는 귀찮음을 겪지 않아도 됩니다.

설치하셨다면 사용법은 매우 간단합니다. 아래의 단축키 하나만 기억하세요.

Alt + B (Mac OS는 option + B)

: 기본 웹 브라우저로 html 실행

저는 보통 구글링이나 파이썬 웹 크롤링을 하기위해서 크롬을 기본 웹브라우저로 사용하고 있습니다.

여러분의 자유이지만 크롬을 사용하시는 것을 권장드립니다.

VS code HTML 실행 브라우저 설정 방법 (선택 사항)

아마도 별도로 크롬을 기본 웹 브라우저로 설정해두셨다면 크롬으로 html이 실행될 것입니다.

하지만 나는 다른 웹 브라우저를 기본으로 두고, VS code에서만 Chrome을 사용하시고 싶다면 아래와 같이 설정해주세요.

다시 아까의 익스텐션 탭으로 가서 open in browser를 우클릭 혹은 아래 사진의 톱늬바퀴 아이콘을 클릭해줍니다.

그리고 나오는 메뉴들 중, 확장 설정을 눌러주시면 아래와 같은 화면이 나타날 것입니다.

아래의 붉은색 사각형에는 아무 것도 쓰여있지 않을 것입니다. 여기에 Chrome을 입력해주시면 됩니다.

4. VS code HTML 자동완성

방금 전 HTML 문서를 직접 한타한타 작성하시면서 불편하다고 느끼지 않으셨나요?

저는 파이썬 코딩할 때부터 자동완성 기능의 편안함에 익숙해져 엄청 어색하더라구요.

그래서 찾아보았더니 다행히도 HTML 코딩 시에도 자동완성 기능을 사용할 수가 있습니다!

먼저 우측 하단의 Django HTML이라고 쓰여진 부분을 클릭해줍니다.

그러면 아래와 같이 여러 언어들이 보일텐데, HTML을 선택해주시면 끝입니다! 간단하죠?

꿀팁. ! + Tab

! + Tab 을 입력하시면 아래와 같이 HTML의 가장 기본 구조가 자동완성된답니다.

이것 외에도 태그 자동완성 기능도 있습니다. 참고로 <태그></태그> 이런식으로 생긴 것을 태그라고 합니다.

오늘 내용은 여기까지입니다. 따라 오시느라 고생 많으셨습니다~!

안녕하세요, 왕초보 코린이를 위한 코딩유치원에 오신 것을 환영합니다.

오늘 부터는 항상 다뤄오던 파이썬을 잠시 미뤄두고, 자바스크립트를 빠르게 공부해보려합니다. 빠른 시간 안에 최대한 핵심만 짚고 넘어가는 식으로 정리하였으며, 왕초보를 위한 Javascript 관련 글은 다음에 여유가 될 때 꼭 쓰도록 하겠습니다.

공부는 TCP스쿨의 JavaScript 글을 참고하여 진행하였으니, 세부적인 내용을 알고 싶으시면 TCP 스쿨을 참고해주세요.

2021.03.21 - [코딩 공부 사이트] - [코딩유치원] 파이썬 독학으로 공부할 때 유용한 사이트 5가지

<자바스크립트 관련 글>

2021.04.21 - [웹 개발/프론트앤드] - Javascript 문법 요약정리 (1편. 자료형과 기초 문법)

2021.04.22 - [웹 개발/프론트앤드] - Javascript 문법 요약 정리 (2편. 연산자)

2021.04.23 - [웹 개발/프론트앤드] - Javascript 문법 요약 정리 (3편. 제어문_if/switch/while/for 문)

배열의 기초

모든 프로그래밍 언어에는 배열 형식의 자료형이 있으며, 자바스크립트에도 역시 배열의 개념이 존재합니다.

배열(array)이란 이름과 인덱스로 참조되는 정렬된 값의 집합입니다. 

배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 합니다.

*참고 (그냥 넘어가도 되는 부분)

자바스크립트에서는 배열이라는 타입(type)을 별도로 제공하지 않습니다.

자바스크립트 배열은 객체(object) 타입이 되며, typeof 연산자를 사용하면 'object'를 반환합니다.

배열의 특징

자바스크립트 배열은 아래와 같은 특징을 가집니다.

1. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있습니다.

2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있습니다.

3. 자바스크립트에서 배열은 Array 객체로 다뤄집니다.

배열의 생성

배열의 생성방법은 3가지가 있습니다. 저는 개인적으로 파이썬의 리스트와 똑닮은 첫번째 방법이 마음에 드네요.

하지만 용도에 따라 다른 방법도 쓰이는 경우가 있으니 알아두면 좋을 것 같습니다.

// 1.배열 리터럴을 이용하는 방법
var arr = [배열요소1, 배열요소2,...];          

// 2.Array 객체의 생성자를 이용하는 방법
var arr = Array(배열요소1, 배열요소2,...);     

// 3.new 연산자를 이용한 Array 객체 생성 방법
var arr = new Array(배열요소1, 배열요소2,...); 

배열의 참조

배열의 각 요소를 참조하고 싶을 때는 배열이름[인덱스]와 같이 사용합니다. 첫번째 요소부터 [0],[1],[2] 순으로 참조 가능합니다.

빠른 이해를 위해 코드로 보겠습니다.

var arr = [2, "JavaScript"];

document.write(arr[0] + "<br>");  // 2를 출력
document.write(arr[1] + "<br>");  // JavaScript를 출력

요소 추가와 삭제

배열을 생성한 후에 요소를 추가하거나 삭제할 수 있습니다. 아래 코드를 보면서 알아보겠습니다.

var arr = [2, "JavaScript"];
// arr.length로 배열의 길이는 2인 것을 확인 가능

//요소 추가
arr[3] = "Hi"    // arr은 [2, "JavaScript", "Hi"]로 3개의 요소를 가지게 됨

//요소 삭제
delete arr[0];  // arr은 [,"JavaScript", "Hi"]인 상태. 완전히 제거가 아닌 빈공간을 만드는 느낌
                // arr.length로 길이를 확인해보면 3이 나옴.

위의 delete 예제 코드에서 처럼, 인덱스에 대응하는 배열 요소가 없는 부분을 배열의 홀(hole)이라고 합니다.

자바스크립트에서는 이러한 배열의 홀(hole)을 undefined 값을 가지는 요소처럼 취급합니다.

따라서 위의 예제에서처럼 배열의 홀을 참조하게 되면 undefined 값을 반환하게 됩니다.

arr[10] = "바로10으로 배열 만들어버리기!";    //0~9 인덱스의 요소는 모두 홀(hole) 상태!

document.write(arr + "<br>"); // ,,,,,,,,,,바로10으로 배열 만들어버리기!

document.write(arr[0]);       // undefined

for문과 배열

for문으로 배열의 모든 요소에 차례대로 접근하고 싶을 때는 아래와 같이 하시면 됩니다.

arr = [1,2,3,4,5]

for (var i in arr) {

document.write(arr[i] + " ");

}


<결과>
>> 1 2 3 4 5

배열의 응용

다차원 배열

지금까지 배웠던 배열은 1차원 배열입니다. 2차원 배열과 3차원 배열은 for문을 이용해 1차원 배열들을 중첩함으로써 만들 수 있습니다.

var arr = new Array(3);      // 3개의 요소를 가지는 배열을 생성함.

for (var row = 0; row < 3; row++) {

    arr[row] = new Array(4); // 각각의 요소마다 또다시 4개의 요소를 가지는 배열을 생성함.

    for (var column = 0; column < 4; column++) {

        arr[row][column] = "[" + row + "," + column + "]"; // 각각의 배열 요소를 생성함.

        document.write(arr[row][column] + " ");            // 각 배열 요소에 접근함.

    }

}

연관 배열

지금껏 배운 숫자로 된 인덱스 대신에 문자열로 된 키(key)를 사용하는 배열을 연관 배열(associative array)이라고 합니다. 마치 파이썬의 딕셔너리와 같다고 생각하시면 됩니다. 다만 연관 배열은 엄밀히 말하면 배열(Array 클래스)이 아닌 기본 객체로 Array 관련 함수를 사용할 수 가 없다고 합니다. 쉽게 말해서 야매(?) 배열이라고 생각하시면 됩니다.

var arr = [];     // 비어있는 배열 생성

arr["Key"] = "Value";

arr["아무 문자열"] = 3;

최근에는 새로운 데이터 구조인 Map 객체를 별도로 제공하고 있다고 하는데 일단 넘어가도록 하겠습니다.

이번 시간에는 자바스크립트의 배열에 대해 간단히 알아보았습니다. 다음 시간에는 자바스크립트의 함수는 어떻게 사용하는지 공부해보겠습니다.

안녕하세요, 왕초보 코린이를 위한 코딩유치원에 오신 것을 환영합니다.

오늘 부터는 항상 다뤄오던 파이썬을 잠시 미뤄두고, 자바스크립트를 빠르게 공부해보려합니다. 빠른 시간 안에 최대한 핵심만 짚고 넘어가는 식으로 정리하였으며, 왕초보를 위한 Javascript 관련 글은 다음에 여유가 될 때 꼭 쓰도록 하겠습니다.

공부는 TCP스쿨의 JavaScript 글을 참고하여 진행하였으니, 세부적인 내용을 알고 싶으시면 TCP 스쿨을 참고해주세요.

2021.03.21 - [코딩 공부 사이트] - [코딩유치원] 파이썬 독학으로 공부할 때 유용한 사이트 5가지

<자바스크립트 관련 글>

2021.04.21 - [웹 개발/프론트앤드] - Javascript 문법 요약정리 (1편. 자료형과 기초 문법)

2021.04.22 - [웹 개발/프론트앤드] - Javascript 문법 요약 정리 (2편. 연산자)

2021.04.23 - [웹 개발/프론트앤드] - Javascript 문법 요약 정리 (3편. 제어문_if/switch/while/for 문)

프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문을 제어문이라고 합니다. 이러한 제어문에는 조건문, 반복문 등이 포함됩니다. 이러한 제어문은 모든 프로그래밍 언어에 존재하는 기본 개념이며, 크게 if문, for문, while문 3가지로 나뉩니다. 언어에 따라서 switch문은 있을 수도 있고 없을 수도 있습니다. ( C / Javascript는 있고, Python은 없음 ) 

조건문

if문

if문은 상황에 따라서 3가지로 나뉩니다.

1) if문

: 표현식(조건)이 참일 경우 코드 실행

// if문 문법

if (표현식) {

    표현식의 결과가 참일 때 실행하고자 하는 실행문;
    
}

2) if/else문

: 표현식(조건)이 참일 경우 A 코드 실행, 그 외 경우는 B 코드 실행

if (표현식) {

    표현식의 결과가 참일 때 실행하고자 하는 실행문;

} else {

    표현식의 결과가 거짓일 때 실행하고자 하는 실행문;

}

3) if/else if/else문

: 표현식 a가이 참일 경우 A 코드 실행, 표현식 b가 참일 경우 B 코드 실행, 그 외 경우는 C 코드 실행

  (else if는 여러번 사용 가능)

if (표현식1) {

    표현식1의 결과가 참일 때 실행하고자 하는 실행문;

} else if (표현식2) {

    표현식2의 결과가 참일 때 실행하고자 하는 실행문;

} else {

    표현식1의 결과도 거짓이고, 표현식2의 결과도 거짓일 때 실행하고자 하는 실행문;

}

switch문

switch문은 if / else문과 마찬가지로 주어진 조건 값에 따라 프로그램이 다른 명령을 수행하도록 하는 조건문입니다. case별로 분류해두어서 가독성이 좋다는 장점이 있습니다.

switch (조건 값) {

    case 값1:

        조건 값이 값1일 때 실행하고자 하는 실행문;

        break;

    case 값2:

        조건 값이 값2일 때 실행하고자 하는 실행문;

        break;

    ...

    default:

        조건 값이 어떠한 case 절에도 해당하지 않을 때 실행하고자 하는 실행문;

        break;

}

default 절은 어떤 case 절에도 해당하지 않을 때 실행됩니다. 이 구문은 반드시 존재해야 하는 것은 아니며, 필요할 때만 선언할 수 있습니다.

각 case 절 및 default 절은 반드시 break 키워드를 포함하고 있어야 합니다. break 키워드는 조건 값에 해당하는 case 절이나 default 절이 실행된 뒤에 전체 switch 문을 빠져나가게 해줍니다.

반복문

반복문이란 프로그램 내에서 똑같은 명령을 반복하여 수행하도록 제어하는 실행문입니다. 크게 while문과 for문으로 나뉩니다.

프로그램이 처리하는 대부분의 코드는 반복적인 형태가 많으므로, 가장 많이 사용되는 실행문 중 하나입니다.

while문

1) while문

while문은 특정 조건을 만족할 때 까지, 계속해서 주어진 실행문을 반복 실행합니다. 만약 조건을 만족 못하면 무한히 while문을 빠져나갈 수 없답니다. 그래서 항상 while문 안에 조건식을 변경해주는 코드를 넣어주는 방식으로 프로그램을 만들어줍니다.

while (표현식) {

    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;

}

예를 들어 아래와 같이 i++를 넣어줘서 조건식에 있는 i가 1씩 커지다가, i < 10 이 거짓이 되어 while문을 종료하게 되는 방식입니다.

var i = 1;

while (i < 10) { // 변수 i가 10보다 작을 때만 while 문을 반복함.

    document.write(i + "<br>");  // i를 웹페이지에 쓰고 줄 바꾸는 구문.

    i++; // 반복할 때마다 변수 i를 1씩 증가시켜 변수 i가 10보다 커지면 반복문을 종료함.

}

2) do / while문

do / while문은 가장 처음 do { } 안의 실행문을 1회 실행한 후, while문을 들어가는 반복문입니다. 그 외에는 while문과 같습니다.

do {

    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;

} while (표현식);

for 문

for문은 초기값, 조건식, 증감식을 갖는 반복문입니다. for 문을 구성하는 초기값, 조건식, 증감식은 각각 생략될 수 있습니다.

또한, 쉼표 연산자(,)를 사용하면 여러 개의 초기식이나 증감식을 동시에 사용할 수도 있습니다.

for (초기값; 조건식; 증감식) {

    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;

}

위에서 while문으로 작성했던 코드를 for문으로 똑같이 구현하면 아래와 같습니다.

for (var i = 1; i < 10; i++) {

    document.write(i + "<br>");

}

for문에는 for/in문과 for/of문이 더 있지만 일단 아직 배우지 않은 객체와 프로퍼티 개념을 알아야하기에 생략하도록 하겠습니다.

루프의 제어를 위한 label의 개념과 break, continue

일반적으로 조건식의 검사를 통해 루프로 진입하면, 다음 조건식을 검사하기 전까지 루프 안에 있는 모든 실행문을 실행합니다.

하지만 continue 문과 break 문은 이러한 일반적인 루프의 흐름을 사용자가 직접 제어할 수 있게 해줍니다.

label 문을 사용하면 continue 문과 break 문의 동작이 프로그램의 흐름을 특정 영역으로 이동시킬 수 있습니다.

continue

continue는 루프 내에서 사용하여 해당 루프의 나머지 부분을 건너뛰고, 바로 다음 조건식의 판단으로 넘어가게 합니다.

보통 반복문 내에서 특정 조건에 대한 처리를 제외하고자 할 때 자주 사용됩니다.

예를 들어, 1부터 10까지 숫자 중에 홀 수만 출력하고 싶을 때 continue를 이렇게 사용할 수 있습니다.

for (var i = 1; i <= 10; i++) {

    if (i % 2 == 0) // 2의 배수는 continue로 아래의 코드를 실행하지 않고 해당 for문의 다음 단계 실행

        continue;

    document.write(i + " ");  // i를 출력하고 한 칸 띄우기

}


<결과>
1 3 5 7 9

break

break는 루프 내에서 사용하여 해당 반복문을 즉시 종료시키고 다음 코드로 넘어갑니다.

즉, 루프 내에서 조건식의 판단 결과에 상관없이 반복문을 완전히 빠져나가고 싶을 때 사용합니다.

빠른 이해를 위해 방금 봤던 continue의 예제를 조금만 바꿔 보았습니다.

i가 3인 경우, 즉시 break로 for문을 종료하고 다음 코드를 실행합니다. 여기서는 다음 코드가 없으므로 프로그램을 종료합니다.

for (var i = 1; i <= 10; i++) {

    if (i == 3) // i가 3이면 for문 종료

        break;

    document.write(i + " ");  // i를 출력하고 한 칸 띄우기

}


<결과>
1 2

label

제가 배웠던 Python 언어와 Javascript의 차이점은 이 label입니다.

label은 위에서 배웠던 '제어문에 이름표를 붙여주는 것'이라고 생각하시면 됩니다.

label:

특정 영역 제어문 (주로 for문 / while문)

이렇게 이름을 붙여서 어디에 쓰는걸까요? 바로 위에서 배운 continue와 break의 뒤에 붙여서 사용합니다. 

복잡한 설명보다는 코드를 보면서 설명드리는게 좋을것 같아요.

아래는 평범한 구구단 출력 코드입니다. 2단 for문을 이용해서 2단부터 9단까지 모두 출력하죠.

이 코드를 label과 break를 사용해서 5단까지만 출력해보는 코드로 바꾸어 보겠습니다.

for (var i = 2; i <= 9; i++) {

    for (var j = 1; j <= 9; j++) {
    
        document.write(i + " * " + j + " = " + (i*j) + "<br>");
    }
}

가장 첫 for문에 gugudan이라는 label을 붙여주고, 안의 for문에는 dan이라는 label을 붙여줬습니다.

그리고 break 뒤에 label을 붙여줌으로써 i > 5일 때 gugudan이라는 이름표가 붙은 for문을 종료하는 코드입니다.

gugudan:

for (var i = 2; i <= 9; i++) {

    dan:

    for (var j = 1; j <= 9; j++) {

        if (i > 5)

            break gugudan;

        document.write(i + " * " + j + " = " + (i*j) + "<br>");

    }

}

여기까지 자바스크립트의 제어문을 알아보았습니다. 다음시간에는 배열(Array)에 대해서 알아보겠습니다.

안녕하세요, 왕초보 코린이를 위한 코딩유치원에 오신 것을 환영합니다.

오늘 부터는 항상 다뤄오던 파이썬을 잠시 미뤄두고, 자바스크립트를 빠르게 공부해보려합니다. 빠른 시간 안에 최대한 핵심만 짚고 넘어가는 식으로 정리하였으며, 왕초보를 위한 Javascript 관련 글은 다음에 여유가 될 때 꼭 쓰도록 하겠습니다.

공부는 TCP스쿨의 JavaScript 글을 참고하여 진행하였으니, 세부적인 내용을 알고 싶으시면 TCP 스쿨을 참고해주세요.

2021.03.21 - [코딩 공부 사이트] - [코딩유치원] 파이썬 독학으로 공부할 때 유용한 사이트 5가지

<자바스크립트 관련 글>

2021.04.21 - [웹 개발/프론트앤드] - Javascript 문법 요약정리 (1편. 자료형과 기초 문법)

2021.04.22 - [웹 개발/프론트앤드] - Javascript 문법 요약 정리 (2편. 연산자)

2021.04.23 - [웹 개발/프론트앤드] - Javascript 문법 요약 정리 (3편. 제어문_if/switch/while/for 문)

주요 연산자

산술 연산자(arithmetic operator)

가장 기본적인 연산자입니다.

대입 연산자(assignment operator)

대입 연산자는 변수에 값을 대입할 때 사용하는 연산자며, 앞에서 배운 산술 연산자와 함께 사용하면 아래와 같은 기능을 합니다.

var a = 10, b = 10

a -= 5; // a = a - 5와 같음

b =- 5; // b = -5와 같음

증감 연산자(increment and decrement operator)

증감 연산자는 변수의 값을 1씩 증가 혹은 감소시킬 때 사용합니다.

증감 연산자는 변수의 왼쪽에 있는지, 오른쪽에 있는지에 따라서 그 기능이 달라집니다.

아래의 코드가 모두 실행된 후, 각 변수들에 어떤 값이 들어가있는지 보면서 증감 연산자를 이해해봅시다.

var a = 5, b = 5
var c,d

c = ++a + 2
d = 2 + b++

<최종적으로 각 변수에 들어가 있는 값>
a = 6
b = 6
c = 8
d = 7

3번째 줄의 코드를 보시면 a를 2와 더해주기 전에 1 증가 시켜서 6으로 만든 후, 계산을 진행하여 c에는 8이 대입됩니다.

반면에, 4번째 줄의 코드를 보시면 먼저 계산을 해서 2+5의 값인 7을 d에 대입한 후, b의 값을 1증가 시켜서 6으로 만들어줍니다.

비교 연산자(comparison operator)

비교 연산자는 두 값의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환합니다.

문자열의 경우엔 크기 비교를 알파벳 순서(a가 b보다 작음)로 한다고 하네요. 그리고 두 값의 자료형이 다르면 무조건 False를 돌려줍니다.

논리 연산자(logical operator)

논리 연산자는 주어진 논리식을 판단하여, 참(true)과 거짓(false)을 반환합니다.

참고로 OR 연산자인 | 는 엔터키 위쪽에 위치합니다. Shift + \(역슬래쉬)로 입력가능한 점 참고하세요.

아래의 표를 참고하셔서 각 연산자들에 따라 리턴되는 값이 무엇인지 보시면 이해가 쉬우실겁니다.

비트 연산자(bitwise operator)

비트 연산자는 논리 연산자와 비슷하지만, 비트(bit) 단위로 논리 연산을 수행합니다. 또한, 비트 단위로 전체 비트를 왼쪽이나 오른쪽으로 이동시킬 때도 사용합니다.

1Byte는 8bit를 뜻하며, 아래와 같이 8개의 0/1로 구성되어 있는 자료형을 말합니다. 여기서 말하는 비트 연산자는 비트끼리 논리 연산을 수행하는 것을 말합니다. 이 0/1로 표현하는 방식을 이진법이라고 하는데, 오른쪽 끝부터 2의 0승, 2의 1승, 2의 2승으로 올라갑니다.

예를 들어 아래의 이진수는 2의 3승인 8과 2의 2승인 4가 더해져서 10진수로 12를 뜻합니다.

기타 연산자

삼항 연산자

물음표(?) 앞의 표현식에 따라 결괏값이 참이면 반환값1을 반환하고, 결괏값이 거짓이면 반환값2를 반환합니다.

// 삼항 연산자 문법
표현식 ? 반환값1 : 반환값2

//예시
var x = 3, y = 5;

var result = (x > y) ? x : y   // x가 더 크면 x를, 그렇지 않으면 y를 반환함.

삼항 연산자는 짧은 if / else 문 대신 사용할 수 있으며, 코드를 간결하게 만들어 준다고 합니다.

왠지 코딩테스트에 잘 사용하면 좋을 것 같은 느낌이 드네요.

쉼표 연산자

쉼표 연산자를 for 문에서 사용하면, 루프마다 여러 변수를 동시에 갱신할 수 있습니다.

예제 코드에 아직 배우지 못한 개념들이 많으니 느낌만 알고 넘어가도록 하겠습니다.

// 루프마다 i의 값은 1씩 증가하고, 동시에 j의 값은 1씩 감소함.

for (var i = 0, j = 9; i <= j; i++, j--) {

    document.write("i의 값은 " + i + "이고, j의 값은 " + j + "입니다.<br>");

}

typeof 연산자

이 연산자는 변수의 type을 확인하는 연산자입니다.

다음 시간에는 모든 프로그래밍 언어에 존재하는 제어문에 대해서 공부해보겟습니다.

자바스크립트의 for문, if/else문, while문은 어떨지 기대가 되네요. 

안녕하세요, 왕초보 코린이를 위한 코딩유치원에 오신 것을 환영합니다.

오늘 부터는 항상 다뤄오던 파이썬을 잠시 미뤄두고, 자바스크립트를 빠르게 공부해보려합니다.

빠른 시간 안에 최대한 핵심만 짚고 넘어가는 식으로 정리하였으며, 왕초보를 위한 Javascript 관련 글은 다음에 여유가 될 때 꼭 쓰도록 하겠습니다.

<자바스크립트 관련 글>

2021.04.21 - [웹 개발/프론트앤드] - Javascript 문법 요약정리 (1편. 자료형과 기초 문법)

2021.04.22 - [웹 개발/프론트앤드] - Javascript 문법 요약 정리 (2편. 연산자)

2021.04.23 - [웹 개발/프론트앤드] - Javascript 문법 요약 정리 (3편. 제어문_if/switch/while/for 문)

자바스크립트란?

웹 개발의 프론트엔드 개발을 이야기하면서 꼭 빠지지 않고 언급되는 JavaScript는 파이썬과 같은 언어의 일종입니다.

WEB은 뼈대와 내용을 구성하는 HTML, 디자인을 담당하는 CSS, 그리고 이것들을 살아움직이게 하는 JavaScript로 만들어집니다.

자료형 (data type)

모든 언어의 시작인 자료형에 대해서 가장 먼저 알아보겠습니다. 자바스크립트에서는 data type을 기본 타입이라고 부른다고 합니다. 기본 타입은 원시 타입과 객체 타입으로 구분할 수 있으며 아래와 같은 타입들이 있습니다.

원시 타입 (primitive type)

1. 숫자 (number)

다른 언어와 다른 자바스크립트만의 특이한 점은 숫자가 정수와 실수로 나뉘지 않고 모든 수를 실수로만 표현합니다.

var Num1 = 10;     // 정수가 아닌 실수

var Num2 = 10.00; // 소수점을 사용한 표현

var Num3 = 10e8;   // 1000000000

var Num4 = 10e-4; // 0.001

2. 문자열 (string)

문자열은 큰따옴표("")나 작은따옴표('')로 감싼 문자나 숫자를 의미합니다. 이 부분은 파이썬과 완전 동일하네요.

var string = "이것은 문자열"
var string2 = "파이썬과 똑같네"

3. 불리언 (boolean)

True / False, 따로 예약어로 True와 False를 사용

4. 심볼 (symbol)

심볼 타입은ECMAScript 6부터 새롭게 추가된 타입이라고 합니다. 심볼은 유일하고 변경할 수 없는 타입이라고 하네요. 일단 잘 모르겠거니와 잘 쓸것 같지도 않으니 이 정도만 알고 넘어가겠습니다.

5. undefined

아래의 코드와 같이 그냥 변수 a를 선언해주고 안에 값을 안넣어주면 a는 undefined 타입입니다. 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 undefined를 반환한다고 합니다.

var a

객체 타입 (object type)

6. 객체 (object)

객체는 여러 프로퍼티나 메소드를 같은 이름으로 묶어놓은 집합체입니다. 일단 프로퍼티나 메소드는 나중에 배울 예정이니, 객체라는 것도 기본 타입중에 하나구나라고 알고 넘어가도록 합시다.

var human = { name: "Roy", age: 31 };

자바스크립트 기초 문법

1. 실행문은 세미콜론(;)으로 구분됩니다.

2. 변수(variable)의 선언과 초기화

변수는 var이라는 예약어로 선언하며, 여기에 값을 넣어주는 것을 초기화라고 합니다. 참고로 자바 스크립트는 대소분자를 구분하므로 잘 신경써주어야 합니다.

var x; // 변수의 선언

x = 10; // 변수의 초기화

var x = 10; //한 번에 가능

3. 리터럴 (literal)

리터럴은 직접 표현되는 값 그 자체를 의미합니다. 참고로, 주석은 아래와 같이 // 혹은 /*(주석) */로 표현 가능합니다. 아직까지는 어디다 쓰는건지 잘 모르겠네요.

//숫자 리터럴
10

//문자열 리터럴
"Hello JavaScript"

//불리언 리터럴
True

4. 식별자(identifier)

식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미합니다. 식별자는 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)만을 사용할 수 있으며, 숫자와 식별자의 구별을 빠르게 할 수 있도록 숫자로는 시작할 수 없습니다.

5. 타입 변환(type conversion)

자바스크립트의 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있습니다. 단, 변수의 재선언은 불가능하며, 무시됩니다.

var num = 10; // 숫자 10

num = "10"; // 문자열 "10"

var num;    // 불가능한 코드. 재선언문은 무시됨.

오늘은 앞으로 코딩테스트를 위해 제가 필요하다고 생각하는 Javascript 문법만 다루어 봤습니다. 다음 시간에는 더하기, 곱하기, and, or 같은 '연산자'에 대해서 정리해보도록 하겠습니다.

안녕하세요, 왕초보 코린이를 위한 코딩유치원에 오신 것을 환영합니다.

저는 새로운 지식을 배울 때, 그것이 전체 그림에서 어떤 위치에 존재하는지를 파악하는 것을 좋아합니다. 막연하게 어느 하나를 열심히 공부했는데 정작 이게 어디 사용되는 것인지 모를뿐더러, 알고보니 나에게 쓸모가 없는 것이면 너무 슬프니까요! 그래서 오늘은 IT 분야의 큰그림을 그려보고 제가 공부하는 프로그래밍 지식이 어디에 사용되는지 알아보는 시간을 가지려 합니다.

1. 클라이언트(Front-end)

보통 사용자를 클라이언트라고 하는데요. 즉, 사용자들이 보는 화면을 구현하는 역할을 합니다. 가장 앞단이라는 의미로 Frond-end라고 부르기도 하는 이 분야는 우리가 자주 사용하는 네이버나 크롬의 화면을 구성하기도 합니다. 버튼의 위치, 색깔, 화면의 전환과 같은 기능을 구현하죠. 이 때 개발자에게 부족한 미적감각이나 심리학적인 부분을 웹 화면에 구현하기 위해서 UI/UX 디자이너와 협업하기도 합니다. 또한 휴대폰 앱이나 컴퓨터에서 사용하는 프로그램(어플리케이션)을 만드는 곳에도 사용됩니다. 주로 사용하는 언어는 HTML, CSS, Javascript입니다.

2. 서버(Back-end)

서버란 24시간 계속 돌아가는 컴퓨터 시스템을 말하기도 하지만 여기서 말하는 서버는 그 시스템 위애서 데이터베이스를 다루는 일을 말합니다. 앞서 언급한 프론트 엔드에서 요청한 데이터를 보내주기도 하고, 클라이언트가 사용할 기능의 논리적인 흐름을 미리 작성해놓고, 해당 기능을 사용자가 실행했을 때 정해진 순서로 명령을 실행하도록 합니다. 예를 들어 로그인, 회원 가입 등이 있겠습니다.

3. 시스템

앞서 언급한 서버의 물리적인 의미라고 보시면 됩니다. 우리가 사용하는 서비스는 대부분 24시간 돌아갑니다. 그렇기 때문에 이 서버가 오류가 나서 다운되어 버리면 서비스를 운영하는 회사 입장에서는 대형 사고입니다. 그렇기 때문에 서버를 안정적으로 관리/운영하는 일은 매우 중요하다고 할 수 있습니다. 사실 이런 서버 시스템을 구축/유지하는 것은 큰 초기 투자가 필요하기에 기업 입장에서 큰 부담으로 다가옵니다. 그래서 최근에는 서버를 원하는 만큼 빌려서 사용할 수 있는 클라우드 서버 서비스가 인기를 얻고 있습니다. 한번쯤은 들어보셨을 AWS(Amazon Web Service), Microsoft Azure, Google App Engine 등이 그런 클라우드 서비스입니다. 

4. 보안/네트워크

네트워크는 간단히 말해서 연결입니다. 모든 것이 연결된다는 것은 정보가 마음껏 오고 갈 수 있다는 의미인 동시에, 누구나 그 정보를 가져가거나 연결된 주체를 조작할 수도 있다는 의미입니다. 흔히 아는 해킹이 그런 것입니다. 이 때문에 네트워크는 반드시 보안과 함께 고려됩니다. 바늘과 실 같은 존재죠. 해킹을 하는 사람들을 해커라 하고, 이를 막는 사람들을 화이트 해커라고 부릅니다.

5. 운영체제 (OS)

운영체제는 여러분이 흔히 사용하시는 Windows, Mac, Linux 등의 OS를 말합니다. 이 분야는 말그대로 컴퓨터를 사용하기 위한 베이스를 프로그래밍 하는 것이기에 흔히 접하기는 힘든 분야라고 생각됩니다. 

6. 서비스 (웹, 앱, 게임)

앞서 언급했던 분야들이 어떤 기능을 세분화 한 것이라면, 서비스는 그 세분화한 기능들이 합쳐져서 고객들이 실제로 사용하는 완전체라고 볼 수 있습니다. 특히 게임 서비스 분야는 웹과 앱 개발에 비해서 클라이언트가 서버를 훨씬 많이 사용하기 때문에, 게임 출시 초기에 동시 접속 인원이 급증했을 때, 서버가 마비되는 상황이 많이 발생합니다. 또한 화려한 3D 그래픽을 구현해야 하는 경우도 있어서 서비스 중에서는 가장 난이도 있는 분야라고 평가 받습니다.

7. 빅데이터

빅데이터는 앞서 언급한 서비스를 운영하면서 나오는 엄청난 양의 데이터를 가공/분석해서 유의미한 정보를 얻어내는 기술입니다. 각 서비스들은 사용자의 이용 시간이나 패턴 등의 다양한 정보를 로그(log)라는 파일로 저장합니다. 이 로그는 원래 에러가 발생했을 때, 원인을 분석하기 위해서 주로 사용되어 왔습니다. 하지만 최근에는 앞서 말했 듯이 좀더 가공하고 분석해서 유의미한 정보를 비지니스를 운영하는데에 활용하고 있습니다.

빅데이터 분야의 직업에는 날 것의 데이터를 분석하기 용이하게 수집/가공하는 데이터 엔지니어, 이 데이터를 전달 받아서 유의미한 정보를 추출해내는 데이터 분석가, 유의미한 정보를 추출하는 알고리즘 모델을 개발하는 데이터 과학자 등이 있습니다.