Debelloper

"remote: Repository not found." 에러 해결

BELLORI — Thu, 4 Apr 2024 11:03:31 +0900

push 진행 시 에러

학습용으로 private 저장소를 만들고 push를 하려니까 에러가 났다.

먼저 $ git remote -v 로 확인을 해보았다. url도 정상적으로 잘 들어가 있었다.

검색을 해보니 $ git remote set-url origin https://계정이름@github.com/~~~ 로 remote url을 새로 세팅해보라는 글이 있어 혹시 몰라 다시 세팅 후 push를 시도해 보았지만 에러는 그대로였다.

마지막으로 시도한 방법으로 해결을 하였는데 아래와 같다.

제어판 > 사용자 계정 > 자격 증명 관리자 > Windows 자격 증명

Windows 자격 증명에 들어가면 '일반 자격 증명'이라고 되어있는 것을 볼 수 있다.

리스트를 확인해보면 git:https://github.com으로 되어있는 증명이 확인되는데 펼쳐보면 아래와 같이 나온다.

저기 사용자 이름에 붉은색으로 마킹한 곳에 적혀있는 사용자 이름과 내가 push하려는 저장소가 있는 github 계정 이름과 불일치하여 push가 되지 않았다.

해당 자격 증명을 제거하고 다시 push를 시도하니 github에 다시 로그인을 하라고 나왔다.

에러 원인을 알았으니 사용자 이름과 github 계정 이름과 일치하게끔 로그인 하니 정상적으로 push가 되었다.

UX 향상을 위한 Skeleton 라이브러리 사용하기 (React & Tailwind CSS)

BELLORI — Tue, 12 Mar 2024 23:03:19 +0900

Situation

경찰청 공공 API를 활용한 분실물/유실물 찾기 서비스 제작 프로젝트 진행 중 메인 화면에 거슬리는 것이 하나 있었다.

주인을 찾아요 아래에 최근 습득물을 보여주는 UI가 서버에서 데이터를 받아오는 동안 화면에 보이지 않았다가 뒤늦게 나타난다.

기다리면 갑자기 UI가 나타남

물론 이 메인 화면을 구경하고 있는 사용자가 있을 수 있겠지만, 보통은 본인이 원하는 메뉴를 탐색하면 그곳을 클릭하기 때문에 저 자리에 어떤 것이 있는지 사용자가 인식하지 못하고 지나칠 수도 있다.

Task

그래도 나름 사용자를 위해서 만든 기능인지라, 저곳에 무언가가 있다는 것을 사용자에게 인식시켜 줄 필요가 있었다.

Action

출처: Tailwind CSS 공홈

그래서 생각난 것이 스켈레톤 라이브러리다.

스켈레톤 라이브러리는 웹 페이지나 애플리케이션에서 데이터 로딩 과정을 사용자에게 시각적으로 보다 친근하게 표현하기 위해 사용되는 라이브러리이다.

데이터가 비동기적으로 로드되는 동안 사용자에게 빈 화면을 보여주는 대신, 컨텐츠가 로드될 위치에 스켈레톤 스크린(skeleton screens)이라고 불리는 플레이스홀더를 표시한다.

이 플레이스홀더는 일반적으로 컨텐츠의 형태와 유사한 라인, 사각형, 원 등으로 구성되어 있고 애니메이션 효과를 통해 데이터가 로딩 중임을 나타낸다.

스켈레톤 라이브러리의 주요 목적은 사용자 경험(UX)을 향상시키는 것이다.

데이터 로딩 시간 동안 사용자의 주의를 끌고, 애플리케이션이 여전히 반응하고 있으며 데이터를 불러오고 있다는 인상을 줌으로써 사용자의 인내심을 증가시킬 수 있다.

이러한 방식은 사용자가 빈 화면을 보는 것보다 훨씬 더 긍정적인 경험을 제공한다.

따라서 현재 문제를 해결하기 위해서는 가장 안성맞춤인 셈이다.

스켈레톤 스크린은 실제 컨텐츠의 레이아웃과 유사하게 디자인해서 UI의 일관성을 유지해야 한다.

또, 반짝이는 등 애니메이션을 추가해서 데이터 로딩 진행 상태에 대한 시각적 피드백을 사용자에게 제공하여 작동 중이라는 것을 인식시켜야 한다.

사진과 같이 레이아웃과 유사하게 디자인을 해야했다.

Skeleton.tsx

