개발 (140) 썸네일형 리스트형 [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 버전 이상에서 파일 접근 권한을 요청할 경우 원하는 동작을 수행하지 못하게 될 수 있다. 실제로 사이드 프로젝트 진행.. [회고] 퇴사에서 이직까지 이직을 시작한 후 첫 면접에 떨어진 뒤 배운 내용을 포스팅 한 뒤 7~8월 간 이직을 위해 부단히 시간을 보냈다. 당연히 붙을 거라고 오만하게 생각했던 첫 기술 면접에서 탈탈 털린 후 자바스크립트와 리액트 위주로 기본기를 다시 잡았다. 자바스크립트를 공부한 것은 매우 좋은 선택이었다. 한 기업에서는 '리액트 하시는 분들이 잘 모르시는게 있는데 자바스크립트에서 bind, call, apply의 차이점이 무엇일까요?'라는 나름 야심찬 질문을 던졌을 때 준비가 잘 되어 있어 당당하게 대답했던 기억이 난다. 그리고 중간에 사이드 프로젝트를 구해서 기존에 하던 next.js가 아닌 react native 개발을 진행했다. expo는 처음 써봤는데 아직 다양한 SDK를 사용하지 않아서인지 크게 불편함을 느끼고 있지.. [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.. React-Query의 queryKey 설정 이슈 :: 페이지에서 검색 필터를 통해서 graphql 쿼리문의 where절에 조건을 추가해줬음에도 변경된 쿼리를 React Query가 불러오지 않음. const SomePage: NextPage = () => { const [filterValue, setFilterValue] = useState(); // filterValue 변경 시 자동으로 변경된 값을 가져오지 않음. const { data } = useQuery("some page contents", () => Someservice.getSomeContents(filterValue) }; return ( ); }; export default SomePage; (예시를 위한 코드로 실제 실행을 보장하지 않음) 해결 방법 :: React Query.. Delete `␍` eslint (prettier/prettier) 에러(LF, CRLF의 차이) 집에서 사이드 프로젝트를 진행하던 중, 기존 맥북으로 하던 작업을 데스크톱(윈도우)로 작업을 진행하였다. 맥북에서 작업하던 코드는 이상이 없었는데 윈도우로 새롭게 컴포넌트를 작성하니 작성한 코드의 문(statement) 끝마다 에러를 발생시키는 것이 아닌가? 멀쩡히 잘 되던 코드를 새로 작성했는데 이와 같은 에러가 발생하자 원인을 검색해보았다. 원인은 바로 LF와 CRLF의 차이로 인한 것이었다. 이를 위해서는 LF와 CRLF가 무엇인지 확인할 필요가 있다. CR : Carriage Return(\r) LF : Line Feed(\n) CR과 LF는 각각 새로운 줄 바꿈을 바꾸는 방식을 의미한다. CR의 경우 현재 줄에서 커서의 위치를 맨 앞으로 옮기는 동작, LF의 경우 현재 커서의 위치에서 하나의 줄.. <hr> 태그, vw를 사용해서 부모 컴포넌트에 상관없이 width 할당하기 태그 hr 태그는 컨텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용합니다.[1] 하나의 페이지에서 여러 다른 내용을 표시할 때, 가장 흔하게 사용할 수 있는 방법이 문단을 구분하는 방법이다. 웹 페이지에서는 문단을 나누는 여러 방법이 있다. 그 중 가장 흔하게 쓰이는 방법이 을 사용하여 줄을 바꾸는 방법일 것이다. 은 엔터를 입력한 것과 같은 효과를 주어 문단을 나누기에 좋은 방법으로 보인다. 다른 문단을 나누는 방법으로는 줄바꿈 뿐만 아니라 줄 바꿈 선을 추가해주는 방법 또한 존재한다. 줄 바꿈은 어떤 식으로 추가할 수 있을까. 하나의 컨텐츠를 감싸고 있는 div 또는 p 태그에 border를 추가하는 방식으로도 만들 수 있겠지만 HTML 태그에서 줄 바꿈 및 내용 구분을 .. [React/Next.js] createContext createContext는 React에서 지원하는 Context API의 메소드 중 하나이다. React 또는 Next.js에서 전역 상태(Global State) 관리에는 Redux(Redux Saga)나 Recoil 등을 많이 사용한다. 최근에는 Zustand라는 라이브러리도 떠오르고 있는 것으로 알고 있다. 최근에 하는 프로젝트에서는 Recoil를 사용했는데, 난감한 경우가 하나 있었다. 다크 모드 구현을 위해서 어떤 모드인지(라이트인지, 다크인지)에 대한 상태를 담고 있어야 할 필요가 있었다. Recoil을 사용하자니 _app.tsx가 Recoil Root를 선언하기 때문에 사용할 수가 없었다. 그렇다고 local storage를 사용하자니 Next.js에서 사용하기 때문에 undefined로 정.. [이슈리포트] Next.js 프로젝트에서 도메인 별로 다른 정보 뿌려주기 최근에 진행하는 프로젝트에서 하나의 프로젝트에 여러 도메인을 할당하여 도메인 별로 데이터를 뿌려주기 위한 작업을 진행하였다. 해당 작업을 진행하며 겪었던 이슈와 해결 방법에 대해서 내용을 정리하려고 한다. 그림과 같이 프론트엔드 프로젝트의 로직과 쿼리문은 그대로 유지한 채 뿌려지는 데이터나 메타 데이터, 로고 등만 할당된 도메인에 따라서 보이는 작업을 진행했다. 이를 위해 도메인 별로 다르게 표현되어야 하는 부분에서 도메인 정보를 가져오기 위해 현재 주소값에 도메인이 포함되어 있는지를 확인해서 해당 도메인을 리턴해주는 함수를 만들어 사용하였다. export const getDomain = () => { if(typeof window !== "undefined") return "domainA"; if(wi.. 이전 1 2 3 4 ··· 18 다음
