양씨

보일러 플레이트(boilerplate code), 보일러 플레이트 코드라고 불리는 보일러 플레이트는 내용은 알지만 단어를 들었을 때 바로 떠오르지 않아 글로 남기려 한다 리액트에서만 아니라 프로그래밍적 의미에서 보일러 플레이트는 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다 이는 시간을 절약하고 프로젝트의 여러 부분이나 여러 프로젝트 간에 일관성을 보장하기 위해 새로운 애플리케이션이나 기능의 기반으로 자주 사용된다. 보일러 플레이트에는 기본 코드 프레임워크, 템플릿, 구성부터 일반적인 작업을 처리하는 광범위한 라이브러리 및 모듈에 이르기까지 모든 것이 포함될 수 있다 대표적으로 리액트에서는 create-react-app을 예시가 있다 cra를 사용하면 바벨이나 웹..

사실 내용적으로는 아는 내용인데 props drilling이란 단어를 들을 때마다 이게 뭐였지란 생각이 계속 들어 정리해보려한다 Props Drilling props drilling이란 react 컴포넌트 트리에서 props를 통해 데이터를 전달할 때 중간 컴포넌트는 그 데이터가 필요하지 않음에도 하위 컴포넌트에게 데이터를 전달하기 위해 props를 전달해야하는 과정이다 장점 장점이라고 말하긴 애매하지만 데이터를 가장 쉽고 빠르게 전달할 수 있다 정적으로 따라가기만 해도 어떤 데이터가 어디서 사용되는지 쉽게 파악 가능하다 단점 규모가 커지고, 컴포넌트가 많아지면 너무 복잡해진다 props 의 이름이 중간에 변경된 것을 추적하기 쉽지않다 많은 props를 전달하다가 필요없는 props가 계속 남거나 전달될..