const Skeleton: React.FC = () => {
  return (
    <div className="mb-12px flex h-140px w-335px items-center justify-between rounded-20px bg-white pl-20px pr-10px shadow">
      <div className="flex-grow space-y-3">
        <div className="h-26px w-128px animate-pulse rounded bg-slate-200"></div>
        <div className="h-21px w-61px animate-pulse rounded-full bg-slate-200"></div>
        <div className="h-16px w-46px animate-pulse rounded bg-slate-200"></div>
        <div className="h-16px w-77px animate-pulse rounded bg-slate-200"></div>
      </div>
      <div
        className={`animate-shimmer h-120px w-120px animate-pulse rounded-14px bg-slate-200`}
      ></div>
    </div>
  );
};

export default Skeleton;

완성된 모습

꽤 비슷한 모양으로 레이아웃을 짰다.

어플리케이션이 작동 중임을 알려주기 위해서 Tailwind CSS에서 제공하는 animation-pulse로 애니메이션을 적용해주었다.

그 다음은 이렇게 완성한 Skeleton 컴포넌트를 적용시킬 일만 남았다.

SwiperItem.tsx

...
import { useEffect, useState } from 'react';
import Skeleton from './Skeleton';

...

const SwiperItem: React.FC = () => {
  ...
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    (async () => {
      setIsLoading(true);
      ...
      setIsLoading(false);
    })();
  }, []);

  if (isLoading) {
    return <Skeleton />;
  }

  return (
    ... // Swiper가 적용될 코드
  );
};

export default SwiperItem;

ㄴ 상관없는 코드는 ...으로 처리

useState를 사용하여 상태를 관리하고 비동기 통신 코드에서 setter 함수에 true로 지정하고 데이터 통신을 다 받아오면 setter 함수에 false 값을 지정하였다.

그 아래에 if문을 사용하여 isLoading이 true인 경우 Skeleton 컴포넌트를 내뱉도록 하였다.

이렇게 하면 스켈레톤 UI가 실제 UI가 들어갈 자리를 차지하고 있다가 데이터를 다 받아오면 setter 함수에 의해 false가 되어 스켈레톤 UI는 사라지고 실제 UI가 들어간다.

Result

스켈레톤 UI가 적용된 모습

데이터를 받아오는 속도가 조금 느리긴 하지만 문제 해결은 완료되었다.

레이아웃을 일치시켜 이질감을 없애는 데 신경을 썼다.

다음에도 동일한 문제를 해결하기 위해 자주 사용할 것 같다.

이전 상태(previous state) 기반 업데이트

BELLORI — Wed, 31 Jan 2024 01:51:23 +0900

다음 렌더링 전에 동일한 상태 변수를 여러 번 업데이트해야 하는 경우가 있을 수 있다.

이런 경우 다음 상태 값을 전달하는 대신 다음 상태 값을 기반으로 새로운 상태 값을 계산하도록 할 수 있다.

이는 React에게 상태 값을 단순히 교체하는 대신 “이전 상태”를 기반으로 무언가를 수행하도록 지시하는 방법이다.

예를 들어 장바구니의 담겨있는 동일 상품을 하나가 아닌 여러 개를 사고 싶어 + 버튼을 통해 이전 수량에서 1씩 추가를 해야 한다고 가정을 해보자.

상품 데이터가 있는 json 파일을 먼저 만들어준다.

[product.json]

{
  "id": "nf-uni-padding",
  "imageSrc": "NFPadding.jpg",
  "imageAlt": "검정색 노스페이스 남여공용 패딩",
  "name": "노스페이스 패딩",
  "birthday": "2022-1-21"
}

해당 노스페이스 패딩 제품이 장바구니에 담겨있다고 가정하고 수량을 추가해보는 부분만 구현해보자.

import { useState } from 'react';
import { getStaticImage } from '../utils'; // 이미지 경로 설정 함수
import productData from '../data/product.json';

ㄴ 상태 관리를 위해 useState 를 불러온다.

ㄴ getStaticImage 유틸 함수는 인수에 파일명을 넣어주면 images 폴더에 저장되어 있는 이미지 중 일치하는 이미지를 가져오는 함수이다.

ㄴ 위에서 만든 상품 정보가 담겨있는 json 파일을 productData 이름으로 가져와서 사용한다.

const [product, setProduct] = useState(0);

ㄴ 초깃값은 0으로 설정해주고 state 변수 이름은 product 로 설정한다.

(상품의 개수가 담겨있는 거라 네이밍이 적절치 않지만 예제로 만든거니 대충 넘어가자)

ㄴ 상품 개수를 업데이트 해주는 setter 함수의 이름은 setProduct 로 설정한다.

상태 변수를 새로운 값으로 단순히 교체하고자 하는 것이기 때문에 아래와 같이 코드를 작성해준다.

const handleIncreaseProduct = () => {
  setProduct(product + 1);
};

ㄴ 이 핸들러는 상품 수량을 증가시켜주는 핸들러이다.

