JiSoo's Devlog

여러분은 위에 영상에서 보이시는 것처럼데이터가 로딩되는 동안 기본값이나 placeholder 값이 잠깐 보였다가이후에 API 응답을 받고 실제 값으로 바뀌는 "깜빡임 문제"를 경험해 보신 적이 있으신가요? 저는 최근에 4주차 과제를 하면서 로그인한 유저 정보를 받아올 때 저런 현상을 발견했는데요.페이지를 새로고침 하면 폼 영역이 초기값을 한 번 보여준 뒤에 API에서 받아온 실제 값으로 다시 렌더링 되면서 정보가 나타나는 부분이 깜빡이는 현상이 나타났어요. 사실 기술적으로 큰 오류도 아니고 데이터도 잘 불러와져서 기능적인 문제는 아니지만사용자 입장에서 정보를 불러오는 화면에서 이런 사소한 깜빡임이 UX를 해칠 수 있다고 생각해요. 👀 깜빡임이 생기는 이유이런 깜빡임이 생기는 이유는 초기 렌더링 값과..

여러분은 어떤 CSS 라이브러리를 선호하시나요? 저는 개인적으로 최근에는 Vanilla Extract를 자주 사용했었는데요!최근 들어 새로운 스타일링도 도전해보고 싶다는 생각이 들었어요. 요즘 Panda CSS 라이브러리에 관심이 생겨서이번 기회에 직접 공부하면서 어떤 특징이 있는지 정리해보려고 합니다!😄 🧠 CSS-in-JS리액트로 개발해 본 분들이라면 한 번쯤은 Styled-components나 Emotion을 써본 경험이 있으실 텐데요.이 라이브러리들은 컴포넌트 단위로 스타일을 관리할 수 있고 JS 안에서 바로 스타일을 작성할 수 있다는 점에서 개발자 경험이 뛰어났습니다.하지만!프로젝트 규모가 커질수록 여러 문제가 생기가 시작했어요.. CSS-in-JS는 런타임에 스타일을 생성하기 때문..

간단한 프로젝트에서는 이벤트 또한 간단하게 구현이 가능합니다.하지만 프로젝트 규모가 커진다면 어떨까요?복잡한 컴포넌트가 많아지고 로직이 복잡해진다면이벤트가 어디서 어떻게 이루어지는지 헷갈리기 시작합니다 특히 비슷한 요소들이 많은 화면이라면각각에 이벤트 리스너를 등록하는 순간부터 성능은 떨어지기 시작합니다.DOM마다 핸들러를 붙이는 방법은 직관적이지만 결국 메모리 낭비, 렌더링 지연 등의 문제로 이어질 수 있습니다. 이럴 때 필요한 게 바로 이벤트 위임입니다! 😎 간단하게 설명하면 하나의 부모 요소에서 모든 하위 요소의 이벤트를 감시하는 방법이에요.코드 구조를 단순화하고 불필요한 리스너를 최소화하는 데 유용한 방법이죠! 🫧 이벤트 버블링이벤트 위임을 이해하기 위해서는 이벤트 버블링을 먼저 알아야 하..

웹사이트를 만들면서 우리는 대부분 마우스로 클릭하고, 스크롤하고, 드래그하면서 페이지를 사용합니다.하지만 이런 생각해 본 적 있으신가요? "마우스 없이도 사용할 수 있을까?" 이 질문은 단순 호기심이 아니라 웹 접근성의 핵심이에요.시각장애인, 단축키로 작업하는 개발자들까지 키보드만으로 웹사이트를 조작하는 사람들도 있어요. 그런데 현실에서는 마우스 없이 모든 기능이 가능한 사이트가 흔치 않아요.버튼처럼 보이는데 클릭이 되지 않거나 포커스조차 이동하지 않는 요소들이 가득합니다. 🌟 왜 키보드 접근성이 중요할까요? 웹 접근성은 '누구나, 어떤 방식으로든 웹을 이용할 수 있게 하는 것'을 목표로 합니다.즉, 입력 장치에 구애받지 않고 동일한 경험을 제공해야 해요. 키보드 접근성은 시각장애인을 위한 기능일 ..

🛸 Three.js란??WebGL은 브라우저에서 3D 그래픽을 그릴 수 있게 해주는 저수준 API로 직접 사용하려면 복잡한 수학과 좌표 계산 등을 다뤄야 한다.Three.js는 WebGL을 기반으로 만들어진 상위 라이브러리로, 복잡한 과정을 추상화해서 쉽게 3D 장면을 만들 수 있게 도와준다. ❓ WebGL만 써도 되지 않을까?WebGL은 점, 선, 삼각형만 그릴 수 있고 코드가 복잡하다.Three.js는 Scene, Camera, Light, Mesh 같은 고수준 구성요소를 제공해서 쉽게 사용 가능! 🌟 Three.js를 사용하는 이유브라우저에서 바로 실행 가능 (설치 불필요)React, Vue 등 프레임워크와도 연동 가능모델 불러오기, 애니메이션, 조명, 물리 엔진 등 다양한 기능 지원게임, 데..

