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

하나의 배열을 조건에 따라 여러 개의 배열로 나누고 싶은 경우, groupBy 메소드를 사용하면 손쉽게 그룹을 나눌 수 있다. groupBy는 2024년 6월 26일부터 ECMAScript2024(ES15)에 정식으로 채택되었으며, IE를 제외한 최신 웹 브라우저에서 지원한다. "groupby" | Can I use... Support tables for HTML5, CSS3, etc caniuse.com  groupBy 메소드는 Object, Map 객체를 통해 호출이 가능하며, 각각 그룹화된 Object와 Map을 반환한다. 실행 예시는 다음과 같다.const arr = [1, 2, 3, 4, 5];// 1. 배열을 조건에 따라 Object 형태로 그룹핑const groupObj = Object.gr..

이번 Google I/O 2024 발표에도 소개되었던 Speculation Rules API에 대한 내용을 가져왔어요. Speculation Rules API는 이동할 페이지의 HTML을 미리 가져올 수 있는 기능으로, 기존 사용되던 의 개선된 버전이에요. Multiple Page Application 사이트를 방문하다 보면 페이지 이동 시마다 로딩 스피너가 도는 답답함 경험해 보셨죠? Speculation Rules API을 사용하면 Multiple Page Application에서도 Single Page Application처럼 빠른 페이지 로딩을 보장할 수 있다고 합니다.  동작 원리과연 이 API는 어떻게 동작하는 것인지 간단히 알아볼까요? 페이지가 로드되면, 브라우저에서는 각 페이지마다 백그라..

부드러운 스크롤 구현을 위한 locomotive-scroll데스크탑에서도 모바일에서 스크롤 하듯 부드러운 스크롤을 구현하려면 어떻게 해야 할까? locomotive-scroll과 같은 라이브러리를 사용하면 간단하게 부드러운 스크롤 구현이 가능하다. 부드러운 스크롤이 적용된 페이지 예시로는 지마켓 채용 페이지가 있다. G마켓 인재영입 - 지마켓 채용 사이트Gmarket Careers, 지마켓 채용 사이트, 세상에 가치를 연결하고 당신이 가져올 변화를 기다립니다.careers.gmarket.com  보통은 원 페이지 단위의 정적 페이지에서 주로 사용하는데, 멀티 페이지 환경인 Next.js에서도 사용이 가능하다. 어떻게 사용해야 하는지 알아보자.  Next.js에서 locomotive-scroll을 사용하..

들어가기에 앞서 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...

!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 등..