귀찮은 사용자가 있다는 가정을 하고 학습에 대한 이해를 위해 2개씩 늘리는 코드를 작성하였다고 가정해보자.

const handleDoubleIncreaseProduct = () => {
  setProduct(product + 1); // 0 + 1
  setProduct(product + 1); // 0 + 1
};

ㄴ 이 핸들러는 setProduct(product + 1); 를 두 번 호출하고 있다.

ㄴ 만약 해당 함수를 실행할 경우 product 의 값이 2가 아닌 1로 표시된다.

이 문제는 새로운 값 업데이트의 주의사항에서 다룬 내용과 비슷한데 setter 함수를 호출해도 이미 실행 중인 코드의 상태 변수가 업데이트 되지 않기 때문이다.

따라서 각 호출은 setProduct(1) 이 되는 것이다.

이 문제를 해결하려면 다음 상태 대신 setProduct 에 업데이트 함수를 전달하면 된다.

const handleDoubleIncreaseProduct = () => {
  setProduct((product) => product + 1); // setProduct(0 => 1)
  setProduct((product) => product + 1); // setProduct(1 => 2)
};

ㄴ 해당 코드는 이전 상태 를 기반으로 업데이트를 시도한다. 다시 말해 여러 번 상태를 업데이트 하는 것이다.

ㄴ (product) product + 1 이 함수는 업데이트 함수이다.

이 안에서는 보류 상태(pending state)를 가져와서 다음 상태를 계산한다.

React는 업데이트 함수들을 대기열(큐)에 넣는다.

그리고 나서 다음 렌더링 중에 동일한 순서로 호출한다.

처음 (product) product + 1 은 보류 상태로 0을 받고 다음 상태로 1을 반환한다.
그 다음 (product) product + 1 은 보류 상태로 1을 받고 다음 상태로 2를 반환한다.

이 과정으로 대기 중인 다른 업데이트가 없어 React는 결국 현재 상태(current state)로 2를 저장하는 것이다.

return (
	<>
    <figcaption>
      <img
        height={250}
        width={250}
        src={getStaticImage(productData.imageSrc)}
        alt={productData.imageAlt}
      />
      <span>수량 {product}</span>
      <button
        type="button"
        aria-label="상품 수량 1 증가"
        onClick={handleIncreaseProduct}
      >
        1개씩 더 담기 +
      </button>
      <button
        type="button"
        aria-label="상품 수량 2 증가"
        onClick={handleDoubleIncreaseProduct}
      >
        2개씩 더 담기 +
      </button>
    </figcaption>
  </>
);

마크업의 구조는 위와 같다.

span 요소에는 장바구니에 담긴 상품의 수량이 표시된다.

첫 번째 버튼은 onClick 이벤트를 걸어 handleIncreaseProduct 핸들러를 참조한다.

(상품이 1개씩 증가)

두 번째 버튼에도 마찬가지도 onClick 이벤트를 걸어 handleDoubleIncreaseProduct 핸들러를 참조한다.

(상품이 2개씩 증가)

[렌더링 결과]

[JSX 파일 전체 코드]

import { useState } from 'react';
import { getStaticImage } from '../utils'; // 이미지 경로 설정 함수
import productData from '../data/product.json';

function Cart() {
    const [product, setProduct] = useState(0);

    const handleIncreaseProduct = () => {
      setProduct(product + 1);
    };
    
    const handleDoubleIncreaseProduct = () => {
      setProduct((product) => product + 1); // setProduct(0 => 1)
      setProduct((product) => product + 1); // setProduct(1 => 2)
    };
    
    return (
        <>
        <figcaption>
          <img
            height={250}
            width={250}
            src={getStaticImage(productData.imageSrc)}
            alt={productData.imageAlt}
          />
          <span>수량 {product}</span>
          <button
            type="button"
            aria-label="상품 수량 1 증가"
            onClick={handleIncreaseProduct}
          >
            1개씩 더 담기 +
          </button>
          <button
            type="button"
            aria-label="상품 수량 2 증가"
            onClick={handleDoubleIncreaseProduct}
          >
            2개씩 더 담기 +
          </button>
        </figcaption>
      </>
    );
}

export default Cart;

참고: https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state

React의 작동 흐름 (공식 문서 해설)

BELLORI — Tue, 30 Jan 2024 03:02:23 +0900

React의 작동 흐름

React의 작동 흐름은 크게 네 가지 단계로 나누어진다.

