본문 바로가기

Development

(18)
Git Reflog와 문제 해결: 실수 복구하기 Git은 강력한 버전 관리 도구이지만, 작업 중 실수나 예기치 않은 문제가 발생하면 당황하기 쉽다.이때 Git Reflog와 함께 다양한 문제 해결 방법을 알고 있다면,어떤 상황에서도 Git을 유연하게 활용할 수 있다.이번 글에서는 Git Reflog의 개념과 활용법, 그리고 실수로 인한 다양한 문제를 해결하는 방법을 소개한다.1. Git Reflog란? 🔍Git Reflog(Reference Log)는 Git에서 브랜치나 HEAD가 이동한 모든 기록을 추적하는 도구다.브랜치 이동, 커밋 변경, Reset, Rebase 등 모든 Git 작업의 로그를 볼 수 있다.실수로 브랜치를 삭제하거나, 이전 상태로 돌아가야 할 때 유용하다.Reflog의 주요 특징모든 작업 이력 추적커밋, Reset, Merge, ..
Git Stash와 Reset/Checkout의 차이점: 혼란 끝내기 Git을 사용하다 보면, 작업 중인 코드를 임시로 저장하거나, 잘못된 커밋을 되돌리거나, 특정 파일을 이전 상태로 되돌려야 하는 상황이 발생한다.이때 Git Stash, Reset, Checkout은 매우 유용한 도구지만, 처음 접하는 사람들에게는 헷갈리기 쉬운 개념이다.이번 포스팅에서는 이 세 가지 기능을 명확히 비교하고, 언제 어떤 도구를 사용하는 것이 적합한지 쉽고 간결하게 정리해 보았다.1. Git Stash: 작업 저장소 🧳Git Stash는 현재 작업 중인 변경 사항을 임시로 저장하고, 작업 디렉토리를 깨끗하게 비울 수 있도록 도와주는 기능이다.이후 필요할 때 언제든 저장된 상태를 복원할 수 있다.주요 특징작업 저장 및 복원: 변경 내용을 임시 저장해, 다른 작업을 시작할 수 있다.현재 브랜..
Git Rebase와 Cherry-Pick: 버전 관리 테크닉 Git의 기본적인 기능에 익숙해졌다면, 이제 Rebase와 Cherry-Pick 같은 고급 기능을 활용해 버전 관리를 더 정교하게 할 수 있다.이 글에서는 Rebase로 깔끔한 커밋 히스토리 만들기와 Cherry-Pick으로 필요한 커밋만 선택적으로 가져오기를 상세히 다룬다.Rebase란? 🔄Rebase(리베이스)는 브랜치의 변경 사항을 다른 브랜치 위로 재배치하는 작업이다.쉽게 말해, 마치 브랜치의 타임라인을 새롭게 정리하는 것과 같다.Rebase의 주요 목적커밋 히스토리 정리: 병합(Merge)보다 간결한 히스토리 제공.병합 충돌 줄이기: 브랜치를 자주 리베이스해 충돌을 미리 방지.Rebase 사용법 🌱기본 Rebasegit checkout featuregit rebase mainfeature/l..
Git 브랜치 가이드: 만드는 법, 병합, 풀(Pull)까지 브랜치(Branch)는 Git에서 독립적인 작업 공간을 만드는 기능이다. 새 기능 개발, 버그 수정, 실험적인 코드를 작성할 때도 기존 작업에 영향을 주지 않고 안전하게 진행할 수 있다. 이 글에서는 브랜치의 개념부터, 만드는 법, 병합(Merge), 그리고 Pull까지 초보자도 쉽게 따라 할 수 있도록 설명한다.브랜치란? 🌿브랜치는 Git 프로젝트에서 작업의 흐름을 나눠주는 역할을 한다. 기본적으로 Git은 main 브랜치(예전엔 master)에서 시작한다. 새로운 기능을 개발하거나 버그를 수정할 때는 새로운 브랜치를 생성해 작업하고, 완료 후 병합(Merge)하면 된다.브랜치 만드는 법 🌱브랜치 생성git branch 브랜치명브랜치 이동(체크아웃)git checkout 브랜치명브랜치 생성과 동..
Git이란 무엇인가? 초짜를 위한 설명 - 개요 Git은 소스 제어 도구 중에서 가장 널리 사용되는 대표적인 도구다. 개발자라면 누구나 한 번쯤 들어봤을 이름일 것이다. Git은 코드의 변경 사항을 추적하고, 여러 사람이 협업하면서 생기는 문제를 해결할 수 있는 강력한 도구다.이번 포스팅에서는 Git을 처음 접하는 분들을 위해 아주 기초적인 사용법과 개념을 쉽게 설명하려고 한다. 나도 Git을 처음 접했을 때는 단순히 “코드 공유 서비스” 정도로만 알았고, 명령어를 쓰는 것도 꽤 어려웠던 기억이 난다.하지만 Git은 단순한 코드 공유 툴이 아니라, 강력한 버전 관리 도구다. 제대로 이해하고 쓰면 협업 과정에서 발생하는 수많은 문제를 깔끔하게 해결할 수 있다. 이번 포스팅에서는 초보자가 꼭 알아야 할 Git의 기본 개념과 명령어에 대해 다룬다.Git은 ..
나의 마크다운 블로그 포스트 작성 루틴 블로그 포스트를 작성할 때, 글의 구조와 가독성, 강조 효과 등을 적절히 표현하기 위해 Markdown을 활용한다. 키보드만으로 빠르게 콘텐츠를 구성할 수 있어 효율적이며, 작성한 글을 블로그에 복사해 붙여 넣었을 때 웹에서도 동일하게 볼 수 있는 장점이 있다. 여러 종류의 에디터 중 Typora를 선택한 이유와 이미지를 다루는 방법, 강조 스타일, 마크다운 다이어그램 등을 다루는 과정을 소개한다.마크다운 작성과 에디터 선택Notion은 개인적인 메모나 자료 정리에 탁월한 도구이지만, 블로그 포스트 작성에서는 Typora를 선택하였다. Typora는 실시간 미리보기를 제공하며, 작성 즉시 최종 모습을 확인할 수 있다는 장점이 있다. 또한 사진 자료의 자동 업로드를 지원해 이미지 경로 문제를 최소화하며, ..
함수형 언어 F# 개요 F# 언어에 대한 소개F#는 함수형 프로그래밍 언어로, 특히 프로그래밍 언어를 다루는 작업에 매우 유용하다. 마이크로소프트가 개발한 F#는 .NET 플랫폼에서 실행되며, 다른 함수형 언어와 달리 생산성 높은 프로그래밍을 돕는 강력한 도구와 라이브러리를 제공한다. 다음에서는 F#의 주요 개념과 기본 문법을 소개하고, 이를 통해 F#이 제공하는 독특한 프로그래밍 방식과 장점을 살펴본다.F#의 특징과 환경함수형 프로그래밍 패러다임F#는 함수형 언어로, 명령형 프로그래밍이 아닌 표현 중심의 프로그래밍을 지향한다. 일반적인 명령형 언어(C/C++, Python 등)에서는 컴퓨터가 수행할 작업 순서를 명령하지만, F#는 수학적 표현과 같은 표현식을 통해 코드를 작성한다.예시: let x = 10 let y = ..
블로그 다크 모드 토글 스위치 만들기 이번 포스팅에서는 블로그에 다크 모드를 적용하고, 다크/라이트 모드를 전환할 수 있는 토글 스위치를 만드는 방법을 알아보자.특히, 사용자 기기의 기본 모드 설정을 우선으로 하고, 이후 사용자가 설정한 다크 모드 선택을 저장하여 브라우저에 기록하는 기능도 포함시킨다.다크 모드 기본 설정 및 Font Awesome 아이콘 불러오기먼저 다크 모드 구현을 위해 필요한 설정을 적용하고, 토글 스위치 아이콘에 사용할 Font Awesome 아이콘을 불러오자. 아이콘을 추가하기 위해서는 Font Awesome의 CDN 링크를 추가해야 한다. 이번에는 `fa-sun`과 `fa-moon` 아이콘을 사용할 것이다.Font Awesome CDN 추가Font Awesome을 통해 태양과 달 모양의 아이콘을 사용하면 사용자가 ..
티스토리에서 백틱(`)으로 인라인 코드 블록 표시하기 블로그를 작성할 때 코드 스니펫을 공유하는 일이 빈번하다. 특히 인라인 코드 블록은 문장 중간에 코드를 강조하기 위해 사용되는데, Notion 등 사용이 익숙하면 백틱(`)으로 간단하게 인라인 코드를 표시할 수 있다. 그렇다면 티스토리(Tistory)나 다른 블로그 플랫폼에서도 동일하게 구현할 수 있을까? 이번 포스트에서는 백틱을 사용하여 인라인 코드 블록을 쉽게 표시하는 방법을 소개해 본다.1. 문제 상황티스토리에서는 기본적으로 백틱을 사용하여 인라인 코드를 표시하는 기능을 제공하지 않는다. 따라서 블로그 포스트 작성 시 `이와 같은` 인라인 코드 강조를 위해 매번 태그를 직접 입력해야 하는 불편함이 있다.2. 해결 방법백틱을 사용하여 인라인 코드를 쉽게 표시하기 위해 JavaScript를 활용할 수 ..
React JS API Key(키) 숨기기 1. 문제 인식 앞선 포스트에서 create-react-app으로 미세먼지 정보 OpenAPI를 받아오는 React Application을 제작하는 과정을 소개했었다. 이러한 API에서 데이터를 받아오는 기능을 구현하는 React Application을 제작할 때는 API Key가 노출되지 않도록 하는 것이 중요하다. GitHub public repository에 올리거나 배포할 경우 API Key가 다른 사용자에 의해 악용될 우려가 있기 때문이다. 실제로 필자도 아무 생각 없이 GitHub Public Repositiry에 API Key가 포함된 코드를 올렸다가 바로 이런 이메일을 받았다. GitGuardian은 GitHub에서 다체적으로 운영하는 서비스도 아니고 가입한 적도 없는데.. 뭐지 GItHu..
React JS 공공데이터포털 미세먼지 API (한국환경공단 대기오염정보)이용하기 1. React Application 생성 위와 같이 dust-react라는 React Application를 생성한다. 참고로 create-react-app은 node 5.2.0 버전 이상부터 제공되는, 일회성 설치 옵션 npx를 사용하길 권장한다. 따라서 시작하기 전에 npm을 최신버전으로 설치하고, 위 스크립트를 실행한다. 생성된 dust-react 하위 디렉토리 안에서 작업을 진행한다. 2. 한국환경공단 에어코리아 OpenAPI 사용 OpenAPI는 공공데이터포털에서 제공하는, 한국환경공단_대기오염정보 API를 사용한다. 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 ..
Visual Studio Code Live Server 플러그인으로 웹 개발 쉽게 하자 HTML / CSS / JS 등으로 웹 개발을 할 때, 수정된 사항을 직접 확인하기 위해 VS Code에서 저장하고, 웹브라우저에서 새로고침하는 작업을 반복하는 경우가 많다.필자는 왼쪽에 에디터, 오른쪽에 브라우저를 띄워 놓고 작업하는데 계속해서 프로그램을 왔다갔다 하면서 조작하는 게 여간 귀찮은 일이 아니었다.이런 불편함을 해소해 줄 비주얼 스튜디오 코드의 플러그인을 소개한다. Live Server 플러그인은 Visual Studio Code 에디터에서 저장`(Ctrl + S || Cmd + S)`이 감지되면 자동으로 로컬 서버를 통해 웹브라우저에 수정사항을 반영해 보여준다.Visual Studio Code의 '확장' 탭에서 "Live Server"를 검색하여 설치한다. 설치된 후 확인할 html/ht..