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