굳이 리액트에만 국한된건 아니고 퍼블리싱이 대부분인듯한데 여튼
요번에 랜딩페이지 작업하면서 예전에 다 해봤었는데 깜빡하고 있었다가 다시금 상기된것 정리하려함.
문제 1. Key
국문/영문 페이지가 존재하고 FullpageSection 로 작업을 진행하였는데
국문, 영문으로 전환시 이중연산자로 처리한게 대부분이라 재렌더링이 없었음
문제는 국문은 Section 이 4개 , 영문은 Section이 5개
영문 Section5 는 왜 계속 안나오나 ... 삽질하다가 결론은 재렌더링이 안되어서 국문 Section 으로만 가지고 있으니 백날 영문으로 전환해도 의미가 없는것
해결방법 : key 추가 ....
key 만 추가 해주면 모든게 해결되는 문제였음 ..
문제 2. 모바일 페이지 height : 100%
모바일 브라우저가 정말 다양한데, 사파리 , 크롬, 삼성브라우저 등등등
여튼 작업표시줄 height 가 정말 다양해서 암만 css 에서 height 100% 박아놔도 모바일 실제 크기보다 더 늘어져있는걸 볼 수 있다.
그래서 어쩌라고 ? 작업표시줄 height 빼줘야한다.
해결 : context 이용해서 그냥 전반적으로 모든 component 에서 작업표시줄 toolbarHeight 가져와 쓸수 있게끔 세팅해놓고, 각 원페이지 컴포넌트에서 height 를 그만큼 빼줬다.
처음에 100vh 를 할까 했는데, 어디선가 모바일은 100vh 쓰면 안된다고 주워들었던거 같아서 , 삽질하고나서야 아 맞다 그때 그랬지 싶었음..
# DeviceContext.js
const [toolbarHeight, setToolbarHeight] = useState(0);
useEffect(() => {
const getMobileBrowserToolbarHeight = () => {
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
return window.screen.height - vh;
};
setToolbarHeight(getMobileBrowserToolbarHeight);
},[]);
# Section2.jsx
const { isMobile, toolbarHeight } = useContext(DeviceContext);
...생략...
//이모션
${theme.breakpoints.xl} {
height: calc(100% - ${({ toolbarHeight }) => toolbarHeight}px);
min-height: 100%;
min-heght: -webkit-fill-available;
}
...생략...
return (
<Section2 toolbarHeight={toolbarHeight}>
...생략...
</Section2>
)
# 아니면 요 두덩이 중에 하나도 요긴하게 쓰임
min-height: 100vh;
min-heght: -webkit-fill-available;
//height: 100vh;
//height: -webkit-fill-available;
//height: available;이건 뭐 문제라기보단 짜잘한것들..
- svg 크기 조절하고싶으면 div로 감싸서 svg 는 100% 주고 겉에 div 크기를 맥여주기
- text-shadow, box-shadow 등등 있는데 , 자연스러운건 drop-shadow 가 제일 괜찮다는거
- span 나란히 두개 있을때 다음줄로 넘어가는거 , parent 에 display : inline-block 맥여주면 해결
- font-family : Roboto 안먹힐때 font-family: 'Roboto Sans', sans-serif; 로 넣으면 해결
- box 테두리랑, 내용 그라디언트 추가하는 문제 (이거 좀 많이 짜증났음, 아래 html css 코드 참고)
별거 아니라 생각했는데 생각보다 box border, content 둘다 gradient 추가하면서 radius 까지 넣는거 ㅋㅋㅋ
좀 까다롭더라 ㅎㅎㅎㅎ
<style>
html {
height: 100%;
width: 100%;
}
.box{
width:538px;
height:510px;
padding: 4px;
border-radius: 20px;
background-image:linear-gradient(rgba(97,97,97, 1) 0%,rgba(0, 0, 0, .5) 100%)
,linear-gradient(0deg, transparent 30%, #9E9E9E 70%);
background-origin: border-box;
background-clip: content-box, border-box;
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.25);
}
.text{
color:white;
}
</style>
<body>
<div class="box">
<div class="text">왜 나한테만 기준이 엄격한데?</div>
</div>
</body>'IT > React.js' 카테고리의 다른 글
| [React] Video 태그 영상 자동재생 (0) | 2024.04.12 |
|---|---|
| [Next.js] nextjs build 시 TypeError fetch failed 발생 (0) | 2024.01.17 |
| [React] 타입스크립트 옵셔널 체이닝, 옵셔널 , 함수형 업데이트, props 전달 등등 메모 (2) | 2024.01.04 |
| [React] 열고닫는 메뉴 , 메롱하는 메뉴, 다중 useState 관리 (1) | 2023.12.31 |
| [React] input checkbox 색깔 바꾸기, 커스텀 체크박스 (1) | 2023.12.31 |