> 개발/React14 [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] 회원가입창 Grid 맛보기 2023년 1월 4일 작성 통으로 만들었던 회원가입 화면을 컴포넌트 분리로 다시 만들고 있다. 작업하는 김에 회원가입 창을 이전과 다른 방식으로 만들어보기로 했다. 마켓컬리 사이트에 가보면 회원가입 창에서 아이디, 비밀번호, 비밀번호 확인 등은 span 태그 안에 label 태그로 구성되어 있고, input 창은 div 속에 있고, 버튼 창, 혹은 버튼이 없는 공간에도 div가 만들어져있다. 그래서 나도 마켓컬리의 방식대로 처음엔 구조를 짰었다. [SignUp.js] 이메일* {emailError} 중복확인 버튼이 아닌 곳은 그러다 보니 쓸데없이 버튼이 없는 곳에도 'none' 클래스네임을 가진 div를 줘야했다. div 세 가지를 만들어놓으니 CSS로 레이아웃을 잡는 것은 편했지만 CSS도 120줄 정.. 2023. 3. 1. [React] 회원가입 화면 Form으로 만들기 2023년 1월 3일 작성 이번주부터 프로젝트 기간이다. 우리 팀은 1차 프로젝트로 마켓컬리 사이트를 클론하기로 했다. 사이트를 나눠보니 1. 로그인 2. 회원가입 3. 메인(상품리스트) 4. 장바구니 5. 세부 상품 페이지 6. 마이페이지 7. 결제 페이지 8. Nav 9. Footer 정도가 나왔다. 우리팀은 프론트엔드가 3명이라 처음부터 3개 정도씩 분담할까 하다가 다음주 금요일까지 완성하는 게 가장 중요하다고 생각해서 각자 하고싶은 페이지를 한두개씩 정하고, 작업이 빨리 끝난 사람이 하나씩 담당하기로 했다. 나는 로그인과 회원가입 페이지를 맡았다. 첫 번째 이유는 처음으로 form 을 적용해보고 싶어서이고 두 번째 이유는 지난 번에 통신을 할 때 쩔쩔매서 다시 해보고 싶었다. 그래서 맡은 업무를 .. 2023. 2. 28. [React] Login 함수 (handleId와 handlePw) 합치기 2022년 12월 30일 작성 위스타그램 Login.js에는 id와 pw를 각각 저장하는 handleId와 handlePw 함수가 있다. handleId와 handlePw 함수는 Input에 변화가 있을 때마다 id 또는 Pw 변수에 event.target.value 가 저장되도록 하는 함수이다. 지난 번에 멘토님께서 내 코드를 쓱 보시더니 '두 가지 함수를 하나로 합칠 수 있겠네요?' 라고 말씀하셔서 한 번 합쳐보았다. 두 함수를 합치기 전에 handleId와 handlePw 함수를 한 번 더 살펴보자! const handleId = event => { const value = event.target.value; - 1 setInputValues({ ...inputValues, id: value });.. 2023. 2. 27. [React] 댓글 기능 구현 - 구조분해할당 2022년 12월 29일 작성 오늘은 구조분해할당의 개념과 위스타그램에 적용한 구조분해할당 예시를 정리해보려고 한다. 구조분해할당 구조분해할당은 이름 그대로 구조를 분해하고, 할당하는 것이다. 구조분해를 통해 배열이나 객체에서 요소나 프로퍼티(key, value) 를 분해하고, 그것을 새로운 변수에 담을 수 있다. 방법은 이렇다. 배열과 객체를 선언해주는 것과 반대로 입력하면 된다. arr 배열을 구조분해할당한 결과 a 와 b 에는 각각 1과 2가 담기고, obj 객체를 구조분해할당한 결과 name 과 age 에는 각각 'Amie'와 20이 담긴다. 이러한 방법으로 배열 속의 배열, 객체 속의 객체도 구조분해할당할 수 있다! 여기부터는 내가 구조분해할당에 대해 이해한 바를 설명하는거니깐 알아서 걸러들으셔.. 2023. 2. 26. 이전 1 2 3 다음