📍 리액트 훅useState리액트 함수 컴포넌트에서 상태를 관리하기 위해 useState 훅을 활용할 수 있다.function useState(initialstate： S ! (() => S))： [S, Dispatch = (value： A) => void;type SetStateAction = S ! ((prevState： S) => S);useState가 반환하는 튜플의 첫 번째 요소는 제네릭으로 지정한 S 타입이고 두 번째 요소는 상태를 업데이트할 수 있는 Dispatch 타입 함수 의존성 배열을 사용하는 훅useEffect와 useLayoutEffect렌더링 이후 리액트 함수 컴포넌트에 어떤 일을 수행해야 하는지 알려주기 위해 useEffect훅을 활용할 수 있다.function useEffec..

📍 리액트 컴포넌트의 타입클래스 컴포넌트 타입interface Component extends ComponentLifecycle {}class Component { /* ~~ */}class PureComponent extends Component {}React.Component와 React.PureComponent의 타입 정의는 위 코드와 같고 P와 S는 각각 props와 상태를 의미한다..상태가 있는 컴포넌트일 때는 제네릭의 두 번째 인자로 타입을 넘겨주면 상태에 대한 타입을 지정할 수 있다. 함수 컴포넌트 타입함수 표현식을 사용해 함수 컴포넌트 선언할 때 가장 많이 볼 수 있는 형태는 React.FC나 React.VFC로 타입을 지정하는 것이다.FC는 FunctionComponent의 약자로 R..

📍 API 요청fetch로 API 요청하기useEffect(() => {fetch ("https://api.baemin.corn/cart").then((response) => response.json()).then(({ cartltem }) => {setCartCount(cartitem.length);})；}, [])；위 코드처럼 구현한 상태에서 새로운 API 요청 정책이 추가되면 계속해서 비동기 호출 코드를 수정해야 하는 번거로움이 발생한다. 서비스 레이어로 분리하기여러 API 요청 정책이 추가되어 코드가 변경될 수 있다면 비동기 호출 코드는 컴포넌트 영역에서 분리되어 다른 영역(서비스 레이어)에서 처리되어야 한다.위 코드 기준 fetch 함수 호출 부분은 서비스 레이어로 이동하고 컴포넌트는 서비스 ..

📍 자바스크립트의 런타임과 타입스크립트의 컴파일런타임과 컴파일타임프로그래밍 언어는 고수준, 저수준 언어로 구분 가능하다.고수준 언어는 사람이 이해하기 휘운 형식으로 작성, 저수준 언어는 컴퓨터가 이해하기 쉬운 형식으로 작성된다.자바스크립트는 대표적인 고수준 언어에 속하며 컴파일러나 인터프리터에 의해 저수준 프로그래밍 언어로 번역되어 실행된다. 소스코드는 컴파일러에 의해 기계어 코드로 변환되어 실행 가능한 프로그램이 되는데 이 단계를 컴파일타임이라고 한다.컴파일타임은 소스코드가 컴파일 과정을 거쳐 기계어 코드로 변환되어 실행할 수 있는 프로그램이 되는 과정을 의미한다.소스코드의 컴파일이 완료되면 프로그램이 메모리에 적재되어 실행되는데 이 시간을 런타임이라고 한다.즉, 컴파일 과정을 마친 응용 프로그램이 ..

📍 조건부 타입타입스크립트에서 조건부 타입은 Condition ? A : B 형태를 가진다.조건부 타입을 활용하면 중복되는 타입 코드를 제거하고 상황에 따라 적절한 타입을 얻을 수 있기 때문에 정확한 타입 추론이 가능하다. extends와 제네릭을 활용한 조건부 타입extends 키워드는 타입을 확장할 때와 타입을 조건부로 설정할 때 사용되며 제네릭 타입에서는 한정자 역할로도 사용된다.T extends U ? X : Y조건부 타입에서 extends를 사용할 때는 자바스크립트 삼항 연산자와 함께 쓴다.위 표현은 타입 T를 U에 할당할 수 있으면 X 타입, 아니면 Y 타입으로 결정됨을 의미한다. infer를 활용해서 타입 추론하기extends를 사용할 때 infer 키워드를 사용할 수 있다.infer는 타..