Mount: 컴포넌트가 새롭게 생성되는 단계이다. 컴포넌트 함수가 실행되고 결과물로 나온 Element들이 가상 DOM에 삽입되고 실제 DOM을 업데이트하기까지의 과정이다.
Trigger: 렌더링을 유발한다. 앱 시작 초기 또는 state의 변경이 있을 때(re-render)에 해당한다.
Render: 브라우저 DOM에 반영될 요소를 계산하는 단계이다. 브라우저 DOM에 업데이트 하기 전에 가상돔을 조작하여 업데이트할 모양을 만들어 내는 단계이다. 가상돔을 통해 업데이트를 미리 실행하는 이유는 브라우저 DOM을 직접 조작하는 비용(repaint, reflow)가 크기 때문이다. 초기 렌더라면 루트 컴포넌트를 호출하여 전체 엘리먼트에 대한 가상돔을 만들지만, Re-render의 경우 이전 렌더와 비교하여 변화가 있는 컴포넌트를 호출한다.
Commit: Render 단계를 통해 호출된 컴포넌트들이 브라우저 DOM에 적영되는 단계이다. Render 단계에서 변화가 있던 부분만 DOM에 마운트되고 라이프 사이클을 실행한다.

이렇게 React의 작동 흐름은 사용자와 상호작용하며 동적으로 UI를 업데이트 한다.

이를 조금 더 예를 들어 설명해보자. (참고)

컴포넌트는 화면에 표시되기 전에 React로 렌더링이 먼저 되어야 한다.

컴포넌트가 요리사로 비유하고 React는 고객(사용자)의 요청을 접수하고 주문을 전달하는 웨이터로 비유한다.

UI를 요청하고 제공하는 프로세스는 크게 세 단계로 구성된다.

Illustrated by Rachel Lee Nabors

1단계, 렌더링 트리거 (Triggering a render) : 손님의 주문을 받고 주방으로 전달

컴포넌트가 렌더링이 되는 이유는 두 가지가 있다.

초기 렌더링

앱이 시작되면 초기 렌더링을 트리거 해야 한다.

createRoot 대상 DOM 노드를 호출한 뒤 render 메서드를 사용하여 해당 컴포넌트를 렌더링 한다.

// Greeting.jsx
const Greeting = () => {
	return <h1>환영합니다!</h1>
}

export default Greeting;

// main.jsx
import Greeting from './Greeting.jsx';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById("root"));

root.render(
	<StrictMode>
		<Greeting />
	</StrictMode>
);

컴포넌트 또는 상위 항목의 state가 업데이트 되어 다시 렌더링(리렌더)를 하는 경우

Illustrated by Rachel Lee Nabors

컴포넌트가 처음 렌더링 되면 set 함수를 통해 state를 업데이트하여 추가 렌더링을 트리거 할 수 있다.

컴포넌트의 state를 업데이트하면 렌더링이 자동으로 큐(queue)에 추가된다.

2단계, 컴포넌트 렌더링 (Rendering the component) : 주방에서 주문한 음식을 준비

React가 구성 요소를 렌더링하는 단계이다.

React는 렌더링을 트리거 한 후 컴포넌트를 호출하여 화면에 표시할 내용을 파악한다.

ㄴ “렌더링”은 React가 컴포넌트를 호출하는 것이다.

// Greeting.jsx
const Greeting = () => {
  return (
    <section>
      <h1>환영합니다!</h1>
      <DuckImage />
      <DuckImage />
      <DuckImage />
    </section>
  );
};

const DuckImage = () => {
  return (
    <img
      src="https://www.shutterstock.com/image-vector/cute-cartoon-rubber-duck-vector-600nw-2276837591.jpg"
      alt="DuckImage"
      width="50px"
      height="50px"
      style={{
        margin: 8,
      }}
    />
  );
};

export default Greeting;

초기 렌더링 시 React는 루트 컴포넌트를 호출한다.

React는 <section> <h1> <img> 세 개의 태그에 대한 DOM 노드를 생성한다.

이후의 렌더링에서 React는 렌더를 트리거한 상태 업데이트의 함수 컴포넌트를 호출한다.

다시 렌더링을 하는 동안 React는 이전 렌더링 이후 변경된 속성이 있는지 계산한다.

다음 단계인 커밋까지 해당 정보로 아무 작업도 수행하지 않는다.

해당 프로세스는 재귀적이다.

업데이트된 컴포넌트가 다른 컴포넌트를 반환하면 React는 그 다음에 해당 컴포넌트를 렌더링하고 만약 그 컴포넌트도 무언가를 반환하면 그 다음에 렌더링하는 식이다.

이 프로세스는 중첩된(nesting) 컴포넌트가 없을 때까지 반복되고 React는 화면에 정확히 어떤 내용을 표시해야 하는지 파악하게 된다.

3단계, DOM에 커밋 (Committing to the DOM) : 테이블 위에 주문한 음식을 배치

