개발 기록기록📝

값 값은 식(표현식)이 평가되어 생성된 결과를 말한다. var sum = 10 + 20; //변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다. sum 변수에 할당되는 것인 10+20이 아닌 30으로 10+20은 할당 이전에 평가되어 값을 생성해야 한다. 값을 생성하는 기본적인 방법은 리터럴을 사용하는 것이다. 리터럴 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법이다. 자바스크립트 엔진은 코드가 실행되는 런타임에 리터럴을 평가해 값을 생성한다. 표현식 값으로 평가될 수 있는 문이다. 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다. var score = 100; 위 예제의 100은 리터럴이다. 리터럴 100은 자바스크립트 엔진에 의해 평..

변수 하나의 값을 저장하기 위한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 메모리란? 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이다. 메모리 셀 하나의 크기는 1바이트(8비트)이며 컴퓨터는 1바이트 단위로 데이터를 저장하거나 읽어 들인다. 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. => 개발자는 직접 메모리 주소를 통해 값을 저장, 참조할 필요 없이 변수를 통해 안전하게 값에 접근할 수 있다. 변수 선언 변수를 생성하는 것으로 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다. 다음의 2단계에 거쳐 수행된다. 선언 단계 : 변수 이름을 등록해서..

우분투 18.04에서 npm install 좀 해보려는데 permission denied 에러 발생 해결 방법 sudo chown -R (권한 줄 계정) (권한 줄 경로) 예시 sudo chown -R chouchou /home/chouchou

데이터 타입(줄여서 타입)은 값의 종류를 말한다. 자바스크립트의 모든 값은 타입을 갖는다. 총 7개의 타입이 있다. 구분 데이터 타입 설명 원시 타입 숫자 타입 64비트 부동 소수점으료 표기하는 하나의 타입만 존재 문자열 타입 문자열 변경불가능한 값(immutable) 불리언 타입 논리적 참 또는 거짓 undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 대 사용하는 값 심벌 타입 ES6에서 추가된 7번째 타입 객체 타입 객체, 함수, 배열 등 1. 숫자 타입 모든 숫자는 배정밀도 64비트 부동소수점 형식의 2진수로 저장된다. 즉, 모든 수를 실수로 처리하며, 정수를 위한 데이터 타입이 별도로 존재하지 않는다. 정수로 표시되는 수끼..

대학생 때부터 나를 괴롭혔던 DP.. DP 뿌리를 뽑아버리자!! 아주 전형적인 DP의 대표적인 문제 0 - 1 냅색 문제이다. 문제 물건 A, B, C, D가 있고 각각의 value와 weight가 정의되어 있다. 가방에 최대로 넣을 수 있는 무게제한이 주어질 때 무게제한 안에서 최대한의 value로 물건을 가방에 담는 문제이다 다음과 같이 문제가 주어졌다고 하자. 무식하게 생각해볼까? 그냥 편하게 툭 생각해볼 수 있는 것은 Brute Force 방법이다. 각각의 물건을 담는다(T)와 담지 않는다(F)로 나뉠 수 있고 time complexity는 2^n 이다. 우리는 이것보다는 더 효율적으로 답을 구해내야만 한다..! DP를 적용할 수 있는 문제인지 여부는 다음을 판단해보면 된다. 더 작은 문제(sub..

AG Grid JavaScript 기반으로 그리드를 손쉽게 그려주는 라이브러리입니다. react, vue, angular를 모두 지원하고, 복잡한 그리드를 비교적 쉽게 그릴 수 있게 도와줍니다. AG Grid사용해보기 다음의 명령어로 ag-grid 디펜던시를 설치합니다. npm install --save ag-grid-community npm install --save ag-grid-react package.json에서 디펜던시가 설치된 모습을 확인할 수 있습니다. "dependencies": { "ag-grid-community": "29.0.0", "ag-grid-react": "29.0.0", ... ag-grid-community는 그리드 코어 로직이며 ag-grid-react는 리액트 렌더링 엔..

먼저 브라우저 렌더링 개념을 알아보겠습니다. Critical Rendering 또는 Path Pixel Pipeline이라는 과정을 통해 브라우저는 렌더링을 하게 되는데 DOM 트리 + CSSOM -> Render Tree -> Layout -> Paint -> Composite 단계로 이루어집니다. DOM 트리 + CSSOM 먼저 서버로부터 화면을 그릴 때 필요한 HTML, HTML, JS를 다운로드 받습니다. HTML과 CSS 로 DOM트리, CSS object model 2가지 데이터 형태를 만들고 DOM 트리와 CSSOM(css object model)을 조합하여 Render Tree를 만듭니다. Layout 요소의 위치나 크기를 계산합니다. 화면의 레이아웃을 잡는 과정입니다. Paint 색을 채..

bundle 파일 분석 JS 코드를 다운 받는데 용량이 너무 크다면 (990KB 사이즈를 크다고 보셨음) bundle analyzer 툴을 활용하여 JS 번들을 분석할 수 있습니다. 'cra bundle analyzer'를 검색하여 cra-bundle-analyzer를 설치해줍니다. 설치를 완료한 후, npx cra-bundle-analyzer 명렁어를 이용해서 analyzer를 실행합니다. 잠시 후 다음과 같이 창이 뜨면서 번들 파일에 어떤 파일들이 들어 있는지 보여줍니다. node_modules에 refractor가 약 485KB로 번들에서 꽤 큰 것을 알 수 있네요. refractor를 package-lock.json에서 살펴보니 react-syntax-highlighter에서 디펜덴시로 refra..

다음은 인프런에서 유동균님의 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat.React)- Part. 1을 완강하며 공부한 내용입니다. 웹 성능 최적화(=로딩 성능 최적화 & 렌더링 성능 최적화) 웹 성능 최적화는 크게 로딩 성능 최적화와 렌더링 성능 최적화로 구분할 수 있습니다. 로딩 성능 최적화는 클라이언트가 서버로부터 웹 페이지를 그리는데 필요한 리소스들을 다운 받는 로딩 시점에서의 성능을 최적화 하는 것입니다. 로딩 성능 최적화에는 이미지 사이즈 최적화, Code Splitting, 텍스트 압축 등이 있습니다. 렌더링 성능 최적화는 클라이언트 단의 브라우저에서 화면을 그릴 때의 성능을 최적화 하는 것을 말합니다. 렌더링 성능 최적화에는 BottleNeck 코드 최적화 등이 있습니다. 로딩..

Combination1 package step3_step2; import java.util.*; public class Combination1 { public static void main(String[] args) { int[] nums = {1,2,3,4}; //1. 조합(Combination) - visit 배열로 사용 여부 체크하는 방법 boolean[] visit1 = new boolean[nums.length]; combination1(nums, 4, 2, 0, visit1); System.out.println(); //2 조합(Combination) - 재귀 호출로 사용 여부 결정하는 방법 nCr //int[] ans1 = new int[2]; //combination2(nums, ans1 ..