Chunho’s DevLife

상위 컴포넌트에서 props로 배열을 받아 와 배열 요소를 뒤집어서 뿌려줘야하는 상황에서 크로스 브라우징 이슈가 발생했다. API에서 받아온 원본 배열의 무결성을 지키기 위해 하위 컴포넌트 내부에서 const copiedArr = [ ...apiArr, ].reverse(); 위와 같이 얕은 복사를 해주었다. chrome 환경에서는 reverse가 된 배열이 렌더되었지만, safari 환경에서는 reverse된 배열이 렌더되지 않았다. 디버깅 결과 copiedArr에 reverse된 데이터가 아닌 apiArr의 데이터가 있는 것을 확인하였고, 브라우저간의 렌더 과정에서 변수에 값을 할당하는 시점에 차이가 있을 것이라고 추측했다. dependancy를 걸어 apiArr의 값이 변할 경우 다시 얕은 복사를 ..

QA를 진행하며, Safari 환경에서 테스트 시 Select Box Option 텍스트가 노출 안되는 이슈가 있었다. 문제의 원인은 의외로 간단했는데 label을 option의 속성으로 지정해주어 생긴 이슈였다. option의 라벨을 속성값이 아닌 option태그 안에 직접 넣어주어 해결할 수 있었다. {options.map((option, index) => { let optionAttribute: IOptionProps if (typeof option === 'string') { optionAttribute = { key: option, label: option, value: index } } else { optionAttribute = option } return })} 위 코드를 )} {opti..

font-family: 'Pretendard', 'Apple SD Gothic Neo', Sans-serif; 다음과 같이 Pretendard가 적용되지 않았을 때 다음 폰트를 지정해주면 해결할 수 있다.