분류 전체보기

Feature Sliced Design

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..

데이터 목록 ui 공통 컴포넌트, 훅으로 관리하기

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

콜센터 솔루션 OB 캠페인 기능 추가 회고

개요콜센터 운영, 관리 솔루션 (모니터링, 상담사 관리, 챗봇 관리 등)에 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 간단 정리

이번 프로젝트에서 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 기초 활용법

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 플랫폼 개발 회고

개요 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으로 연결한 후에 최초 메시지로 테스트할 정보(사용자(쓰레드) 수, 호출 횟수 등)을 보내고 서버에서..

Typescript와 Duck typing

어떤 2개의 타입의 이름, 위치가 다르더라도 구조가 같다면 Typescript는 2개의 타입을 같은 타입으로 본다. (Duck typing) type A = { a: string } type B = { a: string } let a: A = {a: 'aa'} let b: B = {a: 'bb'} a = b // 가능 b = a // 가능 정리 Typescript는 컴파일 단계에서 타입 검사를 하는데 이때 Duck typing 방식을 사용한다. C#/java는 이름이 같은지까지 확인하는 nominal typing 방식을 사용한다.