근황 기록 오랜만에 포스팅을 남겨봅니다 🙂 아직 2023년의 절반도 지나지 않은 지금 제 삶은 조금 다사다난합니다. 지난달 근무하던 회사에서 1년이 되던 달에 개발팀이 정리됐고, 그나마 제 경우 대표님의 추천으로 규모가 더 큰 SI 개발 회사로 이직하게 되었습니다. 사실 SI 업계보다는 자체 서비스나 플랫폼 운영 기업으로 이직을 원했지만, 현재 취업시장에서의 겨울이 만만찮게 어려운 사정을 알기에 조금의 텀을 둬보고자 합니다. 이직한 회사는 클라우드라는 도메인을 가지고 있다 보니 배울 점이 있으리라 판단했어요. 아직 근무기간이 한 달 채 안 됐고 프로젝트 투입 전이라 여유가 너무 많은 상황이고, 이 기간을 어떻게 잘 채워나가야 할지 고민입니다. 여기까지가 2023년 근황입니다. 블로그 이전 2020년 부터..
2023.04.24
포트폴리오겸 개인 소개를 담은 웹사이트를 만들고 있습니다. 처음 방문 했을 때 최적화 또는 좋은 사용자 경험을 위해 유저가 현재 어떤 상태에 놓여져 있는지 확인을 해야하는 경우가 있는데요. 첫 페이지가 로딩되면 애니메이션 효과가 실행되는데, 브라우저에서 Blur 상태가 되면 이벤트를 멈추고 다시 focus 상태가 되면 애니메이션이 동작해야 합니다. 이것은 window.addEventListener()를 통해 쉽게 구현되지만, 문제는 blur 상태로 페이지가 로딩되는 경우입니다. 아래의 순서로 버그가 발생되는데요. 버그 발생 순서 blur 상태로 웹사이트 로딩이 완료되고 애니메이션 실행 유저가 브라우저를 focus 하게 되면 애니메이션 효과가 중복으로 적용 첫 로딩에 이벤트와 Focus 이벤트가 발생되면 ..
2023.02.11
Clipboard API 예전 클립보드 복사 기능을 구현했던 코드를 다시 사용해보니 VSCode 상에서 Deprecated 표시가 됐습니다. MDN에서 찾아보니 기존에 사용하던 방법을 대체하도록 Clipboard API가 나왔었네요. 기존 방법은 웹 표준에서 삭제됐으나 기능은 작동합니다. readText() / writeText() // 읽기 navigator.clipboard .readText() .then((text) => { console.log(text); }); // 쓰기 navigator.clipboard .writeText() .then( console.log('Success Copied!') ); 복사의 경우 writeText() 함수는 문자열 매개변수를 전달해서 간단하게 복사를 구현할 있..
2023.02.06
useEffect() 리액트의 useEffect()는 해당 스코프의 컴포넌트가 render와 paint 된 후 호출되는 리액트 라이프사이클 훅이다. 비동기적으로 실행되고 로직에 DOM에 영향을 주는 코드가 있을 경우 사용자는 화면의 깜빡임을 확인할 수 있다. useLayoutEffect() useLayoutEffect()는 컴포넌트가 render가 되고 호출된다. paint 전에 호출 된다는 점이 useEffect()와 다른데,. 만약 DOM에 영향을 주는 로직(setState)이 있을 경우 화면에 그려지기 전 실행되므로 사용자는 깜빡임을 경험할 수 없다. 주의할 점은 useLayoutEffect는 동기적으로 실행되므로 로직이 처리되는 시간 동안 사용자는 빈화면을 볼 수밖에 없으므로 목적에 맞게 잘 사용..
2023.02.01
이전 SWR 포스팅을 작성했는데요. SWR보다 react-query 다운로드 수가 2배가량 높습니다. 원티드 프리온보딩 챌린지를 하면서도 사용했고 점점 대중화되어가는 눈치입니다. 부랴부랴 포스팅 남겨봅니다. 다행히도 Next.js와 리액트에서 SWR을 사용해 본 경험이 있어 덕분에 리액트 쿼리를 이해하는데 오래 걸리지 않았습니다. [React] SWR(Stale-While-Revalidate) 최근 프론트엔드와 관련 한 카카오톡 오픈 채팅방을 통해 스터디를 시작했고 관련해서 공부했던 내용을 발표해야했기 때문에 포스팅을 진행해봤습니다. SWR이란? 클라이언트는 서버에서 데이터 juni-official.tistory.com React-Query 리액트 쿼리는 리액트 내에서 서버의 상태(데이터), 캐싱, 동기..
2023.01.31
요즘 원티드에서 진행하는 프리온보딩 챌린지를 통해 프론트엔드 스킬과 현업에서의 고충, 노하우를 얻어가는 계기가 되었습니다. 오늘은 강의 내용 중 nProgress라는 효과를 처음 알게 되었고 Next.js에서 라이브러리를 통해 구현해 보았습니다. nProgress 란? Next.js 에서 페이지를 이동하는 움짤을 만들어봤습니다. 페이지를 이동할 때마다 상단에 프로그래스 바가 생겼다 사라지는데요. 일종에 서버의 응답을 기다릴 때 보여주는 스피너와 동일합니다. 확실히 로딩 스피너 보다 nProgress 가 더 깔끔한 느낌이라 호감이 갑니다. 코드 샌드박스 임베드 코드 넣어서 바로 보여드리려 했는데, 이제 무료에서는 기능을 제공하지 않는 거 같습니다. 아래 링크에서 테스트해 볼 수 있습니다. wonderful..
2023.01.25
Styled-Components Ref Styled-Components로 만든 컴포넌트에 ref를 사용하고 싶었으나 타입스크립트 에러 때문에 안되는 상황. 검색을 해보면 별도의 컴포넌트를 만들어 해당 컴포넌트를 기반한 스타일드 컴포넌트로 만들어 사용하고 forwardRef를 사용해 Ref를 전달 후 할당하는 방법 밖에 나오지 않았다. 분명 스타일드 컴포넌트에 ref를 바로 선언해 사용 할 수 있을거라 생각해 스택오버플로우를 다 뒤져봤다. 그랬더니 나와같은 상황을 겪은 분을 찾아 코드를 가져왔다. import React, { useRef, useEffect } from 'react'; import styled from 'styled-components'; const StyledInput = styled.i..
2023.01.14
사내 디자인 가이드에 따라 프론트엔드 개발자 분들이 사용할 컴포넌트들을 만들고 있습니다. MUI처럼 사용할 수 있도록 여러 컴포넌트를 설계하면서 코드를 작성하고 있는데요. Typography 컴포넌트 작업을 하다 HTML Element를 동적으로 변경하고 싶었는데 검색 키워드가 잘 못 됐는지 한국에서는 다루는 포스팅이 하나도 없길래 작성해 봤습니다. import styled from 'styled-components' const StyledComponent = styled.div` width: 100px; hegiht: 100px; border: 1px solid #000; ` const Component = () => { return } export default Component 위 코드는 스타일드 ..
2023.01.12
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev