Curt Poem about Computer

개발자들에겐 없어서는 안될 서비스 중 하나인 GitHub를 얼마나 잘 활용하고 있으신가요? 단순 Git의 원격 저장소로써 팀원들의 코드를 한 곳에 합쳐두는 용도로만 사용하고 있나요? 토이 프로젝트를 팀 단위로 수행할 때 GitHub를 조금 더 똑똑하게 활용하는 방법을 소개해 보겠습니다. (대부분 이미 알고 있을)현직자 분들보단 취업 준비를 하며 프로젝트를 진행하는 분들에게 도움이 되었으면 좋겠습니다.Pull Requests의 병합 방식 정하기토이 프로젝트라도 Git을 더 많이 활용해 보겠다는 생각을 가졌다면 기능별/작업 유형 별 브랜치를 나누어 개발을 한 뒤, 최종적으로 main브랜치에 코드를 합칠 것입니다. 이를 위해 커밋 메시지 규칙도 정하고 브랜치 이름 규칙도 정하겠죠. 하지만 (Git이 아닌) G..

같은 줄에 로그 출력 갱신하기터미널에서 npm 패키지를 설치할 때 진행률(%)이 같은 줄에서 갱신되는 것을 본 적이 있을 것입니다. 이러한 방식은 진행률 표시, 로딩 상태 출력 등 실시간 정보를 효율적으로 전달하는 데 유용합니다.하지만 자바스크립트의 console 함수들은 기본적으로 줄바꿈이 포함되어 있으며 이전 줄을 갱신하는 방법도 없습니다. 과연 어떤 방식으로 이런 출력을 구현한 것일까요? Node.js에서는 console.log 대신 process.stdout.write()를 사용하여 같은 줄에 출력을 덮어쓸 수 있습니다. 이를 위해 캐리지 리턴 문자(\r)를 활용하여 커서를 줄의 시작으로 이동한 후 새로운 내용을 출력하면 됩니다.예제 코드const total = 100;let count = 0;c..

많은 개발자들의 성능 개선을 위해 자바스크립트의 코드를 개선하는 데 집중합니다. 하지만 웹 페이지의 성능에는 자바스크립트 뿐만 아니라 HTML, CSS, 파일의 크기, 네트워크 등 다양한 요소가 영향을 미칩니다. 물론 자바스크립트의 성능에 끼치는 영향이 다른 요소에 비해 큰 경우가 많지만 CSS 또한 분명히 성능에 영향을 끼칩니다. 오늘은 자바스크립트를 제외한 웹 성능을 개선할 때 신경 쓸만한 요소를 살펴보겠습니다.HTML 구조Dom의 깊이HTML 문서의 DOM(Document Object Model) 구조가 복잡하고 깊이가 깊을수록 브라우저가 문서를 렌더링하는 데 더 많은 시간을 소요하게 됩니다. 단순히 DOM에 포함된 HTML 요소의 개수도 영향을 끼치지만 그보다는 어떻게 배치되어 있는 지가 더 큰 ..

Git을 사용한다면 add, commit, push, status는 당연히 사용해 보았을 겁니다. 더불어 branch, checkout 및 remote와 같은 기본적인 명령어까지는 한번쯤은 사용하게 되는 명령어입니다. 그렇지만 git에는 다른 명령어가 많습니다. 오늘은 개발하면서 한 번쯤은 편리하게 써먹게 될 git 명령어 몇 가지를 소개하겠습니다.commit --amend이미 완료된 커밋을 수정할 때 사용합니다. 커밋 메세지를 수정하거나 커밋에 수정사항을 추가하고 싶을 때 사용합니다. 예를 들어 커밋 메세지에 오타가 있거나, 실수로 같이 커밋해야될 파일을 add하지 못했을 경우에 사용하면 유용합니다. 다만 이미 원격 레포지토리(giHub, giLab)에 푸시한 내역을 수정하려면 강제로 푸시하여야 되기 ..

