본문 바로가기
반응형

📍 Front-End72

React i18n :: key에 콜론(:)이 있을때 권장하지 않는 방식이지만 현재 팀에서 영문 번역 값을 json 파일의 키로 사용하고 있다보니 여러 이슈가 발생하고 있다. common.json { ex.0123:4567:89ab:cdef:0123:4567:89ab:cdef: 'ex.0123:4567:89ab:cdef:0123:4567:89ab:cdef' } 그중 하나로 이렇게 key에 콜론(:)이 들어가 있는 경우인데 (사실 이 경우에 번역이 필요하진 않지만,,) 아무튼 저 키를 번역하면 console.log(t(`ex.0123:4567:89ab:cdef:0123:4567:89ab:cdef`)) // '4567.89ab.cdef.0123.4567.89ab.cdef' 이렇게 'ex.0123:'이 제거되고 4567부터 출력되는 것을 확인할 수 있다. 원인 .. 2023. 1. 26.
리액트에서 컴포넌트의 높이(height), 넓이(width) 구하기 useRef를 이용하자! const Test = props => { const anchorRef = useRef(null); console.log(anchorRef.current?.offsetWidth) // 컴포넌트의 width console.log(anchorRef.current?.offsetHeight) // 컴포넌트의 height return ( hi! )} 주의 offsetWidth, offsetheight 값은 렌더가 완료된 컴포넌트에서 가져올 수 있다. useRef로 가져온 dom이 렌더가 완료되기 전에는 undefined 상태일 수 있기에 반드시 옵셔널 체이닝 '?' 을 해주자! 덧붙여서 const Test = props => { const anchorRef = useRef(null); c.. 2023. 1. 25.
Javascript | 2차원 배열을 1차원 배열로 만들기 배열 다루기는 재밌으면서 어렵다.. 1. reduce를 이용하기 const arr = [[1,2],[3,4],[5,6]] const temp = arr.reduce((acc,cur)=> { return acc.concat(cur); },[]) // 초기값 [] 세팅 ); console.log(temp) //[1,2,3,4,5,6] 먼저 reduce를 이용해서 2차원 배열을 1차원 배열로 만들어보았다. 여기서 중요한 포인트는 arr 변수가 빈 배열인 경우도 있으니 reduce에 초기값을 넣어줘야 한다는 것이다. 난 reduce 함수가 아직 익숙하지 않아서.. 이걸 빼먹었다 그래서 아래와 같은 에러가 발생했는데 reduce of empty array with no initial value 초기값을 세팅해주고.. 2023. 1. 16.
자바스크립트에서 정규식으로 IPv6 유효성 검사 이건 솔직히 기억 못해도 인정 부탁 .. ㅠ 필요할때마다 긁어쓰자! export const isIPv6AddressValid = (value: string) => { return /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A.. 2023. 1. 13.
반응형