pub/sub 방식의 통신 패턴window의 eventListener 작동과 거의 유사하다.이벤트 발생시 해당 이벤트를 구독하는 곳에서 콜백을 실행한다.구현출처: https://github.com/DawChihLiou/eventbus-demo/blob/main/eventbus/eventbus.tstype EventKey = string | symboltype EventHandler = (payload: T) => voidtype EventMap = Recordtype Bus = Recordinterface EventBus { on(key: Key, handler: T[Key]): () => void off(key: Key, handler: T[Key]): void once(key: Key, hand..

https://feature-sliced.design/docs프론트엔드 아키텍처, 가독성 좋고 요구사항 변경에 쉽게 대응할 수 있는 구조사용자 앱에만 적용 가능 (디자인 시스템, 라이브러리는 적용 x)구조출처: https://feature-sliced.design/docs/get-started/overviewLayers프로젝트마다 동일한 계층 구조app: 공통 설정, 스타일, providerspages: 페이지, entities, features, widgets를 합쳐서 만듬widgets: 의미있는 블록 (e.g. IssuesList, UserProfile ) entities와 features를 합쳐서 만듬features: business와 관련 있는 유저 상호작용, actions (e.g. SendCo..

관리자 웹, CMS를 개발할 때 데이터 목록을 많은 페이지에서 보여준다. (예시: shadcn/ui table)Next.js 에서 이 데이터 목록 ui를 공통 컴포넌트, 훅으로 따로 빼서 중복을 줄이고 개발 시간을 빠르게 해봤다.구성데이터 목록 ui는 크게 3가지 영역으로 나눌 수 있다.필터검색어, 상태, 기간, 목록 건수 등 데이터 필터링 액션테이블데이터를 목록 형태로 보여줌페이지네이션데이터 목록 페이지 이동 액션필터, 페이지네이션 영역에서 사용자 액션이 발생 시 테이블에서 보여주는 데이터가 변경되어야 한다.react만 사용한다면 context로 3개 영역을 묶고 데이터를 공유하는 식으로 구현할 수 있다.Next.js를 사용할 때는 다른 방식을 사용할 수 있다. 사용자 액션 발생시에 url search..

개요콜센터 운영, 관리 솔루션 (모니터링, 상담사 관리, 챗봇 관리 등)에 OB 캠페인 기능 추가OB 캠페인: 솔루션에서 전화번호 목록으로 고객에게 전화 걸어서 상담 진행 (상담사가 직접 전화 거는게 아닌 솔루션에서 자동으로 전화 걸고 상담사 or 봇 연결)서비스 주소: https://acencloud.kt-aicc.com/main/serviceInfo기간: 2023.9 ~ 2024.04인원사용자 포탈(고객사 전화번호 업로드, 캠페인 실행,관리) 5명콜인프라(전화 망) 4명PDS(전화 거는 솔루션) 3명상담AP(상담사 사용 상담 툴) 4명챗봇 2명QA 2명프로젝트 관리 2명(나 포함)내 역할: 프로젝트 관리내가 사용한 기술: Jira, Confluence, Gitlab, 사내 업무처리 포탈프로젝트 관리회..

이번 프로젝트에서 tailwind를 사용했다.간단하게 정리해봤다.화면 너비에 따라 css 다르게 주기css, scss에 비해 간단하게 반응형 스타일링을 할 수 있다./* css */@media (max-width: 640px) { .gallery { color: 1fr 1fr; }}.gallery { display: grid; grid-templeate-columns: 1fr 1fr 1fr 1fr;}/* tailwind */위를 활용해 가장 많이 사용한 방법들은 다음과 같다.1) Sidenav 반응형일반적으로 cms 사이트에서 태블릿, pc는 sidenav가 보이지만, 모바일에서는 가로가 좁아서 숨기고 헤더에서 목록 버튼을 클릭해 볼 수 있게 한다.tailwind를 사용해 간단하게 처..

웹 접근성 웹 접근성은 모두가 사용할 수 있도록 웹사이트를 디자인, 개발하는 것 - 시각장애인이 보조기구(스크린 리더)로 웹 사용 출처: React 공식 문서 Semantic 태그 div만 쓰지 말고, 적절한 semantic 태그를 사용하자 ex) main, aside, header 등등 aria-role, onclick aria-role WAI-ARIA: https://www.w3.org/TR/wai-aria/#roles_categorization 보조기구가 각 요소의 역할을 알 수 있게 해줌 유효한 role (ex: button)만 줘야 함 aria-unsupported-elements: meta, html, script, style 태그들은 aria-role 미지원 onclick 태그에 onClic..

Next.js 14의 기초 활용법을 정리해봤다. 1. 프로젝트 만들기 create-next-app 을 활용해서 간단하게 프로젝트를 생성할 수 있다. npx create-next-app 명령어 입력 후 TS 사용여부, Tailwind 사용여부, App router 사용여부 등 물음에 답하면 그에 맞게 프로젝트를 생성해 준다. 2. CSS 스타일링 원하는 스타일링 방식(CSS-in-JS, CSS Modules, Tailwind 등)을 선택해서 사용하면 된다. 2-1. Global 스타일 모든 루트에 적용될 스타일을 global.css 파일에 적어 놓는다. 해당 파일을 루트 레이아웃에서 import해서 적용한다. /* /app/layout.tsx */ import '@/path/global.css' 3. 폰트..

개요 api 호출(Postman) + api 테스트(Jmeter) 할 수 있는 웹 앱 배포 주소: https://api-test-project.vercel.app/ 기간: 2023.3 ~ 2024.2 1년 내내 집중해서 한 것은 아니고 실제 개발 기간은 퇴근 후, 주말에 조금씩 해서 1~2달 정도 소요 인원: 프론트엔드 1명(나), 백엔드 1명 내 역할: 프론트엔드 전체 내가 사용한 기술: React 18, Framer-motion, emotion, Recoil, React Query, Chart.js 개발 실시간 대용량 데이터 처리 최적화 API 테스트(Jmeter)의 경우 자체 서버와 websocket으로 연결한 후에 최초 메시지로 테스트할 정보(사용자(쓰레드) 수, 호출 횟수 등)을 보내고 서버에서..