뭔가이게

iphone 사파리에서 video가 전체화면으로 재생되는 이슈

ㅇㄱ9 — Sat, 4 Jan 2025 08:00:13 +0900

진짜 저는 사파리가 싫어요...

아이폰에서만 안되는 모든 문제들이 싫어요...

그래도 일은 해야하니.. 처리를 해보았습니다...쓰읍

기존 코드

     <video
        autoPlay
        muted
        loop 
        className="absolute inset-0 w-full h-full object-cover z-[-1] opacity-100"
      >
        <source src="/BG.mp4" type="video/mp4" />
      </video>

이렇게 배경으로 mp4형식의 동영상을 무한재생하는 코드를 넣었는데요..

이것이 말입니다..

크롬도 삼성인터넷에서도 사파리웹에서도 아~무 문제가 없는데 아이폰 사파리에서만!!!!!

화면 재진입시에 동영상이 갑자기 전체화면모드로 재생되는겁니다....후.....

흐린눈을 하고 싶었으나 하지 못하고

video 태그에 playsinline속성을 추가해 해결했습니다..

수정한 코드

      <video
        autoPlay
        muted
        loop
        playsInline
        className="absolute inset-0 w-full h-full object-cover z-[-1] opacity-100"
      >
        <source src="/BG.mp4" type="video/mp4" />
      </video>

ios에서는 기본적으로 비디오가 자동으로 전체화면 모드로 재생되기 때문에 이런 동작을 막으려면 playsinline속성을 추가해주어야 한다고 합니다.

거 참 까다롭네...까다로워...

Text content did not match 에러!

ㅇㄱ9 — Fri, 3 Jan 2025 11:46:20 +0900

Text content did not match.

Server: "December 27, 2024 at 8:18:18 AM" Client: "December 27, 2024 at 8:18:19 AM" Error Component Stack

개발된 화면들을 확인하다가 발견한 warning

warning이지만 새빨간 배경에 뜨는것이 아주 거슬려서 해결해보기로 한다.

문제의 컴포넌트는 서버로부터 UNIX 시간을 받아와 예쁘게 가공해서 보여주는 컴포넌트였다.

근데 이페이지가 서버사이드에서도 그려지고, 클라이어트 사이드에서도 그려지다보니, 간발의 시점차가 생기는 경우 렌더링 되는 값이 달라져 생기는 문제였다.

먼저 useState로 관리하고 있던 값을 Date타입에서 string으로 바꾸어주었다.

기존 useState

const [castTimestamp, setCastTimestamp] = useState(new Date());

변경 후 useState

const [castTimestamp, setCastTimestamp] = useState(new Date());

그리고 나서 기존에는 그냥 리턴하는 컴포넌트에서 시간조작하던 부분을

아래와 같이 useEffect를 써서 클라이언트 사이드 렌더링이 될때 조작하도록 수정해주었다.

  useEffect(() => {
    // Update the timestamp when the component mounts on the client
    const timestampInMilliseconds = (detailData?.castTimestamp ?? 0) * 1000;
    setCastTimestamp(
      new Date(timestampInMilliseconds).toLocaleString("en-US", {
        timeZone: "UTC",
        year: "numeric",
        month: "long",
        day: "numeric",
        hour: "numeric",
        minute: "numeric",
        second: "numeric",
        hour12: true,
      })
    );
  }, [detailData?.castTimestamp]);

이렇게 세팅한 castTimestamp를 가져다 써주면 이슈해결 ~

<LabelValue label="Cast Timestamp" value={castTimestamp} />

어쩌다 보니 작년(12월말)에 쓰기 시작한 글을 올해 마쳤네..ㅋㅋ 올해는 조금 더 열심히 블로그를 써보는 것으루....

다들 새해 복 많이 받으세요~

블록체인 레이어1 ? 레이어 2? 이게 다 무슨 말이야?

ㅇㄱ9 — Tue, 19 Nov 2024 14:19:18 +0900

어쩌다 제가 블록체인 관련글을 쓰게 되었는지 인생 참 알 수 없네요 ㅎㅎ

일단 이번 글에서는 블록체인 레이어에 대해 알아보려고 합니다.

블록체인에서 레이어란 무엇이냐?!

서로 다른 기능을 가진 기술적 구조를 설명하기 위해 사용하는 개념입니다.

블록체인은 여러 레이어들로 나누어져 있고, 각 레이어는 각각 특정한 역할을 수행합니다.

[출처]https://digging.stibee.com/p/75/

먼저 위 그림으로 보면 4가지 계층으로 나누어져 있는데요,

한번 쭉 정리해보고 그중에서 레이어 1과 2를 자세히 알아보려고 합니다.

Layer 0

- 블록체인의 네트워크 인프라입니다.

- 브릿지를 모두 고려하여 네트워크 간에 상호 작용 가능한 설계를 가집니다.

ex) 아톰, 폴카닷

Layer 1

- 블록체인의 기본 네트워크. 즉, 블록체인의 핵심 프로토콜입니다.

- 모든 트랜잭션이 기록되고, 합의 매커니즘을 통해 검증하는 방식을 가집니다.

- 거래 정보를 검증하고 블록을 생성하는 핵심 기능을 수행합니다

- 탈중앙화와 보안성을 보장하지만 확장성에 제한이 있습니다

ex) 비트코인, 이더리움, 솔라나

Layer 2

- Layer 1의 확장성을 개선하기 위해 그 위에서 동작하는 프로토콜 혹은 기술.

- 일부 트랜잭션을 오프체인(off-chain)에서 처리하여 네트워크 부담을 줄입니다.

