2차 프로젝트 기록
시연 영상 및 기억하고 싶은 코드

What?

대한항공 사이트를 모티브로한 사이트인 Welcome2Air 사이트를 만들었다.
메인페이지, 선택페이지, 양식 작성 페이지, 예약 확인 페이지, 소셜 로그인 페이지 구현
👉 내가 구현한 페이지 = 메인페이지

How long?

2021.06.21 ~ 2021.07.02

With whom?

프론트엔드 : 오선주(나), 이상훈님, 이기완님
백엔드 : 박지우님, 이정민님, 범승원님, 손창효님

With what?

기술 스택

• 
• 
• 
• 

협업 도구

• 
• 
• 

Want to remember

👉 모달창 구현하기

나에게 이번 메인페이지를 구현하면서 가장 큰 이슈는 모달창이었다. 메인페이지 자체는 레이아웃이 간단했지만 각각을 클릭했을 때 뜨는 모달창 때문에 시간 할애를 많이했다.
1차 프로젝트 때 모달창을 구현했던 전건우님의 벨로그를 참고해서 function component로 변경해 구현했고 모달이 총 3개여서 chidren을 통해서 모달 안에 내용만 변경시키는게 어떻겠냐는 현찬님의 조언으로 공통 모달창을 통해 기능을 구현했다.

모달을 껐다 켰다 해주기 위해서 state를 토글함수를 통해서 true,false를 반복하도록 구현하였다.

각 모달이 떠야하는 부분을 클릭해주면(onClick 부분) 위의 토글함수가 발동하도록 연결해주었다.

그후에 논리연산자인 && 연산자로 true일 경우에만 모달창이 열리도록 하였다.

❓ &&연산자 : expr1 && expr2 => expr1을 true로 변환할 수 있는 경우 expr2을 반환하고, 그렇지 않으면 expr1을 반환합니다.
false로 변환될 수 있는 표현 예제들은 null, 0, NaN, 빈 문자열 (""), 또는 정의되지 않음 으로 평가될 수 있다.

이때 toClose는 모달창이 켜있을 때 꺼주기위한 것인데 각 모달창안에 'x'표시를 클릭하면 (onClick함수) 모달창이 꺼지도록 props를 통해 넘겨주었다.

이렇게 완성한 모달창을 children을 통해서 안에 내용만 calendar, pickCity,passengerCount 등 내용만 바뀌도록 해주었다.
또한 모달창이 켜졌을 때 스크롤 방지를 위해서 useEffect를 써주었는데 모달창이 켜졌을 때 (componentDidMount()) overflow = 'hidden'을 통해서 스크롤을 멈추게하고 다시 모달창이 꺼질 때(componentWillUnmount()) 스크롤이 작동하도록 overflow = auto를 적용해줬다.

How was it?

1차 때 메인페이지를 구현했기에 2차 때는 다른 페이지를 구현해봐야지 생각했었다. 하지만 대한항공으로 프로젝트가 정해지고 페이지를 살펴봤는데 예약이 가장 중요한 대한항공 페이지에서 메인페이지가 중요해보였고 꼭 구현해보고 싶었다. 모달창, 인원 수 증감 등 1차 때 구현해보지 못해서 아쉬웠던 기능이 눈에 들어왔고 팀원들에게 꼭 메인페이지를 맡고 싶다고 이야기했었다.
모달창 때문에 한 기능에 component가 기본적으로 3개로 나눠져서 state관리가 너무 어려웠다. 멘토님과 상훈님 그리고 다른 동기들의 도움으로 무사히 끝낼 수 있었다. 하지만 아직도 코드가 긴 부분은 고치고 싶어서 시간이 된다면 리팩토링을 가져볼 계획이다.
이번 프로젝트도 좋은 팀원들을 만나서 순조롭게 프로젝트를 끝낼 수 있었다. 모두에게 꼭 고맙다고 말하고 싶고 특히 바쁜 와중에도 나의 질문을 친절하게 답해준 상훈님께 너무 감사드린다는 말을 전하고싶다.(이미 수도 없이 감사하고 죄송하다고 말했지만🤣)

더 기록하고싶은 코드는 다음 글에서 자세히 적도록 하겠다.