✨ 소프트웨어 설계에서 기능단위로 분해하고 추상화되어 재사용 및 공유가능한 수준으로 만들어진 단위를 모듈이라고 하고, 소프트웨어의 성능을 향상시키거나 시스템의 디버깅, 시험, 통합 및 수정을 용이하도록 하는 소프트웨어 설계 기법을 모듈화라고 한다. 문제티니박스 프로젝트 중 진행 기간이 점점 늘어나고, 팀원도 교체되면서 공통 컴포넌트나 함수들이 적절히 사용되지 못하고 있었다. 특히 공통 컴포넌트를 만들어도 문서화가 되지 않아서 한 번 통보 후에 다들 잊어버리기 일수였다. 해결그래서! 새 프로젝트에서는 재사용성을 더 고려하고 조금 더 신중하게 작업해서 문서화 하는 것이 좋겠다고 생각했다.전에 StoryBook에 대해 들은 적이 있어서 해당 기술을 사용하고 싶었으나, 이번엔 React Native라서 사용..
미치 프로젝트 피그마에 올라온 디자인이다.안내 문구를 보면 닉네임 중복 검사 기능이 있다는 걸 알 수 있다. 그런데 중복 검사하는 버튼은? 없다.요즘엔 이렇게 중복 검사, 검색 등 입력하는 값에 따라 즉각 반응하는 UI가 많다(특히 모바일). 그런데 이렇게 하면 언제 사용자가 입력을 끝낼지 모른다!그래서 input 값이 바뀔 때(사용자가 키보드를 누를 때)마다 이벤트 핸들러가 실행되도록 해야 하는데, 그러면 쓸모없는 API 요청이 너무 많이 생기고 서버엔 과부하가 걸릴 수도 있다. 성능, 비용적인 측면에서도 좋지 않은 방법이다. 디바운싱(Debouncing)이걸 해결할 수 있는 방법은 "디바운싱(Debouncing)"을 사용하는 것이다.✨ 디바운싱이란,연이어 호출되는 함수들 중 마지막(또는 처음) 함..
엘리스 프로젝트를 하면서 서버 API를 요청할 때 Base URL을 직접 넣지 않고 "/api"로 접근하는 것이 좋다는 조언을 들은 적이 있다.이렇게 하면 도메인을 바꾸더라도 코드 변경 없이 서버로 연결되기 때문에 확장성 있는 코드가 된다. 실제로 티니박스 프로젝트에서 main 브랜치는 실서비스 도메인(teenybox.com)으로 배포하고 dev 브랜치는 개발 도메인(dailytopia2.shop)으로 배포하여 두 개의 사이트를 사용하고 있는데, 이때 Base URL을 /api로 두면서 굳이 각 환경마다 URL을 변경해주지 않아도 돼서 유지보수가 편해졌다. 트러블 슈팅근데 문제는... 이렇게 하다 보니 local 환경에서는 localhost:3000/api로 요청이 보내진다는 점!그러다 보니 주석으로..
기존에는 div나 image의 비율을 고정하려면 직접 계산해서 width, height 값을 지정하거나 calc()를 사용했다.하지만 원하는 비율을 쉽게 고정할 수 있는 방법이 있다. aspect-ratio사용법.box { width: 100px; /* 요소 가로길이 지정 */ aspect-ratio: 16 / 9; /* 가로:세로 비율 지정 */}만약 하나의 값만 지정할 경우, 높이를 1의 비율로 간주한다.div 뿐만 아니라 이미지, 테이블 등 모든 엘리먼트에 종횡비 적용이 가능하다.width, height 중 하나의 값을 반드시 지정해야하며, 그게 기준이 된다.위의 예로 width 값을 지정했기 때문에 16 / 9는 가로(16) : 세로(9) 비율이 된다.만약 width 대신 height : 1..
웹 프로젝트를 하다보면 날짜나 시간을 나타내야 하는 경우가 있다.이 때 간단하고 체계적으로 포멧을 관리하기 위해 라이브러리를 사용할 수 있다.팀 내에서 가장 먼저 날짜 라이브러리를 사용해야 했던 나는 구글링으로 찾아보고 가장 많이 나오는 라이브러리, 블로그에서 추천하는 라이브러리를 기준으로 Moment.js를 선택했다.이후 오피스아워 시간에 들은 코치님의 조언블로그를 믿지 마라..!블로그는 대부분 우리같은 취준생들이 얕은 지식으로 블로그를 운영하는 경우가 많고, 프로젝트 또는 상황 마다 선택 기준이 달라지기 때문에 남이 추천한다고 해서 무작정 좋은 게 아니라고 하시며 라이브러리나 필요한 패키지를 잘 선택하는 방법을 알려주셨다. Tips1. 구글링 할 때는 한글보단 영어로 검색 -> 되도록 공식문서 보기2..
내가 맡은 파트 중에 사용자가 글을 등록하는 Form 페이지가 있었다. 피그마로 디자인을 하고 문제가 없어서 코드로 구현까지 마친 후 테스트를 위해 직접 작성하려고 하는데, 어딘가 어색하고 불편한 느낌이 들었다. (아무도 피드백을 주진 않았지만... 그냥 내가 불편했음) 그동안 단순하게 제목과 글만 쓰는 블로그에서만 폼을 작성해보다 보니, 날짜, 시간, 가격, 위치 등 다양한 내용을 작성하는 폼을 디자인하는 게 어색했던 탓이었다. 물론 처음 디자인도 나쁜 건 아니었지만, 전문적이지 않은 느낌이 계속 들었는데 나는 '누가봐도 초짜가 만든 사이트'처럼 보이게 두고 싶지 않았다..! 그래서 이것저것 참고해보니 역시 폼 작성과 관련된 가이드가 어느정도 정해져 있었다. 🔗참고한 사이트 왼쪽 사진이 초안이고, 오른..
