픽셀노마드

개발하다 보면 이런 순간이 자주 찾아옵니다."이 파일 누가 주로 만들었지?""이 서비스 모듈 담당자가 누군가요?""레거시 코드 좀 봐야 하는데, 누가 제일 많이 건드렸는지 궁금하네..."보통은 git blame 이나 git log, git shortlog 같은 Git의 공식 명령어를 사용하죠. 그런데 이 명령어들은 정보를 잘게 쪼개서 주기 때문에 '딱 이 파일에 누가 가장 기여했는지 한눈에 보기 어렵습니다.이럴 때!오늘 소개할 git-who가 큰 도움이 됩니다.바로, 파일에 대한 주요 기여자를 퍼센트로 보여주는 작은 CLI 툴입니다.🚩 git blame vs git-who 차이점git blame은 파일의 각 줄마다 누가 작성했는지를 확인할 수 있는 Git의 공식 명령어입니다. 주로 문제가 발생한 코드에서 "이 줄은 누가 썼을까?"를 확인할 때 사용합니다.반면, git-who는 파일 전체에서 누가 몇 퍼센트나 기여했는지를 비율로 보여주는 도구입니다.쉽게 말해 git blame이 라인 단위로 세세하게 추적하는 것이라면, git-who는 파일 전체의 기여도를 요약해서 보여주는 도구입니다.git blame은 라인별로 작성자를 하나하나 확인할 때 사용하고,git-who는 파일 또는 디렉토리 단위로 주요 기여자와 그 비율을 한눈에 파악할 때 유용합니다.팀에서는 git-who를 활용해 담당자 파악, 코드 리뷰어 추천, 레거시 코드의 책임자 확인 등 다양한 상황에서 쉽게 사용할 수 있습니다.🤔 git blame은 이런 한계가 있어요예를 들어 git blame user_service.py를 하면 이렇게 나옵니다.e5f6a8d1 (Alice 2024-03-19 15:22:10 +0900 1) def get_user(): f67a1bc9 (Bob 2024-03-19 15:23:01 +0900 2) return self.user_id라인별 작성자는 잘 보이지만,"그럼 Alice가 이 파일에 몇 퍼센트나 기여했을까?"를 바로 확인할 수는 없습니다. 직접 손으로 카운트해야 하죠.🏆 그래서 등장한 git-whogit-who는 Python으로 작성된 오픈소스 CLI 도구로, git blame을 내부적으로 실행한 뒤 작성자별로 라인 수를 집계해서 퍼센트로 보여줍니다.사용법은 매우 간단합니다git who user_service.py출력 결과70% Alice 30% Bob와우! 파일의 주요 기여자 비율을 한 번에 확인할 수 있네요.🧩 git-who 실제 활용 꿀팁 5가지1. 코드 리뷰 담당자 추천git who를 통해 가장 많은 기여를 한 사람을 코드 리뷰어로 지정하면 자연스럽게 "내가 많이 짠 코드"를 리뷰하게 되어 품질도 올라갑니다.2. 레거시 코드 관리 지표특정 파일에 누군가 90% 이상 기여했다면? 이 사람만 아는 코드일 가능성이 큽니다.빠르게 지식 공유를 해야 할 타이밍!3. 온보딩 가이드신규 팀원이 "이 모듈 누가 담당했나요?" 물어볼 때, git who 결과를 보여주며 담당자를 객관적으로 소개할 수 있습니다.4. 리팩토링 협의리팩토링 대상 파일에서 상위 기여자 리스트를 뽑아, 사전 협의 및 기술 부채(Tech Debt) 공유를 효율적으로 할 수 있습니다.5. 팀 이벤트에도 활용 가능"누가 이 파일의 지배자인가?"팀 내에서 파일별로 기여도가 가장 높은 사람을 뽑아 개발자 시상식 같은 재미 요소로도 활용 가능!💡 git-who 한계와 커스터마이징 팁📌 문제: 작성자 이름이 잘려요기본 git-who는 John Doe 이름에서 John만 가져오는 이슈가 있습니다.이유는 단순 split 로직 때문입니다.🔧 해결: 정규식으로 보완하기import re for line in blame_output.split("\n"): match = re.search(r'\((.*?)\s+\d{4}-', line) if match: author = match.group(1) authors.append(author) John Doe → John Doe로 제대로 파싱됩니다.⚙️ CI/CD에 자동화로 붙이기 (GitHub Actions + Slack)팀에서 PR이 올라올 때마다 자동으로 주요 기여자를 분석하고 Slack으로 알림까지 할 수 있습니다.예시 Workflowname: Git Who Check on: pull_request: types: [opened, synchronize] jobs: git-who-check: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Set up Python uses: actions/setup-python@v4 with: python-version: '3.x' - name: Install git-who dependencies run: pip install -r requirements.txt - name: Run git-who on changed files run: | for file in $(git diff --name-only origin/main); do echo "Analyzing $file" git who "$file" >> who_report.txt || true done - name: Notify to Slack uses: slackapi/[email protected] with: payload: | { "text": "🔍 *Git-Who Report for PR #${{ github.event.pull_request.number }}*\n```$(cat who_report.txt)```" } env: SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}Slack 결과 예시:🔍 Git-Who Report for PR #42 services/payment.py 55% Alice 45% Bob models/order.py 80% Charlie 20% Alice✨ 활용 아이디어 확장danger.js로 PR 코멘트 자동 등록git who 결과를 기반으로 리뷰어 자동 태그 봇 제작팀 내 "이달의 마스터 파일" 선정 이벤트🚀 마무리: git-who는 작지만 강력한 도구입니다!git blame의 아쉬운 부분을 채워주는 git-who.리뷰 문화, 코드 관리, 협업을 더 효율적이고 재밌게 만들어줄 수 있습니다.이제 더 이상 "누가 짰지?"를 고민하지 마세요!

최근 Chrome 브라우저에서 특정 이미지가 정상적으로 로딩되지 않고 ERR_BLOCKED_BY_ORB 오류가 발생하는 현상을 겪었다. 이 오류는 특히 404 Not Found 상태일 때 브라우저가 이미지를 제대로 표시하지 못하는 경우에 발생한다. 처음에는 img 태그에 onError 속성을 추가하여 이미지가 로드되지 않을 때 기본 이미지를 표시하도록 설정했지만, 여전히 이미지가 나타나지 않는 문제가 있었다. 📌 사용했던 onError 코드 예제 <img src="/assets/profile/1234.jpg" onError="this.src='/default-image.png'"> 이렇게 onError를 활용하면 이미지가 없을 때 기본 이미지를 표시해야 하지만, 크롬 디버그 도구에서 확인해보면 ERR_BLOCKED_BY_ORB 오류가 발생하면서 이 이벤트조차 실행되지 않았다. 즉, Chrome 브라우저가 보안 정책에 의해 HTML 응답을 차단하면서 onError 이벤트도 트리거되지 않는 현상이었다. 이번 글에서는 ERR_BLOCKED_BY_ORB 오류가 발생하는 원인과 해결 과정을 공유한다. 🚨 ERR_BLOCKED_BY_ORB란? ERR_BLOCKED_BY_ORB는 최근에 Chrome의 ORB(Opaque Response Blocking) 정책에 의해 발생하는 오류이다. ORB는 보안상의 이유로 이미지, 스크립트, CSS 파일 등에 대해 기대한 MIME 타입이 아닌 응답을 차단하는 기능이다. 🔍 Chrome의 ORB 정책이란? ORB(Opaque Response Blocking)는 Chrome에서 보안 강화를 위해 도입된 정책으로, 외부 리소스(예: 이미지 요청)에 대해 잘못된 응답을 받으면 브라우저가 차단하는 기능이다. 정상적인 응답: 200 OK + image/png → 정상 표시 잘못된 응답: 404 Not Found + text/html → 브라우저가 차단 즉, 이미지를 요청했지만 서버가 HTML 응답을 반환하면 차단된다. 🔎 문제 발생 원인 처음에 NGINX에서 존재하지 않는 이미지 요청에 대해 기본 404 HTML 페이지를 반환하고 있었다. 📌 발생했던 문제 상황 사용자가 https://mysite.com/assets/profile/1234.jpg 요청 해당 이미지가 존재하지 않음 (404 Not Found) 하지만 NGINX 기본 설정에서는 404.html(HTML 문서)을 반환 Chrome은 이미지 요청에 HTML이 응답된 것을 감지하고 ERR_BLOCKED_BY_ORB 오류 발생 즉, 404 Not Found가 발생했을 때 브라우저가 HTML 페이지를 받으면 보안 정책에 의해 차단되는 현상이 발생했다. 🛠 해결 과정 ✅ 1. 404 상태에서 빈 이미지 반환하도록 설정 이미지가 없는 경우에도 HTML이 아니라 image/png MIME 타입을 유지하면서 404 상태를 유지하도록 설정해야 한다. 첫번째 시도 설정 location ~* \.(png|jpg|jpeg|gif|webp|svg)$ { try_files $uri =404; error_page 404 =200 /EMPTY_FOR_ERROR_BLOCKED_BY_ORB.png; } error_page 404 =200 → 404가 아닌 200 OK로 응답하면서 빈 이미지 제공 하지만 Chrome은 이미지가 아닌 HTML을 받을 수도 있다고 판단하여 차단 즉, =200도 지워줘야만 한다. 🚀 해결된 설정 location ~* \.(png|jpg|jpeg|gif|webp|svg)$ { try_files $uri =404; error_page 404 /EMPTY_FOR_ERROR_BLOCKED_BY_ORB.png; } location = /EMPTY_FOR_ERROR_BLOCKED_BY_ORB.png { root /myweb_dir/assets; default_type image/png; add_header Cache-Control "no-store"; expires -1; try_files $uri =404; } 📌 해결 방법 요약 error_page 404에서 404 상태를 유지하도록 설정 default_type image/png;을 명시하여 브라우저가 올바른 MIME 타입을 인식 add_header Cache-Control "no-store";로 캐싱을 방지 expires -1;로 만료 시간을 즉시로 설정하여 브라우저가 캐싱하지 않도록 함 🔬 최종 테스트 설정 적용 후 아래 명령어로 테스트 진행. curl -I https://mysite.com/assets/profile/1234.jpg ✅ 정상적인 응답 HTTP/2 404 content-type: image/png cache-control: no-store expires: -1 404 상태 코드 유지 MIME 타입이 image/png로 올바르게 반환 브라우저가 더 이상 ERR_BLOCKED_BY_ORB 오류를 발생시키지 않음 💡 결론 🎯 ERR_BLOCKED_BY_ORB 해결을 위한 핵심 포인트 이미지가 존재하지 않을 때 기본 HTML 404 페이지가 반환되지 않도록 해야 함 404 상태에서 이미지 응답을 유지하려면 error_page 404를 빈 PNG로 처리 MIME 타입(image/png)을 명확하게 설정해야 함 캐싱 방지를 위해 Cache-Control: no-store를 추가 이번 설정을 적용한 후, 더 이상 ERR_BLOCKED_BY_ORB 문제가 발생하지 않았다. Chrome 브라우저에서 이미지가 정상적으로 표시되지 않는다면, 서버가 404 응답을 올바르게 처리하고 있는지 확인하는 것이 중요하다! 🚀 이제 404 이미지 요청이 Chrome에서 차단되지 않고, 올바르게 빈 이미지로 응답된다. 비슷한 문제를 겪는 분들은 위 해결 방법을 적용해보길 바란다. 😊

"React를 배우고 싶은데 어디서부터 시작해야 할까?" "문서를 읽고 예제를 따라 해봤지만, 실제로 적용하는 것이 어렵다!" "내가 작성한 코드가 맞는지 확신이 안 든다…" React를 배우려는 사람이라면 한 번쯤 이런 고민을 해봤을 것이다. 그런데 이제는 AI를 활용해서 더 쉽고 빠르게 React를 배울 수 있다! ChatGPT를 활용하면 React 개념을 쉽게 이해하고, 실시간으로 코드 오류를 수정하며, 실제 프로젝트를 함께 만들어볼 수 있다. ChatGPT로 React를 학습 하는 과정을 진행해보면서 학습 속도를 높이고, 실력을 더 빠르게 키우는 방법을 살펴보자. 1. AI를 활용한 React 학습이 왜 효과적일까? 빠른 피드백: ChatGPT에게 코드를 설명하거나 오류를 물어보면 즉각적인 답변을 받을 수 있다. 능동적인 학습: 직접 실습하면서 AI와 대화하며 문제 해결 능력을 향상할 수 있다. 맞춤형 가이드: 학습자의 수준에 맞춰 개인화된 답변을 받을 수 있다. 2. ChatGPT에게 질문하며 React 시작하기 💡 AI에게 질문하는 방법 React를 배우기 전에, ChatGPT에게 올바르게 질문하는 방법을 익혀야 한다. 아래 나쁜 예시와 좋은 예시를 볼 수 있다. ❌ 나쁜 질문 예시: "React가 뭐야?" ✅ 좋은 질문 예시: "React의 핵심 개념 3가지를 초보자가 이해하기 쉽게 설명해줘." 3. React 기본 개념 학습 시작 1단계 : ChatGPT에게 React의 핵심 개념 배우기 아래 질문을 ChatGPT에게 입력해보자. React의 핵심 개념 3가지를 초보자가 이해하기 쉽게 설명해줘. 🔎 ChatGPT 예상 답변 예시: 컴포넌트(Component) - React는 작은 블록(컴포넌트)으로 UI를 만든다. 상태(State)와 Props - 데이터 흐름을 제어하는 핵심 개념이다. 가상 DOM(Virtual DOM) - 빠른 렌더링을 위한 React의 핵심 기술이다. 4. ChatGPT와 함께 첫 번째 React 코드 작성 2단계 : 간단한 "Hello, React!" 컴포넌트 만들기 ChatGPT에게 다음 질문을 입력해보자. React로 "Hello, React!"를 출력하는 간단한 컴포넌트를 만들어줘. 🔎 ChatGPT 예상 답변 예시: import React from 'react'; function App() { return <h1>Hello, React!</h1>; } export default App; 💡 추가 질문 Tip: 코드 설명 요청하기: 위 코드의 각 부분을 초보자가 이해하기 쉽게 설명해줘. 수정 요청하기: 위 코드에서 h1 대신 h2 태그를 사용하도록 변경해줘. 5. ChatGPT로 동적인 React 컴포넌트 만들기 3단계 : 버튼을 클릭하면 카운트가 증가하는 기능 추가 ChatGPT에게 다음 질문을 입력해보자. 버튼을 클릭하면 숫자가 증가하는 React 컴포넌트를 만들어줘. 🔎 ChatGPT 예상 답변 예시: import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>현재 카운트: {count}</p> <button onClick={() => setCount(count + 1)}>증가</button> </div> ); } export default Counter; 💡 추가 질문 Tip: 코드 수정 요청: 숫자가 2씩 증가하도록 수정해줘. 추가 기능 요청: "감소" 버튼도 추가해줘. 6. ChatGPT로 React 프로젝트 확장하기 4단계 : API와 연동하여 데이터 가져오기 ChatGPT에게 다음 질문을 입력해보자. React에서 JSONPlaceholder API를 사용해 사용자 목록을 가져오는 컴포넌트를 만들어줘. 🔎 ChatGPT 예상 답변 예시: import React, { useEffect, useState } from 'react'; function UsersList() { const [users, setUsers] = useState([]); useEffect(() => { fetch('https://jsonplaceholder.typicode.com/users') .then(response => response.json()) .then(data => setUsers(data)); }, []); return ( <div> <h2>사용자 목록</h2> <ul> {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> </div> ); } export default UsersList; 💡 추가 질문 Tip: API 변경 요청: 다른 API를 사용해서 데이터를 가져오도록 수정해줘. 스타일 추가 요청: CSS 스타일을 추가해줘. 결론: ChatGPT와 함께하는 새로운 학습 방식 이런 방법으로 ChatGPT를 활용하면 React의 개념을 더 쉽게 이해하고, 실시간으로 코드 오류를 수정하며, 실제 프로젝트를 함께 만들어볼 수 있다. 또한 AI와 상호작용하며 학습하는 과정에서 능동적으로 사고하고 문제를 해결하는 능력을 키울 수 있다. 실시간 코드 생성과 수정 요청을 통해 즉각적인 피드백을 받을 수 있으며, 직접 프로젝트를 만들어보면서 실용적인 React 경험을 쌓을 수 있다. 이제 직접 ChatGPT와 함께 React 학습을 더욱 효율적이고 재미있게 경험해보자!