note

[CSS] transfrom 스타일이 적용된 요소의 자식요소에서 position: fixed가 적용되지 않는 이유

position: fixed 와 transform transfrom 스타일이 적용된 요소의 자식요소에서 position: fixed를 적용시키면 의도한대로 동작하지 않는 것을 볼 수 있다. 보통 뷰포트를 기준으로 요소를 위치시키기 위해 fixed를 사용하지만, transfrom이 적용된 요소의 내부에서는 transfrom 요소를 기준으로 배치가 되게 된다. 이유를 w3 공식문서에서 확인할 수 있었다. For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for..

[Next.js] Dynamic Imports

Next.js에서의 Lazy Loading Lazy Loading은 애플리케이션에서 요구되는 리소스를 필요할 때만 로드해서 로딩 속도를 개선하고 사용자 경험을 향상시키는 전략이다. Next.js 에서 Lazy Loading 을 적용하는 방법으로는 두 가지가 있다. 1. Dynamic Imports 2. React.lazy()와 Suspense React.lazy()와 Suspense React.lazy()는 React에서 제공하는 내장 기능으로 코드를 분할하여 필요한 시점에 비동기적으로 로드할 수 있도록 한다. 이와 함께 Suspense는 lazy 컴포넌트가 로드 되는 동안 대체해서 보여줄 요소를 지정할 수 있다. React 프로젝트 시 React Router 라이브러리와 함께 사용해서 페이지 전환 로딩..

[Next.js] import 경로에 @별칭 사용하기

import 절대 경로 & 경로 별칭 next.js 프로젝트 시 tsconfig.json 옵션을 통해 경로를 별칭으로 지정하여 가독성을 높일 수 있다. import 절대 경로 // tsconfig.json / jsconfig.json { "compilerOptions": { "baseUrl": "./src" } } tsconfig.json 또는 jsconfig.json 파일에서 baseUrl 옵션에 절대경로로 가져올 경로를 작성한다. [ic]"baseUrl":"./src"[/ic] 작성 시 아래와 같이 import 경로를 사용할 수 있다. import 경로 별칭 // tsconfig.json / jsconfig.json { "compilerOptions": { "paths": { "@/*": ["./sr..

Node.js로 CRA 시 기본 파일과 폴더 한 번에 세팅하기

리액트를 공부하면서 CRA 때마다 반복적으로 기본 파일을 생성하거나 폴더링 작업을 하는 것이 시간이 아깝다는 생각이 들었다. 매 번 component 구조나 파일이 바뀌었기 때문에 파일을 복사 붙여넣기도 애매했는데, 이 작업들을 Node.js의 file system을 이용해서 자동화를 해보았다. file system 모듈 import Node.js에 내장되어있는 파일시스템을 불러온다. const fs = require('fs'); 디렉토리 세팅 생성할 디렉토리 경로를 array에 담아 작성해준다. const arrDirectory = [ 'src/apis', 'src/components/Shared/BtnLike', 'src/components/Shared/NotFound', 'src/components..

[Deep Dive] 42장 비동기 프로그래밍

동기 처리와 비동기 처리 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생한다. 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기 처리라고 한다. setTimeout 함수는 일정 시간이 경과한 이후에 콜백 함수를 호출하지만 setTimeout 이후의 태스크를 블로킹하지 않고 곧바로 실행한다. 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기 처리라고 한다. setTimeout과 setInterval, HTTP요청, 이벤트 핸들러는 비동기 처리 방..

[Deep Dive] 22장 this

this 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 함수를 호출할 때 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. // 전역에서 this → 전역 객체 window를 가리킨다. console.log(this); //window // 일반 함수 내부의 this → 전역 객체 window를 가리킨다. function test() { console.log(this); // window } // stric mode가 적용된 일반 함수 내부의 ..

[Deep Dive] 16장 프로퍼티 어트리뷰트

16장 프로퍼티 어트리뷰트 내부 슬롯과 내부 메서드 이중 대괄호([[...]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. const o = {}; // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다. o.[[Prototype]] // Uncaught StyntaxError: Unexpected token '[' // 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. o.__proto__ // Object.prototype 작성일 기준 Object.pro..

[JavaScript] 쉼표 연산자 (Comma Operator)

쉼표 연산자란 MDN에서는 다음과 같이 정의한다. 쉼표 연산자는 각 피연산자를 왼쪽에서 오른쪽으로 평가하고 마지막 피연산자의 값을 반환한다. 쉼표 연산자는 주로 여러 동작을 하나의 줄에서 처리하려는 복잡한 구조에서 활용할 수 있다. 연산자 우선순위에서 가장 낮은 순위를 가지기때문에 먼저 수행하기 위해서는 괄호를 사용해야 한다. let x, y, z; x = 1, y = 2, z = 3; // 3 console.log(x); // 1 let a, b, c; a = (b = 5, c = 6); // 6 console.log(a); // 6 쉼표 연산자의 활용 for 문 const array = [ ['a', 'b', 'c'], ['d', 'e', 'f'], ['g', 'h', 'i'], ]; for (let..

[Deep Dive] 14-15장

14장 전역 변수의 문제점 변수의 생명 주기 지역 변수의 생명 주기 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 하지만 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. 즉, 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다. 지역 변수가 함수보다 오래 생존하는 경우도 있다. 누군가 스코프를 참조하고 있으면 스코프는 소멸하지 않고 생존하게 된다. 지역 변수는 함수가 생성한 스코프에 등록된다. 따라서 변수는 자신이 등록된 스코프가 소멸(메모리 해제)될 때까지 유효하다. 또한 호이스팅은 스코프를 단위로 동작하며, 호이스팅은 변수 선언이 스코프의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 말한다고 할 수 있다. 전역 변수의 생명 주기 브..

[Deep Dive] 12-13장

12장 함수 함수란? 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 입력을 받아서 출력을 내보내는 일련의 과정이라고도 할 수있다. 이때 함수 내부로 입력을 전달받는 변수를 매개 변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라 한다. 함수를 사용하는 이유 코드의 재사용 : 함수는 필요할 때 여러 번 호출할 수 있다 .즉 실행 시점을 개발자가 결정할 수 있고 몇 번이든 재사용이 가능하다. 코드의 신뢰성 : 코드의 중복을 억제하고 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 코드의 신뢰성을 높이는 효과가 있다. 코드의 가독성 : 적절한 함수 이름은 함수의 내부 코드를 이해하지 않고도 함수의 역할을 파악..