https://blog.cruru.kr/author/%EC%A0%95%EC%9A%B0-%EB%B0%95/ Recent content in 정우 박 on 팀 크루루의 개발 이야기 Hugo -- gohugo.io ko-kr Mon, 16 Dec 2024 00:40:00 +0000 https://blog.cruru.kr/docs/frontend/%EC%A7%80%EC%9B%90%EC%9E%90-%EC%82%AC%EC%9A%A9%EC%9E%90-%ED%9D%90%EB%A6%84%EC%97%90-%EB%94%B0%EB%A5%B8-%EC%A0%91%EA%B7%BC%EC%84%B1-%EA%B0%9C%EC%84%A0-00a39bc37b6a47748a41cf1700c3865a/ Mon, 16 Dec 2024 00:40:00 +0000 https://blog.cruru.kr/docs/frontend/%EC%A7%80%EC%9B%90%EC%9E%90-%EC%82%AC%EC%9A%A9%EC%9E%90-%ED%9D%90%EB%A6%84%EC%97%90-%EB%94%B0%EB%A5%B8-%EC%A0%91%EA%B7%BC%EC%84%B1-%EA%B0%9C%EC%84%A0-00a39bc37b6a47748a41cf1700c3865a/ 이 글은 우아한테크코스 프론트엔드 6기 러기에 의해 작성되었습니다. 접근성 개선 대상 설정 link크루루 서비스의 구조와 사용자 분석 link 백오피스: 관리자용 인터페이스. 전문 사용자로 제한된 인원이 사용할 것으로 예상 클라이언트 오피스: 지원자용 인터페이스 다양한 배경, 능력을 가진 일반 사용자들을 예상 (잠재적 장애 사용자 포함) 우선순위 설정 link접근성 개선의 우선순위는 지원자 인터페이스에 두기로 결정했습니다. 이는 지원자 층이 다양한 디지털 리터러시 수준과 잠재적 장애 사용자를 포함하고 있기 때문입니다. 또한 일반 사용자들의 자유를 보장하고 사회적 포용성을 높이는 것이 중요하다고 판단했습니다. https://blog.cruru.kr/docs/frontend/%ED%81%AC%EB%A3%A8%EB%A3%A8-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9D%98-popovermenu-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EA%B0%9C%EC%84%A0%EA%B8%B0-14b03c21d39b4b068b8b29e0e5de4aad/ Sat, 16 Nov 2024 00:37:00 +0000 https://blog.cruru.kr/docs/frontend/%ED%81%AC%EB%A3%A8%EB%A3%A8-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9D%98-popovermenu-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EA%B0%9C%EC%84%A0%EA%B8%B0-14b03c21d39b4b068b8b29e0e5de4aad/ 이 글은 우아한테크코스 프론트엔드 6기 러기에 의해 작성되었습니다. 1. createPortal로 구현된 PopoverMenu 이벤트 처리 문제 해결 linkReact에서 createPortal을 활용해 팝오버 메뉴(Popover Menu)를 구현할 때는, 스타일과 이벤트 처리에 대한 고려가 필요합니다. 이번 포스트에서는 기존 CSS hover를 사용하는 코드에서, React 상태(useState)로 이벤트를 관리하는 코드로의 전환 과정을 소개하고, createPortal 사용 시 발생하는 이벤트 버블링 문제 해결 방법을 다룹니다. 기존 서비스에서 Popover Menu는 특정 요소에 종속되지 않고 자유롭게 위치하도록, createPortal을 활용해 body에 렌더링했습니다. createPortal을 사용하면 overflow: hidden과 같은 부모 요소의 스타일 영향을 받지 않아, Popover Menu가 자유롭게 표시될 수 있습니다. https://blog.cruru.kr/docs/frontend/%ED%81%AC%EB%A3%A8%EB%A3%A8-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9D%98-%EC%9E%90%EB%8F%99-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EB%AC%B8%EC%A0%9C%EC%99%80-tanstack-query-%EC%BA%90%EC%8B%B1-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%EA%B8%B0--bd8bda7fcc6a49688d5d7f62ffdfb066/ Wed, 13 Nov 2024 00:55:00 +0000 https://blog.cruru.kr/docs/frontend/%ED%81%AC%EB%A3%A8%EB%A3%A8-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9D%98-%EC%9E%90%EB%8F%99-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EB%AC%B8%EC%A0%9C%EC%99%80-tanstack-query-%EC%BA%90%EC%8B%B1-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%EA%B8%B0--bd8bda7fcc6a49688d5d7f62ffdfb066/ 이 글은 우아한테크코스 프론트엔드 6기 러기에 의해 작성되었습니다. 이번 스프린트에서 크루루 서비스는 자동 로그인 기능을 구현했습니다. 하지만 정상적으로 동작하지 않았고, 정확한 원인을 파악하기 어려운 상황이었습니다. 클라이언트 측에서 에러가 던져졌으나, 네트워크 요청은 200 응답을 보이는 이상한 현상이 발생했습니다. 서버와 클라이언트 중 어디서 문제가 발생했는지 알 수 없었기 때문에, 여러 방법을 통해 디버깅을 진행했습니다. APIClient를 직접 점검했지만, 별다른 문제는 보이지 않았고, 심지어 에러를 throw하는 코드 주변에 console.log를 추가해도 아무것도 찍히지 않았습니다. 이처럼 이상한 증상을 기반으로 저는 Tanstack Query의 캐싱 메커니즘이 원인이 아닐까 생각했고, Tanstack Query Dev Tool을 활용해 확인한 결과, 예상대로 에러 데이터를 캐싱하고 이후에도 해당 데이터를 재사용하는 것이 문제임을 발견했습니다. https://blog.cruru.kr/docs/frontend/ats-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9D%98-%EB%B3%B5%EC%9E%A1%ED%95%9C-%EA%B8%B0%EB%8A%A5%EC%9D%84-%EC%A7%81%EA%B4%80%EC%A0%81%EC%9C%BC%EB%A1%9C-%ED%81%AC%EB%A3%A8%EB%A3%A8%EC%9D%98-%EA%B0%9C%EC%84%A0-%EA%B3%BC%EC%A0%95-481c4513eddc410a96001e4623159257/ Thu, 24 Oct 2024 10:45:00 +0000 https://blog.cruru.kr/docs/frontend/ats-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9D%98-%EB%B3%B5%EC%9E%A1%ED%95%9C-%EA%B8%B0%EB%8A%A5%EC%9D%84-%EC%A7%81%EA%B4%80%EC%A0%81%EC%9C%BC%EB%A1%9C-%ED%81%AC%EB%A3%A8%EB%A3%A8%EC%9D%98-%EA%B0%9C%EC%84%A0-%EA%B3%BC%EC%A0%95-481c4513eddc410a96001e4623159257/ 이 글은 우아한테크코스 크루루팀 러기, 렛서에 의해 작성되었습니다. ATS(Applicant Tracking System) 서비스는 지원자 검색, 필터링, 평가 관리, 메일 발송 등 다양한 기능을 포함하고 있어 사용자 인터페이스(UI)의 역할이 매우 중요합니다. 크루루 역시 간소화된 ATS 서비스로서 다양한 기능을 제공하며, 사용자 테스트(UT)를 통해 받은 피드백을 바탕으로 여러 기능을 추가해 왔습니다. 이 과정에서 많은 UI 요소를 한 화면에 배치해야 하는 어려움도 있었습니다. 그러나 복잡한 절차를 간편하게 만든다는 크루루의 핵심 가치를 잊지 않고, 이를 실현하기 위해 팀원들은 끊임없이 소통하고 협력했습니다. https://blog.cruru.kr/docs/frontend/refresh-token%EC%9D%80-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%A0%EA%B9%8C-87b4bbde71904d90a9de87e1aa6d76d6/ Fri, 27 Sep 2024 01:27:00 +0000 https://blog.cruru.kr/docs/frontend/refresh-token%EC%9D%80-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%A0%EA%B9%8C-87b4bbde71904d90a9de87e1aa6d76d6/ 이 글은 우아한테크코스 프론트엔드 6기 러기에 의해 작성되었습니다. 일반적으로 알고 있는 Refresh Token의 역할을 되짚어보겠습니다. Access Token은 유효 기간이 있는 인증 토큰으로, 만료되면 더 이상 보호된 리소스에 접근할 수 없습니다. 이때 Refresh Token을 사용하여 새로운 Access Token을 요청할 수 있습니다. 새로운 Access Token을 받으면 이를 사용하여 원하는 리소스에 접근할 수 있습니다. 그렇다면, “Refresh Token만 가지고 있으면, Access Token을 발급받아, 원하는 리소스를 얻을 수 있는 것 아닌가?” 라는 생각이 들 수 있습니다. https://blog.cruru.kr/docs/frontend/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90-%EC%95%84%ED%86%A0%EB%AF%B9-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%A8%ED%84%B4-%EB%8F%84%EC%9E%85%ED%95%98%EA%B8%B0-fff1e50d803f8119be82c53c771bb056/ Thu, 26 Sep 2024 05:49:00 +0000 https://blog.cruru.kr/docs/frontend/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90-%EC%95%84%ED%86%A0%EB%AF%B9-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%A8%ED%84%B4-%EB%8F%84%EC%9E%85%ED%95%98%EA%B8%B0-fff1e50d803f8119be82c53c771bb056/ 이 글은 우아한테크코스 프론트엔드 6기 러기에 의해 작성되었습니다. 크루루 서비스는 리액트 웹 어플리케이션으로 Emotion-Styled를 사용하는 구조를 사용하고 있습니다. 서비스 개발 초기 단계에서 우리는 컴포넌트 분리에 대한 명확한 기준을 가지지 않았습니다. 이는 서비스 도메인에 따라 컴포넌트 구조가 변경될 사항이 많을 것이라 예상했기 때문입니다. 이러한 이유로 우리는 유연하게 변화에 대응할 수 있는 컴포넌트를 만들고자 했습니다. 하지만 서비스가 확장됨에 따라 공통 컴포넌트의 수가 늘어나고, 복잡한 컴포넌트들이 생기기 시작했습니다. 이로 인해 코드의 관리가 어려워졌고, 각 컴포넌트 간의 역할과 책임이 모호해지는 문제가 발생했습니다. https://blog.cruru.kr/docs/frontend/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C%EC%9D%98-%EB%AA%A8%EB%8B%88%ED%84%B0%EB%A7%81-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95-feat-sentry-ga-fff1e50d803f8187aad5d61fa8bf7390/ Thu, 26 Sep 2024 05:49:00 +0000 https://blog.cruru.kr/docs/frontend/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C%EC%9D%98-%EB%AA%A8%EB%8B%88%ED%84%B0%EB%A7%81-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95-feat-sentry-ga-fff1e50d803f8187aad5d61fa8bf7390/ 프론트엔드에서의 모니터링 환경 구축 feat Sentry, GA link프론트엔드 개발에서 사용자 경험과 시스템 안정성을 보장하기 위해 모니터링 도구는 필수적입니다. 저희 팀은 여러 모니터링 도구 중에서 Sentry와 Google Analytics(GA)의 도입 여부를 논의하였습니다. 이 글에서는 Sentry와 GA가 무엇인지, 그리고 도입 배경에 대해 이야기해보려고 합니다. Sentry란 무엇일까? linkSentry는 애플리케이션에서 발생하는 오류를 실시간으로 모니터링하고 추적하는 도구입니다. 이를 통해 개발자는 오류가 발생한 원인과 위치를 빠르게 파악할 수 있으며, 더 많은 사용자에게 부정적인 영향을 미치기 전에 문제를 해결할 수 있습니다.