🔐 GitHub에서 CI를 실제로 강제하려면? 앞에서 우리는 GitHub Actions로 PR이 열릴 때pnpm install, build, test를 자동 실행하도록 구성했어요. 근데 사실…테스트가 실패했는데도 Merge 버튼을 누를 수 있다면? 😱CI를 돌리는 의미가 많이 퇴색되겠죠? 그래서 반드시 설정해야 하는 게 있어요.바로 GitHub의 Branch Protection Rule입니다. ✅ 설정 위치 1. GitHub 저장소의 상단 메뉴에서 Settings 클릭 2. 좌측 메뉴에서 Branches 클릭 3. Branch protection rules 섹션에서 Add rule 클릭 ✅ 필수 옵션들 → 실수로 git push origin main 해버리는 상황을 막을 수 있어요!  • 체크하면 아..

최근에 사이드 프로젝트를 만들면서GitHub Actions를 활용해 자동화된 CI 환경을 구축한 경험을 정리해보려고 합니다. ✅ 왜 CI가 필요했을까? 프로젝트가 커지고 브랜치가 많아지다 보니 이런 문제가 생기더라고요. • 코드 수정할 때마다 직접 build, test를 돌려봐야 하는 번거로움 • 과거의 내가 만든 코드가 기존 기능을 깨뜨릴 수도 있음 • 자잘한 수정만 했을 때도 전체 테스트를 돌리는 건 시간 낭비 그래서 자연스럽게 이런 생각이 들었습니다. “PR 올리면 자동으로 테스트 돌고, 이상 있으면 merge 못 하게 만들 수 없을까?” ➡️ 이걸 해결해줄 수 있는 게 바로 CI (Continuous Integration) 입니다. 🤖 왜 GitHub Actions를 선택했을까? CI 도구는 정..

1. 심볼릭 링크 (Symbolic Link)1-1. 개념정의: 원본 파일이나 디렉토리를 가리키는 포인터(참조) 이다.별칭: "symlink" 또는 "soft link"라고도 불린다.특징: Windows의 "바로가기"와 비슷한 개념임."바로가기"는 원본을 가리키는 참조일 뿐이다.1-2. 작동 방식# 예시 구조original_file.txt (원본 파일)└── symlink_to_file.txt (심볼릭 링크)# 실제 예시$ ln -s original_file.txt symlink_to_file.txt  2. 하드 링크 (Hard Link)2-1. 개념정의: 원본 파일과 동일한 inode를 공유하는 파일이다.특징: 원본 파일의 실제 데이터를 직접 참조한다.예시: 같은 문서의 복사본을 만드는 것과 비슷하다...

최근에 프로젝트에서 기존 npm에서 pnpm으로 패키지 매니저를 전환했다.이 글은 “왜 바꿨는지”, “어떻게 바꿨는지”, 그리고 “전환 후 어떤 점이 좋았는지”를예시와 함께 단계별로 정리한 아티클이다.✅ 왜 pnpm을 써야 할까?기존 npm을 쓰면서 겪은 불편함은 다음과 같다: • 디스크 낭비→ 같은 패키지를 여러 프로젝트에서 쓸 때마다 매번 복사됨 • 설치 속도 느림→ 특히 node_modules를 지우고 다시 설치할 때는 시간 소모 큼 • 의존성 충돌 문제→ 서브 패키지 간 의존성 버전 충돌로 인해 디버깅 어려움 그리고 pnpm은 이런 문제들을 이렇게 해결한다:npm의 문제점pnpm의 해결 방식디스크 낭비캐시 + 하드 링크를 통해 하나의 패키지만 저장설치 속도 느림캐시된 패키지를 바로 링크하므로 빠름..

타사의 그리드 라이브러리를 구입해서 잘 쓰고 있던 어느 날4만 건 이상의 그리드 데이터 행을 전체선택 했는데 그대로 브라우저가 멈춰버렸다.순간 이게 뭐지? 싶었지만 기다려봤는데 거의 1분 이상이 지나고 나서야 행 전체 선택이 적용이 되더라.. 위 사진을 보면 내역이 약 44000건 인데,빨간색 화살표로 표시한 체크를 클릭(전체 선택 하게 되는거임)하면빨간색 박스로 표시한 각 행의 체크박스들에 체크 모양이 들어가면서, 각 행의 checked 라는 값도 0에서 1로 바뀌게 된다. 보아하니 대량의 데이터들을 다루면서 부하가 걸린거 같고사용자들에게 크리티컬한 이슈라 전체선택을 할 때 적용되는 메서드를 뜯어보게 됐다.  밑에는 전체선택을 하게 되면 적용되는 그리드 행 전체선택 메서드이다. grid.ItemAllC..

Husky는 Git Hook을 활용하여 코드 품질을 유지하고 오류가 포함된 코드가 커밋되는 것을 방지하는 도구다.Git Hook이란 Git의 특정 이벤트(예: 커밋, 푸시)가 발생할 때 실행되는 스크립트인데,Husky는 이를 활용하여 자동으로 ESLint, Prettier, 테스트 실행 등을 수행할 수 있다. ✅ 1. Husky 패키지 설치npm install --save-dev husky lint-staged • husky → Git Hook을 제어하는 패키지 • lint-staged → 변경된 파일만 ESLint, Prettier 등을 실행✅ 설치 완료 후, package.json을 보면 devDependencies에 추가됨. 📌 2. Husky 활성화 (husky install)설치 후 Husky..

자바스크립트 개발자라면 반드시 이해해야 할 핵심 개념 중 하나가 바로 '실행 컨텍스트(Execution Context)' 입니다.이 글에서는 실행 컨텍스트의 개념부터 세부 구성 요소까지 상세히 살펴보겠습니다. 1. 실행 컨텍스트란?실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 추상화한 개념입니다.기본적으로 소스코드를 평가하여 실행 컨텍스트를 생성하는데요.코드의 실행 순서와 스코프를 관리하며, 변수, 객체, 함수 등의 식별자 결정을 담당합니다.쉽게 말해서 소스코드를 실행하는데 필요한 환경을 제공하고 실행결과를 관리하는 영역입니다. 스코프와 코드실행 순서를 관리하는 매커니즘으로 모든 코드는 실행컨텍스트를 통해 실행되고 관리됩니다.실행컨텍스트의 렉시컬 환경이 스코프를 관리하며실행컨텍스트의 스택이 실행순서..

이 글에서는 React Virtual DOM과 Reconciliation이 내부적으로 어떻게 작동하는지에 대해 알아보도록 하겠습니다. Virtual DOM에 대해 말하기 전에 브라우저 렌더링 프로세스와 DOM에 대한 이해가 필요합니다. 브라우저 렌더링 프로세스는 해당 아티클을 읽어보고 오시면 되겠습니다. https://oreeyo00.tistory.com/7 Rendering (렌더링) 이란? ** 이 글에서는 렌더링 엔진이 작동하는 방식과 사용자 화면에 웹 페이지를 표시하는 방법을 알아볼거다. * 먼저 설명하는 데에 쓰일 용어들의 의미를 알아보도록 하자. 파싱 (parsing) 이란? 컴퓨 oreeyo00.tistory.com Virtual DOM DOM을 JavaScript 객체로 표현한 것입니다. ..