본문 바로가기

Web dev39

프로젝트 구조 설계하기 프리온보딩 인턴십을 진행하며 사전 과제인 Todo 앱을 각자 어떻게 구현해왔는지 리뷰하는 시간을 가졌다. 깔끔한 프로젝트 폴더 구조를 통해 모듈화를 수행하신 분들의 코드를 보게 되었다. 그 전에는 부끄러운 폴더 구조... (components, pages만 대충 나누는 정도였음) 로 구상하던 나에게 모듈화 / 프로젝트 구조 설계에 대한 관심을 갖게 해준 좋은 기회였다. 나의 부끄러운 과거... ㅋㅋㅋㅋㅋ components, pages만 겨우 나누고 components 내에서도 layout 등으로 나누지 않았다. 그리고 저 안에 API 호출과 validation 함수 등이 모두 한꺼번에 들어가있음...(지옥) 이렇게 모듈화를 안해준 것이 코드의 가독성을 매우 해쳤다. 협업 시, 내 코드를 가독성 좋게 작.. 2023. 7. 1.
Tailwind CSS 프로젝트에 도입하기 (특징 / 설치) - 이전 팀 프로젝트를 두 회차 진행하며, CSS 스택 후보로 항상 Tailwind CSS 가 등장했었다. 그러나 항상 익숙한 styled-components에 밀려 채택되지 못했다. "다음번에는 도입해봐야지" 생각만 하다, 채용 과제를 진행하며 드디어 적용해보게 되었다. 이번 계기를 통해 tailwind를 사용해보고, 내가 직접 느낀 장단점까지 향후 정리해보고자 한다. - 도입에 앞서, Tailwind 공식 페이지에서 특징을 탐색해보았다. - utility-first / 개발 속도 향상 - Rapidly build modern website without ever leaving your HTML -> 퍼블리싱 작업을 하면 class 나 기타 CSS 선택자를 신경쓰며 HTML 구조가 있는 파일과 CSS를.. 2023. 7. 1.
Redux-saga 알아보기 채용 과정을 진행하면서, redux-saga를 기술 스택으로 쓰고 있는 회사를 종종 보게되었다. 그리고 현재 과제 전형을 진행하고 있는 회사에서도 redux-saga를 쓰고 있었다. redux-saga가 무엇인지 전혀 배경지식이 없어서, 아래 아티클을 요약하며 읽어보았다. https://min9nim.vercel.app/2020-04-23-redux-saga/ redux-saga 가 해결하는 문제 본 글에서는 redux-saga 를 알고 싶지만 왠지 높아 보이는 진입장벽으로 마음이 불편한 개발자들을 위해 작성되었다. redux-saga 가 필요한 이유와 redux-saga 가 어떤 문제를 해결하는 지에 대한 이해를 min9nim.vercel.app - Redux-saga가 등장하게 된 배경 프로그래밍이란.. 2023. 6. 24.
리액트 프로젝트 구조 설계 (DDD) https://xiubindev.tistory.com/142 React 프로젝트 구조 설계를 넘어서 프론트엔드 아키텍처 설계에 대한 고찰 React 폴더 구조를 어떻게 구성할까? 비즈니스 로직은 어떻게 분리할까? React와 같은 라이브러리로 신규 서비스를 개발하게 되면 프론트엔드 팀에서 가장 첫 번째로 고민해야 할 요소는 프로젝트 xiubindev.tistory.com 위 글을 읽고 간단하게 남기는 글. 요즘 기능구현 챌린지를 하고, 포트폴리오 사이트 구상을 하면서 "개발을 잘 하는 건 뭘까?" 라는 고민을 계속 하게 되었다. 더 나은 구조의 소프트웨어를 설계하는 것이 말처럼 쉽지 않다는 것을 느꼈고, 다른 분들의 고민을 읽어보고 싶었다. 그러던 차에 한 개발자분의 블로그에서 React 프로젝트 구조 .. 2023. 6. 24.