CSS 및 CSS-in-JS 코드의 일관성을 유지하고 자동으로 정렬하기 위해 stylelint를 설정하는 과정을 진행하던 중 작성되었습니다. 협업을 통해 코드를 짜다보면 팀 내 코드 스타일을 통일하는 과정이 중요하다. 그래서 주로 pretteir 나 lint를 사용하는데 stylelint 도 그중 하나로 팀 내 코드 스타일을 통일하고 코드 품질을 높이는 데 도움을 준다. 1. Stylelint란? Stylelint는 스타일시트(CSS, SCSS, CSS-in-JS 등)를 분석하고 오류를 찾아내는 린터(Linter)이다. 이를 사용해서 코드 품질을 유지하고 코드 스타일을 통일할 수 있다. 제공하는 주요 기능:문법 검사: CSS 및 SCSS, CSS-in-JS에서 발생할 수 있는 문법 오류를 자동으로 찾기...

우아콘2024 듣고 감명받은 "우아한플레이그라운드" 제작기 따라 해보기 (2편) 첫 번째 작업 이후 두 번째 업데이트입니다~!!그동안 자잘한 작업들을 해보긴 했지만, 중간에 `방끗` 런칭과 면접 준비 등 여러 일이 겹쳐 이제야 2편을 작성합니다. 지난 1편에서는 에디터와 프리뷰를 사용해 코드를 띄우는 작업까지 진행했습니다.  이번에 이어서 진행할 단계는 npm 라이브러리 로드입니다.  많은 라이브러리를 사용하고, 특히 디자인 시스템을 보여주는 에디터라면 라이브러리 로드는 필수적인 세팅입니다.브라우저에서의 module resolution을 해결하기 위해, 저도 세션과 동일하게 ESM 기반의 CDN인 esm.sh을 활용해 npm 라이브러리를 로드했습니다.  먼저, 간단하게 esm 코드를 사용해 임포트를 시도..

우아콘 2024 후기 - "우아한플레이그라운드" 제작기 따라 해보기지난 10월 말, 운 좋게도 우아콘 2024에 당첨되어 올해 우아한형제들의 다양한 인사이트를 직접 들을 수 있었다.그중에서 가장 기억에 남는 세션은 추용혁(솔로스타) 님의 "디자인 시스템 문서를 생동감 있게 만들기 위한 ‘우아한플레이그라운드’ 제작기"였다. 처음엔 솔로스타 님이 우테코 선배이셔서 어떤 발표를 하실지 궁금했었는데, 발표 내용이 흥미로워 점점 더 빠져들었어요.솔로스타 님은 배민을 위해 제작한 플레이그라운드라는 디자인 시스템 문서를 어떻게 생동감 있게 만들었는지에 대해 이야기해 주셨습니다. 왜 우아한플레이그라운드를 만들었을까?솔로스타 님은 입사 후 공통 컴포넌트의 사용법을 찾는 과정에서 겪었던 불편함을 해결하기 위해 우아한플레이..

불필요한 리렌더링 문제 해결하기프로젝트를 진행하다 보면 성능 이슈 중 하나로 페이지 리렌더링 문제가 자주 발생합니다. 특히, 우리 방끗과 같이 여러 개의 인풋 필드가 있는 폼을 제공하는 서비스에서 사용자가 입력할 때마다 페이지 전체가 리렌더링 되는 경우 성능 저하를 유발할 수 있습니다. 우리도 같은 문제를 겪었고 이번 글에서 우리 팀이 이러한 문제를 해결한 과정을 공유하고자 합니다.   1. 문제 정의: 페이지 전체 리렌더링문제가 발생한 페이지는 방의 기본 정보를 입력하는 약 10개의 인풋 필드가 있는 폼 페이지였습니다. 초기 작업할 때는 빠르게 작업을 진행하려다보니 발견하지 못했지만 레벨 3 이후 프로젝트 회고를 통해 이러한 이슈가 있다는 것을 발견했습니다. 발견된 문제는 폼의 각 인풋 필드가 변경될 ..

