전체 글
-
[HTML & CSS] 드롭다운 메뉴 기본HTML & CSS/실습 2022. 12. 18. 22:49
node.js 기본을 익히고 이제 웹 페이지를 제작하려던 찰나 드롭다운 메뉴 하나도 빠르게 만들지 못하는 내 자신을 발견했다. 정작 중요한게 아니라 다른걸 열심히 파고 있었단걸 깨닫고 fe의 기본인 html, css, js의 기본을 다시 탄탄히 하고자 한다. 일단 실패한 드롭다운 메뉴부터 시작해야지... See the Pen Untitled by OnnJE (@ogtitle) on CodePen. 일단 만든건 위와 같다. 이게 처음 막 하다보니 어떻게 원리를 적용해 드롭다운을 구현할지 생각보다 쉽지 않았다.. 그러니 나중에 봐도 쉽게 이해할 수 있게 핵심적인 부분을 정리해 보자. 1. 구현은 가장 깊숙한 요소부터 실제 구현을 해보니 가장 아래의 요소 (위 드롭다운 메뉴의 경우 a 태그)부터 구현하는게 훨..
-
[HTML & CSS] 네이밍 규칙HTML & CSS/이론 2022. 12. 18. 18:50
HTML 문서를 작성할 때 각 태그들을 구분하기 위해서 id 혹은 class가 주로 쓰인다. 이러한 속성들을 보다 효과적으로 쓰는 방법은 무엇일까 고민하며 구글링을 해보다 다음과 같은 아래와 같은 사이트를 찾게 되었다. TPL+Code Style Guide 이 사이트에서 정리한 내이밍 규칙은 아래와 표와 같다. 네이밍 규칙 외에도 코딩 컨벤션, 레이아웃 등에 관한 글이 있으니 참고하면 좋겠다. 공통 규칙 [ 형태 + 의미 + 상태 ] 순서로 조합한다. - 이름의 시작은 소문자 혹은 _ 만 사용한다. - HTML / CSS id => camelCase 사용 menuMain class => - 사용(snake_case와 유사) btn-login-off File [ 형태_의미_상태 ]와 같이 언더스코어를 사용..
-
[HTML & CSS] 페이지 body 요소 기본 설정HTML & CSS/이론 2022. 12. 17. 20:25
이번 글에서는 freeCodeCamp의 HTML vs Body: How to Set Width and Height for Full Page Size이란 칼럼의 설명을 정리하고, 해당 글에서 소개된 각 케이스를 직접 확인해보며 어떤 설정이 가장 좋을지 생각해 보려 한다. * { margin: 0; padding: 0; box-sizing: border-box; } 각 케이스를 비교하기 전에 위 코드와 같이 전체 요소의 margin, padding을 0으로 세팅하고 box-sizing 속성을 border-box로 설정하는 것을 추천한다. 이러한 기본 세팅은 각 요소에 대한 추가적인 조작을 줄여준다. 아래 그림은 box-sizing의 속성 값 border-box의 특징을 보여준다. 그림에서 확인할 수 있듯이 ..
-
[JS] cachingdecorator 에서 어떻게 Map으로 저장한 데이터가 유지될까?문득 든 의문점 2022. 12. 15. 17:08
Caching Decorator function slow(x) { // CPU 집약적인 작업이 여기에 올 수 있습니다. alert(`slow(${x})을/를 호출함`); return x; } function cachingDecorator(func) { let cache = new Map(); return function(x) { if (cache.has(x)) { // cache에 해당 키가 있으면 return cache.get(x); // 대응하는 값을 cache에서 읽어옵니다. } let result = func(x); // 그렇지 않은 경우엔 func를 호출하고, cache.set(x, result); // 그 결과를 캐싱(저장)합니다. return result; }; } slow = caching..
-
[프로그래머스 / JS] Lv.0 최빈값 구하기Algorithm/프로그래머스 2022. 12. 15. 14:52
문제 설명 최빈값은 주어진 값 중에서 가장 자주 나오는 값을 의미합니다. 정수 배열 array가 매개변수로 주어질 때, 최빈값을 return 하도록 solution 함수를 완성해보세요. 최빈값이 여러 개면 -1을 return 합니다. 제한사항 0 { result[curr] = (result[curr] || 0) + 1 return result }, {}) let sortedKeys = Object.keys(objCount).sort((a, b) => objCount[b] - objCount[a]) if (objCount[sortedKeys[0]] === objCount[sortedKeys[1]]) return -1 else return Number(sortedKeys[0]) } 사고과정 각 숫자가 몇 개..
-
[JS Module] 콘솔창을 통한 입력 / readline moduleJavascript/모듈 2022. 12. 14. 16:23
프로그래머스 Lv. 0의 문제를 풀다 처음 접하는 모듈이 있어서 정리해보려한다. readline 모듈은 콘솔을 통해 입력값을 받고 한 줄씩 처리할 수 있게 해주는 모듈이다. 아래의 코드는 문제에 답으로 제출한 코드인데 이를 들여다 보며 모듈이 어떤 방식으로 동작하는지 알아보자 const readline = require('readline'); // 모듈 import const rl = readline.createInterface({ // interface 객체 생성 input: process.stdin, output: process.stdout }); let N; // 입/출력에서 사용될 변수 선언 rl.on('line', function (line) { // 입/출력 처리 (입력부) N = Number..
-
[JS] JS의 내장 함수는 메서드인가?문득 든 의문점 2022. 12. 14. 15:04
자바스크립트 내장함수 JS에서 내장함수란 별도의 모듈 혹은 라이브러리를 설치할 필요없이 사용할 수 있는 함수를 말한다. 예를들어 parseInt(), isNaN(), isFinite() 등이 있다. 메서드란 JS에서 메서드는 객체와 관련된 함수이다. 자바스크립트는 다양한 종류의 객체를 가지고 있으며 각각 관련된 메서드를 가진다. 예를들어 toUpperCase()는 string 타입 에서만 사용 가능한 메서드이고, push()는 array에서 사용 가능한 메서드이다. 이 부분에서 한가지 의문이 생길 것이다. array는 object기반의 자료형이니 그렇다 치고 string은 원시값인데 어떻게 메서드를 가지고 사용할까? 그 해답은 바로 object wrapper이다. Object wrapper ) 래퍼객체(..