- 주로 확장성과 성능 개선을 위해 사용됩니다.

ex) 비트코인의 라이트닝 네트워크, 이더리움의 옵티미스틱 롤어브, ZK롤업

이더리움 메인넷 레이어 2 시스템 [출처]https://digging.stibee.com/p/75/

Layer 3 (별도의 레이어가 아니라 app이나 서비스로 분류하기도 함)

- 블록체인 위에서 구동되는 탈중앙화 애플리케이션 및 사용자 서비스

ex) 디파이, DApps, NFT, 게임등등

Layer 1 vs Layer 2

	Layer 1	Layer 2
장점	- 높은 보안성과 탈중앙화 - 블록체인의 기본적인 프로토콜과 핵심기능 담당 - 네트워크의 기반이 되는 중요한 역할 수행	- 블록체인의 확장성과 성능을 크게 개선 - 메인 체인의 부하를 줄이고 더 빠른 거래 처리 가능 - 다양한 서비스 구현이 용이 (ex: DeFi, NFT)
단점	- 확장성에 제한이 있어 대량의 거래 처리가 어려움 - 프로토콜 변경을 위해서는 하드포크가 필요하며, 이는 네트워크 참여자들의 동의를 얻어야 하는 복잡함 수반 - 개선 과정이 느리고 시간이 많이 소요됨	- 레이어 1의 보안에 의존하므로, 자체적인 보안위험이 있을 수 있음 - 사용자들이 레이어 2 솔루션을 신뢰하고 채택해야함 - 일부 레이어 2 솔루션은 중앙화된 요소를 포함할 수 있어, 완전한 탈중앙화를 달성하기 어려울 수 있음

그래서 Layer2가 블록체인 네트워크 부하를 어떻게 줄이는데? 라는 건 다음글로 돌아오겠습니다~

참고

블록체인에서 레이어는 뭔가요?

digging.stibee.com

레이어 1과 레이어 2의 확장 솔루션 비교