기사단원의 무기: 약수 구하는 최적의 알고리즘 이 문제는 기사들이 자신의 번호에 해당하는 약수의 개수만큼의 공격력을 가진 무기를 구매하는 문제입니다.또한, 특정한 제한 수치 이상의 공격력을 가지게 되는 기사는 대체 공격력을 가진 무기로 변경해서 구매해야합니다. 즉! 각 기사의 무기 공격력을 구하고, 이를 모두 합산하여 무기 제작에 필요한 철의 총 무게를 구하는 것이 답입니다. 1. 문제 해결을 위한 주요 단계약수 개수 계산: 각 기사 번호의 약수를 구하는 방법을 이용해, 각 번호에 해당하는 약수의 개수를 구합니다.제한 조건 처리: 약수의 개수가 주어진 제한 수치보다 큰 경우, 대체 공격력을 적용합니다.합산: 모든 기사의 공격력(즉, 약수의 개수 또는 대체 공격력)을 합산하여 최종 결과를 반환합니다. 2...

1. 프로젝트 배경문제 인식: 사용자 피드백과 개선 필요성모니터링을 진행하며 우리 팀은 최근 서비스 내에서 질문 커스텀 기능의 사용자 클릭률이 저조하다는 문제를 발견했습니다.특히, 유저 테스트를 통해 이 기능을 잘 모르거나 사용에 어려움을 느끼는 사용자가 많다는 사실이 드러났습니다. 이러한 피드백을 바탕으로 사용자 경험을 최적화할 필요성을 느꼈고, 이를 통해 기능 사용률을 높이기로 했습니다.목표 설정: UX 최적화와 사용자 경험 향상프로젝트의 목표는 단순한 기능 추가가 아닌, 사용자들이 직관적으로 해당 기능을 발견하고 활용할 수 있도록 UX를 개선하는 것이었습니다. 이를 위해 여러 차례의 A/B 테스트와 사용자 피드백 수집을 통해 사용자 경험을 지속적으로 향상하기로 했습니다. 2. 사용자 피드백 수집 과..

문자열 나누기 문제: 규칙에 따라 문자열을 분해하는 방법 이 문제는 문자열을 주어진 규칙에 따라 여러 부분으로 분해하고, 분해된 문자열의 개수를 구하는 문제이다.  문자열을 첫 글자를 기준으로 나누고 그에 따라 조건이 충족되는 시점마다 분리하는 과정을 반복하여 최종적으로 분해된 문자열의 개수를 구하기만 하면 된다.   1. 문제 정의첫 글자를 읽고, 이 글자를 x라고 정의한다. 문자열을 왼쪽에서 오른쪽으로 읽어나가면서 x의 개수와 x가 아닌 다른 문자의 개수를 각각 센다두 개수가 같아지는 순간까지 읽은 부분을 하나의 문자열로 분리한다나머지 문자열에 대해 동일한 과정을 반복합니다. 남은 문자열이 없으면 종료한다만약 문자열을 다 읽었는데도 두 개수가 같지 않다면, 현재까지 읽은 부분을 하나의 문자열로 처리하..

안녕하세요 이 글은 지극히 오블완 챌린지를 위한 글로써 전혀 개발 관련 글이 아니기 때문에 읽으실 필요가 없습니다. 윗 말을 적는 이유는 블로그를 우테코에 등록 시켜놨더니 글이 올라갈 때마다 자동으로 슬랙에 올라가서 너무 민망해서 적음… 어제 글에 회사 불난 이야기만 있는데 그걸 10분이나 넘게 봐서 매우 창피했습미다… 혹시나 이것도 읽고 계신다몀 제발 읽기를 멈춰주세요.. 아무틈 오늘은 엄마가 울산에서 올라오셔서 잠실에서 맛난 저녁과 바지를 쇼핑했답니다.. 오늘 일상 끗

오블완 챌린지를 위한 일상 공유 타임~~!!  사실 어제 회사에 불이 났다...ㅋㅋㅋㅋㅋ충격적인 근황 공유  아니 회사에서 담배 냄새 + 뭔가 타는 냄새가 계속 나왔는데 아무도 내말 안믿어줘서 투덜거리고 있었는데 아니 진짜 불이 났었던거에요.. 아무도 안믿어서 줘서 진짜 혼자 내 코가 예민한가?? 이러고 있었는데 어느 순간 보니 엘리베이터에서 연기가 폴폴 나고 있었지 뭡니까.. 진짜 웃겨 아주  아무튼 그래서 13층에서 계단 타고 내려왔습니다. 내려오는 길에 어지러워서 힘들었습니다. 휴휴 암튼 그럽니다  내일도 적을 수 있기를 끝~~!!!