react4 [React] 통신 결과 메세지에 따라 에러메세지 보여주기 2023년 1월 13일 작성 프로젝트를 하면서 통신할 일이 많았다. 통신을 하면서 많이 한 일은 백엔드에서 보내주는 통신 결과 메세지에 따라 에러메세지를 보여주는 것이었다. 대표적인 예가 회원가입이다. 회원가입 시 백엔드에서 정해놓은 유효성 검사 규칙에 어긋날 경우 백엔드에서 에러 메세지를 보내주고, 나는 그 값에 따라 에러메세지를 alert 창으로 띄웠다. 따로 프론트엔드에서 input창에 입력된 value를 평가해서 에러메세지를 띄우지 않고, 백엔드에서 보내주는 결과에 따라 에러메세지를 띄우면 되니 편했다. if (result.message === 'KEY_ERROR') { setErrorMsg('빈 칸을 채워주세요'); } else if (result.message === '이메일 양식이 맞지않습니.. 2023. 3. 4. [React] Cannot read properties of null (reading "length') 오류 해결하기 2022년 1월 12일 작성 프로젝트를 하면서 빈 화면만 나타나는 경우가 있었다. 그 원인은 바로 Cannot read properties of null (reading 'length') 오류다! 이 오류는 구하려는 값이 null이여서 length 를 구할 수 없을 때 발생한다. length 를 활용한 부분이 많아서 관련된 부분을 모두 주석 처리 후 하나씩 주석을 해제하면서 오류가 발생한 부분을 찾았다. 그리고 문제를 해결하기 위해서 && 연산자와 옵셔널 체이닝을 활용했다. && 연산자 {cartProducts[0].price && cartProducts[0].productName} 외 {cartProducts.length - 1}개의 상품을 주문합니다. {cartProducts[0].price && c.. 2023. 3. 3. [React] 회원가입 화면 컴포넌트 분리 2023년 1월 5일 작성 지난번의 실수 지난 번에 컴포넌트 분리 없이 회원가입 화면을 구현했었다. 그 결과 자바스크립트 부분과 레이아웃 (심지어 약관동의 부분은 추가하지도 않았는데도..) 을 합쳐 코드가 250줄 가까이 됐다... 이것은 리액트를 활용하지 못한 잘못된 코드이기에 오늘 회원가입창을 아예 새로 다시 만들었다. 처음부터 다시 만들려고 한 것은 아니었다... 당연히 기존의 것을 활용하려고 좌우에 창을 띄워놓고 input 창에 들어갈 리스트를 정리해서 map()으로 화면에 뿌려주려고 했다. 하지만 리스트에 고정된 값이 있는가하면, input에 onchange함수를 통해 값을 가져와야하는 변수도 있어서 이것들을 어떻게 따로 넣어야 할지 감이 안와서 처음부터 한땀한땀 다시 작성했다..그러면서 다음부.. 2023. 3. 2. [React] 회원가입 화면 Form으로 만들기 2023년 1월 3일 작성 이번주부터 프로젝트 기간이다. 우리 팀은 1차 프로젝트로 마켓컬리 사이트를 클론하기로 했다. 사이트를 나눠보니 1. 로그인 2. 회원가입 3. 메인(상품리스트) 4. 장바구니 5. 세부 상품 페이지 6. 마이페이지 7. 결제 페이지 8. Nav 9. Footer 정도가 나왔다. 우리팀은 프론트엔드가 3명이라 처음부터 3개 정도씩 분담할까 하다가 다음주 금요일까지 완성하는 게 가장 중요하다고 생각해서 각자 하고싶은 페이지를 한두개씩 정하고, 작업이 빨리 끝난 사람이 하나씩 담당하기로 했다. 나는 로그인과 회원가입 페이지를 맡았다. 첫 번째 이유는 처음으로 form 을 적용해보고 싶어서이고 두 번째 이유는 지난 번에 통신을 할 때 쩔쩔매서 다시 해보고 싶었다. 그래서 맡은 업무를 .. 2023. 2. 28. 이전 1 다음
