담백한 웹 개발 이야기

개발자도구를 통해 페이지에서 발생하는 네트워크 디버깅을 위해서 녹화버튼을 실행한 뒤 새로고침합니다. 모든 네트워크 활동이 네트워크 로그에 기록됩니다. 네트워크 로그 네트워크 로그의 각 행은 리소스를 표시합니다. 기본적으로 시간순서로 나열됩니다. 특정 시점 확인 네트워크 로그에서 특정 시점을 선택해서 리소스를 폭포수 모델로 확인할 수 있습니다. 리소스 데이터 리소스를 선택하면 데이터를 확인할 수 있으며 항목별로 의미는 다음과 같습니다. Headers HTTP 요청/응답 헤더를 확인할 수 있습니다. Payload HTTP POST/PUT 메소드일 때 HTTP 요청 Body에 담아 보낼 데이터를 확인할 수 있습니다. Preview HTTP 응답 Body의 데이터를 정리해서 확인할 수 있습니다. Response..

​제가 다녔던 직장에서는 매년 말에 업무 성과를 작성하고 고과를 평가했습니다. 연중에는 중간평가 또는 체크인이라는 성과를 중간 평가하고 조직장에게 피드백을 받는 날이 있었습니다. 1년 차 때는 생각나는 데로 작성했습니다. 저는 좀 더 인정받고 싶어서 조직장 피드백을 통해 포맷을 만들고 구체적으로 작성하려고 노력했습니다. 결과적으로는 3년마다 주어지는 진급 기회를 2년마다 2번 받아 조기 진급을 했었고, 남들보다 2년은 빠르게 진급을 했습니다. 동료들이 작성한 업무 이력을 보면 본인이 보기 좋은 방식으로 작성하는 분이 대부분이었습니다. 업무 이력은 평가자가 보고 그 사람을 평가하는 문서입니다. 때문에 평가자가 읽기 쉽고 이해하기 쉽게 작성해야 합니다. 이 글에서는 관련해서 경험을 공유하고자 합니다.​ 조직..

업무 이력 작성 방법이 모든 영향은 아니겠지만 20살 때 직상 생활을 시작하고 9년 차 때까지 2번 조기 진급하고, 직무 레벨을 시니어로 업그레이드했습니다. 제가 다녔던 직장에서는 연말에 업무 성과를 작성하고 고과 평가를 했습니다. 1년 차 때는 아무것도 몰라 생각나는 데로 작성했습니다. 저는 좀 더 성장하고 싶었고, 진급과 전문성 레벨을 업그레이드하면 더 많은 역할이 주어지기 때문에 매달 업무를 기록하고 구체적으로 작성하려고 노력했습니다. 이 글에서는 저와 비슷한 고민을 하시는 분들을 위해 관련한 제 경험을 공유하고자 합니다. 업무 이력 작성 포맷 업무 이력을 관리할 때는 저는 이런 포맷을 사용합니다. [프로젝트 이름] 1. 진행기간: 년.월.일 ~ 년.월.일 2. 프로젝트 개요 3. 수행 역할 및 업..

TDD와 BDD의 정의 TDD(Test-Driven Development) TDD(Test-Driven Development)는 테스트 주도 개발이라고 하며, 함수나 기능에 대한 테스트 케이스를 최우선 먼저 작성하고, 그 테스트를 통과하기 위한 최소한의 코드를 작성하는 개발 방법론입니다. BDD(Behavior-Driven Development) BDD(Behavior-Driven Development)는 행동 주도 개발이라고 하며, 사용자 관점에서 애플리케이션의 행동에 초점을 맞춰 테스트 케이스를 작성하는 개발 방법론입니다. TDD와 BDD의 차이점 3가지 1 테스트 케이스 작성 TDD는 테스트 코드 작성자 관점에서 테스트 케이스를 작성하고, 기능에 초점을 맞춥니다. 반면에 BDD는 사용자 관점에서 테..

글의 목적 재사용 가능한 모듈 또는 컴포넌트를 만드는 작업은 비용을 절약하는 데 큰 역할을 한다. 재사용성 관련해서는 난이도 3배의 법칙이 있다. 재사용 가능한 모듈을 만드는 작업은 단일 소프트웨어에서 사용할 모듈을 개발할 때보다 3배 어렵다는 법칙이다. 프런트의 역할이 많아지면서 소프트웨어의 볼륨이 커졌다. 재사용 가능한 모듈과 컴포넌트를 만들지 않으면 유연한 요구사항 대응과 개발 비용이 많이 소비될 수 밖에 없다. 재사용 가능한 코드 개발을 위해서 어떠한 원칙들을 지켜야 하고 어떤 과정이 있는 지 정리한 포스트이다. 재사용성 재사용을 위한 소프트웨어 개발은 장래의 프로젝트에서 재사용할 수 있는 모듈을 현재 소프트웨어 개발 과정에서 창출하는 것을 의미한다. 다른 소프트웨어에서 재사용하기 위한 소프트웨어..

웹 브라우저에서 웹 페이지 캡처 기능이 있다는 것을 알고 있으셨나요? 이 글에서는 Edge 브라우저를 기준으로 알아보겠습니다. Edge 브라우저는 Chrome 브라우저와 같은 플랫폼을 사용하기 때문에 Chrome 브라우저도 같은 기능을 제공합니다. 웹 페이지 캡처 기능 위치 웹 페이지 캡처 기능은 개발자 도구에서 확인할 수 있습니다. 우선 아래와 같이 개발자 도구를 실행하고 개발자 도구에서 실행 명령을 실행합니다. 실행 명령창에서 스크린샷을 검색하면 웹 페이지 캡처 기능을 볼 수 있습니다. [개발자용] 노드 스크린샷 캡처 [노드 스크린샷 캡처]는 웹 페이지의 HTML 코드를 선택해서 캡처하는 기능입니다. 노드를 선택해서 캡처하면 다음과 같이 다운로드됩니다. 스크린샷 캡처 [스크린샷 캡처]는 현재 보고 있..

