오늘의 CODE

Description. 이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. n과 m은 각각 1000 이하의 자연수입니다. process.stdin.setEncoding('utf8'); process.stdin.on('data', data => { const n = data.split(''); const a = Number(n[0]), b = Number(n[1]); console.log(a); console.log(b); }); Solution. 입력받은 값을 spilt를 사용하여 return한 후, 변수에 할당한다. split는 아래 링크 참고. https://docs.microsoft.com/ko..

정규 표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴으로 자바스크립트에서 정규 표현식 또한 객체이다. 1. 정규식 만들기 // 정규식 리터럴 const re = /ab+c/; // 생성자 함수 호출 const re = new RegExp("ab+c"); 생성자 함수 사용 시 정규식이 실행 시점에 컴파일된다. 정규식의 패턴이 변경될 수 있는 경우, 혹은 사용자 입력과 같이 다른 출처로부터 패턴을 가져와야 하는 경우에 생성자 함수를 사용하면 된다. 2. 정규식 패턴 작성하기 정규식 패턴은 /abc/ 같이 단순 문자로 구성될 수도 있고, /ab*c/ 또는 /Chapter (\d+)\.\d*/와 같이 단순문자 + 특수문자의 조합으로 구성될 수 있다. 특수문자의 사용에 대해서는 아래의 ..

Nuxt.js에 스캐폴딩된 디렉토리 구조를 파악해보자. (기본 템플릿 사용) nuxt ├ assets ├ components ├ layouts ├ middleware ├ pages ├ plugins ├ static ├ store assets css, image, font 나 LESS, SASS, Javascript 같은 컴파일되지 않은 에셋들을 포함한다. components Vue.js 컴포넌트를 포함하는 디렉토리로 애플리케이션에서 사용될 컴포넌트를 포함한다. 해당 경로에 위치된 컴포넌트들은 Nuxt.js의 비동기 데이터 함수인 asyncData 또는 fetch를 사용할 수 없다. layouts 애플리케이션 전체에 대한 레이아웃을 포함한다. 기본으로 default.vue가 생성되어 있을 것이고 상황에 ..

아이콘은 fontawesome 5버전으로 사용 London London is the capital and largest city of England, the United Kingdom, and the European Union. Standing on the River Thames in southeastern England, at the head of its 50-mile (80 km) estuary leading to the North Sea, London has been a major settlement for two millennia. Madrid Madrid is the capital of Spain and the largest municipality in both the Community of M..

페이지 전환(이동) 시 Transition effect 주기 - 구조 list 페이지 detail 페이지 2 list 페이지의 메뉴 클릭 시 각각의 detail 페이지로 이동하는데 이때 페이지 전환 시 transition 효과를 주고자 함. 메뉴에는 href로 detail 페이지를 지정해주었다. function isSameAsLocation(uriString) { const uri = new URL(uriString); return ( uri.origin === window.location.origin && uri.pathname === window.location.pathname ); } function pageTransition(ulList) { ulList.forEach((el) => { if (!..

특징 자동 변환 및 번들링 (웹팩 및 바벨 포함) 코드 Hot reload SSR, SPA, 정적 생성 선택 가능 정적 파일 제공 (./static/은 /에 매핑됩니다) nuxt.config.js 파일로 구성 가능 사용자 정의 레이아웃 (layouts/ 디렉토리 ) 미들웨어 제공 모든 페이지에 대한 코드 분할 중요한 CSS 만로드 (페이지 수준) 전 처리기 지원 : SASS, LESS, Stylus 등 요소 관리 (, , 기타) ES2015+ 지원 전제조건 Node - 최소 v10.13 최신 LTS 버전 텍스트 편집기 - VS Code(Vuter 확장) 또는 WebStorm 터미널 - VS Code의 통합 터미널 또는 WebStorm 터미널 1-1. Create Project command npx cre..

객체와 배열을 변수로 '분해'할 수 있게 해주는 것을 구조 분해 할당(destructuring assignment)이라고 할 수 있다. 이 외에도 함수의 매개변수가 많거나 매개변수의 기본값 설정이 필요한 경우에도 구조 분해 할당을 활용할 수 있다. var x = [1, 2, 3, 4, 5]; var [y, z] = x; // 구조 분해 할당을 이용해 y는 x[0], z는 z[1]을 할당함. console.log(y); // 1 console.log(z); // 2 이제 인덱스를 이용해 배열에 접근하지 않고도 변수로 배열의 값을 사용할 수 있게 되었다. 아래의 예시처럼 split같은 반환값이 배열인 메서드와 함께 활용해도 좋다. let arr = ["Bora", "Lee"]; let [firstName, ..

JS는 새로운 문법이나 기존에 없던 내장 함수에 대한 정의가 추가되곤 한다. 새로운 문법을 사용해 코드를 작성할 경우, 트랜스파일러(예를 들자면 Babel)는 이를 표준에 맞는 코드로 변경해둔다. 반면, 새롭게 추가된 함수는 명세서(JS) 내 정의를 읽고 이에 맞게 직접 함수를 구현해야 사용할 수 있다. 이렇게 변경된 표준을 준사할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 "폴리필"이라고 부른다. 폴리필(polyfill)은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는 (fall in) 역할을 한다. 좀 더 쉽게 바꿔 말하면 브라우저가 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 코드를 말한다. 주목할 만한 폴리필 두가지는 아래 참고 core js - ..

js가 없이 html 태그로만 아코디언 메뉴를 만드는 방법 MDN 의 설명에 따르면 열림 상태일 때에만 내부 정보를 보여주는 정보 공개 위젯이라고 되어있다. 간단히 발하면 클릭 시 세부 정보가 보여지도록 하는 아코디언 메뉴를 떠올리면 된다. 태그 내부에 생성하는 태그는 아코디언 메뉴의 타이틀로 사용되며, 만약 생략할 경우, 브라우저에서는 기본 요약 문자열("상세", "세부정보" 등)으로 표기된다. Details Something small enough to escape casual notice. details가 처음부터 열려 있는 상태로 나타나게 하려면 open 속성을 지정하면 된다. System Requirements Requires a computer running an operating system..

보호되어 있는 글입니다.