AI Platform / Web

프로젝트를 시작하면, 항상 고민하는 것은 아키텍처에 대한 고민이라고 할 수 있다. 우리는 회사가 가진 리소스에서 가장 효율적으로 프로젝트를 셋업 하기 위해 어떠한 아키텍처를 사용할지 매 순간 고민한다. MVP 개념으로 빠르게 시장 반응을 알기 위해 빠르게 개발이 필요한 경우가 있다. 이러한 경우 개발 빠르게 하기 위하여, vanillaJS를 사용하여 만들 수도 있고, Nextjs를 사용하여 백엔드 없이 하나의 Product으로 개발을 할 수도 있다. 그리고 SSR / SSG /CSR 중 어느 것을 사용하는게 프로젝트에 최적화할 수 있을까? 상태관리는 어떻게 할까? 컴포넌트는 어떻게 나누는 것이 좋을까? 와 같은 끊임없는 고민을 한다. 이러한 고민에는 기본적인 프론트엔드에 대한 포괄적이고 전반적인 지식을 ..

Frontend에서 컴포넌트를 만들기 위해 우리가 가장 먼저 접하는 개념은 컴포넌트 주도 개발(Component Driven Development)이라고 할 수 있다. 컴포넌트 주도 개발(Component Driven Development)이란 컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스를 만드는 개발 및 설계 방법론이다. 컴포넌트란, 상호 교황이 가능하고 표준화된 UI 구성 요소라고 할 수 있다. 우리는 리액트를 통해 작은 컴포넌트를 만들고, 그 컴포넌트를 활용해 개발을 진행한다. 컴포넌트 주도 개발(CDD)란 재사용 가능한 컴포넌트 만든 후에, 전체 화면(View)을 구성하기 위해 결합해 가는 상향적 구조(bottom-up)라고도 할 수 있다. UI는 프로젝트가 커질 수록 관리하기가 어렵다. 왜..

Nextjs에서 TypeError: Cannot destructure property 'styles' of 'this.context' as it is null. 에러를 만났다면 해결책은 어렵지 않다. ); }

TTFB(Time To First Byte)는 서버의 성능을 보여주는 척도로, HTTP를 요청했을 때, 처음으로 정보(Byte)가 브라우저에 도달하는 시간을 의미한다. 당연한 말이지만, SEO에 직결되고 UX적으로도 사용자가 빠르게 데이터를 확인할 수 있게 하기위해 확인해야하는 정보이다. 1. TTFB TTFB는 위에서 설명한 것과 같이 웹서버의 응답을 측정하기 위해 사용한다. 좋은 사이트의 경우는 0.8s 즉 800ms 안으로 TTFB가 걸릴 수 있는 것이 좋다. 2. TTFB 확인하기 TTFB를 확인하는 부분은 크롬의 개발자 도구를 활용하면 간단하다. 개발자 도구의 네트워크 부분을 들어간다. 그리고 내트워크 내부에서, 아래와 같이 waterfall부분을 찾자. 색이 있는 이쁜 컬러부분에 마우스를 올려..

보통 우리는 키보드를 javascript로 핸들링 할때, keyCode를 사용해서 적용 한다. 왜냐하면 구글링을 하다보면 KeyCode에 관한 내용들이 많기 때문이다. 하지만 아래의 문서를 보면 Deprecated 되었다고 나와있는 것을 알 수 있다. 정단히 정리하면, 웹 표준에서 제거가 되었다. 호환성 목적으로 사용하기는 하지만, 사용하지 않는것을 추천한다. 1. keyCode 그래도 대부분 사용하지 않더라도 대략적인 사용법은 아래와 같다. 요즘 리액트를 많이 쓰니 리액트 기준으로 관련 로직을 보면 아래와 같다. 아래와 같이 간단하게 사용가능하다. onKeyDown 리스너를 통해서 키보드를 누르는 event를 받는다. 그리고 받은 이벤트에 event.keyCode를 보면 숫자가 적혀있는 것을 알 수 있..

키보드 포커싱에 대해 알아보자. 기본적으로 마우스 없어도 tab을 이용해서 input 값들을 넣을 수 있다. 그리고 사용자 기준으로 tab을 눌렀을 때 포커싱(마우스 커서)의 위치가 예상 되는 곳에 존재할 수 있도록 만들어 보자. 중요하지 않지만, 매우 중요한 기능이다. 웹 접근성관 관련된 키보드 포커싱에 대해 알아보자. 0. 기본 포커싱 우리는 input창을 누르면 자연스럽게 input창에 커서가 들어간다. 즉, 웹은 사용자가 사용하는 부분에 대해서는 기본적으로 자동으로 포커싱을 시켜준다. 상호작용하는 element로는 a 태그, input 태그, select 태그, button 태그들이 있다. 그리고 이러한 태그들을 tab키를 이용해서 키보드로 이동을 할 수 있다. (반대로 이동은 shift + ta..

Single Source of Truth이란 단일 진실 공급원이라고 불리기도 하고, 신뢰 가능한 단일 소스라고 불리기도 하는 것 같다. 사실 길게 적을 필요도 없다. 간략하기 정의 하면 아래와 같다. 같은 내용을 중복해서 사용하지 말고, 하나의 내용을 참고 해서 사용한다는 말이다. Single Source of Truth를 웹개발로 풀어보면, 백엔드 같은 경우는 DB 핸들링을 하는 장소를 하나의 파일만 만들어서 사용하는 것과 같다고 할 수 있다. 프런트엔드의 경우는 상태관리를 전역으로 한군데 해서 하는 것 과 같다고 할 수 있다. 보통은 제어컴포넌트와 비제어컴포넌트를 이야기 할 때 많이 사용된다.

error - TypeError: resolver is not a function javascript로 코드를 적다보니, 위와 같은 에러(error - TypeError: resolver is not a function)가 발생했다. resolever의 의미는 사전적 의미는 변환기를 의미한다. 코드를 아무리 봐도 에러를 못찾겠다면, 아래의 정답을 보자. export를 적어주자. 함수를 적었지만, export해주지 않으면 호출 시 찾을 수 없어서 나는 에러이다.