FE 썸네일형 리스트형 FE/Network [성능 최적화] PageSpeed와 Lighthouse 코어 웹 바이탈(Core Web Vita) 페이지의 성능은 곧 사용자 경험과 관련이 있다. SEO 전략을 세우는 데 중요한 구글의 품질 평가 요소 중 한 축을 담당하는 코어 웹 바이탈은 개발 과정에서 빠뜨려서는 안 될 중요한 개념이다. 코어 웹 바이탈이란? 웹 페이지의 사용자 경험을 측정하는 중요한 지표들로 검색 엔진이 웹 페이지의 품질과 성능을 평가하는 데 사용된다. 로딩 시간 (Loading Performance) 최대 콘텐츠 렌더링 시간 (LCP, Largest Contentful Paint) 좋은 사용자 환경 제공을 위해서는 페이지가 처음 로드되기 시작한 후 2.5초 이내에 LCP가 발생해야 한다. 첫 바이트까지의 시간(TTFB), 콘텐츠가 포함된 첫 페인트(FCP) 역시 LCP 관련 문제를 진단.. FE/배포 CORS 에러가 나는 이유 / Proxy * CORS 에러가 나는 이유 * CORS 정책을 우회하는 Proxy 사용법 - Webpack dev server에서 제공하는 proxy - React 라이브러리인 http-proxy-middleware가 제공하는 proxy CORS 정책이 필요한 이유 브라우저에서 기본적으로 API를 요청할 때에, 브라우저의 현재 주소와 API의 주소의 도메인이 일치해야만 데이터를 접근할 수 있다. 만약 다른 도메인에서 API를 요청해서 사용할 수 있게 해 주려면 CORS 설정이 필요하다. CORS 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록.. FE/배포 GitHub Action을 이용하여 S3에 파일 올리기 Github Actions를 통한 배포 Flow (클라이언트) 이번 클라이언트 배포는 간단하게 3가지 단계로 나뉜다. Source: Github reference 브랜치에 코드가 커밋되면 Build: github acitons의 YAML 파일에 적힌 명령어를 토대로 Webpack을 이용해 빌드를 하고 Deploy: github acitons의 YAML 파일에 적힌 명령어를 토대로 s3로 빌드 결과를 업로드한다. Github Actions는 프론트엔드 개발자의 반복적이고 번거로운 작업들을 자동화해준다. 빌드 자동화: GitHub Actions를 사용하여 프론트엔드 애플리케이션의 빌드 작업을 자동화할 수 있다. 예를 들어, 코드가 푸시되거나 머지될 때 자동으로 빌드가 실행되도록 설정할 수 있다. 이를 통해 .. FE/배포 CI/CD 파이프라인 * CI/CD 용어의 의미 - CI/CD를 꾀할 수 있는 각 단계 별 설명 * CI/CD 파이프라인 - CI/CD 파이프라인의 구성 요소와 장점 CI/CD란 개발을 하다 보면 코드를 치는 것 외에 다른 일련의 작업의 자동화가 필수임을 인지하게 된다. CI/CD의 "CI"는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미한다. CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있다. CI/CD의 "CD"는 지속적인 서비스 제공(Continuous Delivery).. FE/배포 DevOps * 개발 프로세스의 발전 - 전통적인 개발 프로세스에 도입된 테스트 - 모던 개발 프로세스 - SaaS * DevOps - DevOps 특징과 사례 개발 프로세스란 소프트웨어 시스템이나 애플리케이션 개발 및 유지보수할 목적으로 수행되는 활동의 절차를 뜻한다. 개발 프로세스의 목적은 개발에 대한 전체적인 가이드라인을 제공하는 데에 있다. 절차가 있는 개발과 그렇지 않은 개발은 큰 차이가 있을 것이다. 개발 프로세스의 발전 개발 프로세스 소프트웨어 개발 프로세스 모델은 소프트웨어 개발 생명주기(SDLC, Software Develpment Life Cycle)를 기반으로 만들어졌다. 요구분석 및 시스템 명세 작성 : 문제분석 단계라고도 하며, 개발할 소프트웨어의 기능과 제약조건, 목표 등을 사용자와 함께 정.. FE/TypeScript [TS] React 컴포넌트를 TypeScript로 포팅하기 본 포스팅은 이미 JavaScript로 작성된 React App(프레임워크는 CRA)을 TypeScript로 포팅해보려고 한다. 그 중, 새로 알게된 점을 위주로 정리 차원의 포스팅으로 모든 코드가 나와있지 않다. 1. 라이브러리 설치 해당 프로젝트 터미널 내에서 npm을 사용하여 React 프로젝트에 필요한 라이브러리를 설치한다. @types/react와 @types/react-dom: React와 React DOM에 대한 TypeScript 타입 정의 파일 @typescript-eslint/eslint-plugin와 @typescript-eslint/parser: TypeScript 프로젝트에서 ESLint를 사용하기 위한 플러그인과 파서 (ESLint는 JavaScript와 TypeScript 코드.. FE/TypeScript [TS] 제네릭 / 데코레이터 제네릭(Generic) 제네릭은 C#과 Java와 같이 재사용이 가능한 컴포넌트를 생성하는 주요 도구 중 하나이다. 타입스크립트의 제네릭(Generic)은 코드 재사용성을 높이고 타입 안정성을 보장하는 기능이다. 제네릭을 사용하면 함수나 클래스를 작성할 때, 사용될 데이터의 타입을 미리 지정하지 않고, 이후에 함수나 클래스를 호출할 때 인자로 전달된 데이터의 타입에 따라 자동으로 타입을 추론하게 된다. 제네릭의 필요성 아래의 printLog 함수는 파라미터로 text를 받고 있으며, 반환 값으로 text를 리턴하고 있다. 이를 제네릭 없이 구현한다면 아래와 같이 구현할 수 있을 것이다. function printLog(text) { return text; } 첫 번째 함수는 printLog 함수에 특정 .. FE/TypeScript [TS] JavaScript를 TypeScript로 포팅 하기 열거형 JavaScript에서는 열거형(Enum)이 없다. 그러나 열거형을 흉내 낼 수는 있다. 다음은 JavaScript로 열거형을 흉내 낸 코드이다. const NumberColor = { RED: 0, GREEN: 1, BLUE: 2, }; const StringColor = { RED: 'red', GREEN: 'green', BLUE: 'blue', }; TypeScript로 포팅하면 아래와 같이 나타낼 수 있겠다. 에디터 HTML 삽입 미리보기할 수 없는 소스 인터페이스 에디터 HTML 삽입 미리보기할 수 없는 소스 인터페이스와 상속 실습 1 User 인터페이스를 상속받아 Student 인터페이스를 만들었다. Student 인터페이스에는 추가로 grade 프로퍼티가 작성되어야 하며, grade.. FE/TypeScript [TS] 타입 별칭 / 타입 추론 / 타입 단언 타입 별칭(Type Aliases) 타입 별칭(Type Aliases)은 타입의 새로운 이름을 만드는 것이다. 이는 새로운 이름으로 기존의 타입을 참조하는 것을 의미한다. 타입 별칭을 이용하여 타입의 새로운 이름을 만들 때 키워드 type을 사용하여 작성한다. JavaScript에서는 타입 별칭을 따로 지원하지 않으며, TypeScript에서만 지원된다. 아래의 코드를 보자. 원래 string이라는 타입이 존재하고 있었다. 이에 myString이라는 새로운 이름을 부여했다. 여기서 myString과 string은 동일한 의미를 갖게 된다. 즉, 타입을 정의할 수 있는 모든 곳에는 타입 별칭을 쓸 수 있다. type MyString = string; let str1: string = 'hello!'; //.. FE/TypeScript [TS] 열거형(Enum) / 인터페이스 / 클래스 / 상속 열거형(Enum) TypeScript의 열거형(Enum)은 특정 값의 집합을 정의할 때 사용된다. JavaScript에서는 기본적으로 열거형을 지원하지 않지만, 열거형을 흉내 낼 수는 있다. TypeScript에서는 문자형 열거형과 숫자형 열거형을 지원한다. TypeScript에서 열거형은 다음과 같은 형태로 정의할 수 있다. 위 예제에서는 Color라는 열거형을 정의하고 있다. 열거형의 값은 Red, Green, Blue 세 개이다. enum Color { Red, Green, Blue, } 숫자형 열거형(Enum) 열거형은 숫자형과 문자열형, 혹은 이 둘의 조합으로 정의될 수 있다. 디폴트 값으로 숫자형을 사용하며, 각 값은 자동으로 0부터 시작하여 1씩 증가한다. (auto-incrementing).. FE/TypeScript [TS] TypeScript 등장 배경 / 장점 / 데이터 타입 * TypeScript 등장 배경 * TypeScript 장점 * TypeScript의 데이터 타입 TypeScript(타입스크립트) TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어이다. 상위 집합 언어는 기존 언어의 문법, 기능 및 기능을 모두 포함하면서 추가적인 기능이나 문법을 제공한다. JavaScript에 정적 타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어이다. 정접 타입 검사는 JavaScript의 동적 타입 시스템에 비해 변수의 타입을 명시적으로 선언하고 타입 검사를 수행할 수 있게 해준다는 의미이다. 이는 개발자가 런타임에서 발생할 수 있는 타입 관련 오류를 사전에 감지하고 방지할 수 있게 한다. Java.. FE/TypeScript [TS] TypeScript 프로젝트 환경 구성하기 * VSCode 에디터를 이용해 TypeScript 언어로 세팅된 프로젝트 만들기 아직은 브라우저 콘솔 창에서 TypeScript 언어를 인식하기 어렵기 때문에, TypeScript로 코드를 작성하려면 사용하는 코드 에디터에 이를 세팅해야 한다. TypeScript 프로젝트 환경 구성하기 1. 프로젝트 폴더 생성 먼저 프로젝트 폴더를 생성한다. mkdir (폴더명) cd (폴더명) 2. 프로젝트 초기화 프로젝트 폴더를 생성하고 난 뒤 프로젝트 폴더 안으로 이동하여, 터미널에서 npm init -y 명령어를 실행해 새로운 프로젝트를 초기화한다. 프로젝트 내부에서 npm을 사용할 준비가 되었다. npm init -y npm init -y 는 npm을 사용하여 새로운 프로젝트 또는 패키지를 초기화할 때 사용되.. FE/UI & UX 디자인 시스템은 언제 도입해야 할까? 디자인 시스템 도입 시 고려 사항 디자인 시스템을 만들고 유지하는 업무는 꽤 시간이 걸리며 보통 이를 전담하는 부서가 필요하다. 구성원들이 디자인 시스템을 사용 및 적용하기 위한 교육이 필요하다. 고정된 정보를 제공하는 프로젝트(e.g. 기업 소개 웹사이트) 또는 일회성 프로젝트(e.g. 프로모션용 랜딩 페이지)에는 재사용할 수 있는 컴포넌트가 필요하지 않을 수 있다. 작은 규모의 서비스에서는 디자인 시스템을 도입하는 것이 비효율적일 수 있다. 미리 확장성을 고려해 시스템을 구축하기 때문에 시간과 비용이 많이 들기 때문이다. 따라서 작은 규모에서는 디자이너와 개발자가 일관성이 필요한 디자인 요소들을 직접 디자인하고 관리하는 것이 더 빠를 수 있다. 하지만 서비스 규모가 점점 커진다면 디자인 요소들의 양도.. FE/UI & UX 디자인 시스템 디자인 시스템이란? 디자인 시스템(Design System)은 디자인 원칙부터 재사용할 수 있는 UI 패턴과 컴포넌트, 코드로 구성된 시스템을 의미합니다. 이는 전체 서비스에 효율적이고 일관된 디자인을 적용할 수 있도록 도와준다. 종종 디자인 요소를 모은 UI 키트를 디자인 시스템으로 혼동하기도 하지만, 디자인 시스템은 디자인 원칙, 스타일 가이드, 컴포넌트, 패턴 그리고 디자인 및 개발 프로세스에 대한 지침까지 포함하는 포괄적인 개념이다. 이런 점에서 디자인 시스템은 단순한 “디자인” 가이드가 아니라, 디자인 팀과 개발팀이 업무 전반 프로세스와 방식을 일관되게 가져갈 수 있도록 도와주는 협업 “시스템”에 가깝다. 이를 통해 제품 개발에 관련된 인원들이 통일된 규칙하에 사용자에게 일관된 디자인과 사용성을.. FE/React React.lazy()와 React.Suspense * React.lazy() 메서드의 쓰임새와 작성 방법 * suspense의 쓰임새와 작성 방법 React는 현재도 계속해서 업데이트가 되고 있는 오픈소스 라이브러리이다. React가 버전 18로 업데이트가 되면서 많은 부분이 바뀌었는데, 가장 빠르게 알아볼 수 있는 변화는 콘솔 창에 이전에 보이지 않던 경고문이 보인다는 점이다. 해당 경고문은 이제 React 18 버전은 더 이상 ReactDOM.render를 지원하지 않는다는 내용이다. 물론 버전이 18보다 낮은 앱에서는 해당 경고문은 보이지 않는다. 그러나 계속해서 업데이트가 되고 있는 라이브러리이니만큼 해당 이슈는 알아둬야 할 것이다. React 18이전의 index.js const rootElement = document.getElementByI.. FE/React 코드 재사용을 도와주는 Custom Hooks Custom Hook을 쓰는 이유 Custom Hook은 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다. 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용 한다. 이를 이용하면 상태관리 로직의 재활용이 가능하고 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며 함수형으로 작성하기 때문에 보다 명료하다는 장점이 있다. (e.g. useSomething) 예를 들어 이런 컴포넌트가 있다고 보자. (React 공식 문서에 있는 컴포넌트) //FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트 fun.. FE/React React의 렌더링 최적화를 도와주는 useCallback useMemo와 useCallback의 차이 React Hook은 렌더링 최적화를 위한 Hook이 존재한다. useCallback과 useMemo가 바로 그 역할을 하는 Hook이다. useCallback이란? useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook이다. useMemo는 값의 재사용을 위해 사용하는 Hook이라면, useCallback은 함수의 재사용을 위해 사용하는 Hook이다. 아래의 Calculator 컴포넌트 내에는 add라는 함수가 선언이 되어 있는 상태 이다. 이 add 함수는 props로 넘어온 x와 y 값을 더해 태그에 값을 출력한다. 이 함수는 해당 컴포넌트가 렌더링 될 때마다 새롭게 만들어진다. function Calculator({x,.. FE/React React의 렌더링 최적화를 도와주는 useMemo 컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조로 이루어져 있다. 그러나 너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼친다. React Hook은 함수 컴포넌트가 상태를 조작하고 및 최적화 기능을 사용할 수 있게끔 하는 메서드이다. 그중 렌더링 최적화를 위한 Hook도 존재한다. useCallback과 useMemo가 바로 그 역할을 하는 Hook이다. useMemo란? useMemo은 특정 값(value)을 재사용하고자 할 때 사용하는 Hook이다. 다시 말해, 메모이제이션(Memoization) 개념을 이용한 Hook이다. 예를 들어 아래의 컴포넌트는 props로 넘어온 value값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 .. FE/React React의 Hook의 개념과 사용 규칙 * 함수 컴포넌트와 클래스 컴포넌트의 차이 * 함수 컴포넌트에서 Hook을 사용하는 이유 * Hook의 개념 및 사용 규칙 React Hooks는 React 16.8 버전부터 추가된 기능으로, React에는 다양한 Hook이 존재하고 있다. Hook이란, 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능이다. 뛰어난 재사용성과 직관성을 갖는 함수형 컴포넌트와 훅은 사용률이 매우 높은 편 이다. Class Component & Function Component Hook은 함수 컴포넌트에서 사용하는 메서드이다. 함수 컴포넌트 이전에는 클래스(class) 컴포넌트가 있었다. Class Component 아래.. FE/React React Diffing Algorithm - 상태변화를 감지할 수 있도록 하는 React의 비교 알고리즘 React의 가상 DOM 비교 알고리즘 React가 기존 가상 DOM과 변경된 새로운 가상 DOM을 비교할 때, React 입장에서는 변경된 새로운 가상 DOM 트리에 부합하도록 기존의 UI를 효율적으로 갱신하는 방법을 알아낼 필요가 있었다. 즉 하나의 트리를 다른 트리로 변형을 시키는 가장 작은 조작 방식을 알아내야만 했다. 알아낸 조작 방식 알고리즘은 O(n^3)의 복잡도를 가지고 있었다. O(n^3) 복잡도는 입력 크기에 대해 세제곱 비례로 증가하는 복잡도를 의미한다. 알고리즘의 성능을 분석하기 위해 복잡도를 계산하는 것은 중요한 과정이다. 이를 통해 알고리즘의 효율성을 평가하고, 큰 입력에 대해 얼마나 잘 처리할 수 있는지 예측할 수 있다. 일반적으로 좋은 알고리즘은 작은 복잡도를 가지며, 큰 입.. ⬆︎ 이전 1 2 3 4 ··· 9 다음
