728x90 반응형 source-code229 [jest] jest dom을 통한 DOM 객체 동작 테스트 하기 Backgrounds 현재 개발 중인 서비스에서는 사용자가 생성한 데이터를 통해 웹 페이지에서 특정 요소(HTMLElement)를 조회하는 기능을 제공하고 있습니다. 이때 해당 요소를 찾는 알고리즘이 제법 복잡하고 예외 케이스가 많이 발생해, 코드를 수정할 때마다 고객사 페이지에 직접 접속해 정상 동작 여부를 확인하는 불편함이 존재했습니다. 그리고 이로 인해 1) 개발 소요 시간 증대 2) 적극적인 리팩토링 어려움 (수정이 발생하면, 기존 잘 되던 케이스가 안될 것이라는 두려움) 과 같은 문제들이 발생했습니다. Solutions 최선의 방안은 모든 고객사 페이지를 자동으로 크롤링하면서, 로직이 정상 동작하는지 확인하는 것이겠으나... 하루아침에 이 정도의 자동화 테스트를 도입하기엔 현실적인 무리가 있었습.. 2024. 4. 10. 단위 테스트 - 고전파와 런던파, 그리고 개인적인 견해 Backgrounds사내 package를 개발하며 테스트 코드를 작성하던 도중, 이런 일이 있었습니다. 입력받은 데이터를 서비스 내부 정책에 따라 필터링하는 모듈이 존재했고, 해당 모듈은 내부 정책 관련 로직을 처리하는 다른 모듈을 의존성으로 주입받고 있었습니다.class Module { filterPoliciy: Policy constructor (filterPoliciy: Policy) { this.filterPoliciy = filterPoliciy } filter(data:Data): Data | null { // 해당 메서드 내부적으로 Policy interface 사용 ...this.filterPoliciy.isIdExist() } } 아래와 같은 형태로 테스트 코드를 작성했습니다.descri.. 2024. 3. 28. [Github Actions] PR 병합 시, 자동으로 package publish 하기 Backgrounds 현재 사내 서비스에서 공통적으로 쓰이는 모듈들을 github package로 제공하고 있습니다. git flow 전략에 따라 develop - staging - production 환경으로 구성되어 있으며, 각 개발 사항을 develop branch에 병합한 뒤, staging 환경에서 테스트한 후, production branch에 병합합니다. 이때 해당 패키지의 새로운 버전을 publish 하기 위해서는 다음과 같은 과정이 필요합니다. production 브랜치 내 PR 생성 → review 및 merge 개발자 local 환경에서 production branch 이동 → build + publish 해당 배포 사항 직접 공지 Problems 위 과정에는 다음과 같은 문제점이 존.. 2024. 3. 26. [Github Actions] Workflows에서 복수개 env variables 사용하기 배경 github actions를 통해 사내 npm 패키지를 자동으로 빌드-배포-릴리즈 하고자 했습니다. production branch에 버전과 관련된 PR이 병합되면 패키지 버전 변경 → build → publish → release 를 수행하는 workflow를 작성했는데... 여기서 env 파일, 즉 환경 변수 관련 문제와 마주했습니다. export class DataFetcher { private BASE_URL = process.env.BASE_URL } 다음과 같이 환경 변수를 참조하고 있으며 // package.json { "scripts": { "build:prod": "DOTENV_CONFIG_PATH=.env.production node -r dotenv/config scripts/e.. 2024. 3. 25. [next js] App Router Fetch Cache가 동작하지 않을 때 Data Fetching https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating Data Fetching: Fetching, Caching, and Revalidating | Next.js Learn how to fetch, cache, and revalidate data in your Next.js application. nextjs.org Next js App router는 fetch web api를 확장, caching, revalidating 등의 기능을 제공해 각 요청을 자동으로 memoize 할 수 있도록 합니다. async function getData() { con.. 2024. 3. 11. localhost fetch시 ECONNREFUSED 에러 해결하기 문제 상황 Next JS server component에서 로컬 개발 서버(ex localhost:8080)로 fetch를 통해 요청을 보내자 다음과 같은 에러가 발생했습니다. Internal error: TypeError: fetch failed at Object.fetch Cause: Error: connect ECONNREFUSED ::1:3004 개발 환경은 Next JS 14 버전(즉 node 18.17.0 이상). 해결 방안 처음에는 프론트단의 문제(혹은 Next server component의 문제..?)라 생각을 했었는데 fetch API 단에서 에러가 나는 걸 보고, 바로 구글링에 착수. 다음과 같은 이슈를 만날 수 있었습니다. https://github.com/node-fetch/nod.. 2024. 3. 7. esbuild 번들링 시 환경변수 관리하기 문제 상황 현재 사내 서비스는 자체적으로 개발/배포하는 github private package를 사용하고 있습니다. 해당 패키지에서는 각 운영 환경에 따라 달라지는 값들이 존재하는데... // some-module.ts class Module { // private BASE_URL = 'https://production.com'; // private BASE_URL = 'https://development.com'; } (대표적으로, 개발 OR 배포에 따라 end-point인 server 주소가 달라지는 모습) 이러한 값들을 개발자가 배포 시 일일이 변경해 상당한 비효율이 발생했습니다! 즉 개발 환경 배포 시에는 → BASE_URL을 development.com으로 프로덕션 환경 배포 시에는 → BAS.. 2024. 3. 5. 네트워크 기초 정리 - 네트워크 인터페이스 선택 원리와 기준 네트워크 인터페이스 선택 원리와 기준 Process가 Socket을 열어 바인딩할 TCP/IP를 어떻게 결정하는가? → 이는 여러 개의 Network Interface 중 무엇을 선택할 것인가 하는 질문으로 이해할 수 있습니다. (이를 결정하는 것을 Swiching이라 하는데, Swiching을 좀 더 추상화한 질문) 응용 프로그램이 소켓을 개발할 때 IP 주소를 특정하지 않는다면, OS 수준에서 임의로 IP를 선택하며 이때 선택 기준은 (여러 가지가 있지만 PC 한정) → Routing 경로 계산 시 가장 비용이 적은 Network Interface 입니다! 이때 해당 비용 = Metric 으로 이해할 수 있으며 각 OS, 제조사 별로 Metric을 선정하는 공식이 정해져 있습니다. https://ww.. 2024. 2. 20. 네트워크 기초 정리 - 데이터 단위 Stream User모드 Application Process(즉, socket) 수준에서의 데이터 단위를 Stream이라 합니다. Stream 데이터란 시작점은 존재하지만 끝은 알 수 없는, 일렬로 쭉 널어진 데이터를 의미하며, process는 File에 stream 데이터는 Write하게 됩니다. (ex Word 문서 작업을 하며 글을 쓸 경우, 글자를 입력하는 만큼 파일 크기가 커짐) Segment stream 데이터가 Kernal로 이동해 TCP를 만날 때 Stream 데이터는 일정 길이로 분해되는데, 이를 segmentation이라 합니다. 추가적으로 이렇게 분해된 조각 하나하나의 데이터 단위를 Segment라 합니다. 이 때 Stream 데이터가 분해되는 일정 단위의 길이는 TCP 수준에서의 최.. 2024. 2. 19. 이전 1 2 3 4 5 6 7 ··· 26 다음 728x90 반응형