가상자산과 블록체인의 인기가 증가하고 있으며 사용자 수와 거래 수도 늘어나고 있습니다. 블록체인의 혁신은 지속적으로 이어져 왔지만, 확장성(증가하는 수요를 수용하면서 성장할 수 있는

academy.gopax.co.kr

반복되는 코드 줄이기

ㅇㄱ9 — Wed, 13 Nov 2024 13:00:03 +0900

(비록 협업할 사람도 없이 혼자 하는 프로젝트지만) 시간에 쫓겨 와다닥 만든 컴포넌트들 정리하는중.. ㅋㅋ

오늘의 타겟은 이 Pagination 컴포넌트 만들때 사용한 select와 button들 입니다.

shadcn의 button과 select를 기반으로 만들었습니다.

1. Select

- 기존 코드

        <Select
          value={selectedValue}
          onValueChange={(value) => setSelectedValue(value)}
        >
          <SelectTrigger className="w-[70px] h-9 border" isPagination={true}>
            {selectedValue}
          </SelectTrigger>
          <SelectContent className="w-[120px]">
            <SelectItem value="20">20</SelectItem>
            <SelectItem value="50">50</SelectItem>
            <SelectItem value="100">100</SelectItem>
          </SelectContent>
        </Select>

- 수정 후 코드

: 반복되는 SelectItem 부분을 map을 사용하여 정리

        <Select value={selectedValue} onValueChange={(value) => setSelectedValue(value)}>
          <SelectTrigger className="w-[70px] h-9 border" isPagination={true}>
            {selectedValue}
          </SelectTrigger>
          <SelectContent className="w-[120px]">
            {["20", "50", "100"].map((value) => (
              <SelectItem key={value} value={value}>
                {value}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

2. Button

- 기존코드

      <div className="flex gap-2 items-center">
        <Button className="rounded-md border bg-[#09090B] hover:bg-[#27272A] shadow-sm w-8 h-8 p-0">
          <Image
            src="/icon-double-arrow-left.svg"
            className="cursor-pointer"
            alt="logo"
            width={16}
            height={16}
          />
        </Button>
        <Button className="rounded-md border bg-[#09090B] hover:bg-[#27272A] shadow-sm w-8 h-8 p-0">
          <Image
            src="/icon-caret-left.svg"
            className="cursor-pointer"
            alt="logo"
            width={16}
            height={16}
          />
        </Button>
        <Button className="rounded-md border bg-[#09090B] hover:bg-[#27272A] shadow-sm w-8 h-8 p-0">
          <Image
            src="/icon-caret-right.svg"
            className="cursor-pointer"
            alt="logo"
            width={16}
            height={16}
          />
        </Button>
        <Button className="rounded-md border bg-[#09090B] hover:bg-[#27272A] shadow-sm w-8 h-8 p-0">
          <Image
            src="/icon-double-arrow-right.svg"
            className="cursor-pointer"
            alt="logo"
            width={16}
            height={16}
          />
        </Button>
      </div>

- 수정 후 코드

: 반복되는 부분 전부 map을 사용하여 정리,

icon마다 달라지는 src부분은 배열로 따로 빼서 관리

const icons = [
    { src: "/icon-double-arrow-left.svg", alt: "Double Left Arrow" },
    { src: "/icon-caret-left.svg", alt: "Caret Left" },
    { src: "/icon-caret-right.svg", alt: "Caret Right" },
    { src: "/icon-double-arrow-right.svg", alt: "Double Right Arrow" }
  ];


      <div className="flex gap-2 items-center">
        {icons.map((icon) => (
          <Button key={icon.alt} className={buttonClass}>
            <Image src={icon.src} alt={icon.alt} width={16} height={16} className="cursor-pointer" />
          </Button>
        ))}
      </div>

트럼프가 대통령이 됐는데 비트코인은 왜 오를까???

ㅇㄱ9 — Fri, 8 Nov 2024 11:33:08 +0900

출처 : ap

연일 최고가를 갱신하고 있는 비트코인.

트럼프가 당선되자마자 계속 오르고 있는데 도대체 비트코인과 트럼프가 무슨 관계이길래 이렇게까지 오르는걸까? 싶은 의문에 직접 찾아보았다.

이러다 몇년후에는 1억이면 진짜 쌌다는 소리 나오겠어요

먼저 그의 과거 재임기간(2017년-2021년)에 암호화폐 시장은 많은 변화를 겪었는데, 어떤 일이 있었는지 알아보자.

트럼프 대통령 재임 기간 동안 암호화폐는 어떻게 변화했을까?

1. 암호화폐의 급성장

트럼프가 대통령으로 재임하던 2017년, 비트코인이라는 암호화폐는 정말 큰 인기를 끌었다. 2017년 비트코인은 가격이 무려 20,000달러 가까이 올라갔었다! 이렇게 비트코인과 다른 암호화폐들이 큰 주목을 받게 되면서, 많은 사람들이 암호화폐를 투자 대상으로 생각하게 되었다.

2. ICO(초기 코인 공개) 열풍

암호화폐와 관련된 ICO라는 새로운 방식이 급격히 인기를 끌었는데, ICO는 Initial Coin Offering의 약자로, 쉽게 말하면 암호화폐를 처음으로 팔아서 자금을 모으는 방법이다. 이런 ICO는 2017년과 2018년에 정말 많이 진행되었는데, 이 과정에서 사기나 문제도 발생했기 때문에 정부는 암호화폐에 대해 더 많은 규제를 해야 한다고 목소리를 높였었다.

3. 트럼프 정부와 미국 증권거래위원회(SEC)

트럼프 재임 중, **SEC(미국 증권거래위원회)**는 암호화폐를 **증권(주식과 비슷한 투자 상품)**으로 간주하기 시작했다. 그래서 ICO를 진행한 기업들이 SEC의 조사를 받기도 했는데, 이런 규제들이 생겨나면서 사람들이 암호화폐가 어떻게 규제될지 궁금해했다.

4. 비트코인 ETF의 승인은?

비트코인을 ETF라는 투자 상품으로 만들자는 논의가 트럼프 재임 중에 계속 이어졌었다. ETF는 주식처럼 쉽게 사고팔 수 있는 상품인데, 많은 사람들이 비트코인 ETF가 승인을 받기를 기대했지만 SEC는 비트코인 ETF 승인을 거부했었고, 이로 인해 비트코인 가격은 영향을 받기도 했다.

5. 트럼프 대통령의 암호화폐에 대한 입장

트럼프 전 대통령은 비트코인에 대해 비판적인 입장을 자주 밝혔었다. 그는 "비트코인은 변동성이 크고, 범죄에 사용될 가능성이 있다"며 비트코인과 다른 암호화폐에 대해 부정적인 의견을 제시했었다. 트럼프는 미국 달러를 지키는 것이 중요하다며, 암호화폐가 달러를 위협할 수 있다고 생각한 것으로 보였다.

6. 디지털 화폐의 가능성

트럼프 대통령 하에서, 디지털 화폐라는 개념이 조금씩 논의되기 시작했다. 디지털 화폐란, 인터넷에서만 사용할 수 있는 돈을 말하는데, 트럼프 재임 말기에 디지털 화폐에 대한 관심이 높아졌었다. 트럼프 대통령은 디지털 화폐를 직접 만들려고 하지는 않았지만, 그 논의는 점점 활발해졌었다.

결론

트럼프 대통령 하에서 암호화폐는 많은 사람들이 관심을 가졌고, 가격도 급등했지만, 정부는 암호화폐에 대한 규제를 적극적으로 하지는 않았었다. 트럼프는 비트코인과 같은 암호화폐에 대해 부정적인 입장을 보였지만, 그가 하는 정책들은 암호화폐 시장에 큰 영향을 미쳤다.

그러므로, 트럼프 재임 기간 동안 암호화폐는 크게 성장했지만, 그 성장에 규제가 뒤따르지 않아서 혼란도 있었다고 정리해 볼 수 있다.

출처 : 연합뉴스

근데 그러면 트럼프는 가상자산(암호화폐)에 부정적이었는데 왜 가격은 오른거지?????

일단! 트럼프의 입장이 변했다..!

1. 2024년 7월 내슈빌에서 열린 비트코인 컨퍼런스에 참석해 친암호화폐 정책을 발표

출처:연합뉴스

2. 선거 캠페인 기간 동안 비트코인 기부를 받아들여 약 4백만 달러 상당의 비트코인을 모금

3. 바이든 행정부의 암호화폐 규제를 "암호화폐와의 전쟁"이라고 비판하며 규제 완화를 약속

이외에도 여러가지 요인들이 있는데~

1. 불확실성이 증가하면서 대체 자산으로 암호화폐 주목

트럼프가 대통령에 당선되면서 많은 사람들이 그의 정책과 행동에 대한 예측을 어렵게 느꼈다. 정치적 불확실성이 커지면서, 전통적인 자산(주식, 채권 등)에 대한 불안감이 커졌고, 이에 따라 사람들이 암호화폐와 같은 대체 자산으로 눈을 돌리게 되었다. 암호화폐는 정부의 통제를 받지 않기 때문에 불확실한 상황에서 안전한 투자처로 여겨지고 있다.

2. 저금리와 양적 완화 정책

트럼프 재임 기간 동안, 미국의 중앙은행인 **연방준비제도(Fed)**는 금리를 낮추고, 양적 완화(돈을 많이 풀어 경제를 자극하는 정책)를 진행했었다. 이로 인해 전통적인 투자처에서 수익을 얻기 어려운 상황이 되었고, 암호화폐는 인플레이션 헤지(인플레이션을 막는 방법) 수단으로 주목받았다. 특히 비트코인은 '디지털 금'이라고 불리며, 금처럼 안전자산으로 인식되기 시작했다.

3. 트럼프의 규제 정책이 암호화폐에 유리

트럼프 대통령은 암호화폐에 대해 비교적 규제를 엄격히 하지 않았다. 그의 정부는 새로운 기술과 시장에 대해 좀 더 자유로운 접근을 취했고, 암호화폐와 관련된 규제도 다른 정부에 비해 덜 강력했다. 이러한 규제 완화는 암호화폐 시장의 성장을 촉진시켰다.

특히 이번에 약속한 친암호화폐 정책은 다음과 같다.

- 국가 비트코인 비축: 정부가 보유한 모든 비트코인을 전략적 국가 비축금으로 유지하겠다고 밝혔다.

- 암호화폐 자문 위원회 설립: 취임 100일 이내에 암호화폐 산업을 지지하는 전문가들로 구성된 자문 위원회를 만들겠다고 약속했다.

- SEC 위원장 교체: 암호화폐 업계의 비판을 받아온 게리 겐슬러 SEC 위원장을 교체하겠다고 공언했다.

- 비트코인 채굴 산업 육성: 미국 내 비트코인 채굴 산업을 적극 지원하겠다고 밝혔다.

4. "디지털 금"으로서 비트코인에 대한 관심 증가

트럼프가 재임 중일 때, 비트코인은 점점 더 "디지털 금"으로 인식되었고, 경제 불확실성과 글로벌 경제의 변화에 따라 비트코인과 다른 암호화폐는 안전자산으로 각광받았었고, 이러한 인식 변화가 암호화폐 가격 상승을 이끌었다.

5. 시장 참여자들의 투자 열기

트럼프 당선 직후, 투자자들은 새로운 정부 정책에 대한 기대감을 갖고 암호화폐를 포함한 다양한 자산에 대한 투자를 확대했다. 비트코인 가격은 급등했고, 암호화폐 시장의 성장 가능성에 대한 신뢰가 커졌다.

결론

트럼프가 당선된 이유로 가상자산 가격이 오른 것은 불확실성 증가, 저금리 정책, 규제 완화, 디지털 자산으로서의 비트코인에 대한 관심 증가 등 여러 경제적, 정치적 요인이 복합적으로 작용했기 때문이다. 암호화폐는 불확실한 경제 상황에서 새로운 투자처로 주목받았고, 그로 인해 가격이 상승했다.

vercel 배포시 A commit author is required 에러

ㅇㄱ9 — Thu, 31 Oct 2024 16:05:39 +0900

[출처]https://m.animalplanet.co.kr/

또 이상한 것에 발목을 잡히신분... 저요

Vercel로 프로젝트를 배포하는데 A commit author is required 에러가 뜨지 뭡니까.

아니.. 나라고 커밋작성자 나라고!!!!!!!

를 속으로만 외치고(회사니까..) 작성자 정보를 넣어주러 가봅니다...

1. Git 사용자 정보 설정

먼저, Git에 사용자 이름과 이메일을 설정해줍니다.
그럼 Vercel이 배포 시 해당 정보를 참조하여 커밋 작성자 정보를 자동으로 인식합니다.

git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"

이렇게 설정하면 모든 프로젝트에 대해 동일한 작성자 정보를 사용하게 되는데, 혹시! 특정 프로젝트에만 설정하고 싶다면 --global 옵션을 제거하고 해당 프로젝트에서만 설정할 수 있습니다.

2. Git 커밋 확인 및 배포 재시도

돌리고 돌리고~~

[Next.js] 파일명 대소문자 변경 후 반영이 안될때

ㅇㄱ9 — Thu, 31 Oct 2024 15:49:07 +0900

후후..

vscode상에서 파일명에 들어간 대소문자를 변경했는데, 해당파일을 import하는 모든 곳에서 변경점을 감지하지못하고 빨간줄을 마구 내뱉을때! 침착하게 캐시를 지우고 의존성 재설치를 합니다.

1. node_modules와 lock 파일 삭제하기

rm -rf node_modules package-lock.json yarn.lock

2. Next.js 캐시도 삭제

rm -rf .next

3. 의존성 다시 설치

npm install
# 또는
yarn install

4. 개발 서버 재시작하기

npm run dev
# 또는
yarn dev

로컬은 이렇게 해결이 되는데 연결되어 있는 깃레포에는 또! 반영이 안되는데요~??하시는분들 ㅎ

만능 방법이 있습니다..

예를들어 nav.tsx를 Nav.tsx로 바꿨을때 이런문제가 생긴다면???

Nav.tsx -> Nav123.tsx 로 바꾼다음 커밋!

다시 Nav123.tsx -> Nav.tsx로 바꾼다음 커밋하고 푸쉬해주면 해결됩니다.

대소문자 바뀌는것도 좀 알아서 감지해줘라!!

tailwind.config.ts와 globals.css에 정의한 스타일 우선순위

ㅇㄱ9 — Tue, 15 Oct 2024 16:37:21 +0900

2024년들어 처음 쓰는 블로그 ㅎ

간만에 프로젝트 세팅부터 하는중인데 다까먹어서 되는게 없군요.. 열심히 다 찾아가면서 틈틈히 기록으로 남겨보는것으루..

먼저 각 파일에서 스타일을 정의하는 방법을 알아보자.

1. tailwind.config.ts에서의 스타일 정의

tailwind.config.ts 파일은 Tailwind CSS의 기본 설정과 테마를 확장하거나 수정하는 데 사용된다. 여기서는 Tailwind의 기본 색상, 폰트, 간격, 크기 등의 전역적인 디자인 시스템을 정의할 수 있다.

주요 목적: Tailwind의 기본 유틸리티 클래스를 확장하거나 덮어쓰기.
예시: 색상, 폰트 크기, 간격 등을 전역적으로 수정하고 싶을 때 사용.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

이 파일에 작성된 모든 부분은 선택사항으로 변경할 항목만 추가해 주면 된다.

정의되지 않은 부분들은 Tailwind의 디폴트 설정을 사용하게 된다.

2. globals.css에서의 스타일 정의

globals.css는 Tailwind CSS 프로젝트에서 글로벌 CSS를 정의하는 파일이다. 이 파일은 일반적으로 Tailwind에서 기본 제공하는 유틸리티 클래스 외에 추가적인 커스텀 CSS를 작성하는 데 사용되는데, 주로 특정 컴포넌트나 섹션에 맞춤형 스타일을 적용하는 데 사용된다.

주요 목적: Tailwind 유틸리티 클래스로 해결되지 않는 세부적인 스타일링을 커스텀 CSS로 정의.
예시: 특정 컴포넌트에만 적용되는 스타일이나 CSS 변수 등을 정의할 때 사용.

/* globals.css */
body {
  font-family: 'Inter', sans-serif;
}

.custom-button {
  background-color: #1D4ED8;
  color: white;
}

위 예시는 글로벌 스타일로서 body와 .custom-button 클래스에 직접적인 스타일을 적용한 예이다.

3. 우선순위

Tailwind의 스타일은 기본적으로 유틸리티 퍼스트(utility-first) CSS 프레임워크입니다. 그렇기 때문에 유틸리티 클래스가 일반적인 CSS 스타일보다 우선 적용되는 경우가 많습니다. 하지만 우선순위는 CSS의 일반적인 우선순위 규칙에 따라 달라집니다.

Tailwind 유틸리티 클래스 vs globals.css의 스타일
- 동일한 요소에 대해 globals.css에 작성된 CSS 스타일과 Tailwind의 유틸리티 클래스가 충돌할 경우, 일반적인 CSS 우선순위 규칙에 따릅니다.
- 예를 들어, 클래스 선택자(.custom-button)보다 Tailwind의 인라인 스타일이나 중요한 유틸리티 클래스(!important)가 우선될 수 있습니다.
우선순위 예시:
- Tailwind 클래스가 먼저 적용되지만, 만약 globals.css에서 더 높은 우선순위를 가진 선택자(예: ID 선택자, !important 등)를 사용하면 그 스타일이 우선됩니다.

<button class="custom-button bg-red-500">Click me</button>

위의 버튼에서 globals.css에 정의된 .custom-button의 background-color: #1D4ED8이 적용되지만, Tailwind 클래스 bg-red-500이 Tailwind의 유틸리티 클래스라서 더 높은 우선순위를 가집니다.

요약

tailwind.config.ts: Tailwind의 전역 테마 및 유틸리티 클래스를 설정.
globals.css: Tailwind로 해결되지 않는 맞춤형 스타일을 정의.
우선순위: 기본적으로 Tailwind 유틸리티 클래스가 우선되지만, CSS의 일반적인 우선순위 규칙에 따라 달라집니다.

이 구조를 이해하면 Tailwind를 사용할 때 더 효과적으로 스타일을 관리할 수 있습니다.

회사의 성장 속도와 직원의 성장속도

ㅇㄱ9 — Fri, 24 Mar 2023 18:06:27 +0900

어쩌다 보게 된 개발바닥 유튜브의 아래 두영상을 보고 쓰게 된 글이다.

시선 강탈하는 영상 썸네일에 이끌려 보게되었는데 생각해 본 것, 볼것들이 많아 정리해 봤다.

(Q와 A모두 영상에 나오는 내용으로 개인적인 생각은 -> 표시 이후에 적었다. )

Q : 스타트업에서 인원을 채워나가면서 몸집을 불릴 때, 10-20명까지는 어떻게든 채용이되는데 50명 100명 200명은 어떻게 뽑나?? 이구간이 채용이 힘든 시기다. 20명 -> 100명으로 갈 때 채용 시 뭘 포기할 수 있는지?

개발실력은 포기하고 회사비전에만 동의하는사람

개발실력은 좋으나 비전에는 관심이 크게 없는 사람

A : 비전을 포기한다. 진짜 초기일 때는 비전을 포기하면 동력이 안 생기지만 30명 정도까지 갔다면 좀 내려놔도 될 거 같다.

-> 비전보다 실력이 더 중요할 시기라는 답변이 이해가 갔다. 회사의 모든 직원들이 같은 비전을 가지고 가면 좋겠지만 그건 아무리 좋은 회사라도 불가능에 가까운 일이라는 생각이 들고, 성장하는 데 있어 필수 조건도 아니라는 생각을 했다.

구직자 입장에서 고려해 볼 때 이런 면을 보고 회사를 고를 수 있겠다! 는 생각이 들었다.

회사의 비전에 동의하고 그게 중요한 시기의 회사인지 아니면 실력만으로 퍼포먼스를 낼 수 있는 회사인지?

Q : 초반에 비전을 보고 뽑은 사람들이 이후 들어온 기술력을 보고 뽑은 사람들을 못 따라간다면?

A : 그럼에도 불구하고 그들이 할 수 있는 일이 있을 것이다.

-> 1부 영상은 회사의 성장속도에 개인이 따라가지 못한다면 생기는 일, 2부 영상은 개인의 성정속도를 회사가 따라가지 못한다면 생기는 일 위주로 나온다.

위 질문은 전자의 상황인 건데, 회사가 크게 성장하는데 나는 성장하지 못했다면 회사에서의 나의 위치를 객관적으로 돌아볼 필요가 있을 것 같다. 내가 가지고 있는, 쌓아온 경험으로 기여할 수 있고 여전히 회사에서 그걸 필요로 하는지 혹은 지금 나에게 이 회사가 최선인지.

본인이 바뀌거나 환경이 바뀌거나 하는 상황이 언젠가는 누구에게나 찾아올 텐데 이를 잘 넘기려면, 재직중일 때도 한 번씩은 객관적으로 돌아볼 필요가 있겠다는 생각이 들었다.

Q : 신입을 뽑아서 키웠더니 딴 데로 이직해요 -> A : 다른 방법을 찾아야죠

Q : 그래서 경력직만 뽑고 있는데 이게 맞는 해결책인가요? -> A :외주는 어떤가요? ㅎㅎ

-> 이건 진짜 너무 공감되는 부분이었다.

새로운 사람이 팀에 합류해서 몇 달을 업무 알려주고 팀에 적응할 수 있게 도와주고 이제 발맞춰 문제를 해결해 나갈 때쯤 되니 나가는 사람들이 좀 많았을 때가 있었다. 그들의 퇴사이유가 우리 팀의 문제가 아니어서 해결해 줄 수 있는 상황이 아니었을 때, 남은 팀원들의 허무함과 누군가 새로 들어오면 처음부터 맞춰가야 한다는 부담감, 당장 팀원 한 명 한 명 몫의 일이 많아지는 현실 등등이 팀에 안 좋은 영향을 미쳤다.

떠나는 사람을 잡을 수 없는 상황에서 팀장이 할 수 있는 일이 뭘까 생각해 봤다.

그간 팀원들이 새로운 사람이 업무에 적응하는데 도와준 노력을 인정해 주는 것, 팀분위기가 더 흔들리지 않게 공동의 목표를 만들어 달성하게 하는 것 (EX 팀 내 스터디)...

그리고 인원이 부족하다는 이유로 감당할 수 없는 선까지 채용허들을 낮추지 않는 것. (사실 이건 팀장의 권한밖이다. 채용이나 인사이동 관련 권한이 없기 때문에.. 그냥 혼자 생각이나 해본다 정도?)

내가 할 수 있는 것과 할 수 없는 것을 나눠서 할 수 있는 최대한의 것을 하려고 노력했다. 이 질 문도 마찬가지로 떠나는 사람을 잡을 수 있게 환경을 변화시킬 수 없다면 떠나려는 사람은 잡을 수 없다. 다른 더 나은 해결책을 찾아봐야 할 때인 것 같다는 생각이 들었다.

Q : 경력직만 뽑아서 운영하던 회사가 커지면 언젠가는 경력으로만은 풀이 안 채워지는 시기가 오는데,

그때 가서 신입을 뽑는다 하면 그 회사가 그 신입을 잘 키울 수 있을까요?

A : 이때쯤이면 아예 외부에서 교육가능한 전문가를 데려와서 키우는 것도 방법이다.

-> 위의 질문과 이어지는 질문이었다.

신입을 뽑는다 -> 2-3년 후면 이직한다 -> 키우는 비용이 너무 든다. -> 경력직만 뽑자 -> 회사가 커지면 경력직으로만 인재풀이 채워지지 않는다 -> 어쩌지??? 의 흐름

물론 경력자들 중에 업무 퍼포먼스도 잘 나오고 신입이 들어오면 교육도 잘하는 그런 유니콘 같은 사람들도 있다. 하지만 개인적인 생각으로는 그런 유니콘 같은 사람들이 있어도 회사자체에 신입을 키울 수 있는 시스템이 없다면 금방 한계에 부딪힐 것이라고 생각한다.

회사마다 부서마다 경력과 신입을 원하는 비율이 다를 텐데 내가 어떤 회사를 다니고 있고, 어떤 포지션인지, 이직을 고려한다면 그 회사에서 나에게 어떤 걸 바라는지 등등을 연차와 경험을 바탕으로 생각해 볼 수 있을 것 같다.

내가 신입인데 신입을 키워본 적이 없는 회사라면 (여러 회사 중 골라 갈 수 있는 상황이라는 가정하에) 그 회사를 선택할 가능성이 좀 낮아지지 않을까?

신입이 흔히 말하는 네카라쿠배에 갈 정도로 성장했다는 건 그 과정에서 우리 회사에도 많은 기여를 했다는 말이다.

-> 신입뿐 아니라 모든 직원들이 다니고 있는 회사보다 나은 회사로 이직했다는 건 대부분의 경우 몸담고 있었던 회사에서도 업무퍼포먼스가 향상됐을 가능성이 크다.

이를 아는 회사와 모르는 회사, 알고도 모른척하는 회사와 알고 대우를 해주는 회사가 있는 게 아닐까..?

C레벨에 있는 개발자분들이 이런 고민들을 가지고 이런 대화를 나누는 걸 접할 기회가 없는데, 이런 영상을 보게 되어 신선했다. 여러 가지를 생각해 볼 수 있었던 영상인 것 같아 따로 정리를 해보았고, 스스로를 돌아보면서 회사에 뭘 기여하고 있는 사람인가를 생각해 보게 되었다.

코드리뷰는 왜 하고 어떻게 해야 유의미해질까

ㅇㄱ9 — Tue, 21 Mar 2023 20:01:39 +0900

코드리뷰는 여러 측면에서 중요한 과정이다.

회사 입장에서는 개발자가 회사를 떠나도 코드는 유지되야 하고(지식경영(knowledge management) 측면), 개발자는 성장할 수 있는 기회를 가지게 되며 팀 입장에서는 팀워크와 코드쉐어링을 통한 장애에 대한 불안감을 감소시킬 수 있다.

도입 전 고려사항

코드 리뷰에 참여하는 구성원들의 인식이 같은 곳을 바라보는가? 문화로 받아들일 준비가 되어있는가?
어떤 코드가 좋은 코드에 대한 기준을 먼저 정하자.
전체적인 코드 컨벤션 확립과 코드 일관성을 유지하기 위한 도구 도입하자. 불필요하고 소모적인 리뷰로 인해 시간 낭비, 리소스 낭비를 예방해야 한다

코드리뷰에 대한 방법 및 리뷰 작성 시 고려사항들

1. 하나의 프로젝트는 일관성이 있어야 하고 클린코드를 지향하자.

코드를 읽는데 드는 비용을 줄일 수 있고 실수를 방지할 수 있다.

ex) 함수선언방식의 통일등 일정 수준의 컨벤션을 정해 일관성을 유지하게 하자

2. 커밋과 풀리퀘스트는 30분 이내 리뷰가 가능하도록 잘라서 하자.

단 리뷰는 커밋단위보다는 전체 코드 맥락을 살피면서 해주는 것이 좋다.

3. 자신의 개발보다는 코드리뷰에 우선순위를 두자.

먼저 개발을 완료한 사람의 코드가 먼저 머지가 될 수 있게 해야 한다.

4. 개선이 필요한 이유를 충분히 구체적으로 작성하자.

ex) “data라는 이름은 현재의 자료구조가 무엇인지 그 의도를 알기가 어렵네요.

학점 정보를 담고 있는 자료구조 같은데 이와 관련된 변수명을 짓는다면 현재 정의한 자료구조가 무엇인지 그 의도를 쉽게 파악할 수 있을 것 같아요.”

5. 리뷰이가 스스로 고민 후 개선방법을 찾을 수 있도록 하자.

ex) “자바스크립트에는 배열에는 다양한 내장 메서드들이 존재합니다. 그중 filter 메서드를 활용해 보세요. 이 메서드를 활용하면 코드량을 줄일 수 있습니다.”

6. 리뷰가 양방향 소통이 될 수 있도록 하자.

수정이 필요해 보이는 사항을 설명 후 해당 부분에 대한 리뷰이의 의도가 따로 있었는지를 다시 물어본다.

왜 이렇게 짰는지를 직접 고민하고 설명할 수 있어야 한다.

7. 리뷰를 위한 리뷰를 하지 말자. 잘한 건 칭찬해 주자.

코드량이 적당해서 읽기 편하네요.
많은 고민이 코드에서 엿보이네요.
성능에 아주 유리한 코드라고 생각되네요.
전에 코드보다 훨씬 좋아진 거 같네요.
예외 처리가 꽤 꼼꼼해서 좋네요.
함수, 변수명이 직관적이어서 좋네요.

8. 리뷰 내용이 설계전반을 변경해야 한다면 코드를 짜기 전에 pre commit review를 활용해 보자.

프리 커밋 리뷰란, 'GitHub에 커밋이 되기 전의 리뷰'라는 뜻으로 실제 코딩 작업에 들어가기 전에, 어떻게 작업을 진행할지 가볍게 논의해 보는 리뷰를 말한다.

코드를 리뷰하는 대신 디자인 시안이나 요구 사항을 보고 어떻게 작성할지 이야기해 보는 사전 리뷰 단계인 것이다.

기대효과

우선 앞서 이야기한 과도한 설계 변경에 대한 리뷰는 없을 것이다.
서로의 관점을 공유함으로써 설계에 대한 인사이트를 얻을 수 있고 코드 품질에 대한 기준을 맞출 수 있다.
해당 제품(또는 기능)의 도메인을 알아볼 수 있는 기회가 될 수 있다.
코드 리뷰를 하게 됐을 때, 리뷰어 입장에선 리뷰 대상인 코드를 파악하기 쉬워지고, 이로 인해 깊은 코드 리뷰가 가능해진다.
무엇보다 기능을 개발하기 전에 많은 고민을 하고 개발하기 때문에 빠르게 개발할 수 있다.

9. 코드리뷰로 인한 병목이 심하다면 제약이 없는 코드리뷰를 도입해 보자.

Pull Request를 등록하는 개발자는 이 Pull Request를 통해 성장하고 싶을 때, 리뷰를 요청하면 된다. 리뷰 요청을 받는 사람은 기꺼이 리뷰에 응하면 된다.

모든 Pull Request에 대해서 리뷰를 하지 않아도 됐기 때문에 코드 리뷰 양이 적어졌다.
코드 리뷰 양이 적어졌기 때문에 요청이 들어왔을 경우 좀 더 빠르게 확인할 수 있게 되었다.
코드 리뷰가 스프린트의 병목이 될 가능성을 낮췄다.
심지어 리뷰가 필요한 Pull Request에서 리뷰가 요청이 왔으므로 유의미한 리뷰가 오갈 수 있는 확률이 더 많아졌다.

10. 사람이 아닌 코드를 리뷰하라. (영어 리뷰를 도입해 보자)

한글로 작성할 때보다 말투가 잘 드러나지 않고(이건 영어를 한국어만큼 자유롭게 사용하지 못해서이지 않을까 싶지만..)

영어로 길게 작성하는 것은 어렵기 때문에 정말 중요한 이슈에 대해서는 서면보다는 대면으로, (페어 프로그래밍)으로 이뤄질 수 있다. (이것도...)

[출처]https://dbr.donga.com/article/view/1203/article_no/10411

11. pr의 라벨기능을 잘 활용하자.

ex) 리뷰 과정에서 새로운 관점을 배웠거나 좋은 리뷰라고 생각되는 Pull Request에는 Good Review라는 라벨로 표시하여 나중에 모두가 같이 볼 수 있도록 활용하자

