Frontend

CSS로 구현할 수 없는 말줄임 처리를 Javascript로 구현한다.

React Fiber에서 lane 모델이 도입된 이유와 이를 통해 해결하고자 하는 것이 무엇인지 알아보자.

Figma Plugin 으로 할 수 있는 것들, How Plugins Run, Figma Plugin 만들어보기

Fiber reconciler 는 위의 Stack reconciler 가지고 있던 취약점을 보완하기 위해 만들어졌다.

언제, 어떤 부분을 테스트 해야 하나?

App of apps, 말 그대로 앱들의 앱이라는 의미로 여러개의 application을 하나의 application으로 관리하는 패턴을 말합니다.

Next.js 캐싱을 통해 웹서버 성능을 개선하기 위한 방법들을 알아본다.

소나큐브는 20개 이상의 프로그래밍 언어에서 버그, 코드스멜, 보안 취약점을 발견할 목적으로 정적 코드 분석을 하여 지속적인 코드 품질 검사용 오픈소스 플랫폼이다.

프로젝트에서 사용중인 Redux에 여러 단점 들이 있어서 이를 대체하기 위한 react-query, zustand 를 알아보았다.

웹뷰를 쓰는 이유, 앱과 웹이 통신하는 방법 등 정리

프로젝트에서 CI 과정 앞단의 Lint 에서 이미 수행 하고 있기때문에 중복 과정이라서 유닛 테스트시에는 full type-checking 과정을 제거하여 jest test 속도를 개선하였다.

Web Crypto API는 웹 애플리케이션에서 암호화 및 복호화 작업을 수행하기 위한 JavaScript API다.

이는 구조적 타입 시스템에서 의도된 동작입니다. 타입 A가 B의 슈퍼셋인 경우(A는 B의 모든 프로퍼티를 포함) 타입 A를 B에 할당할 수 있습니다.

안전한 개발을 위해 일반적으로 조심해야 할 부분을 설명합니다.

컨텍스트에 기반해 적절하게 출력 인코딩이 이루어지지 않으면 XSS나 SQL 삽입의 공격이 발생합니다. 출력 인코딩으로 이에 대한 대책을 알아봅니다.

웹 애플리케이션 보안의 관점에서 말하면 사용자 입력이나 그와 관련된 데이터를 확인하지 않고 이용하는 것은 그 자체로 보안에 위협이 됩니다.

zero width space 는 존재하지만 사람눈에는 보이지 않는 문자라고 한다.

Turborepo 참고 링크 정리

frontend에서 여러 step 들을 통해 상태를 수집하고, 결과 페이지를 보여주는 다음과 같은 "설문조사" 패턴이 있다.

웹 개발자로써 ChatGPT 를 사용할 때 유용하게 활용할 수 있는 Prompt 정리

Sentry를 통해 긴급한 에러가 발생하거나 에러개수가 급증한다거나 할 때 메일, 슬랙등을 통해 알림을 받을 수 있다.

webpack v4 -> v5, storybook v6 -> v7 migrate

Generic으로 타입을 넣어주는 방식은 Compile Time에서 에러가 잡히지 않기 때문에 Run Time에서 예상치 못한 문제가 발생할 수 있다. 이러한 문제를 Schema Validation Layer 를 추가하여 해결해본다.

Nx는 모노레포 구성을 위한 다양한 개발 도구를 제공하고 Angular, React와 같은 프런트엔드 프레임워크 기반의 개발 환경 구성뿐 아니라 Express, Nest.js와 같은 백엔드 기술 기반의 개발까지 폭넓게 지원하고 있다. 이뿐만 아니라 workspace 생성 시 Cypress, Jest 등을 기반으로 한 테스트 환경까지 설정해주기 때문에, 초기 모노레포 개발 환경 구축 비용을 크게 줄여준다.

performance.timing 브라우저 내장 API를 사용하여 페이지 로드 완료 까지의 구간별 이벤트 시간을 확인할 수 있다.

오류를 탐지하기 위한 FE 모니터링 툴인 Sentry가 제공하는 기능과 사용방법에 대해 알아본다.

Chrome 에서 performance를 측정할때, network 영역에서 보여주는 내용을 살펴본다.

Headless라는 개념은 스타일링을 담당하게 되는 부분을 과감하게 제외하고 상태와 관련된 부분만을 다루자고 이야기한다.

변경에 유연한 컴포넌트를 만들기 위해서는 컴포넌트를 적절하게 분리해야 한다. 이를 위한 방법으로 다음 세가지를 정리한다.

dom-to-image는 html 스크린 캡쳐가 가능한 라이브러리이다. 이를 사용하면서 IOS에서만 이미지 화질이 떨어지는 이슈를 겪었는데, 이에 대한 원인과 수정방법을 정리하였다.

preload를 통한 페이지 로딩 속도 개선

Recoil은 기존의 상태 관리 라이브러리들과 무엇이 다른가?