아래 예시와 같이 자바스크립트에서 중첩으로 반복문을 돌릴 때 한번에 빠져 나올수 있는 방법은 무엇일까 for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { // 여기 } } label(레이블) 반복문 앞에 붙혀서 사용할 수 있으며 중첩 반복문을 빠져 나갈 수 있다 반드시 break와 continue 앞에 있어야 하며 break는 모든 레이블 구문에서 사용 가능 continue는 반복문 안에서만 사용 가능하다 label 이름: 구문 label을 이용해 중첩반복문 빠져 나오기 continue loop1: for (let i = 0; i < 3; i++) { loop2: for (let j = 0; j < 3; j++) { if (i === 1 && j =..

문제 월드초등학교 학생회장 후보는 일정 기간 동안 전체 학생의 추천에 의하여 정해진 수만큼 선정된다. 그래서 학교 홈페이지에 추천받은 학생의 사진을 게시할 수 있는 사진틀을 후보의 수만큼 만들었다. 추천받은 학생의 사진을 사진틀에 게시하고 추천받은 횟수를 표시하는 규칙은 다음과 같다. 학생들이 추천을 시작하기 전에 모든 사진틀은 비어있다. 어떤 학생이 특정 학생을 추천하면, 추천받은 학생의 사진이 반드시 사진틀에 게시되어야 한다. 비어있는 사진틀이 없는 경우에는 현재까지 추천 받은 횟수가 가장 적은 학생의 사진을 삭제하고, 그 자리에 새롭게 추천받은 학생의 사진을 게시한다. 이때, 현재까지 추천 받은 횟수가 가장 적은 학생이 두 명 이상일 경우에는 그러한 학생들 중 게시된 지 가장 오래된 사진을 삭제한다..

?? 라는 연산자가 있었다! (마주친적이 거의 없어서 몰랐던..) ??는 병합연산자, nulllish 라고 불리우고 여러 피연산자 중에서 확정되어 있는 변수를 찾을 수 있다 a ?? b 다음과 같이 있을 때 a가 null도 아니고 undefined도 아니면 a, 그 외의 경우는 b이다 (a !== null && a !== undefined) ? a : b; 삼항연산자로 표현하자면 위 코드와 같은 뜻이다 ?? 과 || 의 차이 스쳐가듯 보면 or 연산자와 굉장히 유사해보인다. 그러나 이 둘은 다른 연산자다 ||는 첫번째 truthy 값을 반환 ??는 첫번째 정의된 값을 반환 let a = 0; console.log(a || 100); // a는 falsy로 판단되어 100 console.log(a ?? 1..

먼저, const란 자바스크립트에서 흔히 '상수'라고한다 재할당이 안되기때문에 변화하지 않는 변수를 사용할 때 쓰이기 때문이다 const name = 'yang'; // yang // name = 20; // error console.log(name) 그런데 실제로 입문단계에서 const를 사용하다보면 어?? const는 재할당이 안되는걸로 아는데 왜 이러는거지라고 생각되는 경우가 있다 아래와 같이 말이다 const obj = { name: 'yang' }; obj.name = 'new yang'; // new yang const arr = [1, 2, 3]; arr.push(4); // [1,2,3,4] 아니 const는 변화하지 않는 변수를 저장하려 사용하는데 분명히 변경이 된다 이는, 자바스크립트에..

SCSS는 Sass의 3버전에서 나온 css 구묵과 완전히 호환되도록 만든 Sass의 모든 기능을 지원하는 상위집합이다 그래서 말만 다르지 둘은 같다(거의?) 둘이 문법이 살짝? 다른 것들이 있을뿐.. 가장 큰 차이는 중괄호와 세미콜론의 차이이다 (아래 사진 왼쪽이 SCSS, 오른쪽이 Sass) 이처럼 살짝 문법이 다른부분이 있다 Sass: 좀 더 간결하며 코드가 깔끔해짐 SCSS: 한줄작성이 가능하며 css와 유사한 문법이기 때문에 코드 통합이 쉽다 취향차이이지만 보통 SCSS를 많이 사용하긴한다

웹의 규모가 커지다 보면 css로만 작업하는게 힘든경우가 많은데 이때 css 전처리기를 사용하곤한다. css 전처리기란? css는 매우 원시적인 언어로 웹에서는 표준 css만 동작을 한다. 따라서 사람들은 css에 변수, 함수등을 쉽게 사용하기 위해 전처리기를 이용한다 대표적으로 Sass, less, postcss 등이 있으며, 전처리기로 작성하고 css로 컴파일하여 css 포맷으로 변환한다 결국, Sass는 css 전처리기 중 하나이고 Sass를 통해 작성하고 이를 css로 컴파일하여 이용한며 css에 프로그래밍적 요소를 쉽게 사용하기 위해서 사용하는 것이다 Sass 컴파일방법 앞서 말했듯이 웹은 표준 css만 이해하기 때문에 Sass를 사용하려면 css로 컴파일을 해줘야한다 그럼 컴파일을 어떻게 시킬..

거의 모든 프로그래밍 언어에서 + 는 2개의 피연산자가 있을 때, 그 둘의 합한 결과를 반환한다 js에서는 + 를 단항연산자로도 사용할 수 있는데 이는 Number()과 같은 역할을 한다 let a = -2; console.log( +a ); // -2 console.log( +true ); // 1 console.log( +"" ); // 0 아래와 같이 응용 가능하다 let apples = "2"; let oranges = "3"; console.log( +apples + +oranges ); // 5 단항 연산자일 경우 말고 2개 이상의 피연산자가 있을 경우에는 문자열로 변환된다 console.log( '1' + 2 ); // "12" console.log( 2 + '1' ); // "21"

js는 ==, === 2개의 동등 비교 연산자가 있다 == : 동등연산자 === : 엄격한 일치연산자 로 부른다 다음과 같이 ==는 값만 같으면 true, ===는 값과 데이터 타입까지 같아야 true를 반환한다 console.log('1' == 1) //true console.log('1' === 1) //false console.log(null == undefined) // true console.log(null === undefined) // false console.log(0 == "") // true, 빈문자열과 0은 false이기 때문 console.log(0 === "") // false, 위와 같지만 데이터 타입이 다름 배열과 객체의 경우에는 어느경우에도 해당하지 않는다 왜냐하면 배열이나 ..