본문 바로가기

입문11

alert, prompt, confirm으로 사용자의 행동에 반응하기 - [Javascript 입문 11] 안녕하세요! Muko 입니다. 저번 포스팅 마무리에 이벤트 핸들링에 대해서 다룬다고 적었었는데, 잠시 쉬어가는 느낌으로 다른 내용으로 포스팅을 해보려고 합니다. 이번 시간에서 다루려고 하는 것은 '사용자의 행동에 반응하는 웹페이지'를 만드는 가장 기초인 alert, prompt, confirm에 대해서 이야기 하겠습니다. 포스팅 주제로 원래 다루고자 했던 이벤트 핸들링을 아주 직관적으로 해석하면 어떤 이벤트가 발생했을 때 어떻게 다룰지에 대한 내용이라고 볼 수 있습니다. 여기서 이벤트라는 것은 어떤 사건, 즉 사용자로부터 입력이나 어떤 반응이 들어왔다고 해석할 수 있습니다. 우리는 이 중에서 사용자가 브라우저를 통해서 접근했을 때 우리가 코드 상으로 반응할 수 있는 가장 간단한 방법을 소개하겠습니다. 1.. 2020. 4. 26.
DOM - [Javascript 입문 _10] 이번 포스팅에서는 DOM에 대해서 다뤄보도록 하겠습니다. 1. DOM이란 우리가 보는 웹 페이지는 하나의 문서(document)입니다. 인터넷이 국내에서 지금처럼 누구나 사용하던 것이 아니던 1990년대에 쓰던 웹페이지를 보면 더욱 이 문장이 실감납니다. 위에 첨부한 네이버의 화면도 이미지가 조금 있지만, 더 초창기 인터넷 세계로 들어가면 텍스트로만 이루어진 화면을 볼 수 있습니다. 이처럼 웹 페이지 문서는 보통 HTML로 작성되어 있고, 크롬이나 인터넷 익스플로러와같은 웹 브라우저를 통해서 그 내용이 해석되어 웹 브라우저 화면에 나타나거나, HTML 소스 자체로 나타나기도 합니다. 여기서 동일한 문서를 사용해서 이렇게 다른 형태로 나타날 수 있는 것은 DOM이라는 존재 덕분입니다. DOM은 문서를 표현.. 2020. 4. 19.
for문 편(2) - Node.js로 [백준/BOJ] 단계별로 풀어보기를 풀어보다 BOJ 단계별로 풀어보기 'for문' - 2편 이번 포스팅에서는 저번에 작성한 BOJ 단계별로 풀어보기 - for문 1편에 이어서 2편을 작성해보려고 합니다. 저번 시간에 '기찍 N' 문제까지 풀었었고, 이번 포스팅에서는 'A+B - 7'부터 'X보다 작은 수'문제까지 쭉 풀어보도록 하겠습니다. 7. BOJ 11021 - A+B - 7 이 문제는 두 개의 정수 A와 B를 입력받았을 때 A+B를 출력하는 문제입니다. 매우 쉬워보이죠? 이 문제를 푸는 핵심 코드는 결국 입력 받아서 A+B 연산 결과를 출력해야 하는 BOJ A+B문제 와 비슷하게 해결할 수 있습니다. 그런데 백준에 동일한 문제가 두 개 있을 이유는 없겠죠? 여기서의 차이점은 바로 테스트 케이스의 존재입니다. 기존의 A+B 문제는 입력으로부터 .. 2020. 4. 17.
반복문 for, while, forEach, map - [Javascript 입문 _9] 이번 포스팅은 반복문에 대해서 이야기해보려고 합니다. 친구들이랑 얘기하다보면, 혹은 인터넷 커뮤니티 글들을 보다보면 공대 출신 혹은 프로그래머 출신들이 종종 '무한 루프'라는 단어를 사용하는 것을 볼 수 있습니다. 여기서 루프는 고리, 고리로 만들다 라는 의미를 가지고 있죠. 프로그래밍 세계에서 루프는 어떤 일련의 과정의 반복과 순환을 의미합니다. 그래서 무한 루프에 빠졌다라는 말은 반복문에서 벗어나지 못해서 프로그램이 에러가 났다라고 해석할 수 있습니다. 우리의 일상 생활 속에도 반복이라는 개념은 정말 많은 곳에 존재하고 있습니다. 예를 들어볼까요? ✏️To Muko 🗓Muko@tistory.com 안녕하세요, muko님. 티스토리 블로그입니다. muko님의 블로그에 너무나도 좋은 IT 교육 자료가 많.. 2020. 4. 15.
for문 편(1) - Node.js로 [백준/BOJ] 단계별로 풀어보기를 풀어보다 BOJ 단계별로 풀어보기 'for문' - 1편 저번 포스팅에는 if을 다루었었고, 이번 포스팅에서는 반복문 중에서도 for문에 대해서 문제를 모아놓은 것을 풀어보도록 하겠습니다. 사실 백준 단계별로 풀어보기의 이번 단계 이름이 for문 이라고 작성되어있지만, 반복문을 동작시킬 수 있는 다른 문법을 사용해도 문제를 푸는게 가능합니다. 가장 보편적이고 처음에 직관적으로 이해하기 쉬운 것이 for문이라서 이렇게 이름을 작성한 것 같아요. 물론 for문과 while문의 사용방법이 조금 다르긴 하지만 동일하게 작동이 가능한데, 백준에서는 어떤 상황에서 각 반복문 문법을 사용하는 것이 좋은지 나름 생각해서 for문 편과 while문 편을 나누어서 문제집을 만들어 놓았더라구요. 핵심은 '어떤 문법이 항상 정답처럼 사.. 2020. 4. 14.
'클리커 게임(Clicker)' 토이 프로젝트 - [Javascript 입문 _7] 벌써 글 순서가 7번까지 왔습니다. 여기까지 따라오시느라 고생하셨습니다. 이번에는 단순히 이론을 공부하면서 코드를 따라치는 것을 넘어서 실제로 간단한 프로그램을 만들어보려고 합니다. 1장에서 설명드렸었던 홈페이지에서 구현하는 것도 방법이지만, 프로젝트를 진행하는 만큼 실제 개발자들이 많이 사용하는 프로그램 위에서 코드를 작성해봅시다. 이 글을 잘 따라오시면, 우리도 카페에 앉아서 개발자 티를 내는 것이 가능합니다. 이번 토이 프로젝트 주제는 클리커 게임(Clicker) 입니다. 여기에 필요한 이론은 이전 포스팅에서 설명했으니 목차를 보시고 생소하거나 잘 모르겠다는 주제가 있으면 한 번 검토하시고 계속해서 글을 읽어주시기 바랍니다. [JavaScript 입문] 1. 시작, 그리고 변수와 상수, 자료형 [J.. 2020. 4. 9.
조건문 if, switch case - [Javascript 입문 _6] 8. 조건문 우리는 살면서 많은 선택을 하게 됩니다. 프로그래밍 또한 마찬가지 입니다. 코드를 작성하면서 조건에 따라 진행하는 과정이 달라지게끔 구현해야하는 경우가 많습니다. 이럴 때 프로그래밍에서는 조건문이라는 문법을 사용합니다. 자바스크립트에서 조건문은 크게 세가지 입니다. if, else if, else switch, case ? (삼항 연산자) 하나씩 살펴보도록 하겠습니다. 8-1. if와 else if문은 if ( 조건... )과 같은 형식으로 사용합니다. 괄호 안에 들어있는 조건을 평가한 뒤에, 그 결과를 불린형으로 변환한 값이 true이면 그 뒤에 중괄호 안에 코드를 실행하고, false이면 실행하지 않습니다. 선택지가 true일 경우와 false일 경우 두 갈래로 나뉘는 거죠. 불린형으로의.. 2020. 4. 8.
불리언(boolean)과 연산자 - [Javascript 입문 _5] 6. 불리언(boolean) 자바스크립트 뿐만 아니라 프로그래밍 언어에는 참을 의미하는 true와 거짓을 의미하는 false라는 값이 존재합니다. - false를 의미하는 값들(falsy value) undefined null 0 -0 NaN false "" '' 여기서 NaN은 잘못된 숫자 연산을 했을 때 반환되는 값입니다. - true를 의미하는 값들(truthy value) 위에 명시된 값들을 제외한 모든 값입니다. 아래의 5가지의 예시 또한 true를 의미합니다. '0' (0을 포함하는 문자열) 'false' (false를 포함하는 문자열) [] (빈 배열) {} (빈 객체) function() {} (빈 함수) 자바스크립트에서 이러한 falsy value와 truthy value를 boolean.. 2020. 4. 5.
배열 - [JavaScript 입문 _3] 4. 배열 객체는 한 변수 혹은 상수에 여러가지 정보를 담기 위한 자료형이라고 말씀드렸습니다. 그런데 위에 설명한 객체와는 다른 방식으로 여러가지 정보를 담을 수 있는배열, 그리고 특정 동작을 수행하는함수도 객체입니다. 이번 파트에서는 배열에 대해서 알아보겠습니다. const array = [1, 2, 3, 'test', {sample: 'code'}]; const emptyArray = []; 배열은 [ ] 로 감싸서 데이터를 표현합니다. 이 배열안에는 어떠한 자료형도 다 들어갈 수 있습니다. 다른 프로그래밍 언어를 먼저 배우신 분들은 이러한 배열의 모습이 너무나도 생소할 텐데요, 자바스크립트에서 배열의 특징은 배열의 길이를 미리 정할 필요가 없다는 점, 그리고 함수 또한 배열의 요소로 넣을 수 있다는.. 2020. 4. 3.
객체(Object) - [JavaScript 입문 _2] 3. 객체 (Object) 이전 시간에 배웠던 변수는 데이터를 저장할 수 있는 공간이고, 이 데이터는 계속해서 바뀔 수 있는 값이라고 설명했었습니다. 그리고 그 값으로 들어올 수 있는 자료형에 대해서 알아보았습니다. 그런데 말입니다... 만약에 변수에 저장하는 값이 하나가 아니라 복합적으로 여러개를 가지게끔 하고 싶다면 어떻게 해야할까요? 예를들어 이번에 새로나온 갤럭시 z 플립을 데이터로 저장하고 싶다면? 위의 사진에서와 같이 z플립 하나만 해도 여러가지 정보가 포함되어 있습니다. 이 것을 일일히 변수를 만들어서 값을 대입하는 형식으로 하면, z플립 하나를 호출하기 위해서 찾아야하는 변수가 너무 많겠죠? 이럴 때 유용하게 쓰이는 것이 바로 객체입니다. 객체는 우리가 변수 혹은 상수를 이용해서 하나의 이.. 2020. 4. 3.
시작, 변수와 상수, 자료형 - [JavaScript 입문 _1] 0. JavaScript? JavaScript는 웹 브라우저에서 사용하기 위해 만들어진 프로그래밍 언어입니다. 웹 초창기에는 글자와 사진으로만 이루어진 정적인 문서만(위키피디아와 같은 화면)을 보여주는 것이 대부분이었지만, JavaScript를 사용하면 동적인 화면을 만들 수 있었기에 많은 인기를 얻었습니다. 한국어, 영어와 같이 사람의 말에는 표준말이라는 것으로 언어별로 정식 문법과 같은 것을 정리하고는 합니다. 프로그래밍 언어 또한 마찬가지입니다. 다만, 프로그래밍 언어를 사용하는 사람들이 대부분 IT 회사에 속해있고 JavaScript는 그래서 오랫동안 전 세계 공통으로 사용될 수 있는 표준말이 없었습니다. 이는 MicroSoft 사의 Internet Explorer와 Google의 Chrome, .. 2020. 4. 2.