전체 글

[React] css 모듈과 proptype

1. CSS 모듈 클래스 이름을 고유한 값으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지하는 방법이며, 유지보수가 편리해진다. 사용 방법 .css 확장자 앞에 .module 을 붙여준다. .module.css 파일에 클래스명으로 된 속성을 만들어준다. 파일을 import 해주고, 프로퍼티를 호출하는 것처럼 클래스명을 불러와주면 된다. 여러 개의 속성을 가져오려면 백틱(``)을 사용해 감싸준다. 개발자 도구에서 클래스가 적용된 것을 보면 hash 값이 붙은 고유한 값이 부여된 것을 알 수 있다. 따라서 클래스명이 같더라도 덮어씌워지지 않는다. 2. proptype React에 내장된 타입 검사 기능이다. 타입 선언의 장점은 타입 정보를 정의해 둠으로써 다른 사람이 코드를 봐도 컴포넌트 로..

[JS] 변수 호이스팅

1. 정의 인터프리터가 변수와 함수의 메모리 공간을 선언하기 전에 미리 할당하는 것을 의미한다. 쉽게 말해서 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징이다. console.log(a); //undefined var a = 1; // 에러가 나지않고 undefined가 나온다. 코드를 위에서 아래로 읽으면서 아직 나오지 않은 a를 불러오는데 에러가 나지 않는다. 이미 a라는 변수는 선언되었고, var a= 1 라인에 와서야 a 변수에 1을 할당하는 것이다. 2. 소스코드 '이미 변수가 선언되었다'는 내용을 이해하기 위해 소스코드를 읽어오는 순서에 대해 알아보았다. 자바스크립트 엔진은 소스코드를 "소스코드의 평가"와 "소스코드의 실행" 과정으로 나누어 처리한다. 평가 과정에서..

[JS] HTMLCollection & NodeList

DOM 컬렉션 객체인 HTMLCollection과 NodeList는 DOM API가 여러 개의 결괏값을 반환하기 위한 DOM 컬렉션 객체이다. HTMLCollection과 NodeList는 모두 유사 배열 객체이면서 이터러블이다. 따라서 for... of 문으로 순회할 수 있으며 스프레드 문법을 사용하여 간단히 배열로 변환할 수 있다. 1. HTMLCollection HTMLCollection은 class, tag에 접근 가능하며 텍스트 노드에는 접근하지 못한다. getElementsByTagName, getElementsByClassName 메서드가 반환하는 HTMLCollection 객체는 노트 객체의 상태 변화를 실시간으로 반영하는 살아있는 DOM 컬렉션이다. '살아있다'라는 게 어떤 의미인지 생소..

[JS] 이터러블과 유사 배열 객체

DOM에서 요소를 취득할 때 HTMLCollection과 NodeList를 객체로 받는다. 객체인 이 두 가지 자료에서 for문 탐색이 되는 이유에 대해 궁금해서 찾아봤는데, 이를 이해하려면 '이터러블'과 '유사 배열 객체'에 대해서 알아야 한다. 이 글에서 선행지식을 공부하고 다음 글에서 HTMLCollection과 NodeList에 대해 써보려 한다. 1. 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 명세에 정의하여 미리 약속한 규칙이다. ES6 에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for... of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도..

[JS] var vs. let vs. const

1. var ES5까지 변수를 선언할 수 있는 방법은 var 키워드를 사용하는 방법뿐이었다. 하지만 ES6부터 let, const 키워드가 나오면서 var사용을 지양하게 되었는데, var는 어떤 기능을 하고 또 어떤 문제 때문에 지양하게 되었는지 알아본다. 변수의 중복 선언을 허용 var x =1; var y =1; var x = 100; var y;// 초기화문이 없는 변수의 중복 선언문은 무시된다. console.log(x);//100 console.log(y);//1 처음에 x와 y 변수가 선언되고 할당된 후, 중복 선언되었다. 이때 초기화문(변수 선언과 동시에 초기값을 할당하는 문) 유무에 따라 다르게 동작한다. 만약 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 중복 선언하면서 값까지 할..

[BEAKJOON / node.js] 16120 PPAP

https://www.acmicpc.net/problem/16120 // test.txt 'PPAPPAP' sol1 let P = require('fs').readFileSync('test.txt').toString().trim().split(''); function solution(P) { let stack = []; for(let i=0;i= 4) { if(stack[stack.length-1] === 'P') { if(stack.slice(-4).join('') === 'PPAP') { stack.splice(-4); stack.push('P'); } } } } return stack.length === 1 && stack[stack.length-1] === 'P' ? 'PPAP' : 'NP' } ..

[BEAKJOON / node.js] 11509 풍선 맞추기

https://www.acmicpc.net/problem/11509 // test.txt 5 4 5 2 1 4 sol1 - 시간 초과❌ let [N,...input] = require('fs').readFileSync('test.txt').toString().trim().split('\n'); function solution(N,input) { let arr = input[0].split(' ').map(Number); let answer = 0; while(Math.max(...arr) !== 0) { let top = Math.max(...arr); let topIndex = arr.indexOf(top); for(let i=topIndex+1;i0); let answer = 0; for(let i ..

[React] JSX

1. JSX의 정의 const element = Hello, world!; // String 도 아니고 HTML 도 아닌 애매하게 생겼다 JSX는 Javascript XML의 약어이다. 공식적인 javascript문법이 아닌 확장 문법이지만 javascript의 모든 기능이 함께 제공된다. JSX의 사용이 필수적이진 않지만 React 공식문서에서는 사용을 권장하고 있다. 그 이유로는 개발자가 javascript 코드 안에서 UI 관련 작업을 할 때 시각적으로 편하게 해 주며 오류 발생 시 React가 도움이 되는 에러나 오류 메시지를 표시해줄 수 있기 때문이다. function App() { return ( Hello react ); } //////////////////(Babel Compiler)///..