Google에서 웹페이지 품질을 측정하기 위해서 만든 자동화된 오픈 소스 도구이다. Lighthouse는 웹 페이지의 성능, 접근성 및 SEO에 대한 부분을 최적화 할 수 있도록 도와준다.개발자 도구에 Lighthouse 항목으로 들어가면 사용할 수 있다.Metrics

Semantic Tag는 Semantic Web을 구성하는 요소이다.그러면 먼저 Semantic web에 대해 먼저 알아보자!Semantic은 사전적 의미로 '의미의' 또는 '의미론의' 뜻을 가진 단어이다.즉 Semantic Web은 해당 컨텐츠에 의미를 부여한 요소로

HTML에서 input, textarea, select 와 같은 form element는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트를 한다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트 state 속성에 유지되며 set

1. 브라우저 렌더링 or Critical Rendering Path란? > 위의 그림과 같이 브라우저가 서버로부터 HTML 응답을 받아 화면을 그리기 위해 실행하는 과정이다. 2. 브라우저의 기본 구조 브라우저의 구성 요소는 위의 그림과 같은데 하나씩 뜯어보자

프론트 개발자라면 클로저는 한 번쯤 들어봤을 것이고, 어떤 개념을 가지고 있는지 알고 있을거다. But 주니어 개발자라면 실무에서 이런 부분을 염두해두고 코드를 만들지 않을 수도 있기 때문에 정확히 이해하고자 글을 정리 하게 되었다.

요즘에 restful Api 에서 graphql + react-query 로 새롭게 적용 중 이고,앞으로 나오는 error들을 하나하나 기록할 예정이다.import { useMutation, useQuery, useQueryClient } from 'react-quer

위에 코드는 하나의 의존성 배열안에 var와 varB 동시에 들어가 있기 때문에 구현하고자하는 의도와 다르게 훅이 동작할 수 있다.리액트 훅을 사용할 때 복수의 useEffect 함수를 사용할 수 있지만 클린한 코드의 관점에서 함수는 한 가지 목적을 가지고 있어야 한다

상태 값 변경 함수가 2번 쓰였기 때문에 클릭을 할 때 +2가 한 번에 된다고 생각했다. ex) 0 => 2 => 4 => 6 => ....내가 예상했던 거와는 달리 클릭을 할 때 마다 +1이 된다.ex) 1 => 2 => 3 => 4 => ....상태 값 변경 함수

List, Map, Set 의 개념을 어느정도 알고 있지만 말로는 표현 못한 적이 있어 정리를 해보았다!리스트는 배열이 가지고 있는 인덱스라는 장점을 버리는 대신 빈틈없는 데이터의 적재라는 장점을 취한 데이터 스트럭쳐이다.아래와 같은 데이터가 있을 때 4번째 엘리먼트인

얕은 복사는 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값을 전달하여 한 데이터를 공유한다. 즉 중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사한다느 의미이다.user.name === user2.name false가 나오는 이

key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는 고유값을 의미한다.key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별 할 수 있는 문자열을 사용하고 대부분의 경우 데이터의 ID를 key로 사용한다

자바스크립트 객체에는 \[\[Prototype]] 이라는 내부 프로퍼티가 있고, 다른 객체를 참조하는 레퍼런스로 사용한다.객체에서 프로퍼티를 탐색할 때 객체 내에 프로퍼티가 존재하지 않으면 undefined를 출력하고 끝나는게 아니라 \[\[Prototype]] 참조를

1. JWT란? JSON Web Token은 웹표준으로서 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인 방식으로 정보를 안전성 있게 전달해주는 것을 의미힌다. 장점 수많은 프로그래밍 언어에서 지원된다. JWT는 필요한 모든 정보(토큰에 대한 기본정보, 전달

클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합이다.함수 outer 내에서 내부함수 inner가 선언되고 호출되었다. 이때 내부함수 inner는 자신을 포함하고 있는 외부함수 outer의 변수 x에 접근할 수 있다. 이는 함수 inner가 함수 outer

요청이 들어온 순서에 맞게 하나씩 처리하는 방식이고 순서에 맞춰 진행되는 장점이 있지만, 여러 가지 요청을 동시에 처리할 수 없다.하나의 요청에 따른 응답을 즉시 처리하지 않아도, 그 대기 시간동안 또 다른 요청에 대해 처리 가능한 방식이고 여러 개의 요청을 동시에 처

서버 측 렌더링페이지가 클라이언트 측에 도달하면 완전히 렌더링서버 측이 페이지를 완전히 렌더링 한 후 서버에서 클라이언트로 보냄페이지 콘텐츠에 데이터베이스의 데이터가 필요한 경우 서버는 이를 수행 한 다음 데이터를 완전히 렌더링 된 페이지로 렌더링 한 다음 클라이언트로

호준이는 아르바이트로 영어 학원에서 단어 시험지를 채점하는 일을 하고 있다. 호준이가 일하는 학원은 매번 1위부터 3위까지의 학생에게 상으로 사탕을 준다. 그런데 오늘은 마침 사탕이 다 떨어져서 호준이가 채점을 하고 점수를 보내면, 당신이 아이들의 숫자만큼 사탕을 사러

자원의 이름으로 구분하여 해당 자원의 정보를 주고 받는 것을 의미한다.DB의 학생 정보가 자원일 때, 'students'를 자원의 표현으로 정한다.데이터가 요청되어지는 시점에서 자원의 정보를 전달JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적이다.HTTP

1. 비즈니스 로직과 상태값의 유무 재사용성이 좋은 컴포넌트 정의 비즈니스 로직이 없다. 상태값이 없다. 단 마우스 오버와 같은 UI효과를 위한 상태값은 제외

아토믹 디자인은 디자인 시스템을 만드는 하나의 방법론으로서 5개의 구분된 단계가 있다.원자는 물질의 기본 빌딩 블록이다. 웹 인터페이스에 적용되며 원자는 폼의 텍스트 레이블, 인풋필드 혹은 버튼과 같은 HTML의 태그이다.원자들을 서로 결합하여 그룹을 만들면 분자들은