분류 전체보기 380

[HUFS/GnuVil] #9 함수와 일급 객체

함수와 일급 객체 다음 조건을 만족하는 객체를 일급 객체라고 한다 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다 변수나 자료구조(객체, 배열 등)에 저장할 수 있다 함수의 매개변수에 전달할 수 있다 함수의 반환 값으로 사용할 수 있다 // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 객체에 저장할 수 있다. const auxs = { increase, dec..

[TIL] Vite 환경에서 SVG 컴포넌트로 사용하기

Vite 환경에서 바로 SVG 파일을 ReactComponent로 사용하려 한다면 오류가 발생할 것이다 vite-plugin-svgr 패키지를 사용하면 된다🔽 vite-plugin-svgr Vite plugin to transform SVGs into React components. Latest version: 2.2.1, last published: 3 months ago. Start using vite-plugin-svgr in your project by running `npm i vite-plugin-svgr`. There are 35 other projects in the npm registry using vite-plugin-sv www.npmjs.com 터미널로 패키지를 설치해주자 yarn ..

Front-end/React 2022.10.11

[HUFS/정보보안] #3 네트워크 보안

네트워크의 계층 물리 계층: 실제로 컴퓨터와 연결하는 케이블 등의 물리적 연결 (CAT 6) 데이터 링크 계층: 두 포인트간 신뢰성 있는 전송을 보장 (MAC 주소, ip 주소) 네트워크 계층: 데이터의 위치 이동에 관련된 계층 (공인 ip / 사설 ip) 전송 계층: 데이터의 전송 방법에 관련된 계층 (TCP/UDP, 포트 번호 관리 등) TCP: 연결 지향형, 데이터 흐름 제어(순서 보장), 에러 제어 UDP: 빠르다는 것 외에는 큰 장점이 없어 화상 회의 서비스 등에만 사용 서비스 거부(DoS) 공격 TCP는 패킷의 순서 확인 ~ 손실 패킷 확인 ~ 재전송 요구 순으로 동작한다 Boink, Bonk, TearDrop 등 취약점 공격형은 시퀀스 번호를 속여 반복적으로 재요청해 시스템 자원을 고갈시키는..

[HUFS/GnuVil] #8 프로퍼티 어트리뷰트, 생성자 함수에 의한 객체 생성

프로퍼티 어트리뷰트 내부 슬롯과 내부 메서드란 JS 엔진의 구현 알고리즘을 설명하기 위해 사용되는 의사(pseudo) 프로퍼티와 의사(pseudo) 메서드이다. ES 사양에서 이중 대괄호([[…]])로 감싼 이름들이 그것이다 const o = {}; // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다. o.[[Prototype]] // -> Uncaught SyntaxError: Unexpected token '[' // 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. o.__proto__ // -> Object.prototype 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지며, 이는 __proto__를 통해 간접적으로..

[HUFS/GnuVil] #7 전역변수의 문제점, 블록 레벨 스코프

전역변수의 문제점 var x = 'global'; function foo() { console.log(x); // ① var x = 'local'; } foo(); console.log(x); // global 전역변수의 생명주기는 전역객체의 생명주기와 일치한다 전역변수는 다음과 같은 문제점들이 있다 암묵적 결합: 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합(implicit coupling)을 허용하며, 유효 범위가 클수록 가독성이 나빠지고 의도치 않은 상태 변경의 위험도 커진다 긴 생명 주기: 긴 생명 주기동안 메모리 리소스를 오래 소비하며 그동안 의도치 않은 재할당이 이루어질 수 있다 스코프 체인 상에서 종점에 존재: 변수를 검색할 때, 전역 변수가 가장 마지막에 위치해 검색 속도가..

[HUFS/GnuVil] #6 실행 컨텍스트, 스코프

실행 컨텍스트 실행 컨텍스트는 식별자(변수, 함수, 클래스..)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 실행 컨텍스트(Execution Context)를 통해 실행되고 관리된다 실행 컨텍스트는 코드 실행 순서를 스택(Stack) 자료구조로 관리한다 const x = 1; function foo () { const y = 2; function bar () { const z = 3; console.log(x + y + z); } bar(); } foo(); // 6 식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조는 렉시컬(Lexical) 환경으로 관리한다 렉시컬 환경은 함수를 어디서 호출했는지가 아닌, 어디에 정의했는지에 따라 상위 스코프를 결정한..

[wanted] #0 CSR / SSR with Next.js 사전 과제

1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. SPA(Single Page Application)란 하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션이며, MPA(Multiple Page Application)란 사용자가 페이지를 요청할 때마다 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션이다 CSR(Client-side Rendering)이란 브라우저가 서버에 HTML과 JS 파일을 요청하고 최초 로딩 이후, 사용자의 상호작용에 따라 JS를 이용해 화면을 동적으로 그리는 방식이며, SSR(Server-side Rendering)이란 브라우저..

Front-end/Next.js 2022.09.28