프론트엔드

연산자연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다.이 때 연산의 대상을 피연산자(operand)라고 한다. 피연산자는 하나의 값으로 평가될 수 있는 표현식이어야 한다.피연산자와 연산자의 조합으로 이뤄진 연산자 표현식 또한 값으로 평가될 수 있는 표현식이어야 한다.// 산술 연산자5 * 4 // 20// 문자열 연결 연산자'My name is ' + 'Lee' // 'My name is Lee'// 할당 연산자color = 'red' // 'red'// 비교 연산자3 > 5 // false// 논리 연산자true && false // false// 타입 연산자typeof 'HI' // string 산술 연산자산술 연산자 피연산자를 대..

데이터 타입데이터 타입은 값의 종류를 말한다. 자바스크립트(ES6)의 모든 값은 데이터 타입을 가지며, 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 타입(primitive)과 객체 타입(object/reference)으로 분류한다. 숫자 타입C나 자바와 같은 경우 정수, 실수를 구분해서 int, long, float, double 등과 같은 다양한 숫자 타입을 제공하지만, 자바스크립트는 하나의 숫자 타입만 존재한다.숫자 타입의 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다.(배정밀도 64비트 부동소수점 형식)// 모두 숫자 타입var integer = 10; // 정수var double = 10.12; // 실수var negative = -20; /..

디바운스(Debounce)와 쓰로틀(Throttle)은 Javascript에서 특정 함수의 실행 빈도를 조절하는 기법으로 최적화 기법으로 사용해 본 경험이 있다. 디바운스(Debounce)이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다.즉, 순차적 호출을 하나의 그룹으로 '그룹화'할 수 있다.연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것이다.검색창에 '개발하는데 다 이유가 있지'를 검색하려고 한다. enter 없이 input 이벤트로 API 검색 요청이 된다고 가정한다.그러면 'ㄱ', '개', '갭', '바', '발',  ... 이런식으로 불필요한 API 요청이 많이 발생하게 된다. 글자가 어느정도 입력이 됐을 때 요청이 가도록 일정 시간동안 입력이 없을 때..

자바스크립트의 Promise 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 배열이나 객체처럼 독자적인 객체이다. 비동기 작업이 끝날 때까지 결과를 기다리는 것이 아니라, 결과를 제공하겠다는 '약속'을 반환한다는 의미에서 Promise라고 이름이 지어졌다. 사용 방법Promise 객체 생성Promise 객체를 생성하려면 new 키워드와 Promise 생성자 함수를 사용하면 된다. Promise 생성자 함수 안에 두 개의 매개변수를 가진 콜백 함수를 넣게 되는데, 첫번째 인자는 작업이 성공했을 때 성공(resolve)을 알리는 객체, 두번째 인자는 작업이 실패(reject)했을 때 실패를 알려주는 오류 객체이다.// Promise 생성자 안에 들어가는 콜백 함수를 executor라고 함const my..

reflow와 repaint는 웹 페이지가 렌더링 되는 과정에서 발생하는 작업들이다. reflowreflow는 브라우저가 페이지의 레이아웃을 다시 계산하는 과정을 말한다.DOM 구조가 변경되거나 CSS 스타일이 변경되면, 브라우저는 각 요소가 화면에 어떻게 배치될지 다시 계산을 해야한다.이 과정에서 모든 자식 요소와 관련된 부모 요소까지 영향을 주기 때문에 비용이 많이 소요되는 작업이다.너비(width)나 높이(height) 속성을 수정하게 되면, 브라우저는 해당 요소뿐만이 아니라 연관된 모든 요소의 배치를 다시 계산해야 한다. repaintrepaint는 요소의 모양이나 스타일이 변경될 때 발생한다. 요소의 레이아웃은 그대로이고, 색상이나 배경 등의 스타일만 변경되는 경우를 말한다.background-..

Intersection Observer란?기존 자바스크립트의 'scroll' 이벤트는 스크롤시 짧은 시간 내에 수 백, 수천의 이벤트를 동기적으로 실행될 수 있어 성능의 악영향을 끼쳤다.페이지 내의 다양한 요소(Lazy Loading, 무한 스크롤 등)의 이유로 'scroll' 이벤트를 리스닝하기 때문에 무수한 콜백함수가 실행될 수 있었다.위의 문제는 메인 쓰레드에 큰 부하를 줄 수 있다.또한 Intersection Observer는 reflow를 발생시키지 않는다.reflow, repaint에 대해서는 다음 번에 자세히 정리하도록 하겠다.Intersection Observer는 루트 요소와 타겟 요소의 교차점을 관찰(Observe)해 타켓과 루트 요소가 교차(Intersection)하는지 아닌지 구별하..

최근에 포트폴리오를 작성하면서 shadcn-ui를 처음 접해보게 됐는데 사용하기 무척 쉽고 좋았었다.shadcn/uishadcn/ui는 Vercel의 shadcn이 만든 UI 도구로, Radix UI(Primitives)와 Tailwind CSS라는 상당히 최신 기술을 기반으로 하는 Component Collection이다.전통적인 컴포넌트 라이브러리들을 번들된 소스 코드를 패키지 매니저를 통해 프로젝트 의존성(dependencies)에 추가해서 사용한다.shadcn/ui는 번들되지 않는 컴포넌트 소스 코드를 프로젝트 의존성에 추가하지 않고, 복사해서 붙여넣은 컴포넌트 코드를 사용할 수 있다. 설치 방식npx shadcn-ui@latest init- Would you like to use TypeScri..