본문 바로가기

분류 전체보기37

1차원 배열 편(2) - Node.js로 [백준/BOJ] 단계별로 풀어보기를 풀어보다 저번 포스팅과의 시간 공백이 정말 많이 길었습니다. 이어서 1차원 배열 편 포스팅 하겠습니다! BOJ 3052 - 나머지 두 자연수 A와 B가 있을 때, A%B는 A를 B로 나눈 나머지입니다. 이 때, 수 10개를 입력받은 뒤 42로 나눈 나머지 중에서 서로 다른 값이 몇 개 있는지 출력하는 문제입니다. 실제로 다른 프로그래밍 언어에서나 Javascript에서도 % 연산자는 나머지를 구할 때 사용합니다. 이 문제를 해결하기 위해서는 나머지를 구하는 부분, 그리고 지금까지 나머지가 몇 개 나왔는지 저장하고 그 갯수를 구하는 부분을 구현해야 합니다. // 입출력에 사용할 rl을 받아오는 함수 const getRl = () => { const readline = require('readline'.. 2020. 5. 11.
재귀와 실행컨텍스트 재귀와 실행컨텍스트 재귀 : 함수내부에서 자기 자신을 호출하는 것 // 반복문을 통한 방법 function pow(x, n) { let result = 1; for(let i=0; i prev + current.salary, 0); // 배열의 요소를 합함 } else { // 두 번째 경우 let sum = 0; for (let subdep of Object.values(department)) { sum += sumSalaries(subdep); // 재귀 호출로 각 하위 부서 임직원의 급여 총합을 구함 } return sum; } } alert(sumSalaries(company)); // 7700 코드를 보면 객체를 만났을 때는 재귀를, 배열을 만났을 때는 임직원들의 임금 합계를 계산하는 로직을 동.. 2020. 5. 7.
이벤트, 이벤트 핸들링 (Event Handler) - [Javascript _ 12] 오늘은 이벤트와 이벤트 핸들링에 대해서 포스팅 하려고 합니다. 1. 이벤트 (event) 이벤트는 브라우저 상에서 일어나는 어떤 사건을 의미합니다. 여기서 사건은 사용자가 클릭을 했거나, 스크롤을 했을 때, 키보드를 눌렀을 때와 키보드에서 손을 뗐을 때, 입력 값을 제출했을 때, 마우스를 움직이고 있을 때 등을 의미합니다. 이벤트가 DOM에만 한정되는 것은 아니지만, 모든 DOM 노드는 이런 신호들을 만들어 낼 수 있습니다. 자주 사용되는 유용한 DOM 이벤트 종류를 소개하겠습니다. 마우스 이벤트: click - DOM 요소 위에서 마우스로 클릭(스마트폰에서는 탭)했을 때 발생 contextmenu - 요소 위에서 마우스 오른쪽 버튼 클릭했을 때 발생 mouseover - 마우스 커서를 요소 위에 두었을.. 2020. 4. 30.
alert, prompt, confirm으로 사용자의 행동에 반응하기 - [Javascript 입문 11] 안녕하세요! Muko 입니다. 저번 포스팅 마무리에 이벤트 핸들링에 대해서 다룬다고 적었었는데, 잠시 쉬어가는 느낌으로 다른 내용으로 포스팅을 해보려고 합니다. 이번 시간에서 다루려고 하는 것은 '사용자의 행동에 반응하는 웹페이지'를 만드는 가장 기초인 alert, prompt, confirm에 대해서 이야기 하겠습니다. 포스팅 주제로 원래 다루고자 했던 이벤트 핸들링을 아주 직관적으로 해석하면 어떤 이벤트가 발생했을 때 어떻게 다룰지에 대한 내용이라고 볼 수 있습니다. 여기서 이벤트라는 것은 어떤 사건, 즉 사용자로부터 입력이나 어떤 반응이 들어왔다고 해석할 수 있습니다. 우리는 이 중에서 사용자가 브라우저를 통해서 접근했을 때 우리가 코드 상으로 반응할 수 있는 가장 간단한 방법을 소개하겠습니다. 1.. 2020. 4. 26.
북클럽 스킨에서 프로필 영역 만들기! 안녕하세요! Muko 입니다. 이번 시간에는 티스토리 북클럽 스킨에서 프로모션 영역을 이용해서 프로필 영역을 만들어 보려고 합니다. 제가 작업한 내용의 전과 후의 사진을 비교하면 다음과 같습니다. 원래는 위와 같은 모습으로 블로그를 운영했었는데, 계속 보다보니 굳이 프로필 영역이 저렇게 커야하나 싶은 생각이 들었습니다. 원래 티스토리에서 의도한 프로모션 영역은 저기에 홍보용 이미지와 링크, 광고카피를 넣으라는 의미에서 만든 것 같습니다만, 저는 기업을 운영하는 블로그가 아니라 코딩과 관련된 포스팅을 하는 개인 블로거이기 때문에 제 입맛에 맞게 변경하기로 마음먹고 작업을 진행했습니다. 이 작업을 하기 위해서 여러분이 준비해야 하는 작업은 바로 '프로모션 영역 추가하기' 입니다. 이 포스팅을 보는 분들 중에.. 2020. 4. 25.
1차원 배열 편(1) - Node.js로 [백준/BOJ] 단계별로 풀어보기를 풀어보다 안녕하세요~ Muko 입니다. 이번 포스팅도 계속해서 백준의 단계별로 풀어보기를 진행하려고 합니다. 벌써 5번째 시간인데요! 요즘 백준에서 단계별로 풀어보기를 대대적으로 수정하고 있는지 예전과 달라진 곳 들도 있고, 아직 개편 중인 곳도 있어서 확정된 문제집 부터 풀어보려고 합니다. 그래서 오늘은 6번 째 단계인 1차원 배열 편을 풀어보도록 하겠습니다. 사실 블로그를 운영하는데는 C언어나 Java, Python으로 풀이를 올리는게 더 유입이 잘 될 것 같아서 계속해서 흔들리고 있습니다. 열심히 포스팅을 올리고 있는데, 구글이나 네이버에서 유입이 전혀 안되고 있어서 더욱 그러네요. 포스팅을 하고, 사람들이 들어와서 공부하고 왔다는 표시가 늘어날 수록 보상 받는 기분에서 더 열심히 하게될텐데, 제가 컨텐츠를.. 2020. 4. 25.
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.
Book Club 스킨에서 메뉴 클릭시 두 개가 활성화 되는 오류 해결 방법 안녕하세요! Muko입니다. 제가 현재 사용하고 있는 스킨은 티스토리에서 가장 최근에 배포한 Book Club 스킨인데요, 사용하다보니 메뉴 부분에서 원하지 않게 동작하는 부분이 눈에 들어와서 다른 분들에게도 도움이 되었으면 하는 바램에서 수정하는 방법에 대해서 포스팅하려고 합니다. 티스토리 블로그를 Book Club으로 운영하시는 분들은 이 메뉴를 사용하지 않는 분들 보다는 사용하는 경우가 더 많을 거라고 생각이 듭니다. 처음에는 메뉴를 설정하지 않고 사용하닥, 이번에 메뉴를 추가하고 사용하면서 오류를 발견했는데요, 메뉴를 설정할 때 다음과 같이 추가하면서 위와 같이 오류가 났습니다. 이 오류가 발생하는 경우는 일단 메뉴 중에 하나가 '홈'으로 향하는 링크가 있어야하고, 메뉴에 링크를 걸 때 '블로그주.. 2020. 4. 19.
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.