React는 DOM에 변경 사항을 커밋한다.

즉, 컴포넌트를 렌더링(호출)한 후 React는 DOM을 수정한다.

초기 렌더링의 경우

React는 appendChild() DOM API를 사용하여 생성된 모든 DOM 노드를 화면에 배치한다.

ㄴ appenChild() 메서드는 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙이는 메서드이다.

재렌더링(re-renders)의 경우

다시 렌더링할 때 React는 DOM이 최신 렌더링 출력과 일치하도록 최소한의 필수 작업을 적용한다.

ㄴ 이 작업은 렌더링 중에 계산된다.

React는 렌더링 간에 차이가 있는 경우에만 DOM 노드를 변경한다.

브라우저 렌더링

렌더링이 완료되고 React가 DOM을 업데이트 한 후 브라우저는 화면을 다시 칠한다.

이 프로세스를 “브라우저 렌더링”이라고 한다.

Illustrated by Rachel Lee Nabors

웹 컴포넌트(Web Component) API - 슬롯(Slot)

BELLORI — Thu, 25 Jan 2024 17:40:55 +0900

Web Component

웹 컴포넌트는 코드들을 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음이다.

슬롯(Slot)

웹 컴포넌트의 여러 기술들 중 HTML 템플릿에는 ‘template’과 ‘slot’ 엘리먼트가 있다.

이들은 렌더링된 페이지에 나타나지 않는 마크업 템플릿을 작성할 수 있게 해주며, 커스텀 엘리먼트의 구조를 기반으로 여러번 재사용 할 수 있다.

HTML ‘slot’ 요소는 웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 placeholder이다.

[예제]

<template id="my-component">
	<slot name="header"></slot>
	<slot name="footer"></slot>
</template>

ㄴ 템플릿 작성

<my-component>
	<h1 slot="header">이것은 외부에서 넘어온 헤더입니다.</h1>
  <footer slot="footer">이것은 외부에서 넘어온 푸터입니다.</footer>
</my-component>

ㄴ slot의 name 속성을 활용해 해당 위치에 외부 콘텐츠를 넘길 수 있다.

자바스크립트 없이 HTML만으로 작성한 코드

랜더링 된 화면 모습

template는 브라우저가 태그의 내용은 인식하지만 화면에 랜더링 하지 않는다.

프레그먼트(Fragments)

BELLORI — Thu, 25 Jan 2024 01:58:50 +0900

컴포넌트를 만들 때 아래와 같은 에러를 본 적이 있을 것이다.

Adjacent JSX elements must be wrapped in an enclosing tag.

Did you want a JSX fragment <>...</>?

만약 컴포넌트가 아래와 같이 작성이 되었다고 해보자.

const App = () ⇒ {
 return (
  <div>one</div>
  <div>two</div>;
 );
}

이 코드에는 문법 오류 문제가 있다.

JSX 문법으로 작성된 내용이 아래와 같이 해석이 되기 때문이다.

return (
 React.createElement('div', {}, "one")
 React.createElement('div', {}, "two")
)

VSCode 파싱 에러

React 컴포넌트는 하나의 최상위 엘리먼트만 렌더링을 할 수 있기 때문에 2개 이상의 엘리먼트가 감싸지지 않고 작성될 경우 에러 문구를 보여준다.

컴포넌트가 여러 엘리먼트를 반환하는 것은 흔한 패턴이기 때문에 항상 감싸줘야 한다.

이를 해결하기 위해 가장 일반적인 방법은 div로 묶는 방법인데 단순히 감쌀 목적으로 <div>를 사용하는 것은 적절치 않다.

그래서 이를 해결하기 위해 Fragment를 사용한다.

React의 Fragment는 웹 표준에서의 <template>과 같다.

웹 표준에서의 <template>도 실제 렌더링이 되지 않는 것처럼 <fragment>도 렌더링이 되지 않는다.

[예제]

<div>one</div>, <div>two</div> 이 두 개 요소를 렌더링 해야한다고 가정해보자.

function App() {
  return (
    <div className="app">
      <div>one</div>
      <div>two</div>
    </div>
  );
}

div 지옥이다.

만약 여기서 fragment를 사용한다면 어떻게 될까?

import { Fragment } from 'react';

function App() {
  return (
    <Fragment>
      <div>one</div>
      <div>two</div>
    </Fragment>
  );
}

DOM에 Fragment는 렌더링 되지 않고 JSX 문법을 지키면서 요소들을 그룹화 해서 렌더링 할 수 있다.

Fragment는 단축 문법을 지원하는데 위의 에러 메시지처럼 <> … </>이다.

