담백한 웹 개발 이야기

기술 문서를 통해 다른 사람들과 지식이나 기술을 공유하려면 명확하고 도움이 되는 방식으로 작성해야 합니다. 기술 문서 작성할 때 도움이 될 만한 몇 가지를 정리해 봤습니다. 1. 목차 작성하기 글쓰기를 시작하기 전에 무엇을 전달하고 싶은지, 어떻게 전달하고 싶은지에 대한 명확한 준비가 있어야 합니다. 목차는 생각을 정리하고 내용을 계획하는 데 도움이 될 수 있습니다. 목차는 구체적이고 난이도가 낮은 것부터 높은 것 순으로 정렬하면 좋습니다. 2. 상세 목차 작성하기 기본 목차가 있으면 더 자세한 내용으로 살을 붙여야 합니다. 상세 목차는 글을 더 빠르고 효과적으로 작성하는 데 도움이 될 수 있습니다. 목차에서 각 섹션에서 다룰 내용을 간략하게 요약해서 상세 목차로 만드는 것이 좋습니다. 3. 내용 작성하..

회사에서 개발자와 같이 일을 할 때 대화가 어려웠던 경험이 있으셨나요? 개발자가 된지 얼마 안 됐을 때 그런 경험이 있었는데요. 그런 경험이 있으셨다면 서로 전문성이 다르기 때문에 그런 일이 생겼을 거라 생각합니다. 이 포스트에서는 대화가 잘 안되는 이유와 대처 방법에 대해서 정리해 봤습니다. 용어에 대해 이해하기 어려울 때 개발자와 비개발자는 기술 용어와 개념에 대한 이해 수준이 다르기 때문에 소통에서 오류가 발생할 수 있습니다. 이를 대처하기 위해서 서로가 이야기한 용어와 개념을 알도록 노력하고, 이해하지 못할 때는 질문하고 설명을 듣는 것이 좋은 방법입니다. 무언가 모호할 때 기능이나 서비스에 대한 설명이나 요청이 모호할 경우, 상대방은 작업의 일부를 추측해야 하며, 이로 인해 예상과 다른 결과를 ..

프런트엔드 개발자로서 UI에 대한 기본적인 용어를 알고 있어야 합니다. UI는 사용자와 상호작용하는 인터페이스를 의미하며, 다양한 요소들로 구성됩니다. 이번 글에서는 UI 요소의 상태, GNB와 LNB, 메인 배너 또는 히어로 배너, 드롭 다운 리스트, 모달과 팝업, 스낵바와 토글, 툴팁과 인풋 필드, 체크박스와 아코디언, 브레드 크럼에 대해 간단히 설명하겠습니다. UI 요소의 상태 UI 요소의 상태는 UI 요소들이 사용자의 입력에 따라 변화하는 것을 말합니다. 예를 들어, 버튼은 일반 상태에서는 회색이지만, 클릭하면 파란색으로 바뀌고, 비활성화되면 흐릿하게 보이는 등의 변화가 있습니다. UI 요소의 상태는 일반, 활성, 비활성, 포커스, 선택 등 다섯 가지의 상태 값을 가질 수 있습니다. GNB와 LN..

브라우저 캐시는 웹 사이트와 애플리케이션의 성능을 향상시키는 중요한 기술입니다. 브라우저 캐시는 이전에 가져온 리소스들을 재사용함으로써 네트워크 트래픽과 레이턴시를 줄여줍니다. 이 글에서는 브라우저 캐시의 개념과 종류, 캐싱 정책과 유효성 검사, 그리고 캐싱의 장단점에 대해 알아보겠습니다. 브라우저 캐시의 개념 브라우저 캐시는 웹 브라우저가 사용하는 사설 캐시입니다. 사설 캐시는 단일 사용자가 전용으로 사용하는 캐시로, 사용자의 컴퓨터나 모바일 기기에 저장됩니다. 브라우저 캐시는 사용자가 방문한 웹 페이지의 리소스들을 저장하고, 다시 방문할 때 재사용합니다. 예를 들어, 이미지, 스타일 시트, 자바스크립트 파일 등이 브라우저 캐시에 저장될 수 있습니다. 이렇게 하면, 네트워크 요청을 줄이고 리소스를 보여..

웹 개발을 하시는 분들이라면 Proxy, Reverse Proxy, Load Balancer 라는 용어를 들어보셨을 것입니다. 하지만 이들이 무엇을 의미하고 어떤 기능을 하는지 정확하게 알고 계신가요? 저는 이번 글에서 이 세 가지 개념에 대해 쉽고 간단하게 설명해드리고자 합니다. 그리고 이들이 어떤 장점과 단점을 가지고 있으며 어떤 상황에서 사용하면 좋은지도 함께 알아보겠습니다. 이 글을 읽고 나면 Proxy, Reverse Proxy, Load Balancer 의 차이를 명확하게 파악하실 수 있을 것입니다. Proxy 란 무엇인가? Proxy 는 사용자와 인터넷 사이에 위치하여 중개자 역할을 하는 것입니다. Proxy 를 사용하면 사용자의 실제 IP 주소를 숨기고 Proxy 서버의 IP 주소를 통해 ..

