센스쟁이 프로그래머, 비트센스

2026년, AI가 코드를 짜고 인프라를 정의하는 시대에 개발자 경험(DevEx)은 기업의 생존과 직결됩니다. 복잡한 클라우드 환경에서 개발자가 본연의 비즈니스 로직에만 집중할 수 있도록 돕는 '플랫폼 엔지니어링'과 최적화된 '골든 패스' 구축 전략을 심도 있게 다룹니다.최근 몇 년 사이 개발 환경은 급격하게 변화했어요. 마이크로서비스 아키텍처(MSA)의 확산과 쿠버네티스의 표준화로 인해 개발자가 신경 써야 할 인프라의 깊이가 너무 깊어졌죠. 여기에 Generative AI의 등장은 코드 생산성을 폭발적으로 늘렸지만, 동시에 배포와 운영의 병목 현상을 더욱 도드라지게 만들었습니다. 이제 우리는 단순한 자동화를 넘어, 개발자가 '셀프 서비스'로 인프라를 이용할 수 있는 플랫폼 엔지니어링에 주목해야 합니다...

예전 글들/Frontend 2026. 1. 23. 09:49

사용자 이탈률이 높은 웹 서비스의 성능을 개선하기 위해 useMemo, useCallback 활용 및 코드 스플리팅을 도입하여 초기 로딩 속도를 40% 개선하고, 라이트하우스 점수를 60점에서 95점으로 끌어올린 실전 최적화 사례를 공유합니다. 느린 웹 서비스, 왜 문제였을까요? 2026년 현재, 웹 서비스의 속도는 곧 비즈니스의 생명선과 같아요. 제가 맡았던 프로젝트는 초기 로딩 속도가 너무 느려 사용자 이탈률이 급격히 증가하던 상황이었죠. 라이트하우스(Lighthouse)로 성능 측정을 해보니 점수는 60점대에 머물러 있었고, 특히 메인 번들 파일의 크기가 너무 커서 첫 화면이 뜨는 데만 한참이 걸렸어요. 성능 저하의 주범은 크게 두 가지였어요. 첫째는 불필요..

예전 글들/Frontend 2026. 1. 19. 11:24

OWASP ZAP(Zed Attack Proxy)과 Burp Suite Professional은 웹 및 API 기반 애플리케이션의 보안 취약점을 찾아내는 대표적인 동적 분석 도구입니다. 두 도구 모두 OWASP Top 10에 해당하는 흔한 웹 취약점들을 탐지하고 테스트할 수 있으며, 프록시 기능을 기반으로 애플리케이션과 공격자 사이에서 요청/응답을 가로채 검증합니다 . 하지만 취약점 탐지 범위와 정확도, 자동화 및 스크립팅 지원, CI/CD 파이프라인 통합 능력, PHP/Python 환경에서의 활용 편의성 등 여러 측면에서 차이가 있습니다. 여기서는 OWASP Top 10 중심의 보안 테스트 관점에서 ZAP과 Burp Suite Pro를 자세히 비교하고, 각 도구의 장단점과 상황별 적합성을 평가하겠습니다..

예전 글들/Frontend 2025. 4. 21. 21:25

TypeScript에서 함수를 정의하는 두 가지 주요 방식의 장단점을 설명해드리겠습니다:function 키워드 사용:function add(a: number, b: number): number { return a + b;}  장점:호이스팅(hoisting)이 되어 함수를 선언 전에도 호출 가능this 바인딩이 동적으로 이루어짐 (메서드로 사용할 때 유용)코드가 더 명시적이고 읽기 쉬움재귀 함수 작성이 더 자연스러움제네릭 타입 사용이 더 직관적 const 화살표 함수:const add = (a: number, b: number): number => { return a + b;}; 장점:this가 렉시컬 스코프로 바인딩됨 (콜백 함수에서 유용)더 간결한 문법 (특히 한 줄 함수의 경우)변수 재할당..

예전 글들/Frontend 2025. 4. 12. 08:45

엑셀 파일의 수정 감지는 크게 두 가지 방식으로 나눠서 생각할 수 있습니다.📌 1. 로컬(단일 PC) 환경에서 엑셀 수정 감지로컬 PC에서 엑셀 파일을 모니터링할 때는 보통 다음 두 가지 방식이 쓰입니다.파일 시스템 이벤트 감지(watchdog, Windows의 파일 시스템 Watcher 등을 통해 파일이 변경되었는지 확인)폴링 방식 (주기적 파일 상태 체크)(파일의 변경시간, MD5 해시값, 크기 등을 정기적으로 확인해 변화가 있을 때 추출)장점빠른 속도간단한 구조단점네트워크 폴더 감시보다는 환경 제약이 적지만, 파일을 여러 사람이 수정하는 경우 충돌할 가능성이 있음. 📌 2. 네트워크(공유 폴더) 환경에서 엑셀 수정 감지네트워크 환경에서는 위 방식에서 몇 가지 고려 사항이 추가됩니다.기본적으로는 ..

예전 글들/Frontend 2025. 3. 28. 09:52

다음은 TypeScript를 사용하여 크롬 확장 앱에서 프로파일 사용자 정보를 가져오는 방법을 보여주는 코드입니다. 필요한 파일과 코드를 정리했습니다. 1. manifest.json (권한 설정이 이미 완료되었다고 가정)manifest.json 파일은 따로 제공하지 않습니다. 확장 앱의 권한 설정에서 "identity"가 포함되어 있어야 합니다. 2. background.ts// background.tsfunction getUserProfile(): void { chrome.identity.getProfileUserInfo((userInfo) => { console.log('User ID:', userInfo.id); console.log('User Email:', userInfo.email..

예전 글들/Frontend 2025. 1. 27. 08:29

Node.js의 다양한 버전을 효율적으로 관리하려면 **NVM(Node Version Manager)**을 사용하는 것이 좋습니다. NVM을 통해 여러 버전의 Node.js를 설치하고, 필요에 따라 손쉽게 전환할 수 있습니다. 아래는 NVM의 설치부터 활용까지의 방법을 정리한 내용입니다.1. NVM 설치하기 • Windows: 1. NVM for Windows GitHub 페이지에서 최신 버전의 nvm-setup.exe 파일을 다운로드합니다. 2. 다운로드한 설치 파일을 실행하고 지시에 따라 설치를 완료합니다. • macOS/Linux: 1. 터미널을 열고 아래 명령어를 입력하여 NVM을 설치합니다.curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39..

예전 글들/Frontend 2025. 1. 4. 12:20

사이트가 복잡해져 가면 component 를 잘게 찢어서 사용하기에 한계가 있다. 이유는 상위 parent component 에서 하위 childe component 를 호출하는 거야 문제가 없겠지만, 하위 child component 내부에서 변경된 변수값을 상위 parent 에 전달하기 복잡하다. 복잡하지만 그래도 사이트를 만들어야 하니 해야지.. 참조페이지 https://svelte.dev/examples/component-bindings 1. dispatcher 사용 참조 페이지 : https://svelte.dev/tutorial/component-events 자주 애용하지만 복잡하다. vuejs 에서 $emit()과 거의 같은 역할을 한다. vuejs 를 하다 보니 아래 $emit과 동일한 걸..

예전 글들/Frontend 2022. 8. 12. 16:27