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

이슈 내용 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..

증상 Android/iOS 모바일 기기에서 TalkBack, VoiceOver 등의 스크린 리더를 사용하여 화면을 읽는 경우, 링크(a 태그) 요소 내에 위치한 모든 텍스트 요소에 초점이 잡히는 문제가 발생한다. G마켓의 스마일프레시 모바일 화면을 예시로 가져왔다. 스마일프레시의 아이템 카드는 a 태그로 감싸져 있으며, a 태그 내에 위치한 span, p 태그 내 텍스트 요소에도 초점이 옮겨가는 문제가 발생하고 있다. 1 45,820원 할인율 14% 할인 전 금액 53,900 원 22년산 이맛쌀 20kg 평점 4.8 후기 (5,306) 건 15% 쿠폰 카드 10% 실제로 초점이 잡혀야 할 링크 요소 외에도 불필요한 초점이 늘어나기 때문에 탐색에 대한 depth도 늘어나게 되므로 스크린 리더 사용자는 웹 ..

이번에 토이 프로젝트를 시작하면서 예전부터 유튜브에서 관심있게 본 svelte를 공부하면서 사용해 보려고 한다. Svelte란? Svelte는 2016년도에 등장한 프론트엔드 기술 중 하나로, 프레임워크가 없는 프레임워크 혹은 컴파일러라고도 한다. 따로 프레임워크를 로딩하지 않고 빌드시 자바스크립트 코드로 컴파일링하므로 React와 Vue, Angular 등의 기존 프론트엔드 기술보다 빠른 웹 어플리케이션을 만들 수 있다. 이제 Svelte의 특징에 대해 알아보고, 기존 프레임워크들과 비교해서 어떤 점들이 좋은지에 대해 알아보자. Svelte의 특징 적은 코드로도 기능 작성 가능 Svelte는 동일한 코드를 작성하더라도 React, Vue에 비해 적은 양의 코드로도 작성이 가능하다. 간단하게 두 숫자를 ..

@mixin & @include 디렉티브를 사용한 스타일 재사용 mixin은 CSS 내에서 공통으로 사용되는 스타일을 재사용할 수 있는 기능이다. 함수처럼 중복되는 스타일을 분리하여 별도의 이름을 붙여 사용할 수 있고, 파라미터를 정의하여 값을 전달할 수도 있다. mixin은 SCSS 문법 기준으로 아래와 같이 정의한다. scss 문법 기준으로 작성했으나, 중괄호({})와 세미콜론(;)을 제외하면 sass 문법도 동일하게 사용이 가능하다. 파라미터 이름 앞에는 $ 기호를 붙여주고, 기본값을 지정하고자 하는 경우에는 $파라미터명: 값 형태로 작성하면 된다. @mixin 디렉티브를 이용하여 mixin을 정의하고, 정의한 mixin은 @include 디렉티브로 사용할 수 있다. // 기본 mixin 정의 @m..

트랜지션(transition)은 자바스크립트를 사용하지 않고 CSS만 이용하여 애니메이션을 구현하는 방법 중 하나로, 특정 CSS 속성 값을 일정 시간 동안 변경되도록 할 수 있는 속성이다. transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; 트랜지션은 transition-property, transition-duration, transition-timing-function, transition-delay 4개의 상세 속성으로 이루어진다. 각 속성은 생략이 가능하며, 순서는 자유롭게 바꿔도 되지만 transition-duration이 transition-delay 속성 ..

React에서는 컴포넌트 단독으로도 사용이 가능하지만 다른 컴포넌트를 감싸는 wrapper 컴포넌트로도 사용이 가능하다. // 1. 컴포넌트 단독으로 사용 // 2. wrapper 컴포넌트로 사용 wrapper 컴포넌트로 사용할 경우에는 해당 컴포넌트 내에 작성된 요소들은 children이라는 props로 컴포넌트에 전달된다. wrapper 컴포넌트에서는 반드시 이 children을 리턴하는 마크업에 포함시켜야 화면에 노출된다. const Layout = ({ children }) => { return {children}; }; 만약 wrapper 컴포넌트를 사용하는 부모 컴포넌트가 아닌 wrapper 컴포넌트에서 전달받은 children에 추가적인 props를 더 전달하고자 할 때는 어떻게 하면 될까?..