software engineering/frontend

해당 글 59건

content-visibility: 렌더링 속도를 향상시키는 CSS property

2023. 3. 2. 12:51

Chromium 85에서 등장한 content-visibility속성은 페이지 로드 성능을 개선하기 위한 가장 영향력 있는 새로운 CSS 속성 중 하나일 수 있습니다. 사용자 에이전트가 필요할 때까지 레이아웃 및 페인팅을 포함한 요소의 렌더링 작업을 건너뛸 수 있습니다. 콘텐츠의 상당 부분이 화면 밖에 있는 경우 초기 사용자 로드 속도가 훨씬 빨라집니다. 또한 화면 콘텐츠와 더 빠르게 상호 작용할 수 있습니다. 브라우저 지원 content-visibility CSS Containment Spec 에 의존하고 대부분 브라우저에 지원됩니다. CSS Containment CSS containment의 주요 목표는 나머지 페이지에서 DOM subtree를 예측 가능하게 격리하여 웹 콘텐츠의 렌더링 성능을 향상시..

software engineering/frontend

FE 성능 개선을 위한 7가지 방법

2023. 2. 14. 21:13

1. 리소스 최소화하기, 압축하기 Webpack과 같은 번들러를 통해 안쓰는 HTML, CSS, JS를 optimized 하고 compress 하기. Emotion과 같은 툴을 이용해 안쓰는 CSS 정리하기 2. 서버 요청 줄이기 CSS Sprites 사용하기 무분별한 third-party-plugins 사용줄이기 서버사이드 렌더링 initial load 이용하기 3. 불필요한 폰트 없애기 커스텀 폰트의 경우 WOFF2와 같은 포맷으로 변경해 효율적인 형태 폰트로 변경하기 안쓰는 subset font 정리하기 페이지에서 사용될 폰트 preload 하기 4. 이미지 압축하기 JPEG, PNG 보다 WebP(JPEG보다 25-35%, PNG보다 26% - 대부분 브라우저 지원), AVIF(JPEG보다 50%..

software engineering/frontend

TL;DR 함수형 프로그래밍 by Teo

2023. 2. 14. 12:31

TL;DR 함수형 프로그래밍 1. 순수함수 → 코드를 액션과 계산, 데이터로 분리하자. 특히 액션에서 계산을 분리하는 코드를 작성하자. // 함수형 프로그래밍 관점에서 분리해보자. function App() { // 데이터 const [count, setCount] = useState(0) // 계산 const increase = (value) => value + 1 // 액션 const onClick = () => setCount(increase(count)) // 선언적 패턴 return {count} } 액션과 계산을 확실히 분리해서 액션을 최소화하고 계산함수를 많이 만들어서 관리를 하는 것을 목표로 합니다. // 잘못 분리된 계산함수 // 계산은 반드시 입출력으로 이루어져야 하며 같은 입력에 대해..

software engineering/frontend

TL;DR React.memo() 언제 사용할까?

2023. 2. 13. 21:52

TL;DR 같은 props로 렌더링이 자주 일어나는 컴포넌트 // Initial render // After 1 second, views is 10 // After 2 seconds, views is 25 function MovieViewsRealtime({ title, releaseDate, views }) { return ( Movie views: {views} ); } 위의 예시에서 views를 제외한 title, releaseDate를 포함한 component를 만들고 memo로 감싸면 효율적이다. props가 전부다 계속해서 변경되는 경우라면 사용하지 말자. 함수를 인자로 넘길경우 useCallback을 사용하자. https://ui.toast.com/weekly-pick/ko_20190731 ..

software engineering/frontend

Emotion Theme 적용하기

2023. 2. 4. 21:17

사전 과제를 Emotion으로 진행하다 Figma에 정의된 Element들이 있어서 Theme을 사용하기로 했다. 1. Theme 정의하기 // theme.ts const palette = { primary: "#4880EE", secondary: "#F2F4F6", }; const typography = { title1: { fontFamily: "Noto Sans KR", fontStyle: "normal", fontWeight: 700, fontSize: "24px", lineHeight: "24px", }, title2: {}, title3: {}, body1: {}, body2: {}, "body2-bold": {}, caption: {}, small: {}, }; export const the..

software engineering/frontend

CSS 방법론 그리고 Utility First CSS

2023. 1. 17. 00:04

프로젝트를 진행하면서 Material 디자인 시스템을 기반으로 한 Vuetify, Mui 또는 Antd와 같은 UI 라이브러리를 사용해서 전체적인 디자인 흐름을 잡고 Sass, CSS in JS(Emotion, Styled Component)를 통해 CSS를 Customize를 했었다. 이전에 어떤 CSS 라이브러리를 사용할지 고민하다 같은 디자인을 만들었을 때 위의 블로그 말대로 Tailwind CSS의 퍼포먼스가 좋다 하더라도 CSS in JS에서 주장하는 내용을 보면 참 가성비 좋게(DX 측면, Styled Component를 약간의 최적화하면 또 비슷한 성능이 나올 수도 있다고 한다는 주장이 있기 때문에, 영향력 있는 라이브러리들이 Linaria와 같이 Zero Runtime을 업그레이드할 수도 ..

software engineering/frontend

단방향, 양방향 바인딩

2023. 1. 16. 23:59

양방향과 단방향 양방향 바인딩을 사용하면 데이터가 부모 컴포넌트에서 자식 컴포넌트로 그리고 반대로도 양방향으로 흘러 데이터를 변경할 수 있습니다. 단방향 바인딩을 사용하면 데이터가 부모 컴포넌트에서 자식 컴포넌트로 한 방향으로 흐릅니다. 자식 컴포넌트는 데이터를 읽을 수 있지만 업데이트의 경우에는 직접하지 않고 부모에게 이벤트를 내보내고 부모에서 직접 처리합니다. AngularJS와 같은 이전 프레임워크는 양방향 데이터 바인딩을 지원하지만 React, Vue, Angular와 같은 최신 프레임워크의 경우 단방향 데이터 바인딩 방식으로 작동됩니다. 2WB(양방향)은 매 사이클마다 서로를 확인하기 때문에 모델과 컨트롤러가 동기화되어 있어 확인해야 할 항목이 너무 많아 규모가 커지면 커질수록 AngularJ..

software engineering/frontend

Authentication

2023. 1. 16. 20:16

AuthenticationAuthentication이란 누군가의 신원을 인증해주는 절차이다. 웹 사이트에서 보통 username과 password를 이용하여 로그인 하는데 이런 로그인 뿐만 아니라 HTTPS를 이용한 접근에 Browser가 TLS를 이용해 Server에 인증하고 가짜 웹사이트를 로딩하는지, 혹은 서버간 통신에서 request 요청에 대해 악의적인 사용을 피하기 위해 인증하는 등에 사용한다. HTTP는 stateless하기에 통신의 상태가 저장되지 않아 아래 현재는 대중적인 방법인 basic auth, session, token, jwt와 같은 방법으로 저장한다. 1. 요소 Authentication는Username / Password - [지식 요소]Security Codes (PIN) ..

software engineering/frontend

브라우저의 동작원리

2023. 1. 7. 11:56

웹 브라우저에 URL을 입력하면 어떤 일이 생길까 TL;DR 웹 사이트를 호스팅하는 웹 서버의 위치 조회 웹 서버에 연결 특정 페이지를 가져오기 위한 요청 전송 웹 서버의 응답을 처리 사용자가 웹 사이트와 상호 작용할 수 있도록 페이지를 렌더링하는 방법 전체과정; 1. 웹 브라우저에 URL을 입력하고 Enter키 입력 https://channy.creation.net/blog 를 예로 들자면, https:// 는 통신 프로토콜로 브라우저에 TLS를 사용하여 서버에 연결하도록 지시합니다. channy.creation.net/blog는 IP를 대신해서 기억하기 쉬운 웹 사이트의 도메인 네임입니다. https://channy.creation.net/blog/hello-world 와 같이 리소스에 대한 추가 경..

software engineering/frontend

웹 접근성(a11y)과 storybook addon

2023. 1. 6. 21:07

a11y는 장애가 있는 사람들이 동등한 방식으로 사용할 수 있도록 웹 사이트 및 웹 앱을 디자인하는것을 말한다. 다양한 국가에서 디지털 접근성 법률이 존재할 정도로 이로 인한 소송도 많다고 한다. 평등함을 제공하거나 법적인 이유를 제외하고도 장애를 갖고 있는 사람은 전 세계의 1/4을 차지하고 그들 또한 많은 소비력이 있기에 막대한 Business Impact 또한 가져올 수 있다. WCAG의 원칙인 POUR 원칙을 디지털 제품에 적용하면 장애가 있는 사람을 포함하여 실제 사람이 제품을 사용하는 방식에 집중할 수 있습니다. 모든 필수 정보를 인지할 수 있도록 장식이 아닌 모든 이미지와 필수 아이콘에 대체 텍스트를 추가합니다. 비디오에 캡션, 스크립트 및 오디오 설명을 추가합니다. 색상을 확보하는 것만이 ..

software engineering/frontend