[모각코][Reactjs] 개인정보 수정 페이지 구현

인트로

외국인들을 대상으로 하기에 개인정보를 수정할때

First Name, Last Name을 수정할 수 있게 할 것이다.

추가적으로 변경될 수 있는 부분으로

개인프로필 사진, nickName, phoneNumber, country, language 를 수정할 수 있게 만들겠다.

 

코드 구현 및 설명

css를 제대로 공부하지 않았다는 느낌이들어서 좀더 공부하고 나서 css를 적용해보기로 하고 그전에 JavaScript코드먼저 간단하게 구현해보겠다.

 

로그인을 통한 인증방식, 몽고DB와 연동 등 선행되어야 할일이 많이 남아있지만 페이지먼저 구현해보았다.

이미지 업로드 및 미리보기 기능을 눈여겨 볼만하다.

내가 구현하고 싶은 기능이 사용자의 프로필을 수정하는 작업이기 때문에 이미지를 업로드를 할 뿐만 아니라 사용자가 해당 이미지를 미리 볼수도 있어야한다.

그리고 선택이전에 아무런 이미지도 없으면 어색하기에 선택하기전 기본 이미지도 추가했다.

 

38번 줄에 있는 let profile_preview =

부분에서 src에 공식이미지 사이트인 Flaticon에서 "User"를 검색하면 나오는 이미지의 경로를 추가해서 아무것도 선택하지 않았을 경우에 보이는 기본 이미지로 설정했다. 만약 DB, 서버와 연동이 된다면 사용자가 최근에 업로드한 이미지의 경로가 되야할 것이다.

Flaticon에서 User을 검색했을 때 나오는 이미지 중 하나

위 사진에서 "+" 버튼 클릭 -> CSS -> HTML image 부분에서 src 를 복사했습니다.

 

 

accept 속성을 활용해서 jpg, png, jpeg, gif 확장자인 파일만 선택 가능하도록 설정했다.

만약 모든 확장자 파일을 선택할려면 image/* 로 설정해주면 됩니다.

 

참조

이미지 업로드 및 미리보기

FileReader 공식문서

Flaticon_오픈 이미지 볼 수 있는 사이트

FormData 공식문서