HOME
[DevTools] 리액트 테스트 환경(Vitest, React Testing Library) 및 CI 구축
[DevTools] 리액트 테스트 환경(Vitest, React Testing Library) 및 CI 구축
2024.07.22코드 품질을 보장하고, 기능이 의도한 대로 동작하는지 확인하기 위해 테스트 코드를 작성한다. 특히 기능 추가나 리팩토링을 할 때 테스트 코드가 있으면 기존 기능이 올바르게 작동하는지 쉽게 확인할 수 있고, 심리적인 안정감을 주는 장점도 있다. 프론트엔드 테스트 종류는 크게 단위 테스트, 통합 테스트, E2E 테스트, 정적 테스트로 나뉜다. 테스트 종류설명예시주요 도구단위 테스트(Unit Test)개별 함수, 컴포넌트, 모듈의 동작 검증버튼 클릭 시 특정 함수 호출 여부Jest, Vitest, Mocha, Jasmine 등통합 테스트(Integration Test)여러 모듈이 함께 잘 작동하는지 확인상품 구매 시 잔액 업데이트, 재고 변경Jest, Vitest, React Testing Library 등E..
[JS] 자바스크립트 정규식으로 천 단위 구분자 추가하기 (단어 경계, 전후방탐색)
[JS] 자바스크립트 정규식으로 천 단위 구분자 추가하기 (단어 경계, 전후방탐색)
2024.07.18큰 숫자를 읽기 쉽게 만들기 위해 일반적으로 천 단위마다 콤마(,)같은 구분자를 추가한다. 천 단위 구분은 한국을 포함한 많은 국가에서 표준으로 사용하는 숫자 표기법이다. 자바스크립트에선 Number.toLocaleString() 혹은 Intl.NumberFormat 메서드를 이용하면 구분자를 추가할 수 있다. 참고로 이 메서드들은 기본적으로 실행 환경의 로케일 설정을 따르기 때문에 로케일에 따라 결과가 달라질 수도 있다. 예를 들어 독일 로케일(de-DE)은 천 단위 구분자로 온점(.)을 사용하고, 소수점 구분자로 콤마(,)를 사용한다. — 참고 포스팅const number = 123456.789;// 로케일을 지정하지 않으면 기본 로케일(navigator.language)을 따른다Intl.Number..
[JS] 자바스크립트 reduce() 메서드 활용 예시 모음
[JS] 자바스크립트 reduce() 메서드 활용 예시 모음
2024.07.07Array.reduce() 메서드는 배열에 있는 각 요소에 콜백 함수를 실행하여 누적된 계산 결과를 하나의 값으로 반환한다. 자바스크립트에서 제공하는 filter(), map() 등의 배열 메서드는 모두 reduce()로 구현할 수 있고, 이 외에도 다양한 활용 방법이 있기 때문에 개인적으로 가장 자주 사용하는 배열 메서드다. reduce() 메서드의 구문은 아래와 같다.reduce(callbackFn, initialValue?) callbackFn 콜백 파라미터accumulator : 이전 callbackFn 반환값초기값 지정 시 콜백을 처음 호출했을 때 값 : initialValue초기값 미지정시 콜백을 처음 호출했을 때 값 : array[0]currentValue : 현재 순회하고 있는 값초기값 지..
[JS] 자바스크립트 Set 객체의 집합 연산 메서드 (교집합, 합집합 등)
[JS] 자바스크립트 Set 객체의 집합 연산 메서드 (교집합, 합집합 등)
2024.07.04TL;DR💡 ES6에 도입된 Set 객체는 중복을 허용하지 않는 고유한 값들을 저장하는 데이터 구조다. Set은 동일한 값을 두 번 저장할 수 없기 때문에 중복된 값을 추가하면 자동으로 무시한다. 또한 삽입 순서를 기억하고, 원시형과 참조형 값을 모두 지원한다 — 참고 포스팅 Firefox 127 버전부터 별도의 폴리필 없이 크롬(Chrome)을 포함한 대부분의 주요 브라우저 엔진에서 교집합, 합집합, 차집합 등 집합 연산을 수행하는 새로운 Set 메서드를 지원한다. 크로스 브라우저에서 지원하는 메서드는 다음과 같다. A.intersection(B) : 두 Set이 공통으로 가지는 요소를 포함한 새로운 Set 반환 — 교집합A.union(B) : 두 Set이 가진 모든 요소를 포함한 새로운 Set 반환..
[Git] RSS 글 발행 시(티스토리 등) GitHub 자동 커밋 방법
[Git] RSS 글 발행 시(티스토리 등) GitHub 자동 커밋 방법
2024.07.03GitHub에서 사용자 이름(username)과 동일한 이름으로 public 레포지토리를 생성하고 RRADME.md 파일을 추가하면 프로필 페이지 상단에 README 내용이 표시된다. 프로필 페이지엔 주로 자신이 소개하고 싶은 프로젝트, 기술 스택 등을 기재한다. 카테고리별로 주목할만한 프로필 페이지를 모아둔 사이트도 있다. 대부분의 개발자들이 블로그를 운영하고 있어서 그런지 Latest Blog Posts 헤더에 최근 글 목록을 보여주는 프로필이 많다. 이 기능은 rss-parser 같은 라이브러리를 통해 RSS 피드 목록을 불러오고 README.md에 반영하는 방식으로 구현되는데, 이 작업을 GitHub Actions를 통해 정기적으로 수행하도록 만들 수 있다. RSS 설정먼저 자신의 블로그 혹은 ..
[DevTools] ESLint 9 Flat Config + Prettier 설정 (TypeScript, React)
[DevTools] ESLint 9 Flat Config + Prettier 설정 (TypeScript, React)
2024.06.30Flat ConfigESLint 8.21.0 버전부터 구성 파일에 큰 변화가 생겼다. 기존 .eslintrc 파일 대신 플랫 구성(Flat Config)을 사용하는 eslint.config.js 형식이 새로 도입된 것. 플랫 구성은 extends나 overrides 같은 계층 구조없이 각 구성을 이루는 객체들을 포함한 1차원 배열로 표현한다. 이를 통해 규칙을 세분화해야 하는 상황에서 더 유연하게 대응할 수 있게 됐다. e.g., 구성 객체 1-자바스크립트 규칙, 구성 객체 2-타입스크립트 규칙 필요한 플러그인은 직접 import 한 후 사용하는 방식으로 변경돼서 종속성을 더 명확하게 관리할 수 있다.// eslint.config.js 파일 예시import eslint from '@eslint/js';i..
[DevTools] nvm보다 40배 빠른 노드 버전 관리 도구 — fnm
[DevTools] nvm보다 40배 빠른 노드 버전 관리 도구 — fnm
2024.06.18Node 버전 관리 도구로 줄곧 nvm을 사용하다가 Rust로 작성된 fnm이 nvm에 비해 40배 이상 빠르다는 글을 보고 바꿔야겠다고 마음먹었다. volta, fnm 둘 중 고민하다가 결국 fnm을 선택했다. nvm 인터페이스와 거의 동일하고 .nvmrc 파일을 지원하는 점이 마음에 들었다. nvm은 bash 스크립트로 작성됐기 때문에 기본적으로 Unix 계열에서만 작동하는 반면, fnm은 Windows도 지원하는 장점이 있다. fnm으로 바꾸고 나서부터 터미널 로드 속도가 훨씬 빨라진 게 체감된다. 참고로 fnm은 Fast Node Manager의 약자다. 설치 방법더보기❶ nvm 관련 파일 삭제 : rm -rf ~/.nvm❷ ~/.bashrc, ~/.bash_profile, ~/.zshrc, ~..
[DevTools] Prettier 주요 포맷팅 옵션과 추천 설정
[DevTools] Prettier 주요 포맷팅 옵션과 추천 설정
2024.06.15들어가며자바스크립트를 사용하는 개발은 코드 포맷팅 도구로 Prettier를 많이 사용한다. Prettier는 .prettierrc (혹은 .prettierrc.js) 구성 파일에 원하는 코드 스타일을 커스터마이징 할 수 있는데, 한국어로 구글링 하면 많이 나오는 국룰 커스텀(?)을 별생각 없이 사용하고 있었다.// .prettierrc{ "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80} 사용하는데 큰 문제는 없었지만 언제 한 번 선호하는 코드 스타일에 따라 설정을 손봐야겠다는 생각을 하던 참에 우연히 My Code Formatting Guidelin..
기술 봉건주의 Techno Feudalis
기술 봉건주의 Techno Feudalis
2024.06.11최근 해외에서 큰 인기를 끌고 있는 책 (Techno Feudalism)는 인터넷과 첨단 기술 시대에 접어들었다고 여기는 일반적인 생각에 도전장을 내민다. 저자 야니스 바루파키스(Yanis Varoufakis)는 그리스의 경제학자로, 세계 최대 게임 플랫폼인 밸브(Valve)에서 근무한 후 그리스 재무장관을 역임한 인물이다. 그는 이 책을 통해 인류가 오히려 고도로 발달한 기술을 바탕으로 새로운 형태의 봉건 시대로 돌아가고 있다고 주장한다. 봉건주의는 중세 유럽에서 널리 퍼졌던 제도로, 대지주가 넓은 땅을 소유하고 그 땅 위의 모든 것을 통제하며 농민들은 영주의 자산인 농노가 되는 체제였다. 현재의 인터넷 환경도 이와 비슷한 점이 많다. 인터넷이라는 광대한 공간을 몇몇 거대 기업들인 구글, 애플, 마이크..
[시놀로지 Nas] 포트 개방 없이 원격에서 나스 SMB 접속하기 - Tailscale
[시놀로지 Nas] 포트 개방 없이 원격에서 나스 SMB 접속하기 - Tailscale
2024.06.10원격(외부) 네트워크에서 SMB에 접속하려면 139, 445(맥북 연결 시) 등의 포트를 개방해야 된다. 하지만 이러한 포트들은 보안에 취약하기 때문에 기본적으로 SMB 프로토콜은 로컬 네트워크에서만 사용하는 것을 권장한다. 보안 취약성을 최소화하면서 원격에서 접근하려면 로컬 네트워크에 VPN을 구축하는 것이 좋다. OpenVPN, WireGuard 등 사설 VPN을 구축하는 여러 가지 방법이 있는데 Tailscale을 사용하는 게 가장 편리하다. Tailscale은 WireGuard를 이용한 사설 Mesh Network 서비스다. Tailscale에 연결된 장치는 같은 네트워크에 있는 것처럼 작동한다. Tailscale은 설정이 거의 필요 없고 SSO 로그인을 사용하므로 보안 문제가 발생할 일도 적다...
[미립자팁] Notion 노션 데이터베이스에서 열(컬럼) 너비 최소화하기
[미립자팁] Notion 노션 데이터베이스에서 열(컬럼) 너비 최소화하기
2024.06.10노션 데이터베이스에서 열(컬럼) 제목의 오른쪽 경계선을 클릭하고 좌우로 드래그하면 해당 열의 너비를 조정할 수 있다. 일반적인 열 너비는 마우스 드래그를 통해 조정할 수 있지만, 일정 너비 이하로는 줄일 수 없다(데이터베이스 속성 유형에 따라 최소 너비가 조금씩 다르다). 그러나 Option(또는 Alt) 키를 누른 상태에서 드래그하면 열 너비를 약 30픽셀 정도로 최소화할 수 있다. 30픽셀은 체크박스 정도의 크기로, 특정 열의 첫 글자만 표시하거나 모든 정보를 표시할 필요가 없을 때 유용하다.
[Notion] 노션에서 직선 인용 부호 입력하기 (따옴표/대시 등 스마트 인용 부호 자동 변환 취소)
[Notion] 노션에서 직선 인용 부호 입력하기 (따옴표/대시 등 스마트 인용 부호 자동 변환 취소)
2024.06.10macOS는 입력 소스 설정 화면에서 "스마트 인용 부호 및 대시 사용"이라는 옵션을 제공한다. 입력 소스 설정은 시스템 설정 - 키보드 - 입력 소스 항목에서 편집 버튼을 클릭하면 확인할 수 있다. 이 설정 화면에서 큰따옴표, 작은따옴표의 표시 방식을 직접 지정할 수도 있다. 스마트 인용 부호 옵션을 활성화하면 직선 인용 부호를 곡선 인용 부호로 자동 변환한다. 또한 일반 하이픈(-)을 연속으로 두 번 입력했을 때 알파벳 M과 동일한 너비를 가지는 em 대시(—)로 변환된다. 곡선형 부호는 인용의 시작과 끝 지점을 명확히 구분할 수 있는 장점이 있지만 일부 프로그램에서 제대로 표시되지 않는 문제가 발생할 수 있다. 특히 VSCode 같은 코드 편집기는 문자열을 입력할 때 직선 인용 부호를 사용하는데..