본문 바로가기

Front-End40

javascript 기초부시기 - 데이터 타입 - number 1. number 다른언어에서는 다양한 숫자타입이 존재하는 반면, 자바스크립트에서는 숫자관련 타입이 number와 bigint두가지입니다. (bigint는 추후 다루겠습니다.) 1.1 number타입의 최대값 최소값 number타입이 표현할 수 있는 최대값은 1.7976931348623157e+308이며, 반대로 최소값은 -1.7976931348623157e+308입니다. 1.2 2, 8, 16진수 처리 var integer = 10; // 정수 var double = 10.12; // 실수 var negative = -20; // 음의 정수 var binary = 0b01000001; // 2진수 var octal = 0o101; // 8진수 var hex = 0x41; // 16진수 // 표기법만 다.. 2022. 5. 11.
javascript 기초부시기 - 데이터 타입이란 1.데이터 타입이란 - 프로그래밍 언어에서 사용할 수 있는 데이터의 종류. 2. 데이터 타입의 종류 2.1 원시타입 - boolean - null - undefined - number - string - symbol 2.2 객체 타입 - object 3. 원시 타입 원시타입은 변경 불가능한 값이며, pass-by-value(값에 의한 전달)이다 라고 정의되어있다. let str = 'hello'; str = 'world' 3.1 변경 불가능값? 위의 코드를 실행하면 메모리에 문자열 hello가 생성되고, 식별자 str은 메모리에 생선된 문자열 'hello'의 메모리 주소를 가르킨다고 한다. 두번째 구문이 실행되면 'hello'를 수정하는것이 아니라, 새로운 문자열인 'world'를 메모리에 생성하고, 식.. 2022. 5. 11.
[NextJS] Viewport에 들어온 컴포넌트만 불러오기 NextJS에는 코드스플리팅을 위한 Dynamic import라는 기능이 있습니다. 어떤 컴포넌트를 특정 조건에서만 렌더링할때(모달 혹은 hover/ click시 노출되는 컴포넌트가 대표적) 그 컴포넌트를 위한JS를 해당 조건이 true일때 import해오는 기능입니다. 이 기능을 활용하지 않고, NextJS로 페이지를 구성하면 lighthouse의 퍼포먼스에서 처참한 점수를 보실 수도 있습니다. 아무튼 이 기능은 사용하기 어렵지 않지만, 섹션 하나하나가 모여 거대한 한페이지를 이루는 랜딩/이벤트 등의 페이지에서 단순하게 사용하면 퍼포먼스적인 이득을 보기가 힘듭니다. 그 이유는 viewport에 보이지 않는 컴포넌트도 전부 렌더링하기 때문인데, 이를 처리하기 위해서는 해당 컴포넌트가 viewport에 보.. 2022. 4. 17.
yarn berry로 workspace(monorepo) 구성하기 프로젝트를 진행하다보면 별도의 프로젝트라 생각하고, 서버, 프론트를 나누거나 프론트서버를 데스크탑, 모바일로 나눠 각자의 git repository를 만들어 관리하는 경우가 있습니다. 백엔드와 프론트는 사용 언어가 다를경우엔 공유할 코드가 없기 때문에 나누는게 여러모로 좋은점이 많지만, 백엔드 언어가 nodeJS라면 프론트도 특별한 경우가 아니면 자바스크립트로 이루어져 있기 때문에 프론트와 백엔드가 같은 언어를 사용하게 되고, 같은 언어를사용하면 validation이나 공통적으로 사용되는 함수들을 하나만 관리하여 사용할 필요가 있습니다. 이럴때 필요한것이 monorepo로 하나의 repository에서 2개이상의 프로젝트를 관리하는것입니다. 그럼 monorepo를 설정하기 위해 monorepo가 될 폴더.. 2021. 9. 20.