이 기술 블로그를 만들기 위해 5년을 미뤘다.

들어가기에 앞서 PC 크롬과는 달리 모바일 크롬 브라우저에서는 userAgent를 변경하는 기능이 없다. 구글링을 해보면 돌핀 브라우저, firefox 등을 사용하는 방법이 나와 있지만 다음과 같은 이슈가 있어 현재는 사용이 불가하다. 돌핀 브라우저 Android 플레이스토어에서 돌핀 브라우저 설치 불가능 iOS 앱스토어에서는 설치는 되지만 아래 블로그 글에서 사용하는 설정 옵션이 제공되지 않음 https://bulhwang.tistory.com/48 firefox Android/iOS 최신 버전에서 about:config 메뉴가 지원되지 않음 https://www.youtube.com/watch?v=9hJoWpNC-8A 머큐리, 퍼핀 브라우저 Android 플레이스토어에서 머큐리 브라우저 설치 불가능 ..

이슈 내용 Next.js에서 발생하는 이슈로, 서버와 클라이언트의 props 값이 다른 것이 원인이다. 나는 커스텀 훅을 사용하여 style props에 내려줄 값을 생성하다 보니 해당 경고를 마주하게 되었다. 해결 방법 해결 방법은 두 가지가 있으며, 상황에 맞게 골라서 사용하면 된다. 1. useState 사용 문제가 되는 props 변경이 클라이언트 단에서 렌더링될 수 있도록 isMounted state를 선언하여 마운트 이전에는 컴포넌트 렌더링을 하지 않는 방법이다. const Page = () => { const [isMounted, setIsMounted] = useState(false); useEffect(() => { setIsMounted(true); document.body.style...

!important 옵션을 사용하면 CSS 적용 우선순위를 무시하고 가장 높은 우선순위로 스타일을 적용할 수 있다. html에서는 style 속성에 문자열 형태로 다음과 같이 작성하면 된다. 글씨에용 리액트에서는 html과는 달리 문자열이 아닌 CSSProperties 타입의 object 형태로 인라인 스타일을 지정한다. 하지만 아래처럼 important 옵션을 적용하려고 한다면 해당 스타일이 아예 적용되지 않는다. const App = () => { return ( 글씨에용 ); }; 아래 PR 코멘트를 읽어보면, 리액트 15부터 공식적으로 !important 옵션을 지원하지 않는다는 사실을 알 수 있다. CSS: values with "!important" in 0.15 · Issue #6342 · ..

userAgent란? 다들 userAgent가 무엇인지 알고 계시나요? userAgent는 간단히 말하자면 사용자가 사용하고 있는 OS 종류와 버전, 웹 브라우저의 정보 등을 담고 있는 일종의 자기소개 같은 개념입니다. 기본적으로 HTTP 헤더에 포함되며, 자바스크립트의 navigator.userAgent 속성으로도 접근할 수 있습니다. 그럼 이러한 userAgent는 왜 만들어졌고 어떻게 사용될까요? userAgent는 웹 브라우저별로 맞춤화된 서비스를 제공하기 위해 만들어졌습니다. 특정 브라우저에서만 제공하는 기능이 있는 경우, 서버에서는 userAgent를 읽어서 분기 처리를 해줍니다. 혹은 로그를 남길 때 사용자가 어느 기기, 어떤 환경에서 접근했는지 정보를 얻어낼 때도 사용할 수 있습니다. us..

드래그 앤 드롭으로 파일을 업로드하는 기능을 만들어 보자. 이미지프레소 같은 이미지/동영상 용량 줄이는 사이트를 사용하다 보면 클릭 혹은 드래그 앤 드롭으로 파일을 업로드하는 영역을 볼 수 있다. 파일을 드래그해서 영역 위로 가져가면 아래 사진처럼 스타일도 변경되기 때문에 드래그가 잘 되고 있다는(?) 것도 확인이 가능하다. 오늘은 이 드래그 파일 업로드 기능을 만드는 방법에 대해 한 번 알아보자. 클릭하여 파일 업로드 기능 구현 일단 드래그 업로드 기능을 지원하기 전에, 기본적으로 클릭하여 파일을 업로드 하는 기능 동작이 가능해야 한다. HTML에는 파일을 업로드할 수 있는 태그인 이 존재한다. 이 태그를 클릭하면 파일을 업로드할 수 있는 창이 뜬다. 하지만 문제는 태그의 기본 제공 스타일이 너무 안이..

html 요소에 contenteditable 속성을 추가하면 input 요소처럼 수정이 가능한 요소를 만들 수 있다. react에서는 contentEditable이라는 이름으로 props를 추가하면 된다. 하지만 실제로 요소에 contentEditable를 추가한 후 화면에서 텍스트를 수정해 보면 다음과 같은 warning이 발생한다. 내용을 해석해 보자면, 수정이 가능한 요소 내에 react에서 관리하는 children도 포함되어 있기 때문에 요소의 내용이 예기치 않게 수정되지 않도록 주의해 달라는 뜻이다. 요소를 수정함으로써 실제 dom과 react가 예측하는 dom의 내용과 달라지기 때문에, dom의 변경 사항 동기화에 문제가 생길 수도 있어 발생하는 경고이다. 해결 방법은 다음과 같다. supp..

올해 2023년 6월부터 추가된 ES14의 여러 기능들에 대해 알아봅시다. 자세한 내용은 아래 홈페이지에서 확인 가능합니다. ECMAScript® 2023 Language Specification The first and subsequent editions of ECMAScript have provided, for certain operators, implicit numeric conversions that could lose precision or truncate. These legacy implicit conversions are maintained for backward compatibility, but not provided for BigI tc39.es 배열 관련 메소드 map, filter 등..

오랜만에 또 집 관련 이야기를 써보려고 한다. LH 청년매입임대에 당첨되고 거주한 지 2년이 다 되감에 따라, 바야흐르 계약 종료일이 다가오고 있었다. 내가 알기로 행복주택이나 일반 매입임대주택은 재계약 시에도 소득 제한이 있어서 소득 기준을 넘는 경우에는 재계약이 불가능하다. (자격완화 행복주택의 경우 1회에 한해 재계약을 허용한다) 하지만 LH 청년매입임대는 다르다. 최초 계약 시에만 소득 조건을 만족하면, 이후 재계약은 소득 조건을 보지 않는다. 그럼 어떤 조건을 만족해야 하는가? 바로 무주택 여부이다. 정확히 말하면 무주택자이며 임대보증금, 임대료, 관리비 등 체납이 없는 세대만이 재계약이 가능하다. 다른 임대주택과는 달리 재계약 조건이 무척이나 간단하다는 장점이 있다. 자 그럼 이제 재계약을 위..

웹 페이지는 브라우저에서 서버에 http 요청을 보내 데이터를 받아와서 화면에 보여줍니다. 이를 http 통신이라고 부르죠. 즉, 브라우저에서 화면을 보여주기 위해서는 서버와의 통신이 꼭 필요합니다. 물론 화면을 보여주는 것 외에도 로그인 등 특정 버튼을 클릭했을 때 어떠한 동작이 일어나도록 요청하는 경우도 포함됩니다. 기본적으로 아래와 같은 기능들은 일반적인 http 요청으로 구현이 가능합니다. 회원 로그인 상품 목록 보여주기 장바구니 담기 왜냐하면 단순히 서버로 요청을 보내고, 필요한 경우 데이터를 전달받아 화면에 뿌려주기만 하면 되기 때문이에요. 클라이언트에서 요청을 보내면, 서버는 요청에 대한 데이터와 함께 응답을 보냅니다. 클라이언트는 해당 응답의 데이터로 사용자에게 보여줄 화면을 렌더링하거나 ..

앱을 사용하다 보면 이 페이지가 네이티브인지 웹뷰인지 헷갈릴 때가 많다. 오늘은 해당 페이지가 웹뷰인지 판별하는 방법에 대해 알아보자. 텍스트 드래그 가능 여부로 판별 웹뷰로 띄운 화면은 브라우저와 마찬가지로 꾹 눌러서 텍스트를 드래그하고 복사할 수 있다. 아래 사진은 GSShop 앱의 마이쇼핑 화면이다. 꾹 눌러서 텍스트 드래그가 가능하므로 네이티브가 아닌 웹뷰로 띄운 페이지라는 것을 알 수 있다. 하지만 이 방법은 css 단에서 웹뷰의 텍스트 드래그를 막아놓은 경우에는 판별이 불가능하다. user-select: none; -webkit-user-select: none; 이 방법이 안 될 경우엔 아래 방법을 사용하도록 하자. a 태그 요소 드래그 가능 여부로 판별 텍스트와 마찬가지로 웹뷰 화면에서는 a..