[TIL] 210909 오늘 공부는 반응형, 미디어 쿼리

아주 단순한 에러 알럿 페이지의 반응형을 구현했다.
예전에 반응형 구현했을 때, styled-component를 사용해서 구현했던 적이 있었는데, styled-component가 쓰기 편하긴 한데 아래로 죽죽 코드를 길게 만들어서 컴포넌트가 너무 길어졌던 기억이 있다. 그래서 이번에는 css파일을 별도로 만들었다.
다행히 태블릿과 웹에서 레이아웃에서 큰 차이는 없는 페이지여서 오래 걸리지는 않았는데, 여튼 미디어 쿼리를 오랜만에 써봤다.
다만 break-point를 몇 px로 잡느냐가 헷갈렸는데 통상 태블릿은 768px, 모바일은 300~400px 사이대를 브레이크 포인트로 잡아서 진행했었다.
이번에도 그렇게 해야하나? 하고 디자인을 봤는데 굳이 그렇게 나눌 필요 없을 것 같았다. 이미지 사이즈가 568px 이고, 이 이미지가 좀먹는(?) 시점을 기점으로 잡으면 될 것 같았다. 꼭 768px을 따를 필요 없다는 것을 알게됨 !

중요한건 브라우저 사이즈가 줄어듬에 따라 자연스럽게 이미지 사이즈를 줄이고 싶었다.
그럴때는 width: auto, height: auto 를 주고, 모바일은 양 옆 마진이 꼭 있어야 하므로, 큰 테두리에 padding값만 넣어주었다.
브레이크 포인트마다 뚝뚝 끊기면서 바뀌는게 아니라 자연스럽게 이미지가 줄어서 UI 적으로 훨씬 나아 보였다.

다른 업무를 받았다! QA!
버그를 잡는 일은 마치 코난이 되어서 범인을 탐색하는 일 같다. 웬지 코딩해서 새 기능을 만드는 일은 멋져보이는데 버그를 잡는 일은 멋져보이지 않는다(!)
근데 남이 만든 코드를 계속 보게되니까 코드에 대한 공부가 많이 되는 것 같아서 나한테는 좋은 것 같다.
오늘도 서버와 클라이언트가 왔다갔다 하는 흐름을 좀 공부한 것 같아서 이제 어디서 이벤트를 보냈고 받았는지 전보다 조금 더 빨리 찾을 수 있게되었다.


조건부 렌더링을 할때 두개의 컴포넌트가 연달아 써지지 않았다.
조건? <A컴포넌트> : <B컴포넌트><div><div/> 이런식으로 쓰면 return B컴포넌트, return <div> 처럼 한번에 2개를 렌더링 하다가 오류가 난다는 것이었다.

해결은

조건? <A컴포넌트> : <>{<B컴포넌트>}{<div><div/>}</> 로 해주었다.
각각의 컴포넌트와 태그를 대괄호로 묶어서 값으로 처리 하니 오류가 나지 않았다.

두개의 값으로 구성된 단일의 요소를 렌더링한다고 한다. 여튼 jsx문법에 대해서 조금 더 알고 간다!