문제 링크 https://www.acmicpc.net/problem/4673 4673번: 셀프 넘버 셀프 넘버는 1949년 인도 수학자 D.R. Kaprekar가 이름 붙였다. 양의 정수 n에 대해서 d(n)을 n과 n의 각 자리수를 더하는 함수라고 정의하자. 예를 들어, d(75) = 75+7+5 = 87이다. 양의 정수 n이 주어졌을 때, www.acmicpc.net 문제 설명 셀프넘버는 1949년 인도 수학자 D.R Kaprekar가 이름 붙였다. 양의 정수 n에 대해서 d(n)을 n과 n의 각 자리수를 더하는 함수라고 정의하자. 예를 들어, d(75) = 75 + 7 + 5 = 87이다. 양의 정수 n이 주어졌을 때, 이 수를 시작해서 n, d(n), d(d(n)), d(d(d(n))),... 과..
(1)에 이어... 격자 내부에 좌표를 추가해보았다. 코드 흐름 클래스 또는 생성자함수를 사용할 수 있는가? - YES!! 위의 경우는 BOX라는 오브젝트를 수없이 생성해야 하므로 기능적으로 클래스로 구현하기 용이하다. 내 구상과 디자인에 적합한 HTML 코드와 CSS 코드를 작성한다. Box 클래스를 생성한다. 각 박스는... - div element로 생성하고, css class를 달고있어야 한다. - 기본적으로 텍스트를 숨기고 있어야 한다. - div 스스로 텍스트 토글 기능에 관한 이벤트 리스너를 달고 있어야 한다. (클로저로 인해 이벤트 핸들러는 row, col, showing 변수에 접근할 수 있다.) container에 add 한다. 이후 n x n 박스를 만드는 함수를 제작하면 된다. 코드..
만드는 이유 1. 심심한 주말, 공부하기 위해 2. 기능을 프로그래밍할 때 거쳐야하는 사고방식에 대해 익숙해지기 위해 단순하다. 숫자를 입력하면 n x n의 형식으로 네모 격자가 출력된다. 19를 입력하면 19x19가 되어 바둑판이 될 것이다. 코드 코드설명 html에서는 container로 사용할 div와 input 태그를 만들어준다. css에서는 격자가 들어갈 div의 스타일을 미리 설정해준다. 격자의 역할을 하기 위해 inline-block으로 설정되었으며, 사이즈는 정사각형(50px)으로 맞춰준다. JavaScript에서는... container div와 input의 dom을 취득한다. 최초 앱 실행시 input에 포커스가 이동하도록 .focus() 메서드를 실행해준다. Box라는 생성자함수를 만..
문제 링크 https://www.acmicpc.net/problem/3052 3052번: 나머지 각 수를 42로 나눈 나머지는 39, 40, 41, 0, 1, 2, 40, 41, 0, 1이다. 서로 다른 값은 6개가 있다. www.acmicpc.net 답안 const fs = require('fs') const input = fs.readFileSync('/dev/stdin').toString().trim().split("\n").map(Number) function solution(input) { const map = new Map() for (let i = 0; i < input.length; i++) { const key = input[i] % 42 if (map.has(key) === false)..
그냥 라이브러리는 이렇게 만드는거겠구나 해서 장난좀 쳐봤다. function toyFunction() { return { toyMethod : (params) => { if (typeof params === "function") { const callsign = "2DC" return params(callsign) + "을 콜백함수로 호출" } else { return params + "을 원시값으로 호출" } }, justReturnParams : (params) => { return params } } } const toy = toyFunction() console.log(toy.toyMethod("2DC")) console.log(toy.toyMethod((params) => { return par..
In Vue, mustaches are only used for text interpolation. To bind an attribute to a dynamic value, we use the v-bind directive: 뷰에서 머스태치 문법은 오직 텍스트를 껴넣을때만 사용한다. 어트리뷰트를 HTML에 추가하려면 v-bind 문법을 이용하면 된다. A directive is a special attribute that starts with the v- prefix. They are part of Vue's template syntax. Similar to text interpolations, directive values are JavaScript expressions that have access ..
{{`안녕 나는 ${num}DC야`}} 누르면 숫자 올라감 What you see in the editor is a Vue Single-File Component (SFC). An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a .vue file. The core feature of Vue is declarative rendering: using a template syntax that extends HTML, we can describe how the HTML should look like based on JavaScrip..
{{`안녕하세요. ${num}DC입니다.`}} 숫자UP What you see in the editor is a Vue Single-File Component (SFC). An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a .vue file. The core feature of Vue is declarative rendering: using a template syntax that extends HTML, we can describe how the HTML should look like based on JavaScript ..
What is Vue? (Vue는 무엇인가요?) Vue(발음은 view, 뷰로 하면 된다.)는 UI를 개발하는 자바스크립트 프레임워크이다. 뷰는 표준 HTML, CSS, JS를 기반으로 빌드(구축)되며, UI를 효율적으로 개발할 수 있도록 도와주는 선언형 프로그래밍(declarative) 및 컴포넌트 기반 프로그래밍 모델을 제공한다. 아래는 미니멀한 예시이다. import { createApp } from 'vue'; createApp({ data() { return { count: 0; } } }).mount('#app') Count is: {{ count }} 결과 : 위의 예시는 뷰의 두 가지 핵심 기능을 보여준다. Declarative Rendering (선언적 렌더링) - Vue extends ..
헤더를 까보기위해 http 모듈로 간단한 서버를 만들어 header에 무슨 정보가 오가는지 확인해보았다. 1. meta-charset의 필요성 const http = require('http') const server = http.createServer((req, res) => { res.setHeader('Content-Type', 'text/html') res.write('') res.write('') res.write('ㅎㅇ') res.write('') res.end() }) server.listen(8080) 서버를 위와 같이 개설하고, 페이지를 열면 아래의 스크린샷과 같이 한글이 다 깨져서 나오게 된다. 이유는 헤더에 캐릭터셋을 어떻게 인코딩해야할지 정보를 담아주지 않아서 그렇다. 따라서 인코딩..
