위코드 2차프로젝트 회고록 2️⃣ (Market-Ssua)

문규찬·2021년 2월 11일

두번째 포스팅에서는 코드 위주로 정리해서 기록하고 싶은 부분 위주로 작성해보겠습니다

레이아웃은 크게 top / mid / bottom 으로 나눠서 작업했습니다 (생각나는 class명이 없는,,)
위 사진에서도 보다시피 mid부분에 각 인풋이 들어가 있는 한줄이 반복적으로 구성되어 있어서
mid부분만 component 분리하여 작업했습니다

mid component 입니다
여기서 기록하고 싶은 부분은 각각의 인풋 한줄한줄이 첫번째 줄에서는 마지막에 button이 하나 들어가있고 마지막에는 줄에서는 input 대신 또 button이 들어가있습니다. map 함수를 통해 한줄을 반복적으로 보여주고 있지만 각각 한줄의 key값을 이용해 조건을 걸어 두었습니다.

content.id !== 5 &&
content.id === 1 &&
content.id === 5 &&

를 보시면 input은 1,2,3,4번째 줄만 그리고 첫번째 줄에서는 마지막에 버튼을 보여주고 5번째에는 인풋대신 다른 버튼이 나오도록 하였습니다.

계산된 속성명

정말 이번 작업에서 이해하기 힘든 부분 딱 두가지 뽑으라하면 그 중에 하나가 계산된 속성명이었습니다

handleValue 라는 이벤트를 걸어주고 인풋에 들어오는 value를 state 값에 넣어주는 부분입니다
Map함수를 돌릴때 따로 js파일로 mock data를 작성하였습니다. 각각의 인풋에는 name이 있고 순서대로 name은 email, password ... 순으로 들어가 있습니다

setstate( {[`${name}Value`] : value } )

당시에 이 부분이 도저히 이해가 되지 않았습니다. 인풋에 name으로 이렇게 state값을 넣어줄수 있다고? 사실 결국 빽틱을 사용하여 {name}Value지만 name이 같아서 emailValue , passwordValue 였던 것을,,,,

Validation

회원가입에 필요한 이메일 주소에는 @나 .이 포함되어야 하고 비밀번호는 8자리 이상 그리고 비밀번호 확인은 비밀번호와 value 값이 같아야 했습니다. 모든 조건은 변수로 지정해주고 props로 넘겨주었습니다. 그리고 인풋에 무언가 입력이 되었을때 인풋 아래에 가이드글이 나오도록 하였습니다 (ex- 비밀번호는 8자리 이상)

Validation state값이 기본 false 인데 onChange 이벤트가 발생시 true 값으로 boolean 연산자를 사용하였고 true일때 삼항 연산자를 사용하여 가이드 글이 true이면 초록색 아니면 빨간색으로 나오게 구현하였습니다.

Login 페이지에서 기록하고 싶은 부분은 back-end와의 통신입니다
회원가입을 통해 이용자의 email과 password를 보내고 로그인시 다시 fecth ! back-end와 이전에 맞춰둔 키값으로 value를 보내고 response로 이용자의 토큰을 localstorage에 저장!