실전프로젝트가 시작되었다.
프론트+백+디자이너가 협업하여 하나의 웹사이트를 만든다니...!
회의, 회의, 회의의 반복이지만 역시 집단지성의 힘인가 내가 전혀 고려하지 못했던 부분들을 짚어내며 하나식 의견을 조율해나가는 일이 재밌고 신기한 한주였다.
프로젝트 주제에 관한 생각
우리팀은 직장인들을 대상으로 점심시간 함께 점심을 먹을 사람을 찾는 서비스를 진행하기로 했다.
처음 논의에선 '점심식사'에 중심을 두고 밥에 초첨을 맞췄었는데 여러 회의를 거쳐 이런 서비스를 이용하는 사람들은 '만남'이 더 중요할 것 같아 기존에 나왔던 메인 구성을 인물이 강조되게 변화시켰다. (프로필사진강조라던지 매너온도 부각)
내가 맡은 기능
저번 프로젝트에서 수정페이지를 못만들었던게 아쉬워서 이번에는 CRUD를 모두 구현하기로 했다.
프로필 상세페이지와 수정페이지를 맡았는데, 뷰나 서버가 완전히 나오지 않은 상태해서 각자 기능을 쪼개 구현하다보니 처음에 감이 오지 않아 많이 버벅거렸다.
이번주는 조급해하지 않고 다시 차근차근 해나가며 배움의 시간이 길었던 것 같다. 실력이 빠르게 오르지 않아 답답하고 한동안 우울했는데 주말이 되어서야 뭔가 조금 깨우치고 수정페이지를 완료할 수 있었다.
한주의 배움
1. preview
알고보니 되게 간단했지만 알기 전까지 날 너무 힘들게 만들었던 preview........혹시 다음번에 또 만들일이 생길까봐 왕왕왕초보용으로 정리해놨다.
preview만들기
2. 조건부렌더링
useSelector((state) => state) 는 콘솔에 찍히는데
useSelector((state) => state.user.user.email) 이런식으로 타고 들어가니
값을 못불러오고 에러가 뜬다.
물어봤더니 값이 도착하기 전에 불러서 그렇단다.
이럴땐 조건부 렌더링을 사용해야한다고 배움.....(&&연산자를 사용하기)
그리고 불러올때
useSelector((state) => state.user.user.email)
이런식으로 길게 부르지말고
여러곳에 재사용 해야하니
const user = useSelector((state) => state.user.user);
이렇게 만들어놓고
const [email, setEmail] = useState(user.email);
바로 갖다쓰면 코드를 줄일 수 있다는 것을 배웠다.
베이스가 없는 상태에서 리액트를 때려붓다보니 군데군데 지식이 구멍나 있다.
이 구멍을 메꾸기위해 분주했던 한주........
이제 슬 적응하고 감 잡았으니 다음주는 속도를 올려봐야겠다!
