미미의 메모장

CSR Clinet Side Rendering 렌더링(=서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다.) 하는 주체자가 클라이언트(=브라우저) 어플리케이션에 필요한 HTML, 라이브러리 자체, 소스코드를 클라이언트 측에서 서버에서 받아서 클라이언트 측에서 DOM요소로 변환해서 브라우저에 표기하는 것. 장점? 한번 로딩 되면, 빠른 UX 제공 부분적으로만 가져오면 되니까 서버의 부하가 작은 단점? 페이지 로딩 시간(TTV)이 길다. TTV: time to view FCP (first contentful paint) 처음으로 의미있는 컨텐츠가 표기 될 때까지 오래 걸린다. 자바스크립트 활성화가 필수 SEO 최적화가 힘듬(CSR방식은 서버에서 받아오는 HTML파일이 거의 빈 파일이기 때문에 검색..

개념정리 웹 어플리케이션을 만들기 위해서 사용할 수 있는 React Framework이다. React란 UI를 만들기 위해서 컴포넌트 단위로 손쉽게 만들어 나갈 수 있는 JavaScript library이다. - 웹, 모바일 앱을 손쉽게 만들 수 있게 해줌. Library란? 무언갈 만들기 위해 유용한 툴 같은 개념. 특정한 문제를 해결하기 위한 솔루션을 제공해준다. React로 만든 어플리케이션은 SPA로 간주한다. SPA: Single Page Application 하나의 페이지 어플리케이션 내에서 필요한 부분만 즉각적으로 업데이트 해준다. CSR: Client Side Rendering Framework란? 아주 작은 단위의 문제를 해결하는 것이 아니라, 큰 단위의 솔루션을 제공해준다. 골격을 제공..

Set 배열과의 차이점 셋은 중복을 허용하지 않는다. 셋은 인덱스의 개념이 없다 셋은 키와 값이 같다 이러한 차이점으로 인해 셋은 주로 중복을 제거하거나 값의 유무만을 판단해야 하는 경우에 사용. 반대로 특정 요소에 접근 해야하는 경우나, 기타 인덱스가 필요한 상황에는 배열 사용. const arr = [1,2,3,3,3,4,5]; const aSet = new Set(arr); console.log(aSet); // set 객체를 배열 형태로 저장해야 정상적으로 데이터가 출력 var uniqueArrayOne = [...aSet]; // [1,2,3,4] //add() aSet.add(3); //중복되는건 추가되지 않는다 aSet.add(89); console.log(aSet); var setArr =..

함수는 객체이기 때문에 반환 값으로 사용될 수 있다. 즉 함수의 실행 결과로 꼭 어떤 데이터 값이나 배열을 반환할 필요는 없다는 뜻이다. 보다 특화된 함수를 반환할수도 있고, 입력 밧에 따라 필요한 함수를 새로 만들어낼 수도 있다. var setup = function () { alert(1); return function () { alert(2); }; }; //setup 함수를 사용 var my = setup(); // alert으로 1이 출력된다. my(); // alert으로 2가 출력된다. setup()은 반환된 함수를 감싸고 있기 때문에 클로저를 생성한다. 클로저는 반환되는 함수에서는 접근할 수 있지만 코드 외부에서는 접근할 수 없기 때문에, 비공개 데이터 저장을 위해 사용할 수 있다. 매번 ..

uname 시스템 정보 출력 uname –a : 모든 시스템 정보 출력 uname –s : 커널 이름 출력 uname –n : 네트워크 호스트 네임 출력 uname –r : 커널의 릴리스 버전 출력 uname –v : 커널의 버전 출력 uname –m : 시스템의 하드웨어 아키텍처 출력 uname –p : 프로세서 타입(종류) 출력 uname –i : 하드웨어 플랫폼 정보 출력 uname –o : 운영체제 이름 출력 Linux SONMR-PC 4.4.0-19041-Microsoft #1237-Microsoft Sat Sep 11 14:32:00 PST 2021 x86_64 x86_64 x86_64 GNU/Linux history 이전에 실행했던 명령어 목록을 일련번호와 함께 출력 history n : n..

ls(list) 디렉토리내 파일 목록 나열 ls: 현재 디렉토리 파일 목록 ls /app/views: /app/views 아래 디렉토리 조회 ls -a: (all)숨김 파일 포함 파일 목록 조회 ls -l : (long)자세히 보기(권한 확인) 파일(-), 디렉토리(d)를 구분 ls -al /home/: 출력하고 싶은 디렉토리를 지정할 수 있다 ls *.exe: 확장자가 exe인 목록 보여줌 ls –l /app/views/*.html: /app/views 아래 확장자가 html인 목록 자세히 조회 -r : (reverse)거꾸로 출력한다 -R : (recursive) 하위 디렉토리까지 출력한다 -S : (size) 파일 크기 순으로 정렬하여 출력한다. -h : (human) K,M,G 단위를 사용하여 파..

expressions {{ 값 }} directive : HTML 에게 새로운 동작을 알려주는 방법이다. ng-app : body 요소가 Angular 어플리케이션에 포함되어 있다고 알려준다. html나 body태그에 사용하고 파라미터는 어플리케이션의 이름으로 모듈에서 사용한 이름과 일치해야 한다. ng-controller: 해당 요소의 스코프를 컨트롤러에 할당한다. app.js var app = angular.module('app', []); app.controller('MainCtrl', function($scope){ $scope.message='world'; } index.html Hello.{{message}} *ng-내장디렉티브 ng-show : 표현식이 true 일때만 해당 요소를 보여준다...

브라우저 window 객체에 의해 제공되는 타임아웃 메서드들인 setTimeout()과 setInterval()은 콜백 패턴의 예를 보여준다. var thePlotThickens = function () { console.log('500ms later..') }; setTimeout(thePlotTinckens, 500); thePlotThickens가 괄호 없이 변수로 전달된 점에 주의하자. setTimeout()이 나중에 호출할 수 있도록 함수를 가리키는 포인터만을 전달하고 있다.

class = object 뽑는 기계 구 버전) function 기계(){ this.q='riri'; this.w='roro'; } var nunu = new 기계(); // object 생성하는 한 줄 컷 *여기서 this란 기계로부터 생성되는 object를 뜻한다 (=instance) 2016년 이후 신 버전) class Hero{ // class 이름은 대문자로 작명, 부모 역할 constructor(){ this.q='구멍'; this.w='snowball'; } } var nunu = new Hero() // 자식 object

브라우저: 자바스크립트 실행해주는 엔진들임 stack : 코드 실행해주는 곳, 하나 임. 자바스크립트는 single threaded. 한 번에 하나 실행. 대기실: 이벤트리스너, ajax, setTimeout 같은 코드들은 대기실에 보낸다. Queue : stack이 비어졌을 때, 대기 끝난 코드1, 대기 끝난 코드2..를 하나씩 stack으로 올린다.