문제

aside 컴포넌트를 상단과 우측기준으로 fixed시킨 상황이었습니다.
브라우저를 최대한 확대시킨 상태에선 정상적으로 작동하였지만 브라우저를 축소시킨 상황에서는 main컴포넌트위로 겹쳐지는 이슈가 발생하였습니다.

해결노력

1. float을 사용하여 우측 사이드바를 만들고 그안에 aside블록을 포함시켜봄
2. sticky를 사용해봄(aside컴포넌트가 우측에 붙어야하는데 하단좌측에 붙어버리는 이슈발생)
3. 전체 화면을 3등분(3행)을해서 그 컨테이너들은 flex시키고 가장 우측 블록에 aside를 포함시켜봄
   모두다 실패했다. fixed는 정말 무적의 position인듯해보였다.

정답

정답은 원티드 홈페이지에서 얻을수있었다.

원티드 홈페이지의 특정 페이지도 나의 프로젝트와 마찬가지로 aside태그의 컴포넌트를 포함한 상태였고 원티드의 홈페이지는 정상적으로 작동하였다.
원티드 홈페이지는 right를 calc()함수를 이용해 웹브라우저의 크기에 따라 우측에서 몇픽셀 떨어진거리의 나누기 2를하여 이 문제를 해결하였다. 그리고 웹브라우저의 width가 너무 작은 경우에는 media 쿼리를 사용해 각 부분을 재배치하는 방법을 선택하였다.

그래서 나도 똑같이 해보았다. 미디어 쿼리를 이용해 더 자세한 반응형 디자인은 프로젝트 마무리 단계에 하기로하고 그전 calc()함수를 이용해 right를 계산하는것까지만 적용시켰다.



calc함수를 이용해서 부모컴포넌트의 크기를 매번 계산하고 거기에서 픽셀을 빼서 계산하고 거기에 나누기2를하여 겹침을 "안되게"한다기보단 "최소화"하는것으로 보였다. 아까말했다시피 브라우저의 크기가 너무 작아질경우는 css를 사용해 구조를 재편하는것이 올바르게 보였다.