프로젝트 시작 🖥
이제 2주 동안 프론트와 백엔드가 소통하면서 하나의 프로젝트를 만드는 시간이다!
우리 팀이 맡은 사이트는 "brunch" 라는 카카오에서 서비스중인 블로그 사이트다.
https://brunch.co.kr/
Branch
프론트엔드 : 3명
백엔드 : 3명
모두 팀 이름을 고민하기 시작했다. 여러가지 팀이름이 나왔지만
우리가 누구인가! 우리는 개발자다!!
git의 branch의 이름을 따와 branch 라는 팀이름을 지었다!
개발자의 블로그 답게 키워드는 개발자 언어로 바꾸기로 이야기가 나왔다.
- 여기있는 키워드를 개발자들의 키워드로 --> JavaScript, Python, C++ ...
프론트 역할분담
프론트엔드에서 페이지를 크게 3가지로 나누었다.
메인 / 상세 / 로그인
내가 맡은 부분은 로그인, 페이지의 시작!!!
로그인, 회원가입, 마이페이지, footer 를 작업하기로 했다.
하루일과
스탠드업 미팅
하루의 시작은 스탠드업 미팅으로 시작한다.
어제 한 일 , 오늘 할 일, 이슈 를 조원들과 소통한다.
소통 방법은 트렐로와 노션을 이용했다.
트렐로로 직관적으로 현재 작업상황을 공유하면서
노션으로 스탠드업미팅 등 회의록을 정리하고 작업진행을 상세히 적어두고 공유했다.
백엔드와 소통을하면서 서로 어떠한 데이터가 필요한지, 현재 작업의 진행상황 및 이슈사항을 이야기하며 오늘의 작업진행을 이야기했다.
모두 각자 코딩
회의가 끝나면 프론트, 백엔드 모두 각자 코딩을 진행한다.
프론트 같은경우 개인이 맡은 페이지를 작업한다!
프론트 회의
자리이동을 하지않고 프론트 3명의 자리에서 현재 작업진행 상황을 공유하고
이슈가 있는 조원을 도와준다!
1주일 중간점검
벌써 1주일이 지나갔는대 시간이 정말 빨리가서 놀라웠다.
프로젝트 기간이지만 동기들과도 1달 뒤면 헤어진다는게 벌써 아쉬운 생각이
스쳐지나갔다...
현재작업진행
로그인 페이지
- 아이디,비밀번호 state값 저장
- 유효성 검사 (정규식 이용)
- 유효성 검사가 맞아야 버튼 활성화
- fetch함수로 백엔드에게 데이터 전달
- 로그인이 된다면 '토큰' 저장
- 이메일, 전화번호 두 가지중 하나만으로도 아이디 대체
유효성검사는 간단한 '@' 여부나 비밀번호 5자 이상 이렇게 밖에 안해봤지만
정규식이라는 것을 처음 사용해보았다. 정규식은 백엔드와 이야기를하고
비밀번호는 대문자,소문자,특수문자,숫자를 포함한 8자 이상으로 맞추었다.
로그인을 하게되면 토큰을 저장하는 기능을 추가하면 로그인 페이지는 끝!
회원가입 페이지
- 데이터 입력값 state값 저장
- 유효성 검사 (정규식 이용)
- 필수입력란의 유효성검사가 맞다면 버튼활성화
- 정상적으로 회원가입이 되면 로그인 페이지로 이동
처음에는 다수의 input때문에 state를 하나하나 다 만들었지만
state의 값을 객체로 주어 코드의 양을 확 줄였다!
계산된 속성명 [name] 이 name의 key가 변수처럼 작용된다!
백엔드와 통신이 성공했지만 다시 한 번 통신을 해보고 작업을 끝낼 예정이다!
const [inputData, setInputData] = useState({
name: '',
nickname: '',
email: '',
password: '',
passwordConfirm: '',
phoneNumber: '',
github: '',
profilePhoto: '',
description: '',
position: '',
});
const handleInput = e => {
const { value, name } = e.target;
setInputData({
...inputData,
[name]: value,
});
};
footer
- 레이아웃 구현
- 상수데이터 map을 이용해 반복
현재 이미지는 중간 텍스트 중에 bold 처리가 안되었지만
브런치의 사이트를 들어가면 '개인정보 처리방침' 부분이 강조되어있다.
map을 사용해서 음....
어떻게 하면 중간에 있는 데이터만 강조를 하지? 고민을 해보다가
map데이터에 bold라는 키를 추가하고 className에 삼항연산자를 사용했다!
<li className={data.bold ? 'listBold' : 'list'} key={data.id}>
