본문 바로가기

JavaScript30

Javascript - 구조 분해 할당 (Destructuring assignment) 구조 분해 할당 (Destructuring assignment) Destructuring? 구조화된 배열 또는 객체를 분해해서 개별적인 변수에 할당 하는 것. 배열 또는 객체에서 필요한 값만 추출해서 변수에 할당하거나 반환할 때 유용하다. ex) 함수의 매개변수가 많거나, 매개변수 기본값이 필요한 경우 등 Array Destructuring const numbers = [1, 2, 3]; const [one, two, three] = numbers; console.log(one, two, three); // 1, 2, 3 const [one, two] = [1]; // 1, undefined // 반환 값이 배열인 메서드와 사용가능 const [firstName, surname] = 'Giin Lee'... 2020. 4. 24.
while문 편 - Node.js로 [백준/BOJ] 단계별로 풀어보기를 풀어보다 안녕하세요! Muko입니다. 저번 포스팅에서 다루었던 for문에 이어서 이번에도 반복문을 다룰 수 있는 while문 편에 대해서 풀어보도록 하겠습니다. for문과 달리 while문은 제한 조건만을 괄호 안에 명시하고, 그 조건을 만족한다면 계속해서 반복 loop를 도는 특징이 있습니다. 반복문에 대해 잘 모르신다면, 혹은 조금 더 자세하게 공부하고나서 문제를 풀고 싶으시다면 반복문 포스팅을 보고 와주세요! 1. BOJ 10952 - A+B - 5 이 문제는 두 정수 A와 B를 입력받은 다음에, A+B를 출력하면 되는 문제이지만 조건이 하나 붙습니다. 입력이 여러 개의 테스트 케이스로 이루어져 있꼬, 입력의 마지막에는 0 두 개가 들어온다는 조건입니다. 즉, 우리는 입력을 계속해서 받다가 '0 0'이 들어.. 2020. 4. 22.
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.
backtick(`) 기호를 이용한 javascript 템플릿 리터럴(template literal)로 쉽게 만드는 문자열 가끔 다른 사람이 작성한 코드를 보다보면 헷갈리는 기호가 있습니다. 저는 보통 공부를 위해서 책을 사서 코드를 따라치는 경우에 책과 다른 결과를 얻게 되는 경우가 종종 있었고, 그 때마다 이 backtick(`) 기호가 원인이었습니다. 작은 따옴표(', single quote)와 매우 비슷하게 생겼지만 javascript에선 특이한 프로그래밍 문법으로 사용되는 기호입니다. 영어 사전에도 backtick을 검색해보면 프로그래밍에 사용되는 기호라고 설명되어있을 만큼 정말 개발자를 위한 기호라고도 볼 수 있습니다. (다양한 언어 문자를 표현할 때도 사용됩니다) 얼마나 구분히 안가는지 직접 확인해보면 편하겠죠? "큰 따옴표를 사용한 문자열" '작은 따옴표를 사용한 문자열' `백틱으로 작성한 문자열` 음... 블.. 2020. 4. 16.
반복문 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.
'숫자 야구게임 만들기' 토이 프로젝트(2) - [Javascript 입문 _8] 저번 포스팅에서 보여주는 부분은 완성했지만, 숫자 야구게임을 완성시키기는 다음과 같은 5가지 함수를 구현해야 했습니다. 제출 숫자는 4자리 체크 숫자 중복 체크 정답인지 아닌지 체크 힌트 제공 함수 정답 시도 횟수 10번 이내인지 체크 지금부터 하나씩 구현해보도록 해보죠! 4자리 체크 함수 우선은 사용자가 입력한 숫자가 4자리인지 체크하는 함수를 만들어보겠습니다. 현재 제가 숫자 야구게임 1편에서 작성한 javascript 코드에는 입력한 숫자가 String으로 넘어오게끔 되어있습니다. 만약 숫자라면 1000이상 10000미만 인지 체크하는 조건문을 사용하면 되고, 지금과 같은 상황이면 length가 4인지 체크하면 됩니다. 아래 코드처럼요! const isFourDigits = (number) => {.. 2020. 4. 12.
'숫자 야구게임 만들기' 토이 프로젝트(1) - [Javascript 입문 _8] 이번 시간에는 흔히들 수업시간에 공부하기 싫어서, 지하철이나 버스타면서 친구와 장난칠 때, 군대에서 시간 보내기 용으로 많이하던 숫자 야구게임을 만들어보겠습니다. 숫자 야구 게임이 무엇인지 모르는 분들을 위해 설명하면, 문제 출제자가 4자리 수의 숫자를 생각하고 다른 한 사람이 그 숫자를 10번의 기회 안에서 맞춰야 합니다. 다만 아무런 힌트가 없다면 10번 안에 문제 출제자가 생각한 4자리 숫자를 맞추는 것이 불가능하므로, 출제자는 답을 맞추려는 시도 때마다 힌트를 넘겨주어야 합니다. 게임 이름이 숫자 야구게임인 이유는 힌트를 주는 형식 때문입니다. 정확하게 숫자와 자리수까지 일치할 경우 스트라이크(S), 숫자는 존재하는데 위치가 다를 경우 볼(B)을 넘겨줍니다. 예를 들어볼게요. 출제자: 5329 참.. 2020. 4. 12.
if문 편 - Node.js로 [백준/BOJ] 단계별로 풀어보기를 풀어보다 BOJ 단계별로 풀어보기 'if문' 저번 포스팅에 이어, 이번에는 백준 단계별로 풀어보기의 두 번째인 if문 편에 대해서 작성하려고 합니다. 프로그래밍 언어를 배우고, 공부하고 익히는데는 문제를 풀어보면서 직접 코딩하는 것이 최고입니다. 책이나 유튜브 영상, 블로그 글을 보면서 예제를 따라치는 것도 좋지만 재미가 없잖아요! 직접 코딩하고 그 결과가 눈에 보이는 재미를 느끼면서 공부하는 것이 최고라고 생각합니다. 백준 사이트를 아직 모르신다면, 그리고 프로그래밍이나 코딩 공부를 접한지 얼마 되지 않으셨다면, 혹은 비전공자라면 백준 사이트에 들어가셔서 가입해보세요! 그리고 문제를 풀 때마다 마이페이지에 들어가면 푼 문제 수와 랭킹이 나오는데, 이 랭킹을 올리는 재미도 쏠쏠합니다. 그럼 if문을 풀어보도록 하.. 2020. 4. 12.
입출력과 사칙연산 편 - Node.js로 [백준/BOJ] 단계별로 풀어보기를 처음 풀어보았다. BOJ 단계별로 풀어보기 '입출력과 사칙연산' 단계별로 풀어보기는 윗 부분은 알고리즘이라고 하기에는 단순히 사용하는 언어의 문법을 아는가에 대한 문제가 많이 존재합니다. 새로운 언어로 프로그래밍을 하는 요즘, 제가 주로 사용하는 언어로 알고리즘을 풀어보고 싶다는 생각이 들어서 포스팅을 시작하려고 합니다. 1. BOJ 2557 - Hello World 이 문제는 Hello World! 를 출력하라는 문제로, 해당 언어로 문자열을 출력할 수 있느냐고 물어보는 문제입니다. 자바스크립트에서는 한 줄이면 되므로 아주 간단하게 풀었습니다. 코드 접기/펼치기 console.log('Hello World!'); 2. BOJ 10718 - We love kriii 이 문제도 마찬가지로 주어진 문장을 출력할 수 있는가에 .. 2020. 4. 11.
'클리커 게임(Clicker)' 토이 프로젝트 - [Javascript 입문 _7] 벌써 글 순서가 7번까지 왔습니다. 여기까지 따라오시느라 고생하셨습니다. 이번에는 단순히 이론을 공부하면서 코드를 따라치는 것을 넘어서 실제로 간단한 프로그램을 만들어보려고 합니다. 1장에서 설명드렸었던 홈페이지에서 구현하는 것도 방법이지만, 프로젝트를 진행하는 만큼 실제 개발자들이 많이 사용하는 프로그램 위에서 코드를 작성해봅시다. 이 글을 잘 따라오시면, 우리도 카페에 앉아서 개발자 티를 내는 것이 가능합니다. 이번 토이 프로젝트 주제는 클리커 게임(Clicker) 입니다. 여기에 필요한 이론은 이전 포스팅에서 설명했으니 목차를 보시고 생소하거나 잘 모르겠다는 주제가 있으면 한 번 검토하시고 계속해서 글을 읽어주시기 바랍니다. [JavaScript 입문] 1. 시작, 그리고 변수와 상수, 자료형 [J.. 2020. 4. 9.