프론트엔드 6

Autowini 프론트엔드 분리 프로젝트 CI/CD 파이프라인 구축 (Bitbucket 기반) 2

현재 오토위니에서는 React 기반으로 대부분의 프론트엔드 프로젝트를 분리하여 운영하고 있습니다. web-www-front, web-mobile-front, web-mobile-search, web-admin-front 등 다양한 프로젝트가 Bitbucket Pipelines를 통해 자동 빌드 및 배포되고 있습니다. 지난 1편에서는 파이프라인 구축 과정을 다루었다면, 이번 2편에서는 배포 성공·실패 결과를 팀원들에게 실시간으로 공유하여 운영 효율을 높인 '알림 자동화' 과정을 공유합니다.왜 배포 알림이 필요했는가?기존 파이프라인은 자동화되어 있었지만, 결과 확인 방식에는 한계가 있었습니다.정보의 파편화: 배포 결과를 확인하려면 매번 Bitbucket Pipeline 페이지에 직접 접속해야 했습니다.공유..

지식 정리 📝 2026.01.19
Autowini WEB 통합 프로젝트 Vitest 테스트 시스템 도입

web-www-front는 오토위니(AutoWini)에서 기존 JSP 기반의 레거시 페이지를 React로 분리 및 개선하기 위해 만들어진 통합 프로젝트입니다. 현재까지 분리된 주요 페이지는 다음과 같습니다.필터 검색 페이지통합 검색 페이지찜 목록 페이지 (마이위니)운송 정보 제공 페이지파츠위니 통합 검색 페이지파츠위니 필터 검색 페이지이 프로젝트를 진행하면서 “테스트 코드를 도입할 필요가 있을까?”라는 질문을 스스로에게 던지고 있었습니다.🤔 테스트 코드, 정말 필요한 걸까?최근 여러 기업들의 채용 공고를 보면 "테스트 코드 작성 경험"이나 "TDD 경험자 우대"라는 문구를 자주 볼 수 있습니다.저 역시 Toss의 es-toolkit과 NaverPay의 hidash 라이브러리에 테스트 코드 및 벤치마크..

지식 정리 📝 2025.10.17
WiniLogis 블로그의 가독성 문제 해결 React-Quill을 활용한 텍스트 에디터 적용

WiniLogis는 글로벌 무역 부킹 서비스를 제공하는 플랫폼으로, 블로그를 운영하고 있습니다.현재 블로그의 콘텐츠는 WiniLogis 관리자 사이트를 통해 관리되지만, 단순 텍스트만 입력할 수 있다는 문제가 있어 다른 플랫폼에서 운영하는 블로그에 비해 가독성이 떨어지는 문제가 있었습니다. WiniLogis 관리자의 블로그 글 작성 시 가독성 문제를 해결하기 위해, 텍스트 에디터를 도입하여 글을 편집할 수 있도록 개선한 방법에 대해 작성하려고 합니다.먼저 React 프로젝트와 잘 어울리는 텍스트 에디터를 찾기 위해 여러 정보를 조사했습니다. 아래 글을 통해 다양한 텍스트 에디터의 종류를 확인하고, 각 에디터의 장단점을 비교하여 최종적으로 적용할 에디터를 결정했습니다.https://code-b.dev/bl..

지식 정리 📝 2024.09.25
원티드 프리온보딩 프론트엔드 - 선발 과제

CRA를 활용해서 프로젝트를 생성하였고 CSS는 Tailwind CSS를 사용했다. 라우팅 방식은 React-Router-Dom을 활용했다. 진행하면서 가장 시간을 들였던 부분은 수정 버튼을 눌렀을 때 버튼이 바뀌고 수정 이후 TodoList의 state를 변경하는 과정이었던 것 같다. const handleUpdateTodo = async ( id: number, checked: boolean, changeTodo: string ) => { if (!token) return; const responseTodo = await fetchUpdateToDoApi( token, id, checked, changeTodo ); const updateTodoList = todoList.map((todo) => {..

카테고리 없음 2023.06.10
원티드 프리온보딩 프론트엔드 인턴십 (6월)

원티드 프리온보딩 프론트엔드 인턴십 (6월) 과정에 지원할까 라는 생각이 들어서 사전과제를 접하게 되었다. 사전 과제는 다음과 같다. https://github.com/walking-sunset/selection-task#api GitHub - walking-sunset/selection-task: 원티드 프리온보딩 선발과제입니다. 원티드 프리온보딩 선발과제입니다. Contribute to walking-sunset/selection-task development by creating an account on GitHub. github.com 오늘 밤에 11시쯤 시작해서 현재 회원가입, 로그인 쪽은 구현을 다 한 것 같다. 토큰이 있을 경우에 리다이렉트 처리도 해두었고 로그인과 회원가입에 대한 예외처리 ..

카테고리 없음 2023.06.10