[출처] https://tosspayments-dev.oopy.io/chapters/frontend/about#c73b64d5-0d73-4b5d-9ede-9cddcb6d4012

12. 코드리뷰를 할 여건이 되지 않는다면 고무오리디버깅(Rubber Duck Debugging)을 활용해 보자.

고무오리디버깅은 문제가 잘 해결되지 않을 때 고무오리에게 설명하는 방법.

혼자 코드리뷰를 할 때도 동료에게 설명하듯 스스로 회고하고 개선방법이 있다면 메모를 남겨두자.

결론

- 잘 구축된 코드리뷰 시스템은 리뷰하는데 드는 시간보다 아끼는 시간이 더 크다. 빨리 가는 유일한 방법은 제대로 가는 것이다.

- 리뷰는 함께 성장하기 위한 수단으로 사용하자.

참고

Google의 코드리뷰 :https://google.github.io/eng-practices/review/

Tricorder라는 정적 분석(잠재결함 분석) 도구와 Rosie라는 코드 정리 시스템(Large-Scale Cleanups and Code Changes)을 활용해 사용하지 않는 코드는 없애고 리팩토링이 필요한 경우에 효율적으로 리뷰를 한다고 알려져 있다

구글에서 코드리뷰 시 lgtm(look good to me) 를 얻으려면 다음의 세 가지 측면에서의 리뷰를 통과해야 한다.

