개발/Front-end (20) 썸네일형 리스트형 [RN] RN 버전에 따른 안드로이드 앨범 접근 권한 문제 해결 안드로이드에서 사용자 앨범에 접근하기 위해서는 앨범 접근 권한을 요청해야 합니다. 안드로이드 13 이전 버전에서는 PermissionAndroid에 정의되어 있는 권한 중 READ_EXTERNAL_STORAGE을 통해서 접근할 수 있었으나, 13 버전(SDK 33)부터는 이 권한이 아무 역할을 하지 않는다. 기존 권한은 READ_MEDIA_IMAGE, READ_MEDIA_VIDEO, READ_MEDIA_AUDIO으로 대체되었다고 안드로이드 문서에서 제공하고 있다. [1] RN에서는 0.70 이상 버전부터 이 내용이 반영되어 있다. 그렇기 때문에 0.6X 버전을 사용할 때는 안드로이드 13 버전 이상에서 파일 접근 권한을 요청할 경우 원하는 동작을 수행하지 못하게 될 수 있다. 실제로 사이드 프로젝트 진행.. [CSS] position: absolute 화면 중앙 배치 `position: absolute`인 요소를 화면에 배치하는 방법에 대해서 면접 질문을 받았는데,,, 적절히 대답을 하지 못했다. 프로젝트를 하면서 `display: flex; justify-contents: center; align-item: center`를 주로 사용했기 때문에. 질문을 받고 내가 생각한 방법은 아래와 같다. div { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; } 이 방법에 문제는 좌측 상단이 화면 중앙에 오지 실제 div 태그가 화면 중앙에 위치하지는 않는다. 이를 듣고 다시 생각한 방법은 아래와 같다. .div { position: absolute; top: calc(50% - 100px); le.. <hr> 태그, vw를 사용해서 부모 컴포넌트에 상관없이 width 할당하기 태그 hr 태그는 컨텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용합니다.[1] 하나의 페이지에서 여러 다른 내용을 표시할 때, 가장 흔하게 사용할 수 있는 방법이 문단을 구분하는 방법이다. 웹 페이지에서는 문단을 나누는 여러 방법이 있다. 그 중 가장 흔하게 쓰이는 방법이 을 사용하여 줄을 바꾸는 방법일 것이다. 은 엔터를 입력한 것과 같은 효과를 주어 문단을 나누기에 좋은 방법으로 보인다. 다른 문단을 나누는 방법으로는 줄바꿈 뿐만 아니라 줄 바꿈 선을 추가해주는 방법 또한 존재한다. 줄 바꿈은 어떤 식으로 추가할 수 있을까. 하나의 컨텐츠를 감싸고 있는 div 또는 p 태그에 border를 추가하는 방식으로도 만들 수 있겠지만 HTML 태그에서 줄 바꿈 및 내용 구분을 .. [이슈리포트] Next.js 프로젝트에서 도메인 별로 다른 정보 뿌려주기 최근에 진행하는 프로젝트에서 하나의 프로젝트에 여러 도메인을 할당하여 도메인 별로 데이터를 뿌려주기 위한 작업을 진행하였다. 해당 작업을 진행하며 겪었던 이슈와 해결 방법에 대해서 내용을 정리하려고 한다. 그림과 같이 프론트엔드 프로젝트의 로직과 쿼리문은 그대로 유지한 채 뿌려지는 데이터나 메타 데이터, 로고 등만 할당된 도메인에 따라서 보이는 작업을 진행했다. 이를 위해 도메인 별로 다르게 표현되어야 하는 부분에서 도메인 정보를 가져오기 위해 현재 주소값에 도메인이 포함되어 있는지를 확인해서 해당 도메인을 리턴해주는 함수를 만들어 사용하였다. export const getDomain = () => { if(typeof window !== "undefined") return "domainA"; if(wi.. [이슈리포트] i18n과 라우팅 변경하기 i18n, internaionalization의 i와 n의 글자수가 18자이기 때문에 i18n인 이 엄청난 공대생 감성의 국제화는 복잡한 이름에 비해서는 다국어를 지원하는 웹 페이지에서 유용하게 사용될 수 있다. 웹 페이지를 사용하는 locale 기반으로 그에 맞는 언어를 설정해줄 수 있기 때문이다. 다른 방법도 있겠지만 i18n을 사용하지 않을 경우에 페이지에서 국제화를 위해서는 다음과 같이 비교적 비효율적으로 코드를 작성해야 한다. const Hello: React.FC = () => { const hiEn = "hi"; const hiKo = "안녕"; return ( {locale === "en" ? {hiEn} : {hiKo} } ) } 브라우저의 locale이 en일 경우에는 영어로 hi, 한.. [TIL] react-router의 Link와 a 태그 react-router에서 화면을 이동할 때는 Link 태그를 사용하여 to 속성에 이동할 주소 정보를 작성한다. 하지만 우리는 이미 페이지 이동 기능을 갖고 있는 태그인 a 태그를 알고 있다. 두 기능 사이에는 어떤 차이가 있을까? 결론부터 말하면, 페이지 새로고침 여부가 이 2가지의 차이점이다. Link 태그는 브라우저의 주소만 바꿀 뿐 페이지 자체를 새로고침하지는 않는다. 반면, a 태그는 브라우저의 주소를 이동하며 페이지 자체를 새로고침한다. 페이지 새로고침 여부는 웹 페이지에서 중요하다. 페이지가 새로고침될 경우 현재 렌더링되어 있는 컴포넌트가 모두 사라지고 새로 컴포넌트가 렌더링되게 된다. 이렇게 되면 컴포넌트에 설정되어 있는 state 등이 모두 날아가기 때문이다.[1] Link 태그를 사용.. [TIL] react-router-dom으로 페이지 이동하기 React에서 원하는 url에 원하는 페이지를 띄우기 위해서는 react-router(또는 react-router-dom)를 사용해주어야 한다. 이 모듈은 경로를 지정하고, 해당 경로에 방문했을 때 원하는 컴포넌트 요소를 띄울 수 있게 해 준다. react-router vs react-router-dom 정확히 말하자면 react-router가 모체라고 할 수 있다. 모든 react-router 기능을 포함하고 있는 모듈이다. react-router-dom은 react-router의 여러 기능 중 웹 어플리케이션에서 사용하기 위한 기능(DOM과 관련된)을 포함하고 있는 패기지로, react-router의 자식이라고 볼 수 있다. React가 웹뿐만 아니라 React Native에서도 쓰이기 때문에 웹에서.. [CSS] 선택자 :hover로 onMouse 효과 내기 :hover CSS는 단순히 HTML 태그의 스타일을 꾸며줄 뿐만 아니라 다양한 선택자(Selector)를 통해서 여러 부가 기능을 사용할 수 있다. 다양한 선택자들이 존재하는데 그중 :hover는 대상이 되는 태그에 마우스가 올라갔을 때 원하는 스타일을 지정할 수 있게 해 준다. 대신 마우스가 대상이기 때문에 반응형 웹에서 모바일이나 태블릿 화면에 대해서는 대응하기 힘들다는 단점이 있다.[1] :hover 적용 전 이전에 진행했던 Global Navigation Bar를 만드는 프로젝트에서 마우스가 올라갔을 때 요소에 밑줄이 생기는 코드를 작성한 적이 있었다. 이때 작성한 코드는 [그림 1]과 같다. 전체 코드가 아니고 함수가 동작하는 부분만 가져왔는데 대략 정신이 멍해진다. 3개의 state를 만들었.. 이전 1 2 3 다음
