[회고] 2023년 2월과 3월

들어가며 3월이 되면서 본격적으로 채용 공고가 올라오기 시작했다. 처음 맞이하는 공채 시즌이라 바쁘게 한 달을 보냈다. 2월에는 따로 회고를 작성하지 못했기에, 이번 회고 글에서 2월부터 3월까지 했던 경험에 대해 정리하려 한다. 자격증 취득 성공…

[회고] 2023년 1월

들어가며 2023년이 되면서 세운 목표 중 하나는 주기적으로 회고를 작성하는 것이다. 그리고 가벼운 마음으로 올해는 한 달을 주기로 월간 회고를 작성하기로 결정했다. 예년과 다르게 올해는 아무 곳에도 속하지 않은채 시작한 특별한 해이다. 작년…

windowing 기법

들어가며 만약 만들고 있는 서비스가 성공해서 100만 개의 피드 데이터가 생성됐을 때, 모든 피드 데이터를 브라우저에 렌더링하게 된다면 어떻게 될까요? 그리고 이를 최적화할 방법은 무엇이 있을까요? 경험 많은 프론트엔드 개발자님에게 받은…

검색엔진 최적화(SEO) 적용하기

검색 엔진 최적화란 무엇인가? SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 엔진 최적화를 위해 고려해야 하는 부분 내 사이트가 구글에 표시되는지 확인하기 사이트의 홈 URL을 site: 검…

렌더링 방식(CSR, SSR, SSG, ISR 그리고 Next.js)

렌더링이란? 렌더링이란 렌더링 엔진에 의해 HTML 문서 요소를 실제 화면에 그리는 작업을 의미하기도 한다. 하지만, 해당 글에서의 렌더링은 화면에 보일 HTML 문서를 완성하는 작업을 의미한다. CSR: SPA가 주목받기 시작 CSR은 화면에…

[스모디프로젝트] 웹 접근성 개선하기

이번 글에서는 스모디 서비스의 웹 접근성을 개선한 사례에 대해 정리하려한다. 메인 페이지와 피드 페이지에서 Lighthouse로 접근성 점수를 측정한 결과 다음과 같은 문제가 발견됐다. [aria-*] attributes do not match…

NPM 출시

npm login으로 로그인 한다. npm login npm publish 위 명령어를 입력하면 패키지를 출시할 수 있다. 단, package.json에 있는 version은 이전 패키지 버전보다 높아야한다. .npmignore .npmign…

[스모디프로젝트] 성능 리포트

device: mobileNetwork throttling speed: Slow 4G throttlingCPU throttling: 4x slowdown Web Vitals에서 권장하는 성능 점수를 따르려한다. Web Vitals에…

빌드 속도 최적화 with loader

