2026.08.19, 21:51
제가 발전해볼게요…
js ts tsx 차이
| JS (.js) | 자바스크립트. 타입 검사 없음 |
| JSX (.jsx) JavaScript XML | 자바스크립트 안에서 <div>, <button> 같은 HTML 유사 마크업 문법을 쓸 수 있게 해주는 확장 문법. React가 만든 개념. UI 구조를 코드로 표현할 때 사용. |
| TS (.ts) | 타입스크립트. JS + 정적 타입 시스템. 컴파일 시 타입 오류 검출 |
| TSX (.tsx) | TS + JSX 문법 허용. React에서 <div>..</div> 같은 마크업을 TS 코드 안에 쓸 때 사용. TSX는 TS의 특수 확장자로 컴포넌트 파일에서만 필요. |
// jsx
// 브라우저가 직접 이해하는 문법이 아님
// Babel 같은 컴파일러가 순수 JS로 변환
const element = <h1>안녕하세요</h1>;
// 내부적으로 다음과 같은 형태로 변환
React.createElement('h1', null, '안녕하세요')순수 로직 파일(유틸 함수 등)은 .ts, UI 렌더링이 들어간 파일은 .tsx
Selenium이란
웹 브라우저를 코드로 제어해 UI 자동화 테스트를 수행하는 오픈소스 프레임워크
실제 브라우저(Chrome, Firefox 등)를 구동해 클릭, 입력, 페이지 이동 등을 시뮬레이션
WebDriver API를 통해 여러 언어(Java, Python, JS 등)에서 제어 가능
E2E(End-to-End) 테스트, 크롤링/스크래핑에도 활용
단점: 실행 속도 느림, 유지보수 비용 높음 (요소 선택자 변경에 취약)
-> 최근엔 Playwright, Cypress가 대안으로 많이 쓰임
Playwright
Microsoft가 개발한 오픈소스 브라우저 자동화 라이브러리
Selenium과 목적은 같지만(브라우저 제어), 설계 철학과 아키텍처가 훨씬 최신
E2E 테스트 프레임워크
Selenium과 달리 auto-wait가 내장되어 대기 로직을 직접 짤 필요가 없다
Locator 기반 설계로 요소를 동작 시점에 평가해 타이밍 이슈에 강하다
시맨틱 셀렉터를 지원하여 Selenium의 셀렉터 취약성 문제를 완화
WebDriver API
브라우저를 외부에서 프로그래밍적으로 제어할 수 있게 해주는 표준 인터페이스(프로토콜)
E2E 테스트
End-to-End 테스트
사용자가 실제로 경험하는 흐름 전체를 처음부터 끝까지 검증하는 테스트
전체 시나리오를 한 번에 검
예: 회원가입 -> 로그인 -> 상품 장바구니 담기 -> 결제
크롤링 (Crawling)
웹을 자동으로 돌아다니며 페이지를 수집하는 행위
검색엔진(구글 봇)이 웹 전체를 인덱싱하는 것이 대표적 예
페이지 목록/URL 자체가 목적인 경우가 많음
스크래핑 (Scraping)
특정 페이지에서 원하는 데이터를 추출하는 행위
예: 쇼핑몰 상품 페이지에서 가격, 재고 정보만 뽑아내기
크롤링이 탐색 엔진이라면 스크래핑은 데이터 파서에 가깝다
하네스 엔지니어링이란 (Harness Engineering)
참고자료: 하네스 엔지니어링 15분 만에 이해시켜드립니다 | 개념, 핵심 원칙, AI 에이전트
하네스
원래 뜻은 (말의) 마구(말을 타거나 부리는 데 쓰는 기구; 굴레·안장·재갈 등)
말(AI 모델)은 힘이 세지만 통제 장치(하네스)가 없으면 엉뚱한 방향으로 간다
하네스 엔지니어링의 정의
하네스를 체계적으로 설계하고 개선하는 기술
하네스 엔지니어링이 부상한 이유
- AI 모델의 상향 평준화 -> 모델을 둘러싼 시스템이 차이를 만든다
- 에이전트가 데모에서 실무로 이동
- 개념에 이름이 붙음
하네스 엔지니어링이라는 이름
미쉘 하시모토(하시코프 공동창업자, 테라폼 제작자)가 2026년 2월 블로그에서 사용
오픈AI가 100만 줄 실험을 같은 제목으로 발표하여 업계 전체로 용어가 퍼진다.
프롬프트 엔지니어링, 컨텍스트 엔지니어링, 하네스 엔지니어링
프롬프트 엔지니어링
- 뭘 말할까
- (이메일 비유) 기깔나는 메일을 쓰기
- 한계: 단발성 질의응답에 유효하나 장시간 복잡한 작업에 한계가 있다
컨텍스트 엔지니어링
- 뭘 보여줄까
- (이메일 비유) 첨부파일 붙이기
- 안드레아 카파시
- 한계: 여전히 한번의 작업·한 번의 세션 단위에 머문다
하네스 엔지니어링
- 어떤 환경에서 일하게 할까
- (이메일 비유) 그 사람이 일하는 사무실 전체(책상 배치·업무 규칙·보고 체계·교정 프로세스)를 설계
- 하네스가 앞의 둘을 포함한다
하네스를 이루는 네 기둥
- 컨텍스트 엔지니어링: 컨텍스트에 없는 정보는 존재하지 않는 것과 같다
- 아키텍처 제약: 좋은 코드를 ‘프롬프트(말)로 부탁’하는 대신 ‘기계적으로 강제’한다
- 피드백 루프: AI는 자기 결과물을 스스로 제대로 평가하지 못한다
- 엔트로피 관리: 정리 전담 에이전트를 주기적으로 돌린다
1000페이지짜리 매뉴얼이 아니라 지도를 줘라
오픈AI가 거대한 지시 파일 실패 후 내린 결론
규칙을 한 파일에 몰아넣지 말고 분리한 뒤 그 위치만 안내한다
마틴 파울러의 두 장치 – 가이드와 센서
가이드: 에이전트가 행동하기 전에 방향을 잡아주는 장치
센서: 행동한 후에 결과를 체크해 교정하는 장치
둘 다 있어야 제대로 된 하네스
피드백 루프 (Feedback Loop)
에이전트의 판단을 자연어 주장이 아니라 실행 가능한 증거로 검증
규칙을 시스템으로 강제할 때 사용할 수 있는 도구
린터 (Linter): 코드 실행 없이 문법 오류, 스타일 위반, 잠재적 버그를 미리 잡아주는 정적 분석 도구
테스트 (Test): 코드가 의도한대로 동작하는지 검증하는 코드
CI (Continuous Integration, 지속적 통합): 코드를 push/PR할 때마다 자동으로 빌드·린트·테스트를 실행해주는 자동화 시스템
답글 남기기