function App() {
  return (
    <>
      <div>one</div>
      <div>two</div>
    </>
  );
}

단축 문법을 사용해도 이렇게 같은 결과가 나온다.

React에서 Fragment를 사용하는 것은 불필요한 부모 Element를 추가하지 않고 여러 Element들을 그룹화 하는데 사용되며, 공식적으로 권장되는 방법이다.

애초에 에러 메시지에서 Did you want a JSX fragment <>...</>? 라고 친절히 Fragment에 대한 힌트를 제공해주고 있다.

크롬 확장 프로그램 충돌로 인한 레이아웃 깨짐 문제 해결

BELLORI — Tue, 9 Jan 2024 21:40:50 +0900

Situation

로그인 페이지 아이디 입력란 레이아웃 깨짐 문제 발생

마켓 컬리 사이트 클론 코딩 프로젝트 중에 레이아웃이 깨지는 문제가 발생하였다.

아이디 입력란과 비밀번호 입력란은 동일한 클래스를 주고 같은 스타일을 적용하였는데 비밀번호는 원하는대로 스타일이 나와주었고 아이디 입력란만 먹통이였다.

회원가입 페이지 아이디 및 이름 입력란 레이아웃 깨짐 문제 발생

회원가입 페이지도 마찬가지로 아이디와 이름 입력란만 레이아웃이 깨지는 현상이 발생하였다.

Task

로그인 페이지와 회원가입 페이지의 레이아웃 깨짐 현상을 해결하여 원하는 스타일이 나오도록 해야했다.

Action

먼저 시도해 본 방법은 캐시 비우기 및 강력 새로고침이였다.

그대로다.

두 번째 시도해 본 방법은 작성한 코드와 로컬 서버 상태를 확인하는 것이였다.

코드를 아무리 보아도 클래스를 잘못 주었다거나, 스타일을 잘못 준 것도 아니였다. 로컬 서버의 문제도 아니였다.

세 번째 시도해 본 방법은 css의 우선순위를 높여 보는 것이였다.

역시 이것도 해결이 되지 않았다.

네 번째 시도해 본 방법은 크롬, 파이어폭스, 웨일, 엣지 총 4개의 각 브라우저에 접속해서 확인해 보는 것이였다.

크롬 제외하고 파이어폭스, 웨일, 엣지 모두 정상적으로 랜더링이 되어 있었다.

다섯 번째 시도해 본 방법은 맥OS에서 접속해 보는 것이였다.

맥OS에서 사파리로 접속 시 문제가 없으나, 크롬으로 접속하면 레이아웃이 깨졌다.

크롬이 문제인 것으로 좁혀졌고 마지막으로 시도해 본 방법은 시크릿창으로 확인해 보는 것이였다.

시크릿창으로 확인 시 레이아웃이 아무런 문제 없이 잘 보이는 것이였다.

원인을 도무지 알 수 없어 설치된 확장 프로그램을 하나씩 꺼보았다.

Grid Layout System

문제의 원인을 찾아내었다.

이녀석을 끄고 확인하면 레이아웃이 정상으로 돌아왔고 다시 키면 레이아웃이 깨지는 것이였다.

문제는 이녀석을 끄는 것만이 버그가 픽스되었다고 볼 수 없었고, 동일한 익스텐션을 설치한 유저가 페이지에 접속한다면 계속 깨져있는 레이아웃을 보았을 것이다.

다시 코드 창을 확인해 보았다.

아이디와 비밀번호 input 영역을 감싸고 있는 div의 클래스가 element 없이 단순하게 input-wrapper로 되어있는 부분이 거슬렸다.

클래스명을 login-input-wrapper로 수정하고 css 코드도 수정된 클래스명으로 고쳐보았다.

클래스명을 수정하니까 해결이 되었다.

회원가입 코드도 마찬가지로 input 영역을 감싸고 있는 div의 클래스를 확인해 보았다.

여기도 마찬가지로 form-input-wrapper, label-wrapper 등 단순하게 되어있는 것을 확인할 수 있었다.

이것 역시 클래스명을 수정하니까 해결되었다.

Result

두 페이지 모두 이와 비슷하게 단순하게 지었던 클래스명들을 수정 보완하였고 추가적인 문제는 발생하지 않았다.

그동안 단순히 프로젝트 디렉토리 내 겹치지 않게끔만 신경을 써왔는데 예상치 못한 문제가 발생되어 해결하느라 애를 좀 먹었다.

이를 통해서 느낄 수 있었던 부분은 BEM 패턴 방식을 사용했더라면 이런 문제가 발생하지 않았을 거라는 생각이 들었고 클래스명을 대충 짓지 않도록 신경을 조금 더 써야겠다는 생각이 들었다.