첫째, 다른 엔지니어로부터 정확성(correctness)과 이해 용이성(comprehension)을 평가받습니다.
즉, 작성자가 의도한 작업을 코드가 적절하게 수행하는지를 봅니다.
둘째, 변경되는 코드 영역을 관리하는 코드 소유자로부터 변경 코드가 적절하다는 승인을 받습니다.
구글의 코드베이스는 트리 구조로 되어 있고, 디렉터리별 소유자들이 계층적으로 할당되어 있습니다. 그리고 소유자는 자신이 맡은 디렉터리의 문지기 역할을 합니다. 변경은 아무 엔지니어나 제안할 수 있고 LGTM도 제안자 외의 모든 엔지니어가 달 수 있습니다. 하지만 코드베이스에 변경을 반영하려면 해당 디렉터리 소유자의 승인이 반드시 필요합니다.
셋째, 누군가로부터 ‘가독성’ 승인을 받습니다. 즉, 변경 코드가 해당 언어의 스타일과 모범 사례를 잘 따르고 조직에서 기대하는 방식으로 작성되었는지를 검사받습니다.

참고한 사이트들

Code Review Developer Guide

Google’s Engineering Practices documentation

google.github.io

효과적인 코드리뷰를 위한 리뷰어의 자세

안녕하세요, 톡FE파트에서 톡명함 서비스를 개발하고 있는 Kay입니다.저는 2022년 신입 공채 기술 온보딩 교육의 코드 리뷰어로 활동을 했는데요, 이를 통해 얻었던 경험과 효과적인 코드 리뷰를

