[FE] 디자인 시스템에 아토믹 디자인 패턴 도입하기

크루루 서비스는 리액트 웹 어플리케이션으로 Emotion-Styled를 사용하는 구조를 사용하고 있습니다.서비스 개발 초기 단계에서 우리는 컴포넌트 분리에 대한 명확한 기준을 가지지 않았습니다.이는 서비스 도메인에 따라 컴포넌트 구조가 변경될 사항이 많을 것이라 예상했기 때문입니다. 이러한 이유로 우리는 유연하게 변화에 대응할 수 있는 컴포넌트를 만들고자 했습니다.하지만 서비스가 확장됨에 따라 공통 컴포넌트의 수가 늘어나고, 복잡한 컴포넌트들이 생기기 시작했습니다. 이로 인해 코드의 관리가 어려워졌고, 각 컴포넌트 간의 역할과 책임이 모호해지는 문제가 발생했습니다.우리는 다음과 같은 컴포넌트 구조를 가지고 있었습니다.📦components ┣ 📂appModal ┣ 📂applyManagement ┣ ?..

• format_list_bulleted Front End
• · 2024. 9. 15.
• textsms

[기술서적] 업무에 활용하는 Node.js

1️⃣ 이 책을 선택한 이유는?최근에 진행된 특강에서 Node.js를 메인으로 서버 개발을 하는 개발자를 만났고, 그 경험은 나에게 큰 영향을 주었다. 프론트엔드 개발자로서 백엔드 기술에 대한 이해는 선택이 아닌 필수가 되어가고 있다고 생각한다. 그리고 Node.js는 그 중심에서 매우 중요한 역할을 차지한다고 생각한다(프론트엔드 개발자라서 그렇게 생각하는 것일지도!). 그리고 다가오는 백엔드 개발자의 소통이 필요한 프로젝트에서 효율적인 소통을 위해, Node.js에 대한 기술을 이해하는게 중요하다 생각했고, 이 책을 결정했다.2️⃣ 책을 읽으며 느낀 점들접근성이 좋은 설명이지만, 추가적인 학습이 필요하다고 생각된다."업무에 활용하는 Node.js"는 초보자도 부담 없이 접근할 수 있도록 쓰여졌다. 쉬운..

• format_list_bulleted 기술 서적
• · 2024. 6. 23.
• textsms

[우아한 테크코스 6기] 최종 코딩 테스트 후기, 프론트엔드 풀이 방법

✨월요일에 날라온 1치 합격 메일! 월요일 오후 3시. 너무나 감사하게도 1차 합격 메일을 받았습니다! 이번 과정을 다음 7기 준비하시는 분들, 혹은 불합격 하여 다음에 또 응시하게 될 경우를 대비하여 과정을 기록하려고 합니다! ❗일주일간 이렇게 공부했습니다. 남은 5일 간 최종 시험과 비슷한 환경에서 많은 문제를 풀어보기 위해 노력했습니다. 1시부터 6시까지 시험이기 때문에, 이 시간에 스벅가서 각잡고 풀었답니다! 5기 문제 3주차, 최종. 4기 문제 3주차 최종 문제를 풀었구요. 결론 적으로 최종 시험의 문제 난이도는, 프리코스의 2주차 정도의 양이었고, 4주차 정도의 복잡성을 가지고 있다고 결론을 내렸습니다! 6기 1주차 미션. 야구 게임 6기 2주차 미션. 자동차 경주 6기 3주차 미션. 로또 6..

• format_list_bulleted 우아한 테크코스 6기 프리코스
• · 2023. 12. 17.
• textsms

[개발 상식] Ajax, Axios, Fetch API가 무엇일까?

Ajax Asynchronous JavaScript and XML의 약어로 비동기적으로 서버와 상호작용하여 데이터를 가져오는 기술입니다. XMLHttpRequest를 통한 상호작용. 비동기적으로 작동하므로 요청과 응답이 완료될 때 까지 기다리지 않고 다른 작업을 수행할 수 있습니다. 왜 Ajax를 사용할까요? HTML Form 요소를 이용하여 원하는 데이터를 가져올 수 있습니다 하지만 위의 방법으로 데이터를 받게되면 자동적으로 브라우저 전체에 새로고침이 일어납니다. 따라서 비동기적으로 데이터를 받아올 수 있는 Ajax를 사용합니다. Ajax 기본 코드 //jQuery를 이용하여 사용합니다. $.ajax({ type: "GET", url: "여기에 URL을 입력", data: {}, success: fun..

• format_list_bulleted 개발 상식
• · 2023. 8. 13.
• textsms