barrel 파일을 통해 외부에 공개할 기능을 관리하고 외부에서 깔끔하게 import 할 수 있다. 하지만 re-export가 때로는 성능 문제를 야기할 수 있다.

GTM container에 어떤 Tag를 추가했는지에 따라 페이지 로드속도에 영향을 줄 수 있다. GTM Tag 설정시 어떤 과정을 거쳐야 하고 개선점에 대해 알아본다.

잘 모를 수도 있는 크롬 개발자 도구 팁 정리

코드 리팩토링, DOM 엘리먼트 구조 변경등이 발생한다면, 작성해놓은 UI 테스트 결과에 영향을 미칠 수 있다.

storyshot은 storybook 공식 애드온으로 작성된 story에 대한 html형태의 스냅샷을 생성하고, 이전 스냅샷과 비교한다.

cypress code coverage 측정이 어떻게 이루어지고, 이를 위한 설정 과정을 정리하였다.

Intersection Observer API는 Target Element가 Viewport내에 노출되었는지 여부를 구독할 수 있는 API이다.

Tree shaking 개선, 자원 외부화로 번들 사이즈 감소, Dynamic Import와 모듈 chunk, Promise.all 조합

IOS 12에서 Input focus시 Keyboard가 나오면서 viewport를 위로 올린후에, input blur되면 Keyboard가 사라지면서 viewport가 원래 위치로 내려와야 하는데, 내려오지 않는 문제가 있다.

Webpack을 통한 빌드시 App의 Config를 설정하는 방법에 대하여 정리하였다.

Atomic Design은 일관되고 재사용 가능한 디자인 설계 시스템을 구축하는 방법론이다. 웹사이트 레이아웃을 기본 구성 요소로 분해한 다음, 사이트 전체에서 재사용 가능하게 만든다.

Cypress는 E2E 테스트 framework으로 Chai assertion library를 내장하고 있고, stubbing 기능을 제공한다.

requestAnimationFrame은 브라우저가 frame을 그릴 준비가 되었을 때, Parameter로 전달한 애니매이션 프레임 콜백을 호출하는 함수다.

Tree Shaking | splitChunks | Dynamic Imports

기본 viewport meta tag 설정 옵션 | width, height 옵션 | 모든 viewport 옵션을 꼭 설정하지 않아도 된다.

렌더링 성능비교 | 개발속도 & 러닝커브 | 컴포넌트 구현 | SPA 설계 | 테스트 | 사용자수

.npmignore 작성과 local test방법 및 npm publish 커맨드에 관하여 정리하였다.

진입점이 되는 main 파일을 UMD 포맷과 ES6 module 포맷으로 구현하여, 모든 환경에서 해당 모듈을 사용할 수 있도록 지원한다.

배포할 모듈에 대한 package.json 작성

Performance탭에서 랜더링 과정 확인, Audits탭을 통한 웹 페이지 성능진단, Memory탭을 통한 Memory Leak 확인

Google Maps Javascript API

CAPTCHA(Completely Automated Public Turing test to tell Computers and Humans Apart)는 어떠한 사용자가 실제 사람인지 컴퓨터 프로그램인지를 구별하기 위해 사용되는 방법이다.

전체 App의 최상위 container 컴포넌트에서 store의 변경 이벤트를 구독하고, 하위 컴포넌트에 데이터를 전달한다.

Action, Reducer, Store

Client-side 렌더링까지 순서, Server-side 렌더링까지 순서, Client-side, Server-side 렌더링을 혼용하여서 사용

Browser Sync는 브라우저를 동기화해주는 프로그램이다.

webpack을 사용하는 이유, 왜 이런 기능이 필요?, webpack.config.js에 설정

쿠키는 세션정보 유지에 많이 사용되며, 보안에 취약하기 때문에 브라우저 자체적으로 쿠키거부 설정을 할 수 있다.

다국어 지원

다국어 지원

COMPONENT 구현

RequireJS를 사용한 AMD지원

Page 구현 (Event Procedure)

Single Page App 내에서 존재하는 UI화면 단위를 Page로 구분하고, Page의 이동은 hash값 변경을 통하여 구현하였다.

Cross Domain Proxy | JSONP | CORS (Cross-Origin Resource Sharing)

먼저 개발을 하고 테스트를 하는 기존 방식이 아닌 테스트 코드를 작성하고 검증된 코드를 실제 코드로 반영하자는 개념은 수 많은 개발자들의 호응을 거쳐 현재는 Agile의 대표적인 개발방법론이 되었다.

Jasmine은 자바스크립트를 위한 BDD(Behavior Driven Development) 프레임웍이다. Karma는 자바스크립트 테스트 러너다.

model명 별로 빌드 및 requireJS optimize

$watch list, $digest loop, $apply를 통하여 angular context로 들어가기

각 Model마다 관리하는 JSON 포맷이 달라지지 않도록 중앙에서 Control 하기 위하여 구현하였다.