밤은 짧아, 걸어 아가씨야

[트러블 슈팅] 11월이 되어야 관측되는 오류가 있다? 어느덧 프로젝트 완성이 코 앞으로 다가왔다. 모바일에서도 예쁘게 보이는지 스타일링과 UIUX에 중점을 맞춰 리팩토링을 진행하고 있었다. 그러다보니 달력은 넘어가고, 2023년이 2달 밖에 남지 않은 시점이 되었다. 그런데 갑자기 캘린더 헤더가 이상하게 동작했다. 이전 날짜로 이동하는 것은 제대로 되는데, 다음 달로 넘어가질 않았다! 이게 무슨 소린가? 그동안 정상 동작하는걸 몇 달 간 봐왔는데? 알고보니 정말 11월이 되지 않았다면 발견하지 못했을 오류였다. 프로젝트 개발 기간이 길어진 것에 고마워해야 하는 것인지? 😂 만약 실제 서비스하는, 앱스토어에 올라간 앱이라면 급하게 오류 고치고 심사받느라 진땀 뺐을 것이다. 캘린더 헤더 오류 발생 캘린더..

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

[하루한냥] 심리 테스트 구현 : 라디오 버튼 구현하기 라디오 버튼은 예전에 시도했다가 어려워서 잠시 홀드해놓은 학습 내용이었다. 프로젝트를 하면서 더 이상 피할 수 없어졌고, 이참에 HTML Input 태그의 타입과 radio 버튼을 공부했다. 그러나 HTML로 구현하는 것과 React + TypeScript 프로젝트에서의 구현은 조금 차이가 있었다. 몇 가지 꼼수 같기도, 팁 같기도 한 부분이 존재했다. 태그는 안 보이도록 처리하고 태그로 새로 스타일링을 하면 원하는 스타일대로 커스텀할 수 있다는 점을 배웠다. 1. 마크업 작성하기 구현하려는 화면은 이렇다. 총 10개의 질문이 있고, 각 질문에 정도를 나타내는 5가지의 답변이 있다. 질문과 답변 5가지가 한 세트이다. 이 중 이용자가 한 가지 버튼만..

원티드 프리온보딩 프론트엔드 챌린지 9월 반응형 웹사이트 개념 정리&강의 후기 당신의 코드는 기본에 충실한가요? | 프리온보딩 FE 챌린지 9월 | 원티드 무료로 양질의 교육을 들어보세요! 챌린저만을 위한 다양한 혜택을 제공해드리고 있습니다. www.wanted.co.kr 원티드 프리온보딩 9월의 주제는 반응형 웹사이트였다. 지금까지 프리온보딩을 7번 정도 들었는데, 대부분 자바스크립트나 리액트에 관한 것이었다. 그만큼 자바스크립트를 잘 다루는 것이 프론트엔드 개발자의 핵심 능력처럼 여겨지기 때문이다. 그런데 질문이나 고민글을 읽어보면 의외로 CSS 스타일링 작업에 어려움을 겪는 프론트엔드 분들이 많아보였다. HTML과 CSS는 당연하게 일정수준 이상의 능력이 있을 것이라 간주하고 자바스크립트 학습을 하..

[리팩토링] useRef로 반응형 resize 이벤트 구현하기 모바일에 최적화된 프로젝트를 기획했지만, 모바일이라고 모든 기기가 동일한 크기를 가지고 있지는 않다. 여러 기기에 맞춰 특별히 어디가 모나지 않은 스타일링을 하기 위해서는 반응형 웹페이지로 구현하는 것이 중요하다. 주변 프론트 개발자분들이 반응형 때문에 어려움을 겪는 것도 보았기 때문에 중요하게 생각하고 있는 문제였다. 이번 리팩토링 시간에는 미디어쿼리를 이용해 실시간으로 완벽한 반응형 페이지를 구현하는 것은 아니지만, 리액트와 자바스크립트를 이용해 resize 이벤트를 만들어보려 한다. 추가로 쓰로틀링 기법을 이용해 최적화까지 진행할 것이다. 1. 기존의 상태 일기 작성 및 수정 페이지와, 타임라인 페이지 두 곳에서 해당 문제가 일어났다. ..