webpack 설정을 처음 할 때, ts(또는 tsx) 파일의 처리하는 설정을 잘못했다. 때문에 빌드 속도가 약 30초 정도로 오래 걸렸다. 당시 설정은 다음과 같았다. { test: /\.(js|jsx|ts|tsx)$/i, use…

빌드 환경 구축 with Webpack

프로젝트 빌드 환경을 직접 구축하기 위해 여러 옵션을 공부하고 적용했다. 이번 글에서는 스모디 프로젝트에 사용된 webpack 빌드 옵션을 정리하려 한다. 스모디 4.2.1 버전 기준 webpack 설정은 다음과 같다.

파일 압축하기

리소스를 압축하면 사용자에게 더 적은 비용으로 리소스를 제공할 수 있다. 이번 게시글에서는 리소스를 압축해서 브라우저에게 전달하는 방법에 대해 정리하려 한다. All modern browsers can handle a gzip encoded…

렌더링 최적화

브라우저의 렌더링 과정 중 Reflow와 Repaint 과정이 오래 걸린다. 따라서 렌더링을 최적화하기 위해서 해당 렌더링 과정의 발생을 줄이는 것이 중요하다. 예를들어 애니메이션을 구현할 때 top, left 등의 속성을 이용하는 것보다…

성능 측정 기준

성능을 최적화하기 전에 측정 항목을 명확히 알고있으면 목표가 분명해질 것이다. 프론트엔드에서 성능 최적화를 위한 항목은 대표적으로 세 가지가 있다. 로딩 최적화렌더링 최적화메모리 최적화 이외에도 구글에서 성능 측정의 지침으로 정해둔 Web…

babel-loader와 ts-loader 그리고 esbuild-loader

프로젝트의 webpack 설정을 다시 점검하는 시간을 가졌다. 그러던 중 ts와 tsx 파일을 처리하는 로더에 babel-lader와 ts-loader가 함께 사용된 것을 확인했다. 꼭 둘 다 사용해야 하는 것인지 확실히 조사가 필요했다. 또한 관련…

[Webpack] JS 파일 크기 줄이기 with mode, optimization, devtool

최적화를 진행하기 위해 요청한 리소스의 크기를 줄이는 방법이 있다. 이번 게시글에서는 webpack으로 프로젝트를 번들링할 때 js 파일의 크기를 줄이는 방법에 대해서 정리하려한다.

웹 캐시 with S3, CloudFront

성능 최적화 작업을 하면서 웹 캐시 문제를 마주했다. Lighthouse로 웹 성능을 측정한 결과 웹 캐시 관련돼서 개선할 것을 권고 받았다. 따라서 이번 글에서는 HTTP Cache에 대해서 알아보고, 현재 사용하고 있는…

이미지 최적화

최적화 작업을 하기 앞서 Lighthouse로 성능을 측정했다. 성능 점수는 아래와 같이 67점이 나왔다. 주로 이미지나 gif 등 asset 부분에서 개선이 필요하다고 경고했다. 개선이 필요한 항목과 상세 설명은 아래와 같다. Prop…

HTTP Cache

들어가며 웹 성능 최적화와 관련해서 공부하면서 Network 요청에 대한 횟수를 줄이는 방법에 대해 찾아보았다. HTTP 프로토콜에서고 Cache설정을 할 수있는 걸 알게됐다. 따라서 이번 글에서는 HTTP Cache에 대해 정리하려 한다. HTTP…

S3와 CloudFront

S3와 CloudFront로 정적 웹 사이트를 배포해야할 필요가 생겼다. 프로젝트를 진행하면서 S3에 대해서 종종 들었지만, 정확히 어떤 특징을 가진 서버인지 알지 못했다. 따라서 이번 기회에 S3와 CloudFront에 대해 정리하려한다.…

Semantic Versioning

Semantic versioning(이하 SemVer)은 패키지의 버전을 관리하기 위한 규칙이다. SemVer은 세 가지 숫자로 버전을 표기한다. 각 숫자는 .(온점)으로 구분된다. X.Y.Z 각각 major version, minor…

lock 파일(= 패키지 잠금 파일)

프로젝트를 진행하면서 백엔드 팀원이 ‘lock 파일이 무엇이며, git을 통해 관리해야하나?'라고 물었다. 지금까지 lock 파일도 git을 통해 관리하긴 했지만, 파일의 역할에 대해서는 고민해 본 적이 없다😣 따라서 이번 글에서는 lock 파일에…

soft delete와 hard delete 그리고 법

스모디 프로젝트의 회원 탈퇴 기능을 구현하면서 팀원 들과 데이터 삭제 방식에 대해서 토론을 진행했다. 토론을 통해 두 가지의 데이터 삭제 방식이 있다는 것을 알게됐다. 또한 전자상거래 플랫폼이라면 데이터 삭제에 관하여 법적으로 추가적인 제약이 있다는…

CORS(교차 출처 리소스 공유) 정책

CORS 정책 위배 이슈는 웹 개발자라면 한 번쯤 만나는 문제라고 합니다. 저 역시 최근 ‘Cookie에 저장된 정보를 요청 헤더에 넣어서 전달하는 과정’을 구현하기 위해 테스트 도중 CORS 정책 이슈를 만났습니다. 나중에 CORS 정책 이슈를…

JSX와 React Element

🌟 JSX와 사용하는 이유 JSX는 React.createElement 함수의 문법적 설탕이다.JSX 사용해서 React 컴포넌트를 작성하면 가독성이 향상된다. 🌟 JSX를 바벨로 컴파일 컴파일 전 <div id="parent…

Virtual DOM

💡개념 및 용어 정리 Virtual DOM(V DOM) - 가상 돔Real DOM(R DOM == DOM) - 실제 돔React의 화면 갱신 과정 렌더 단계 - 실제 DOM에 반영할 변경 사항을 파악하는 단계. 변경 사항을 파악하기 위해서…

웹 접근성을 준수해야 하는 이유

W3C에서는 웹 접근성을 아래와 같이 정의하고있다. 웹 접근성은 웹 사이트, 도구, 기술이 장애를 가진 사용자들이 사용할 수 있도록 설계 및 개발된 것을 말합니다. 추가적으로 웹 접근성을 준수하는 것은 일반 사용자 경험(UX)에도 많은 영향을…