웹 요소의 속성을 가져오거나 수정하는 방법

BELLORI — Wed, 27 Dec 2023 23:15:02 +0900

웹 요소의 속성을 가져오거나 수정하는 getAttribute(), setAttribute(), removeAttribute() 메서드

웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성 노드가 추가되면서 속성값이 저장된다.

이 때 속성에 접근하려면 getAttribute() 메서드를 사용하고 접근한 속성의 값을 바꾸려면 setAttribute() 메서드를 사용하면 된다.

속성 자체를 삭제하고 싶다면 removeAttribute() 메서드를 사용하면 된다.

[예시]

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>getAttribute, setAttribute</title>
  </head>
  <body>
    <div>
      <img src="./img/duck.jpg" alt="오리 사진" id="image" />
    </div>
  </body>
</html>

간단한 위 예시 코드를 활용하여 알아보자

getAttribute() 메서드

이 메서드는 괄호 안에 들어가는 속성에 접근하여 속성값을 반환한다.

[구문]

element.getAttribute(“속성명”)

[설명]

먼저 속성값을 얻기 위해 이미지 요소에 접근해서 변수에 담아준다.

이미지 요소를 담은 변수에 .getAttribute() 메서드를 활용하여 alt 속성 값과 id 속성 값을 반환한다.

변수에 담지 않고 체이닝을 해도 같은 결괏값을 가져올 수 있다.

setAttribute() 메서드

getAttribute() 메서드를 통해 값을 확인했다면 확인한 값에 대한 설정을 바꿀 수도 있다.

이 메서드의 괄호 안에 들어가는 첫 번째 인자는 속성에 접근하기 위한 속성명이 들어가고 두 번째 인자는 변경하고자 하는 값이 들어간다.

만약 기존 속성값이 이미 있다면 새로운 속성값으로 수정하고 만약 없다면 속성과 속성값을 새로 추가한다.

[구문]

element.setAttribute(“속성명”, “값”)

[설명]

getAttribute() 메서드를 통해 얻은 alt 속성의 값을 변경해보자.

반환값은 undefined이다.

기존에 alt 속성에 있었던 '오리 사진'이라는 값이 setAttribute() 메서드를 통해 "귀여운 오리사진"으로 변경된 것을 확인할 수 있다.

만약에 빈값으로 두고 싶다면 두 번째 인자를 ""으로 두면 된다.

removeAttribute() 메서드

이 메서드는 괄호 안에 들어가는 속성을 제거한다.

[구문]

element.removeAttribute(“속성명”)

[설명]

위에서 변경한 alt 값 자체가 마음에 안 들어서 이 속성(attribute) 자체를 삭제하려고 한다.

반환값은 undefined이다.

기존에 있었던 alt 값 자체가 제거된 것을 확인할 수 있다.

웹 요소의 내용을 수정하는 방법

BELLORI — Tue, 26 Dec 2023 17:25:13 +0900

웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티

요소(element)는 객체기 때문에 innerText 프로퍼티나 innerHTML 프로퍼티를 이용하여 웹 요소의 내용도 수정할 수 있다.

[예시]

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>innerText, innerHTML</title>
  </head>
  <body>
    <p id="test">hello, world!</p>
  </body>
</html>

위 예시 코드를 활용하여 알아보자

innerText 프로퍼티

innerText 프로퍼티는 요소의 텍스트 콘텐츠를 설정하거나 반환한다.

[구문]

- get 방식 : element.innerText

ㄴ "let text = element.innerText"와 같이변수에 담아 활용해도 무방하다.

- set 방식 : element.innerText = "내용"

[설명]

예시 코드에서 #test id 값을 가진 p 태그의 텍스트 노드 값을 가져와보자 (get 방식)

get 방식

다음으로는 텍스트 노드 값을 설정해보자 (set 방식)

set 방식

hello, world! -> hello, JavaScript로 변경

할당 연산자를 통해 값을 새로 설정하면 기존에 있던 모든 하위 노드가 제거되고 하나의 새 텍스트 노드로 대체된다.

innerHTML 프로퍼티

innerHTML 프로퍼티는 요소의 HTML 콘텐츠(내부 HTML)를 설정하거나 반환한다.

[구문]

- get 방식 : element.innerHTML

ㄴ "let text = element.innerHTML" 과 같이 변수에 담아 활용해도 무방하다.

- set 방식 : element.innerHTML = "내용"

[설명]

get 방식으로 하게 될 경우 innerText와 큰 차이가 없어보일 수 있다.

get 방식

set 방식에서 차이를 확인할 수 있다.

먼저 text 노드를 넣는 것도 반환값이 똑같고 문서 내에서도 변경사항을 똑같이 확인할 수 있다.