해당 도서 출판 이전에 인사이트 출판사에서 도서를 지원받아 작성한 리뷰입니다. 출처 『오늘날 우리는 컴퓨터라 부른다』| 마틴 데이비스 저/박상민 역 | 인사이트(insight) | 2023년 08월 25일 ​ 한 줄 리뷰 인물들이 살고 있는 시대적인 상황과 인물들이 발견한 논리학과 수학을 상세하게 정리한 도서 ​ 요약 이 책은 현대 컴퓨터의 근간을 이루는 아이디어를 발견한 사람들의 이야기를 다룬다. 300년 전으로 거슬러 올라가 라이프니츠, 불, 프레게, 칸토어, 힐베르트, 괴델, 튜링의 태생과 업적에 대한 자세한 역사를 엿볼 수 있다. ​ 그리고 범용 컴퓨터의 기반이 된 폰 노이만과 튜링을 다룬다. 폰 노이만은 18,000개의 진공관으로 구성된 애니악에 기여했으며, 복잡한 수리 계산을 수없이 반복하는 ..

User-Agent의 문제점 User-Agent는 브라우저를 구분할 때 사용하곤 합니다. 하지만 아래와 같이 Chromium 기반 브라우저에서 window.navigator.userAgent로 User-Agent를 조회하면 동일한 문자열을 볼 수 있습니다. // Chrome Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36 // Opera Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 OPR/38.0.2220.41 // Edg..

들어가며: 개발자가 이야기하는 비용이란? 간혹 협업할 때 "이것은 비용이 많이 드는 작업이다", "이렇게 하면 비용을 절약할 수 있다" 등 비용에 대한 이야기를 할 때가 있다. 여기서 비용은 개발자의 시간 사용을 의미하는데, 애플리케이션 개발에서 많이 발생되는 비용 중 하나가 개발자 인건비라 이런 식으로 비용 이야기를 하곤 한다. 개발자의 인건비는 경우에 따라 하루에 20만원 정도로 산정되고 하루에 8시간 근무로 봤을 때 1시간당 2만 5천원이다. 30분 정도 비효율적인 업무로 인해 낭비하면 1만 2천 5백원 정도 손해 보는 것이다. 월급을 받는 입장이지만 시간을 돈으로 환산하니 함부로 사용하는 게 아까워서 최대한 효율적으로 업무를 하려고 노력했었다. Note: 사실상 기업에서 개발자에게 사용되는 비용은..

서론 이 글은 TypeScript와 Swagger를 사용하는 프로젝트 사례를 소개합니다. REST API를 사용하기 전에 Swagger 문서를 보고 DTO 파일을 정의하곤 합니다. 수동으로 DTO 파일을 작성 가능하지만 오픈 소스를 활용해서 자동화하면 별도로 코딩 룰을 정의할 필요 없고, DTO가 변경되었을 때 쉽게 변경할 수 있습니다. 이 글을 통해서 Swagger 문서에 정의된 DTO를 자동으로 생성하는 방법과 큰 규모 프로젝트에서 개발 생산성을 위해 라우팅 파일을 번들링 하는 방법을 소개합니다. Swagger 문서에 정의된 DTO 자동 생성 Swagger 문서의 DTO는 swagger-typescript-api 를 사용하면 자동으로 프로젝트의 TypeScript 파일로 생성할 수 있습니다. 도입 초..

스케줄링이란? 메인 스레드는 자바스크립트 실행 이외 렌더링, 네트워트 응답, GC 등 다양한 역할을 수행합니다. 메인 스레드에 많은 작업들이 예약되면 웹 사이트의 성능과 사용성 경험이 저하됩니다. 그러므로 스케줄링을 통해 우선순위가 다른 작업을 효율적으로 등록하고 제어합니다. 브라우저 지원 범위 지원 브라우저: Chrome / Edge / Opera 미지원 브라우저: Firefox / Safari Browser compatibility Native Scheduling API가 필요한 이유? 1. 메인 스레드에서 협력하는 행위자들 간의 조정 애플리케이션은 1st-party, 1st-party 라이브러리, 3rd-party 라이브러리 및 프레임워크 스크립트로 구성될 수 있습니다. 동시에 브라우저는 fetch..

소프트웨어에서 버전은 배포된 시점을 기록하는 것이다. 배포된 시점을 알 수 있으면 서비스 장애 해결에 용이할 뿐만 아니라 소프트웨어의 의존성을 파악하기 쉽다. 프로젝트에 따라서 두 가지 방법으로 버전 기록했는데, 그 경험을 공유하고자 한다. 날짜로 버전 사용 현재는 종료된 카카오 영화예매 서비스를 담당할 때 버전은 날짜를 사용했다. YYYYMMDD 형식을 사용했는데, 예를 들어 20230101처럼 연월일을 모두 기입하는 방식이다. 이 방식을 활용하면 언제 배포했는지 쉽게 파악할 수 있다. 배포 시점에 따라 장애가 발생하기도 하기 때문에 시점을 알고 싶을 때 유용하다. 서비스는 여러 개의 서버 장비에 배포가 되기 때문에 간혹 배포 이슈로 특정 서버 장비에 배포가 안되는 경우가 있다. 이 경우에는 Sentr..

전 직장에서 web3 관련 커뮤니티 서비스를 담당했었다. 사용자가 프로필 이미지를 NFT로 설정하면 육각형으로 표현해 줘야 하는 데, 처음에는 모양을 자유롭게 다룰 수 있는 SVG를 활용했었다. 하지만 iPhone에서 웹 뷰어의 프로세싱이 많아지면 SVG는 네모 박스로 표현되는 이슈가 있어서 CSS Mask 기능을 활용해서 해결했다. 이 글에서는 SVG와 CSS Mask를 활용해서 육각형 프로필을 만드는 방법을 소개한다. 이 기능들을 활용하면 다른 모양으로도 가능하다. SVG로 육각형 프로필 만들기 1. path 태그로 육각형 모양 만들기 2. image 태그로 프로필 이미지 사용 3. clipPath로 path 바깥 영역 자르기 CSS Mask로 육각형 프로필 만들기 1. img 태그로 프로필 이미지를..