tech.kakao.com

코드 리뷰의 목적은 성장이어야 한다

TL;DR 조직 내 코드 리뷰는 리뷰하고자 하는 관점을 코드가 아닌, 코드를 작성한 엔지니어에게, 제품을 만드는 메이커에게 옮겨보면 어떨까. 사실 코드 리뷰 문화보다 중요한 것은 테스트 문화이

jbee.io

토스페이먼츠 프론트엔드 챕터를 소개합니다

안녕하세요, 토스페이먼츠 프론트엔드 엔지니어 한재엽입니다. 좋은 분들을 모시기 위해 저희 프론트엔드 챕터 소개글을 작성해봤습니다. 지속적으로 업데이트될 예정이니 많은 관심 부탁드려

tosspayments-dev.oopy.io

[DBR] 지속가능한 기술력 핵심은 ‘코드 리뷰’, 개발자 떠나도 제품 연속성 유지 가능

Article at a Glance많은 기업이 박차를 가하는 디지털 트랜스포메이션에는 탄탄한 엔지니어링 기술력이 뒷받침돼야 한다. 뛰어난 기술력의 핵심은 결국 코드다. 글로벌 IT 기업뿐만 아니라 네이버,

dbr.donga.com

코드 리뷰 | TechWell

코드리뷰

techwell.wooritech.com

LGTM이 뭐지? : 구글의 코드 리뷰 & 코드 리뷰 유형

코드 리뷰는 작성자 이외의 사람이 코드를 검토하는 프로세스입니다. 주로 코드를 코드베이스에 반영하기 전에 수행합니다. 정의는 단순하지만 소프트웨어 업계에서 실행되는 모습은 매우 다

m.hanbit.co.kr