dongree
PLATINUM 2안녕하세요. FE개발자를 희망하는 dongree입니다!
loading...
0
setInterval과 중첩 setTimeout은 일정 간격으로 작업을 실행하는 방법으로, setInterval은 단순하고 지연 간격을 보장하지 않지만 중첩 setTimeout은 유연하게 조절할 수 있으며 지연 간격을 보장한다. 주기적 작업을 처리할 때는 setInterval, 작업 완료 후 다음 작업이 필요한 경우나 유연한 실행 간격이 필요할 때는 중첩 setTimeout을 사용한다.
0개의 댓글
0개의 질문
loading...
0
Generic은 TypeScript에서 다양한 타입을 처리할 수 있도록 하는 방법으로, 구체적인 타입에 의존하지 않고 유연하게 여러 타입을 사용할 수 있는 코드를 작성할 수 있다. Generic을 활용하면 함수나 클래스의 선언 시점이 아닌 사용 시점에 타입이 결정되며, extends를 활용해 제약조건을 걸어 타입 안정성을 보장할 수 있다.
0개의 댓글
0개의 질문
loading...
0
우측 상단에서 좌측 하단으로 서서히 커지면서 나타나는 애니메이션을 구현하는 방법은 scale() 변형 함수와 opacity 속성을 활용하여 hidden과 visible 클래스를 정의하고, transition 속성을 통해 transform과 opacity 속성이 0.5초 동안 ease하게 전환되도록 설정하는 것이다. transform-origin 속성을 사용하여 element transformation이 적용될 지점을 우측 상단으로 설정한다.
0개의 댓글
0개의 질문
loading...
0
JavaScript의 toFixed() 함수를 사용하면 숫자를 지정한 자릿수로 반올림할 수 있으며, 반환형은 문자열입니다.
1개의 댓글
0개의 질문
loading...
0
String.fromCharCode() 메소드는 number를 unicode로 변경해주는 기능을 제공하며, 주어진 예시에서는 문자열 'ABC'와 '—'를 반환하는 것을 확인할 수 있다. 또한, 주어진 코딩테스트 사용 예시에서는 배열의 각 요소에 대응하는 알파벳과 숫자를 매칭시켜 객체에 저장하는 과정을 보여준다.
0개의 댓글
0개의 질문
loading...
0
bundle-analyzer를 사용하여 next.js 프로젝트의 번들 사이즈를 분석할 수 있고, react-icons 라이브러리는 각 아이콘 종류별로 하나의 자바스크립트 파일을 포함하므로 번들 사이즈가 커지게 되는데, @react-icons/all-files를 활용하면 아이콘별로 자바스크립트 파일을 가져와 번들 사이즈를 줄일 수 있다.
0개의 댓글
0개의 질문
loading...
0
Next.js 13에서 Header를 리팩토링하여 서버 컴포넌트와 클라이언트 컴포넌트로 구분하고, Data Fetching을 Header 내부에서 처리하여 중복 코드 문제를 해결하였다. 또한, 내부 컴포넌트를 생성하여 가독성이 향상되었으며, 서버 컴포넌트와 클라이언트 컴포넌트 구조를 잘 활용해 Props drilling을 줄이고 중복코드를 최소화하는 방법을 소개하였다.
0개의 댓글
0개의 질문
loading...
1
Scroll Restoration은 페이지 이동 후 이전 스크롤 위치를 유지하는 기능으로, Next.js 13.4.13 버전에서 문제가 해결되었으며 Docker 파일 수정을 통해 문제를 해결할 수 있다. Scroll Restoration이 잘 동작하여 프로덕션 배포에도 성공적으로 적용되었다.
1개의 댓글
0개의 질문
loading...
0
Discriminated Union은 에러 처리를 위해 사용되며, 각 타입마다 구분할 수 있는 공통 속성을 가진 Union 타입이다. ErrorResponse와 IsSuccessResponse에서 result라는 속성을 추가하고, 각각 'fail'과 'success' 값을 정의하여 분기 처리를 더 가독성 있게 할 수 있다. 이를 활용하여 코드를 개선하였다.
0개의 댓글
0개의 질문
loading...
0
브라우저는 HTML, CSS, JS 등의 리소스를 요청하고 받아온 후, 렌더링 엔진은 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성합니다. 자바스크립트 엔진은 응답된 자바스크립트를 파싱하여 AST로 변환한 후 실행합니다. 이 과정에서 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있습니다.
0개의 댓글
0개의 질문
loading...
0
객체의 메서드에서는 this를 사용하여 자신이 속한 객체나 생성할 인스턴스의 프로퍼티와 메서드에 접근할 수 있다. 하지만 일반 함수 내부에서 this를 사용하면 전역 객체가 바인딩되므로 주의해야 한다. 이를 해결하기 위해 1) 변수 that에 this를 할당하거나, 2) bind 메서드를 사용하거나, 3) 화살표 함수를 사용하는 방법이 있다.
0개의 댓글
0개의 질문
loading...
0
랜딩페이지의 성능을 개선하기 위해 랜딩페이지의 구조와 로직을 변경하였고, 그 결과 LCP(Largest Contentful Paint)를 3.1초에서 0.7초로 개선할 수 있었습니다.
0개의 댓글
0개의 질문
loading...
0
프론트엔드 성능 측정은 빠른 웹 페이지 로딩 속도를 통해 사용자 유치와 이탈률 감소, 비즈니스적 성장 및 좋은 사용자 경험을 추구하는 것입니다. Core Web Vitals인 LCP, FID, CLS 등의 지표를 활용하여 개발자는 프론트엔드 성능을 측정할 수 있습니다.
0개의 댓글
0개의 질문
loading...
0
자바스크립트 객체는 표준 빌트인 객체, 호스트 객체, 사용자 정의 객체로 분류할 수 있다. 전역 객체는 Object, String, Number, Promise와 같은 모든 표준 빌트인 객체를 프로퍼티로 가지고 있으며 브라우저 환경과 node.js 환경에 따라 추가적으로 프로퍼티와 메서드를 갖는다.
0개의 댓글
0개의 질문
loading...
0
자바스크립트의 함수는 일급 객체로, 무명의 리터럴로 생성할 수 있고 변수나 자료구조에 저장할 수 있으며, 매개변수에 전달하거나 반환값으로 사용할 수 있다. 또한 함수 객체는 프로퍼티를 가지며, arguments 프로퍼티는 가변 인자 함수 구현 시 유용하다.
0개의 댓글
0개의 질문
loading...
0
charCodeAt() 함수는 주어진 문자열에서 특정 인덱스에 해당하는 문자의 유니코드 값을 반환합니다. 위의 예시에서는 변수 a에 'abc'라는 문자열이 할당되었고, a.charCodeAt(0)은 97을, a.charCodeAt(1)은 98을 반환합니다. 또한 응용하여 배열과 함께 사용할 수도 있는데, visited 배열에는 26개의 요소가 false로 채워지고, arr 배열의 첫 번째 요소인 'A'의 유니코드 값인 65를 인덱스로 활용하여 visited[0]을 true로 변경하였습니다.
0개의 댓글
0개의 질문
loading...
0
자바스크립트 엔진은 프로퍼티를 생성할 때 자동으로 프로퍼티 어트리뷰트를 정의하는데, 이 어트리뷰트는 프로퍼티의 상태를 나타낸다. 프로퍼티 어트리뷰트는 값, 갱신 가능 여부, 열거 가능 여부, 재정의 가능 여부 등을 관리하는 내부 상태 값이다.
0개의 댓글
0개의 질문
loading...
0
var 키워드로 선언한 변수는 중복 선언이 허용되고 함수 레벨 스코프를 갖는다. 변수 호이스팅으로 인해 초기화 이전에도 참조할 수 있다. 반면에 let, const 키워드로 선언한 변수는 중복 선언이 금지되고 블록 레벨 스코프를 갖는다. let 키워드로 전역 변수를 선언하더라도 전역 객체의 프로퍼티가 되지 않는다. ES6에서는 var 대신 let, const 키워드를 사용하여 스코프를 좁게 만들고 재할당을 제한하는 것이 안전하다.
0개의 댓글
0개의 질문
loading...
0
지역 변수의 생명 주기는 함수와 일치하며, 호이스팅은 스코프를 단위로 동작하여 변수 선언을 스코프의 선두로 끌어올리는 특징이다. 전역 변수의 문제점으로는 암묵적 결합, 긴 생명 주기, 네임스페이스 오염 등이 있으며, 이를 해결하기 위해 지역 변수를 사용하거나 즉시 실행 함수, 네임스페이스 객체 모듈 패턴 등을 활용할 수 있다. ES6 모듈을 사용하면 전역 변수를 사용할 수 없고 파일 자체의 독자적인 모듈 스코프가 제공된다.
0개의 댓글
0개의 질문
loading...
0
자바스크립트에는 -0이라는 값이 있으며, 이로 인해 코딩테스트 문제를 풀 때 애를 먹을 수 있다. 하지만 console.log(maxValue ? maxValue : 0);와 같은 처리로 -0을 항상 0으로 나오게 할 수 있다.
0개의 댓글
0개의 질문