오늘까지 작업된 스튜디오 페이지가 처음으로
stage로 올라갔다.
반응형작업과 인터랙티브한 요소는 더 추가해줘야 하고,
클라이언트로 부터 정보를 입력받는 입력폼에 다양한 예외처리를 해줘야하는데
생각보다 쉽지 않아 애를 많이먹었다.
동료개발자분들과 CTO님의 코드리뷰를 받으면서 ,
많이 배웠고 스스로도 왜 그러한 코드를 짜게되었는지 묻는 시간이 많이 생겼다.
오늘 한일
- 스튜디오 페이지 완료(예외처리 및 디버그)
- Node.js학습
오늘 배운것
- 정규표현 및 예외처리
- 각 입력에 대한 상태값과 유효성검사를 위한 상태값들을 만들어주었다.
- 초기에는 메시지를 보여주지 않다가 입력된 이후에 메시지를 보여주기 위해 입력값에 null값을 주어,
- 첫 렌더링시에는 보여주지 않고 이후에는 유효성검사를 통한 boolean에 따라 메시지를 보여주었다.
- 입력받은 3개의 input값은 하나의 컨트롤러 에서 핸들링해주었다,
- 제출이후 입력폼 Reset
- 다양한 리셋방법이 있지만 나는 ref를 통해 리셋해주었다. 리셋스크립트 위치에 따라 더블클릭 시 서버에 중복 요청하는 예외처리도 가능하다.
- https://roomedia.tistory.com/entry/이슈-12-react-form-초기화하는-세-가지-방법
이슈 12 react form 초기화하는 세 가지 방법
react에서 form을 초기화하는 데에는 세 가지 방법이 있습니다. js의 event.target.reset()을 이용하는 방법 react의 ref를 이용하는 방법 react의 key를 이용하는 방법 js의 event.target.reset()을 이용하는 방..
roomedia.tistory.com
- 오피스 번호를 입력하거나 +82 10-123-4567 이런식의 입력일 경우는 예상대로 작동하시는지요?
- 고민하면서 만든 하이픈 자동완성 코드는 핸드폰외에 회사연락처나 해외 연락처가 입력되는 경우 대응이 불가능 해서 사용할수 없었다
- 경우의 수가 너무 많기에 이를 모두 커버할수 있는 정규표현식이 가능할지는 잘모르겠다. 우선 기획자의 의도와 추가적으로 클라이언트 상식선에서 입력되는 시나리오를 항상 생각해서 예외처리를해야할듯
- 연락처 하이픈 자동완성⏩
[TIL]22.02.22 - useRef여러개, 카운트업, 정규표현식으로 하이픈 자동입력
실력부족 상당히 많은 시간을 할애했음에도 불구하고 자바스크립트로 온전하게 카운트롤링 애니메이션을 구현하지 못하고 결국 라이브러리의 도움을 받았다. 리액트 조금 할줄아는것뿐 아직
marcoding.tistory.com
- Map 리턴 생략가능
- map을 이해하고 쓰고있다고 생각했지만 리뷰받은 코드에서 수정할 부분이 map을 정확히 이해했다고 보기 어려웠다고 생각이 들었다.
- 메쏘드에 대한 이해를 정확히 하고 사용해야 효율적인 코드를 짤수 있을것같다.
내일 할일
- 스튜디오 페이지 완료( 반응형작업 및 디버그 )
- Node.js학습
- 리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 프로젝트 만들기
'회고' 카테고리의 다른 글
| [TIL]22.03.03 - React Antipatterns to Avoid, video태그, git rebase (0) | 2022.03.04 |
|---|---|
| [TIL]-22.03.02 reboot (0) | 2022.03.02 |
| [TIL]22.02.23 - operator, 배열안의 객체 값 수정 (0) | 2022.02.24 |
| [TIL]22.02.22 - useRef여러개, 카운트업, 정규표현식으로 하이픈 자동입력 (0) | 2022.02.23 |
| [TIL] 2022.02.21 - amplify, React hover, json 줄바꿈 (0) | 2022.02.22 |
