리팩토링 4

[리팩토링] 처음 만난 모바일, 효도폰 어플을 만든 사연

[리팩토링] 처음 만난 모바일, 효도폰 어플을 만든 사연 열심히 디자인하고 개발한 프로젝트에 스타일링 문제가 있을 거라곤 생각지 못했다. 모바일 화면을 직접 보기 전까지는. 이번 포스트는 모바일 화면에 맞춰 프로젝트를 진행할 때, 실제 기기로 디버깅하는 것이 중요하다는 깨달음의 과정을 담고 있다. 컴퓨터 브라우저에서는 정상적으로 동작해도, 모바일 기기로 테스트해보면 이상하게 돌아가는 버그도 있었다. 동일한 프로젝트를 실행할 때 데스크탑과 모바일 환경에서 어떤 차이가 있는지 알아보고, 리팩토링하는 과정을 적어본다. 문제 1. 실제 기기와 개발 환경에서의 화면 차이 모바일 최적화된 애플리케이션을 만들고자 했으면서, 실제 기기로 테스트를 해볼 생각은 뒤늦게 했다. 프로젝트가 마무리된 지금에서야 확인한 것은 아..

[하루한냥] 심리 테스트 구현 : API 호출 함수 분리하기

[하루한냥] 심리 테스트 구현 : API 호출 함수 분리하기 하단의 4개 메뉴 중 마지막 큰 과업으로는 '심리 테스트'가 남았다. 현재는 스트레스 검사 하나뿐이지만, 추후 다른 테스트가 추가될 수 있을 여지를 남겨놓고 작업 중이다. 이번 내용은 API 함수를 필요한 페이지에서 바로 작성하는 것이 아니라, 모듈로 분리해서 사용하는 방법을 적어보려 한다. 미처 몰랐던 내용인데 멘토님께서 이런 방향으로 작업해 보라고 알려주셨다. 기존에 내가 코드를 작성했던 방법과, 리팩토링 과정을 남겨본다. 1. REPORT 플로우 라우팅 구성은 아래 스크린샷과 같다. 우선 메인 '/report' 페이지에서는 검사를 새로 하거나, 이전의 검사결과를 볼 수 있다. 7일 이내에 검사를 중복해서 할 수 없도록 처리했기 때문에 새로..

[리팩토링] 디렉토리별 index를 이용한 모듈화 작업하기

[리팩토링] 디렉토리별 index를 이용한 모듈화 작업하기 중요한 캘린더 부분을 마치고, 중간 점검하는 시간을 가지기로 했다. 이슈와 PR 이름을 아예 '리팩토링'으로 지었다. 그동안 인지는 했지만 미처 신경쓰지 못한 부분이나, 후순위로 밀렸던 태스크, 효율적으로 개선할 수 있을만한 내용을 이번 PR에서 작업 중이다. 멘토님께 리뷰를 받아가며 작업하니, 내 수준에서 몰랐던 노하우도 많이 배우고 있다. 이번 포스트에는 import 할 때 좀 더 깔끔하게 가져오도록 하는 index 사용 방법과 주의점을 적어본다. 1. 기존의 import CalendarPage.tsx 파일의 import 현황이다. export default로 내보낸 것과, 그냥 export로 내보내서 객체로 묶어 가져온 것이 섞여있다. 2...

[하루한냥] 레이아웃 구현 : 메뉴바 구현과 리팩토링

[하루한냥] 레이아웃 구현 : 메뉴바 구현과 리팩토링 드디어 개인 프로젝트를 시작했다. 매일 고양이 스티커로 하루의 기분을 기록하는 감정일기장 프로젝트이다. 워낙 이것저것 기록하는 것을 좋아하기도 하고 고양이도 좋아해서 이런 프로젝트를 해보면 재밌을 것 같았다. 피그마로 UIUX 스토리보드 기획과 디자인까지 직접 다 진행하고 있다. 프로젝트 세팅과 기본적인 구성을 마치고 이제 레이아웃 구현을 하고 있다. 별로 어렵지 않았던 이전 작업들에 비해 이번 메뉴바 구현은 조금 어려운 점이 있었다. 이번 글에서는 메뉴바를 구현하고 코드를 리팩토링해가는 과정을 담아보았다. 디자인 시안 모바일 최적화된 프로젝트이기에 뷰포트의 크기를 width 440px, height 920px으로 잡고 디자인했다. 기본적인 레이아웃은..