Lighthouse는 구글에서 제공하는 웹 페이지 품질 개선을 위한 오픈 소스이다. 실제 내가 진행하고 있는 프로젝트를 light house툴로 성능 분석했을 때의 화면을 캡쳐해왔다. npm run build 명령어로 경량화된 js 파일로 웹사이트 성능을 분석했을 때

들어가기전 React와 Typescript를 사용하여 프로젝트를 하기전, 제로초님의 sleact 강의를 듣고 내가 생각보다 기초가 많이 부족하다는 것을 알게 되었다. 그래서 CRA를 사용하지 않고 프로젝트를 생성하는 방법과 그 과정 속에서 내가 알게 된 것들을 정리하고

프로젝트를 하며 어떻게 해야 클린하게 짤 수 있는 지 고민이 많았다. 그래서 여러 블로그 글을 찾아보며 공부를 하다가 토스에서 나온 영상을 보고 정리를 해본다. 사실 영상을 보면 이해는 가는데, 실제 내 코드에 적용하는 일은 쉽지 않은 것같다. 그래도 나중에 경력이 쌓

1. CSR과 SSR 1) CSR CSR(클라이언트 사이드 렌더링)은 브라우저에서 JavaScript를 통해 동적으로 페이지를 생성하는 방식 >1. 껍데기 뿐인 html 파일을 다운로드 bundle.js 다운로드 및 실행 추가 데이터(users.json)를 다운로드하여

나는 22년도에 약 8개월 동안 중소기업에서 프론트엔드 개발자로 일한 적이 있다. 학교에서 진행하는 현장실습 프로그램이 있는데 지원을 하게 되었고 운이 좋게 합격되어 일하게 되었다. 처음에 합격했을 때는 무척이나 기뻤다. 그냥 이력서 경험사항에 한 줄 채울 수 있게 되

useMemo는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다.첫 번째 인자에는함수를, 두 번째 인자에는 의존성 배열(deps)을 전달한다. 리액트 컴포넌트 안에 함수가 선언되어있을 때 이

클로저는 중첩된 함수를 이용해 사용하는 방법이며 실행 컨텍스트가 끝나도 변수에 접근 가능하게 해주는 기능. 주의해야할점: 메모리 누수호이스팅은 변수나 함수 선언이 스코프의 최상단으로 끌어올려진 것 같은 현상, 선언 이전에 변수나 함수에 접근하려고 할 때 오류가 나지 않

굉장히 오랜만에 블로그 포스팅을 하게 되었다. 거의 3주라는 시간동안 프로젝트에 몰두했기 때문에, 블로그를 쓰지 못했다. 프로젝트 기간동안 겪은 문제나 해결방안은 차차 블로그에 포스팅 할 예정이다. 오늘은 멋사 시간에 면접 준비 강의 들은 것을 정리 해보았다. 멋사 프

전역상태관리를 사용하지 않는 경우, 특정 컴포넌트에서의 state 변화를 다른 컴포넌트에게 전달하기 위해 여러차례 props를 전달해야함 (이를 props drilling 이라고 부름)context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리

들어가기전, 보통 전역상태를 관리할 때는 useContext 훅을 쓰기보다는 Recoil을 썼었고, 상태 같은 경우는 useReducer 훅 대신에 useState를 많이 선택해서 썼었다. 선택할 때 큰 이유는 없었다(그냥 많이 써봤던 것 썼을 뿐..) 그래서 이번에

1) useState와 lazy initialization https://yceffort.kr/2020/10/IIFE-on-use-state-of-react

Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 (Render 자체가 화면을 다시 그리는 것이 아니라, Virtual Dom을 그림으로써 어떤 부분을 바꿔야할지 계산하는 과정임)Paint: 실제 스크린에 Layout을 표시하고

useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게

전에는 useState, useEffect로 거의 99프로의 코딩을 했었지만, 이제는 조금 달라져야하지 않을까 하여 useRef, useMemo, useLayoutEffect 등의 훅들을 정리하는 포스트를 작성하게 되었다. useRef 함수는 current 속성을 가지

JSX란 JavaScript XML의 약자로, 리액트에서 사용하는 특수한 문법. JSX는 HTML과 매우 유사하지만 엄연히 다른 언어이며, JavaScript 코드에서 마치 HTML을 사용해 UI컴포넌트를 만드는 것 같은 편리한 개발 경험을 제공모든 프로퍼티 이름은 카

클로저란 어떤 함수A에서 선언한 변수a를 참조하는 내부함수B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수a가 사라지지 않는 현상고차함수 : 함수를 인자로 받거나 또는 함수를 반환함으로써 작동 하는 함수정보은닉: 어떤 모듈의 내부로직에 대해 외부로의

클로저는 함수와 그 함수가 선언될 당시의 lexical environment의 상호관계에 따른 현상EnvironmentReference(ER): 식별자에 대한 정보OuterEnvironmentReference(외부정보): 현재 호출된 함수가 선언될 당시의 Lexcial

1. async, await 1) async, await이란? async와 await는 가장 최근에 나온 비동기 처리 패턴으로, 기존의 콜백함수와 프로미스 의 단점을 보완한 문법 2) Promise 예제를 통해 알아보는 Promise문법의 단점 Promise예제

1. Node.js 1) 노드JS는 런타임을 제공 노드JS는 크롬의 자바스크립트 엔진인 V8을 사용하여 작성된 자바스크립트 코드를 컴파일 할 수 있는 환경인 런타임을 제공 2) 런타임 환경? 런타임환경: 컴퓨터가 현재 실행중인 OS와 별개로 프로세스나 프로그램을 위

1) [attribute] 2) [attribute="value"] 속성값에 "value"만 있는 요소 선택 예) [class="apple"] 3) [attribute~="value"] 속성값으로 "value"를 가진 요소 선택 여러개의 속성값을 가졌다해도 "