728x90 반응형 전체 글145 React Virtual DOM이란? DOM이란? 브라우저는 화면을 그리기 위해서 DOM(Document Object Model)이라는 개념을 사용한다. DOM은 HTML 파일 내용을 토대로 만들어지는데, JavaScript와 같은 언어로 수정할 수 있도록 만들어진 웹 페이지의 객체 지향 표현이다. DOM은 브라우저가 화면을 그리기 위해 필요한 정보가 트리 형태로 저장된 데이터다. DOM이 제공하는 API를 통해 DOM 구조에 접근하고, 원하는대로 변경할 수 있다. 이를 DOM 조작이라고 한다. Virtual DOM이란? React에서 Virtual DOM은 실제 DOM 내용에 기반하여 만들어진다. 실제 DOM과 같은 내용을 담고 있는 복사본이라고 생각하면 되는데 이 복사본은 실제 DOM이 아닌 JavaScript 객체 형태로 메모리 안에 .. 2023. 2. 8. [자바스크립트] filter는 빈 값("", null, undefined)을 자동으로 제거해준다. filter를 사용하면 빈 값("", null, undefined)을 자동으로 제거해준다. let array = [1,2, "", 3, undefined, 4, null]; array.filter((el) => el); // [1,2,3,4] 2023. 2. 8. [tailwind css] 동적으로 클래스 할당하는 법 문제 상황 클릭할 때마다 progress바의 progress의 width가 20%씩 증가되는 UI를 구현하고 싶었다. 그래서 처음에 구현했던 코드는 아래와 같다. 여기서 key는 0 ~ 4(스킬의 개수)까지의 값이다. 아무튼 이렇게 동적으로 width가 계산되어 tailwindcss가 정상적으로 적용이 된다고 생각했지만 그게 아니였다. progress가 60%인 경우에는 적용이 됐다 안됐다 하는 문제가 있었다.. 클릭 해결 방법 1. 문제를 구글링해보니 tailwind css에서 동적으로 값을 할당할 때 생기는 문제였고, 나와 비슷한 문제를 겪은 분이 있었다. Next.js and Tailwind can't use template string for applying classes problem 나처럼 화.. 2023. 2. 8. [프로그래머스] Lv2. 해시 - 위장 문제 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 종류이름 얼굴 동그란 안경, 검정 선글라스 상의 파란색 티셔츠 하의 청바지 겉옷 긴 코트 스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요. 제한사항 clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다. 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다. 같은 이름을 가진 의상은 존재하지 않습니다. clothes의 .. 2023. 2. 7. [자바스크립트] switch문 언제 사용할까? 논리적 참, 거짓(Boolean 값) 보다는 다양한 상황에 따라 실행할 코드 블록을 결정할 때 사용한다. 기본 구조 switch(조건식) { case 비교조건식1: 동작문1; break; case 비교조건식2: 동작문2; break; default: 동작문3; } 만약 일치하는 case 값이 없다면, 마지막 default로 선언된 명령문이 실행된다. 동작 방식 조건식과 비교조건식이 같으면 동작문을 실행한다. switch (조건식) { case 비교조건식: 동작문; break; } 보통 조건식에 변수 넣고, 비교 조건식에는 변수와 비교할 값을 넣는다. let value = 'A'; switch (value) { case 'A': console.log('A'); } if문의 else 처럼 사.. 2023. 2. 7. Promise를 사용할 때 .catch로 에러를 처리하는 것이 .then의 두 번째 인자로 에러를 처리하는 것보다 더 효율적인 이유 의문점이 생긴 이유 Promise가 에러를 처리하는 방법은 2가지가 있다. 1. .then()의 두 번째 인자로 에러를 처리하는 방법 2. .catch()를 이용하는 방법 둘 중에 어떤 방법이 더 효율적일까? 라는 궁금점이 생겨 작성해보았다. 예제 코드와 콘솔창 확인 1. .then()의 두 번째 인자로 에러를 처리하는 경우** function getData() { return new Promise(function(resolve, reject) { resolve('hi'); }); } getData().then(function(result) { console.log(result); throw new Error("Error in then()"); // Uncaught (in promise) Error: E.. 2023. 2. 7. 협업을 위한 .prettierrc 파일 만들기 팀 프로젝트를 진행하면서 코드 스타일을 통일하기 위해 .prettierrc 파일을 만들어서 관리했다. 이 과정을 작성해보려고 한다. 설치순서 1. 프로젝트 루트 폴더 위치에서 터미널에 npm i -D prettier eslint-config-prettier 명령어를 입력하여 패키지를 설치한다. eslint-config-prettier 패키지는 Prettier와 충돌하는 ESLint 규칙들을 비활성화 시켜준다. 2. 그리고 .prettierrc 파일을 프로젝트 최상단에 만든다. 3. 원하는 설정을 입력한다. 추가적으로 필요한 설정들은 Prettier Options를 참고하면 된다. // .prettierrc { "singleQuote": true, "printWidth": 100, "tabWidth": 2.. 2023. 2. 6. [자바스크립트-배열] 모든 값을 0으로 가지는 배열 만들기 Array.from()을 사용하면 원하는 길이의 값을 모두 0으로 만들 수 있다. let test = Array.from({length: 5}, () => 0); console.log(test); / [0, 0, 0, 0, 0] 참고자료 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from 2023. 2. 3. [자바스크립트] 재귀함수와 스택 프레임(Stack Frame) 알고리즘을 풀다보면 항상 나를 괴롭혔던 재귀함수! 이제는 정말 쉽게 풀어보고 싶은 마음에 재귀함수 문제를 연습하다가 스택 프레임에 대해 여지까지 제대로 알지 못했다는 내 자신을 발견하고 정리를 해두려고 한다. 스택 프레임(Stack Frame) 스택 영역: 함수의 호출과 관계되는 지역 변수, 매개 변수가 저장되는 영역이다. 함수가 호출되면서 할당되고, 함수가 종료되면 소멸된다. 스택 프레임: 함수가 호출되면 스택에 함수의 지역 변수, 매개 변수, 복귀 주소 등이 입력된다. 스택 영역에 저장되는 함수의 정보가 스택 프레임이다. 예제 간단한 재귀함수를 이용한 예제를 가져왔다. function solution(n) { function DFS(L) { if (L === 0) return; else { DFS(L.. 2023. 2. 3. Airbnb 컨벤션에 따라 ESLint 설정하기 설치 순서 1. npx install-peerdeps --dev eslint-config-airbnb peerdeps 명령어를 사용함으로써 airbnb 설치시 필수 플러그인들이 설치된다. 2. eslint-config-airbnb를 사용하기 위한 dependencies를 확인해보고, 이를 다운로드 한다. npm info "eslint-config-airbnb@latest" peerDependencies 3.그리고 typescript를 적용시켜주기 위해 npm install -D eslint-config-airbnb-typescript 한다. 4. .eslintrc.js 파일에 설치한 airbnb JS style을 적용하기 위해 아래의 코드를 추가해준다. extends: [ 'airbnb', // ... .. 2023. 2. 2. 이전 1 ··· 11 12 13 14 15 다음 728x90 반응형
