웹 성능 지표에는 어떤 것들이 있을까?가장 유명하고 자료도 가장 방대한 라이트하우스를 기준으로 웹성능 지표를 학습해보고자 한다. 성능 말고도 접근성, PWA, SEO에 대한 측정도 가능하다고 한다.  아래는 라이트하우스에서 측정 기준에 대한 가중치를 나타낸 표이다 (버전 10기준). 들어본 지표도 있고, 처음 보는 지표도 있다. 하나하나 조금씩 알아가보자. FCP (First Contentful Paint)FCP는 사용자가 페이지로 이동한 후 브라우저가 첫 번째 DOM 컨텐츠를 렌더링하는 데 걸리는 시간을 측정한다. 페이지의 이미지, 흰색이 아닌 , SVG는 DOM 컨텐츠로 간주되면 iframe 안의 모든 요소는 포함되지 않는다. 참고로 라이트하우스는 HTTP 아카이브의 실제 데이터를 기반으로 성능 지표..

들어가며 종종 프론트엔드 개발을 공부하면서 WAI ARIA라는 용어를 마주하게 됐는데, 접근성과 관련있다는 정도만 알고 그 이상은 알지 못했다. 최근에 입문하기에 적절해 보이는 글을 발견해서, 가볍게 정리해보고자 한다. 참고로 해당 글에서 시멘틱 마크업에 대한 내용은 없지만, 좀 더 기술 흐름을 종합적으로 파악하기 위해 시멘틱 마크업 내용을 추가하였다.  시멘틱 마크업 HTML에서 h1 요소는 시맨틱 요소로, "페이지 최상위 제목"이라는 역할(또는 의미)을 텍스트에 부여한다. 기본적으로 대부분의 브라우저의 사용자 에이전트 스타일시트는 제목처럼 보이도록 큰 글꼴 크기로 h1의 스타일을 지정한다. (물론 원하는 대로 스타일을 지정할 수도 있다.)  반면에 어느 요소도 최상위 제목처럼 보이게 만들 수도 있다...

리액트만 배운 분들은 PHP를 배워보세요즐겨보던 개발자 유튜브가 있다. 그냥 분위기만 봐도 고수라는게 느껴진다. 리액트만 배운 분들은 PHP를 배워보세요라는 어쩌면 나한텐 조금 자극적인(?) 영상을 보게 됐는데, 이분이 말하고자 하는 요지는 간단하다. 과거의 기술을 알아야 현재의 기술을 이해한다.   그렇다고 새로운 기술을 배울때마다 1990년으로 돌아가 모든걸 경험해볼 수는 없다. 하지만  Next를 공부하는 요즘  적어도 내가 왜 이 기술을 쓰는지는 이해하고 사용하고자 이런 도입부를 썼다. 한상훈님 유튜브 제목이랑 무슨 관계지? 그냥 의식의 흐름이다.SSR 학부에서 웹 개발을 수강신청하고 리액트나 스프링 같은걸 배우나? 기대하며 수업을 들었지만 var을 사용하는 js와 jsp를 배운 경험이 문득 생각..

나는 그동안 재사용 가능한 공용 컴포넌트를 만들었나? 코드스쿼드에서 했던 프로젝트를 곰곰히 생각해보면 내가 어떤 컴포넌트를 과연 재사용했는가?에 대한 대답은 NO 였다. 물론 내 기준에 적절한 크기로 컴포넌트를 분리는 했지만 과연 공용 컴포넌트 폴더에 넣어둔 공용 컴포넌트가 정말 공용이었을까? 어떻게 하면 컴포넌트를 재사용 가능하게 사용할 수 있을까? 이 글이 정말 큰 도움을 줬다. 코드스쿼드를 다닐 때도 읽었던 글인데, 그 당시엔 전혀 공감되지 않았다. 코드스쿼드 수료 후에 리액트를 다시 공부하고 읽어보니 이제는 조금 이해했다. 아직 그 행간을 모두 이해하지는 못했지만 컴포넌트를 나누는 나만의 기준을 세우는데 가장 큰 도움을 준 글이다. 도메인과 분리된 공용 컴포넌트 1) 이슈 목록을 표시하기 위한 테..

dev mode 에선 어떤 것이 중요할까? 웹팩의 dev mode에 대해 먼저 말해보고자 한다. 어떤 점을 가장 중요시 해야할까? 바로 빌드 시간일것이다. production mode는 번들 사이즈의 최소화가 가장 중요한 점이지만, dev mode에선 번들 사이즈를 최소화하기 위해 여러 로더를 넣어 빌드 시간을 증가시키는 일을 줄여야 한다. 다음과 같이 dev mode를 설정했다. const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const Dotenv = require('dotenv-webpack'); const ReactRefreshWebpackPlugin = require('@pmmmwh/re..

실제 코드를 예제로 사용하려다, 정리하고자 했던 개념들에 오히려 혼돈만 주는 것 같아 예제를 각색했습니다. Type vs Interface Typescript 문서나 Type과 Interface를 비교한 글을 봐도 개인 기호나 팀 컨벤션을 따를 뿐 명확한 기준점은 찾지 못했다. 하지만 Effective Typescript에서 내 기준으론 가장 정답에 가까운 기준을 보게 됐는데, 바로 declaration merging 이다. interface IState { name: string; capital: string; } interface IState { population: number; } const wyoming: IState = { name: 'Wyoming', capital: 'Cheyenne', p..