웹 개발에서 문자열을 처리하는 작업은 필수적입니다. 아이디를 입력할 때 입력 가능한 문자를 알파벳과 숫자로 제한하는 등, 문자열을 검사하고 처리하는 일은 쉽게 마주치는 일입니다. 이러한 검사를 수행하기 위해 문자열을 직접 다루려고 하면 코드는 금방 불어나 복잡해집니다. 대신 "정규 표현식"을 이용한다면, 더 간단하게 문자열을 처리할 수 있습니다. 정규 표현식은 구글이나 네이버같은 검색엔진, 워드 프로세서같은 텍스트 편집 소프트웨어에서도 쉽게 만날 수 있습니다. 구글과 네이버의 +, - 등 특수문자를 사용하여 검색을 필터링할 수 있는 것처럼 정규 표현식을 사용하면 문자열에 조건을 걸어줄 수 있습니다.정규 표현식정규 표현식은 대상 텍스트가 준수해야 하는 "패턴"을 패턴하기 위한 문법을 의미합니다. 이런 패턴..

TDD란?TDD는 테스트 중심 개발(Test Driven Development)의 약자로, 개발 과정에서 테스트를 먼저 작성하는 방법론입니다. 짧은 개발 주기(보통 몇 분에서 몇 시간)의 반복에 의존하며, 동작하는 코드를 작성하기 이전에 테스트를 먼저 작성하고, 그 테스트를 통과하는 코드를 작성함으로써 테스트된 동작하는 코드를 얻는 방식으로 진행되죠.TDD는 위 그림에 나와 있듯 세 가지 단계를 한 사이클로 돌게 됩니다. RED 단계에서는 '실패하는 테스트 코드’를 먼저 작성합니다. '실패하는 테스트 코드'란 최종적으로 코드가 수행해야될 동작을 의미합니다. 아직 동작하는 코드가 없으니 해당 테스트는 실패할 수 밖에 없습니다. 한 사이클의 목표는 이 테스트가 통과되도록 하는 것이죠. Green 단계에서는 ..

기존의 기능 분할 설계(Feature-Sliced Design, FSD) 아키텍처FSD는 다형성(polymorphism), 캡슐화(encapsulation), 상속(inheritance) 및 추상화(abstraction) 와 같은 개념을 프런트엔드에 적용하는 데 도움을 줍니다.추상화, 다형성, 상속FSD 아키텍처는 Layers, Slices, Segments의 3 계층으로 이루어져 있습니다. 낮은 레이어는 더 추상화 되어있기(추상화) 때문에 더 높은 레이어에서 재사용될 수 있으며(상속), 특정한 매개변수나 속성에 따라 컴포넌트나 기능이 다르게 작동(다형성)할 수 있습니다.Layers레이어는 최상위 디렉토리로 프로젝트의 파일이 분류되는 첫번째 단계입니다. 레이어는 책임의 범위에 따라 나누어집니다. 레이어는..

웹사이트의 성능은 여러 가지 요소를 이용해 평가할 수 있습니다. 웹사이트의 성능을 개선하기 위한 한 가지 방법으로는 HTML이나 JavaScript 파일의 크기를 줄여 전송 시간을 줄이는 것입니다. 파일의 크기가 작을 수록 파일을 빨리 받아오니 로딩 속도가 빨라지겠죠?실제로 이번에 진행한 프로젝트의 경우 몇몇 라이브러리들로 인해 크기가 상당히 커지게 되었습니다.vite를 이용해 build를 진행하면 코드의 크기가 나오게 되는데, 위의 사진과 같이 2,255.79 kb나 되는 JavaScript 파일로 빌드된 것을 알 수 있죠.코드 스플리팅SPA의 단점 중 하나는 초기 로딩 시간이 길다는 것입니다. SPA는 하나의 페이지로 구성된 웹 애플리케이션이기 때문에 첫 로딩 시에 페이지에서 사용하는 모든 파일을 서..

1. KEY의 특수 문자 문제 - signaturedoesnotmatch 아마존 Presinged URL을 발급하기 위해서는 권한을 인증받을 KEY가 필요합니다. 발급받은 KEY에 +, -, /, % 등의 특수 문자가 있다면 prsinged URL이 받아지지만 해당 URL로 요청을 보내면 400 에러와 함께 signaturedoesnotmatch라는 오류가 발생할 수 있습니다. 해당 문자가 없는 KEY를 발급 받을 때까지 재발급 받아 해결하였습니다. 2. 만료시간 - ExpiredToken 백서버에서 Presinged URL을 아마존 S3로 보내고 받을 URL로 즉시 사진을 업로드 하였음에도 불구하고 계속 만료 시간이라는 메세지를 받았습니다. 만료 시간을 현재 UTC를 기준으로 15분을 추가하였기 때문에..