ChatGPT에서 유료로 사용 중인 웹 페이지 기반 글 요약, 이미지 생성 등을 Microsoft Bing에서는 무료로 제공 중인 것을 알고 있으셨나요? 이미지 생성을 예제로 사용하는 방법을 정리해봤습니다. Microsoft Bing 이란? Bing은 검색을 위한 AI 기반 어시스턴트로, 창의적인 콘텐츠를 생성하거나, 글쓰기를 개선하는 등 다양한 기능을 제공합니다. Microsoft Bing 사용 방법 PC에서 Bing을 사용하려면 Microsoft Edge 브라우저를 사용해야 합니다. 윈도우 컴퓨터라면 기본으로 설치되어 있습니다. Microsoft Edge 다운로드 Edge의 새로운 기능을 가장 먼저 미리 보고 싶으신가요? 참가자 채널은 최신 기능으로 지속적으로 업데이트되므로 지금 다운로드하여 참가자가..

일과 중에 피로가 쌓인 상태에서 자료를 찾는 데, 웹 페이지에 정보가 많을 경우 페이지 요약으로 쉽게 보고 싶을 때가 있습니다. Microsoft Edge 브라우저에서 Copilot 기능을 사용하면 웹 페이지 요약을 쉽게 할 수 있습니다. Microsoft Edge에 대한 내용은 아래 링크 참고 바랍니다. https://www.microsoft.com/ko-kr/edge/download 웹 페이지 요약 툴 사용 방법 Microsoft Edge 브라우저 실행 후 오른쪽 상단에 파란색 Copilot 아이콘을 클릭해 줍니다. 다음 Copilot 화면에서 페이지 요약 생성을 클릭해 줍니다. 페이지 요약이 완료되면 다음과 같이 표시됩니다. 페이지 요약 기능 이외도 다양한 기능이 있으니 일할 때 생산성을 높이기 좋..

모노레포는 여러 개의 서브 프로젝트를 한 개의 레포지토리에서 관리하는 운영 방식입니다. 카카오 FE 개발자로 있을 때는 Lerna를 사용해서 모노레포를 구성했는데요. Documentation | Lerna Lerna is a fast, modern build system for managing and publishing multiple JavaScript/TypeScript packages from the same repository. lerna.js.org 요세는 Turborepo를 많이 활용하는 것 같습니다. Turbo Turbo is an incremental bundler and build system optimized for JavaScript and TypeScript, written in R..

미국의 화가이자 색채 교육자인 알버트 헨리 먼셀(Albert Henry Munsell)이 색체계를 확립함 색상(Hue), 명도(Value), 채도(Chroma)에 따라 색상을 배치 1927년 'The Munsell Book of color'을 발간하여 색체계를 확립 1940년 미국 광학회(OAS)에 의해 'Munsell renotation'으로 수정 색상(Hue): 색 종류 빨강, 노랑, 초록, 파랑, 보라의 다섯 가지 색을 기분으로함 이들 사이에 색을 섞어 10가지 색을 만듦 이를 다시 10등분하여 100가지 색상으로 만듦 명도(Value): 밝기 0~10 숫자로 11단계로 조정 0과 10은 검은색과 흰색임으로 실질적으로 9단계 조절 명도축은 그레이 스케일이라고 부름 채도(Chroma): 맑고 탁한 정..

브라우저 캐시는 웹 사이트의 접속 속도를 빠르게 하기 위한 기술입니다. 브라우저 캐시에는 웹 사이트의 이미지와 소스 코드를 저장하고 재사용해서 웹 사이트의 접속 속도를 빠르게 합니다. 하지만 오래된 이미지와 소스 코드 영향으로 최신 사항이 보이지 않을 때가 있습니다. 이 글에서는 브라우저 캐시 삭제 방법을 정리해 봤습니다. 검색 기록에서 삭제하기 브라우저 오른쪽 상단에 있는 더보기 메뉴를 클릭하고, [인터넷 사용 기록 삭제] 버튼을 클릭합니다. [캐시된 이미지 및 파일]을 선택하고 [인터넷 사용 기록 삭제] 버튼을 클릭하면 브라우저 캐시가 삭제됩니다. 만약에 브라우저 캐시가 삭제되지 않았다면 기간을 변경해서 해보시기 바랍니다. 개발자 도구에서 캐시 삭제하기 웹 사이트의 소스 코드에서 브라우저에 데이터를 ..

명세 기반 테스트란 요구사항 정의서, 설계서와 같은 명세서를 바탕하며, 테스트 케이스를 도출 및 실행하여 결함이 없는 것을 보장하는 기법입니다. 다음과 같이 5가지 방법으로 테스트 케이스를 작성할 수 있습니다. 1 동등 분할 명세 기반 테스트 대상의 데이터 구간을 일정 간격으로 분할하여 테스트 케이스를 구성하는 방법입니다. 보통 데이터의 구간의 중간값을 대푯값으로 사용합니다. 2 경곗값 분석 명세 기반 테스트 대상의 데이터에서 반복 구문의 경곗값을 기준으로 케이스를 구성하는 방법입니다. 예를 들어 최솟값, 최솟값 + 1, 중간값, 최댓값, 최댓값 - 1 의 값을 사용합니다. 3 결정 테이블 명세 기반 테스트 입력값과 결괏값을 테이블로 구성하여 테스트 케이스 및 절차를 구성하는 방법입니다. 애플리케이션 수..