개발 일지

1. 채널콘 2025“AI를 도입한 95% 말고, 성과를 내는 5%의 회사들은 뭐가 다를까?”하루 종일 이어진 세션을 관통하는 공통 질문은 “기술이 있는데 왜 성과는 안 나지?” 였습니다.아래의 Real Case들을 통해 질문의 핵심과 본질에 대해 이야기 해보려고 합니다.콜센터를 24시간 운영하는 AI 상담사10초 숏폼 하나로 1억 조회를 만든 콘텐츠 팀투자자와 창업자가 보는 AI 트랜지션‘AI와 AI가 거래를 협상하는’ 커머스의 미래계약·리서치·마케팅에 깊게 들어온 Real AI 스타트업들그리고 그 모든 걸 받쳐주는 채널톡 ALF v22. 현장 스케치AI라는 거대한 파도를 두고 누군가는 “툴 하나 더 쓰는 정도”로 받아들이고,누군가는 “회사 구조를 통째로 바꿀 트랜지션”으로 받아들이고 있었습니다.3. ..

🧠 크롬 익스텐션 구조 개념 정리크롬 익스텐션은 기본적으로 웹 기술로 만들 수 있는 작은 앱이다.기본적인 구성 요소는 다음과 같다. - mainfest.json : 익스텐션 설정 파일 (필수) (이 파일이 있어야 크롬 익스텐션으로 인식할 수 있다.)- popup : 크롬 툴바에서 아이콘을 클릭하면 나오는 UI- background script : 백그라운드에서 계속 동작하는 JS- content script : 웹 페이지에 삽입되는 JS- options page : 사용자 설정 페이지- permissions : 어떤 기능을 사용할지 설정 (예: 탭 접근, 스토리지) 예시){ "manifest_version": 3, // 버전 3 사용 (버전 2는 지원 종료) "name": "My First Exte..

Number.isInteger() Number.isInteger(value) value가  integer(정수형)일 경우에만 true를 반환한다.따라서, NaN, Infinity인 경우 false를 반환하며, 숫자형이 아닌 타입이 올 경우 항상 false를 반환한다.단, 정수로 표시될 수 있는 부동 소수점 타입의 숫자가 들어올 경우 true를 반환한다. Number.isInteger(0); // trueNumber.isInteger(1); // trueNumber.isInteger(-100000); // trueNumber.isInteger(99999999999999999999999); // trueNumber.isInteger(0.1); // falseNumber.isInteger(Math.PI); /..

* mac OS 기준 1. SSH key 생성터미널에서 아래 명령어를 입력한다.ssh-keygen -t rsa -C "이메일@주소" 이 때, 이메일 주소는 Github 계정을 생성할 때 사용했던 이메일 주소를 입력하면 된다.  2. id_rsa 와 Iid_rsa.pub 키가 동시에 생긴다.id_rsa: 비밀키id_rsa.pub: 공개키  3. 공개키 보기cat ~/.ssh/id_rsa.pub  4. Github > Settings > SSH Keys > Add SSH Key 버튼 누르기 key에 조금전에 복사했던 공개키를 붙여넣기 한다. 그리고 생성 누르면 완성 5. 정상 등록되었는지 확인하기ssh -T git@github.com  6. SSH Key로 클론 받기git clone git@github.co..

모달을 사용할 때 일반적인 HTML 구조를 살펴보면 다음과 같다. 페이지의 DOM 구조 내부에 모달이 있다. 그런데, portal을 사용하게 되면, DOM 구조 밖에 이 모달을 위치시킬 수 있다. 사용 방법 1. createPortal export function createPortal(children: ReactNode, container: Element | DocumentFragment, key?: null | string): ReactPortal; createPortal(JSX, 위치 시킬 Node) 예시: function Modal({children, onClose}) { return createPortal( X {children} , document.body); } 다시 HTML 구조를 살펴보면..

Compopund Component 패턴이란 부모 컴포넌트의 속성, 로직을 자식 컴포넌트와 공유할 때 사용하는 리액트 패턴이다. 주로 Select 박스, 드롭다운 메뉴, Modal 에서 자주 사용된다. React Context API를 사용하게 되는데, Context API는 Provider에서 값이나 속성들을 정의하고, 하위 컴포넌트에서 이를 공유해서 재사용할 수 있도록 만들어진 구조이다. 보통은 부모에서 props 로 자식에게 속성들을 전달하는 것이 일반적인데, 부모와 자식 사이의 간격이 너무 멀어질 경우, props를 계속해서 하위 컴포넌트로 넘겨줘야 하는 불편함이 발생한다.(props drilling) 그래서, 이러한 것들을 개선하기 위해 나온 개념으로, props로 자식에게 넘기지 않고도 하위에..

test("if checkbox is not checekd, submit button disabled", async () => { render(); const checkBoxElement = screen.getByRole("checkbox", { name: /checkbox/i, }); const submitButtonElement = screen.getByRole("button", { name: /submit/i, }); expect(checkBoxElement.checked).toEqual(false); expect(submitButtonElement.disabled).toBeTruthy(); }); 위의 예시로 보자면, toEqual( )과 toBeTruthy( )를 구분해서 사용한 이유는 각 ma..

이번에는 이전 포스팅에서 다뤘던 쿼리 함수들의 우선 순위와 userEvent 에 대해서 더 자세히 알아본다. 쿼리 함수 우선 순위 먼저, 쿼리 함수란 간단하게 요약하자면, 우리가 테스트를 할 때 요소를 직접적으로 가져오기 위한 수단 정도로 이해하면 쉽다. 타입은 세 가지 종류가 있었는데, [get, query, find] 세가지 종류가 있다. 세 가지 종류의 타입에 대해서는 이전 포스팅에서 자세히 확인해 볼 수 있다. 이 쿼리 함수에도 공식 문서에서 권고하는 우선 순위가 있는데, 이에 대해서 다뤄보려고 한다. 일반적으로 테스트 코드는 사용자의 인터렉션 방식과 최대한 유사해야 한다. 1. Queries Accessible to Everyone. :모든 사용자가 쿼리에 접근할 수 있어야 한다. 일반적으로 웹..

간단한 예제를 통해, React Testing Library를 실습해보고자 한다. 먼저 실습에 앞서, TDD 개념에 대해 짚고 가보자. TDD란 Test Driven Development의 약자로, 한국어로는 테스트 주도 개발이라고 명칭한다. 테스트 주도 개발이란 실제 코드를 작성하기 전에 테스트 코드를 먼저 작성하는 것을 의미한다. 즉, 기능 개발에 앞서 테스트 코드를 작성하고 이 테스트 코드를 바탕으로 기능 구현 후, 이를 검증하는 방식이다. TDD는 크게 3가지 단계로 나눌 수 있다. Red : 코드를 작성하기 전에 테스트 코드 작성 단계. 코드를 작성하기 전이므로 당연히 테스트는 실패할 것이다. Green : 테스트를 통과 시키기 위해 코드를 작성하는 단계. Refactor : 코드를 리팩토링 하..

React Testing Library 1. 개요 - Facebook에서 만든 오픈소스 테스팅 프레임워크 - Javascript와 Typescript 를 지원한다. - React, Vue, Angular 등의 프레임워크에서 지원한다. - 참고) CRA 설치시 기본으로 RTL이 세팅되어 있다. 2. 사용 방법 1) CRA에서 테스트 코드 확인해보기 Create-React-App을 이용해서 프로젝트를 설정하면, 구성 폴더에서 App.test.tsx를 확인해볼 수 있다. 예시: [비교 1] import React from "react"; import { render, screen } from "@testing-library/react"; import App from "./App"; test("renders l..