text 노드만 넣었을 때

hello, world! -> hello, JavaScript로 변경

innerHTML 프로퍼티는 HTML 태그까지 반영하여 표시하기 때문에 innerText 프로퍼티와 차이점을 보여준다.

"hello, world"를 "hello, JavaScript"로 변경하면서 굵은 글씨 효과를 주기 위해 <b> 태그로 감싸는 것을 시도하려고 한다.

먼저 innerText 프로퍼티로 태그까지 넣어 시도해보자.

innerText로 태그채로 넣었을 때

text 노드에 태그채로 표시됨

태그로 인식하지 못함

이렇게 태그가 적용되지 않고 text 노드에 태그채로 들어가서 원하는 결과를 얻어낼 수 없다.

개발자도구에서도 text node로 인식하여 검정색 글씨로 보여준다.

다음으로 innerHTML 프로퍼티로 태그까지 넣어 시도해보자.

innerHTML로 태그채로 넣었을 때

<b> 태그가 적용되어 표시됨

태그로 인식함

innerText로 시도했던 것과 다르게 우리가 원하는 결괏값을 얻어낼 수 있었고 개발자도구에서 확인하였을 때에도 정상적으로 태그로 인식하여 굵은 글씨가 적용되었다.

DOM에 접근하는 다양한 방법

BELLORI — Tue, 26 Dec 2023 01:47:19 +0900

DOM에 접근하기

웹 문서에서 원하는 요소를 찾아가는 것을 '접근한다'고 한다.

이벤트를 거는 등 요소를 제어하기 전에 그 요소를 먼저 지정할 수 있어야 한다.

CSS에서 id, class, html 태그(<p>, <h1> 등)를 선택자(selector)라고 하는데 이 선택자를 사용해서 DOM에 접근하는 여러가지 방법이 있다.

getElementById()

id는 문서 내에서 유일하기 때문에 특정 요소를 빠르게 찾을 때 유용하다.

이 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 지정된 값을 가진 요소 객체를 반환한다.

괄호 안에는 id명이 들어간다.

[예시]

bellori라는 id 값을 가진 요소에 접근하려면 아래와 같다.

document.getElementById(“bellori”)

getElementsByClassName()

class의 경우 id와 다르게 2개 이상의 복수로 사용될 수 있어 반환하는 요소가 2개 이상일 수가 있다.

그래서 메서드의 이름에서도 알 수 있듯이 Element가 아닌 s 복수형을 사용하여 Elements이다.

[예시]

"bright"라는 class 이름을 가신 요소를 모두 찾으려면 아래와 같다.

document.getElementsByClassName(“bright”)

이 메서드를 사용하게 되면 class 이름이 같은 DOM 요소들이 HTMLCollection이라고 하는 숫자로 된 키 값을 가진 객체에 저장되는데 배열과 비슷하고 배열처럼 사용할 수 있지만 배열은 아니다.

getElementsByTagName()

이 메서드의 경우 getElementsByClassName() 메서드와 비슷하다.

id나 class가 별도로 없다면 HTML 태그로 찾는 것이다.

이것도 class처럼 2개 이상의 복수로 사용될 수 있어 반환하는 요소가 2개 이상일 수가 있다.

따라서 반환되는 값도 HTMLCollection 형태로 저장된다.

[예시]

웹 문서에서 <p> 태그를 사용한 모든 요소에 접근하려면 다음과 같이 사용한다.

document.getElementsByTagName(“p”)

querySelector(), querySelectorAll()

위의 getElementById(), getElementsByClassName(), getElementsByTagName() 메서드 모두 반환값이 HTMLElement 객체이다.

DOM 트리의 텍스트, 속성 노드까지 자유롭게 제어하려면 이 메서드들을 사용해야 한다.

id 선택자처럼 반환값이 하나라면 querySelector()를 사용하고, class 선택자나 태그 이름을 사용하여 여러 값이 한꺼번에 반환될 경우에는 querySelectorAll() 메서드를 사용한다.

querySelector() 메서드로 class나 tag 로 접근하지 못하는 것은 아니다. 다만, 2개 이상 요소가 있다면 첫 번째 요소만 반환한다.

[예시]
css와 동일하게 괄호 안에는 id 이름 앞에는 # 을 붙이고 class 이름 앞에는 .을 붙인다.
태그는 기호 없이 태그명만 쓰면 된다.

document.querySelector("#bellori") // id 선택
document.querySelectorAll(".bright") // class 선택
document.querySelectorAll("p") // html 태그 선택

이 두 메서드의 반환값은 한 개라면 노드이거나 여러 개인 경우 노드 리스트(Node List)라는 유사배열을 반환한다.