본문 바로가기
깃 이슈로 협업하기 이 글은 아주 작은 팀 단위의 협업에서는 투머치한 협업 방식일 수 있다.그러나 팀 단위가 커지면 "기능"을 아주 세세하게 쪼개지고, 그 기능을 담당하는 사람이 이슈를 통해 기능을 제대로 정의시키고, 그 부분에 대한 브랜치를 판 이후, 코드를 추가하여 이슈를 닫음으로 동시에 브랜치까지 닫는 방식으로 프로덕트를 완성해 나아간다.AI 개요깃 이슈(GitHub Issue)를 사용하여 협업하려면, 먼저 이슈를 생성하여 작업 항목(버그, 기능 요청 등)을 정의하고 담당자를 할당합니다. 이후, 각 팀원은 이슈에 연결된 새 브랜치에서 작업을 수행하고, 코드 변경 내용을 풀 리퀘스트(Pull Request, PR)로 제출합니다. 리뷰어는 PR에서 코드를 검토한 후, PR이 병합되면 이슈가 자동으로 종료되도록 설정할 수.. 2025. 11. 12.
Mixed Content 오류란? Mixed Content 오류란?HTTPS로 로드된 웹페이지에서 HTTP 리소스(API, 이미지, 스크립트 등)를 요청할 때 발생하는 브라우저 보안 오류입니다.Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.example.com'. This request has been blocked; the content must be served over HTTPS.왜 차단될까?보안: HTTPS는 암호화된 연결, HTTP는 평문 연결중간자 공격 방지: HTTP 요청은 중간에 가로채기/변조 가능브라우저 정책: 모던 브라우저는 Mi.. 2025. 11. 5.
cors 에러는 무엇인가. CORS 오류(Cross-Origin Resource Sharing error)는 브라우저의 보안 기능인 동일 출처 정책(Same-Origin Policy)으로 인해, 다른 출처(origin)의 리소스를 요청할 때 발생하는 차단 현상을 말한다. 이 오류는 웹 애플리케이션에서 다른 도메인, 프로토콜, 포트의 서버로부터 데이터를 가져오려고 할 때 발생하며, 서버에서 Access-Control-Allow-Origin 헤더를 통해 허용된 출처를 명시하거나, 요청을 보내는 클라이언트에서 프록싱하는 등의 방식으로 해결할 수 있다. CORS 오류의 원인: 동일 출처 정책(SOP)기본 보안 메커니즘:웹 브라우저는 악의적인 웹사이트가 다른 웹사이트의 데이터를 무단으로 가져가지 못하도록 동일 출처 정책(SOP)을 따른.. 2025. 11. 5.
무중단 배포란? 무중단 배포(Zero-Downtime Deployment)는 서비스의 중단 없이 소프트웨어의 새로운 버전을 배포하는 전략을 의미합니다. 사용자는 배포 과정에서 서비스가 멈추는 것을 느끼지 못하며, 이는 사용자 경험 유지와 비즈니스 연속성 확보에 필수적입니다. 무중단 배포의 중요성고가용성 유지: 서비스 다운타임으로 인한 매출 손실 및 고객 불만을 방지합니다.리스크 감소: 새로운 버전의 배포가 기존 버전에 영향을 주지 않으므로, 문제가 발생했을 때 즉시 이전 버전으로 복구(롤백)할 수 있습니다.신속한 대응: 시장 변화에 맞춰 버그 수정, 보안 패치, 신규 기능 등을 더 빠르고 빈번하게 배포할 수 있습니다.신뢰도 향상: 중단 없는 서비스 제공은 기업의 신뢰도를 높이고, 경쟁력을 강화하는 데 기여합니다. 대표.. 2025. 10. 26.
CodeRabbit이 무엇인가? 일단 먼저, CodeRabbit의 공식 사이트 링크부터 공유하겠다.사이트 링크는 다음과 같다.https://www.coderabbit.ai/ AI Code Reviews | CodeRabbit | Try for FreeThe most advanced AI code reviews that catches 95%+ bugs. Free your devs to ship code faster.www.coderabbit.ai이 도구는 AI인데, "코드 리뷰"에 특화가 되어있다.IDE에 설치해서 각각의 코드에 리뷰도 할 수 있고, PR에서도 리뷰를 남겨준다.ai를 쓰기 때문에 속도도 빠르고 정확도도 높다.대신 이거는 2주 무료로만 무료로 쓸 수 있고, 그 다음부터는 돈을 주고 써야 한다.설치부터 세팅하는 거랑 사용이 .. 2025. 10. 24.
erb 확장자 prettier 설정하는 방법 erb에서 prettier 비스무리한 것을 적용할 수 있다. (코드 자동 포맷팅)방법은 다음과 같다.전역 설치gem install htmlbeautifiervs code의 터미널에서 위 명령어를 기입하라. 전역으로 설치된다.which htmlbeautifier이 명령어를 기입하면 위치를 알 수 있다.이후 vs code에 전역 설정을 세팅한다.전역 설정 방법 Cmd + Shift + P (Mac) 또는 Ctrl + Shift + P (Windows)"Preferences: Open User Settings (JSON)" 선택 ← 여기서 "User"가 전역.settings.json에 다음과 같은 코드를 추가하고 저장하면 된다. . . . . . . }, "[erb]": { "editor.de.. 2025. 10. 24.
vs code에서 상태 표시줄 복구 방법 되게 별 거 없는데, 하는 방법을 몰라서 약간의 억까(?)를 당했다.ai에게 물어봐서 해결 방법을 알아왔다. 기록용으로 티스토리에 써둔다.방법 — 커맨드 팔레트로 복구Cmd + Shift + P (Mac) 또는 Ctrl + Shift + P (Windows)“View: Toggle Status Bar Visibility” 검색해서 실행> 진짜 별거 없는데.. 상태 표시줄이 없으니깐 숨이 턱 막힌다... 휴 살았다 2025. 10. 23.
깃 stash이란 git stash는 아직 커밋하지 않은 변경사항을 임시로 저장하고 작업 디렉토리를 깨끗한 상태로 되돌리는 Git 명령어이다. git stash를 사용하면 다른 작업을 하다가 필요할 때 나중에 변경 사항을 다시 적용할 수 있다. 이 명령어는 여러 번 사용할 수 있으며, git stash list로 목록을 확인하고 git stash pop 또는 git stash apply 명령어로 저장한 내용을 다시 가져올 수 있다. 주요 git stash 명령어 >git stash: 또는 git stash push: 현재 작업 디렉토리의 변경 사항(스테이지드 및 언스테이지드 모두)을 스택에 저장하고, 작업 디렉토리를 마지막 커밋 상태로 되돌립니다. git stash list: 저장된 모든 스태시 목록을 보여줍니다. .. 2025. 10. 22.
토스에서 즐겨쓰는 yarn 공식 사이트는 다음 링크를 참고하자.https://yarnpkg.com/ Home page | YarnYarn, the modern JavaScript package manageryarnpkg.comYarn 이란?Yarn은 Javascript 패키지 매니저이다. 프로젝트 패키지 의존성을 관리하는 툴이며, 다른 개발자들과 패키지를 공유할 수 있도록 도와준다. (*third-party 모듈을 패키지라고 부른다.)Yarn은 npm과 마찬가지로 패키지의 저장소를 제공하며, 시스템에서 의존 패키지를 설치, 업데이트할 수 있도록 도와준다. package.json 파일을 통해 해당 프로젝트가 의존하고 있는 모든 패키지를 구분하고, package.json에 있는 dependencies 필드를 기반으로 패키지를 설치한다.. 2025. 10. 19.
문법이 아닌 사고방식의 전환이 만드는 진정한 선언적 코드 https://evan-moon.github.io/2025/09/07/declarative-programming-misconceptions-and-essence/ 선언적 프로그래밍에 대한 착각과 오해필자는 평소 기술 인터뷰를 진행하며 지원자 분들이 과제를 작성하면서 내렸던 의사결정에 대한 근거를 물어보는 경우가 잦다. 이때 이에 대한 근거로 “이런 방식이 보다 선언적이기 때문이다evan-moon.github.io(프론트에서의 선언적 프로그래밍에 대한 고찰을 다룬 글입니다. 되게 좋은 글이어서 기록해 둘 겸, 공유까지 합니다.)+ https://evan-moon.github.io/ Evans Library evan-moon.github.io 2025. 10. 17.
깃허브 bump이란 깃허브 "범프(Bump)"는 프로젝트의 버전 번호를 자동으로 업데이트하고, 변경 사항을 기록한 커밋 및 태그를 생성하며, GitHub에 릴리스를 만드는 일련의 자동화된 과정을 의미한다. 'bump'라는 단어 자체가 '치다', '밀어 올리다'라는 뜻을 가지고 있듯이, 프로젝트의 버전 번호를 '밀어 올리는(bump)' 작업에서 유래했다. 주요 기능 버전 업데이트 자동화: 프로젝트의 package.json 파일 등에서 버전 번호를 자동으로 업데이트합니다.변경 로그 생성: 새로운 버전의 변경 사항을 자동으로 기록하여 변경 로그(changelog)를 생성하고 업데이트합니다.커밋 및 태그 생성: 버전 업데이트를 위한 커밋을 만들고, 해당 커밋에 대한 Git 태그를 생성합니다.릴리스 생성: 생성된 태그를 기반으로.. 2025. 10. 4.
드래그 막아둔 블로그 뚫기 https://techchris.org/ko/%EB%84%A4%EC%9D%B4%EB%B2%84-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EB%B3%B5%EC%82%AC-%EB%B0%A9%EC%A7%80-%ED%95%B4%EC%A0%9C-%EA%B0%84%EB%8B%A8%ED%95%9C-%EB%B2%95/ 네이버 블로그 복사 방지 해제 간단한 법 | 테크리스네이버 블로그 복사 방지 해제 간단한 법 : 우선 F12 키를 눌러 개발자 도구를 실행합니다. 그 다음에 F1 키를 눌러 설정 창을 엽니다. 설정 창에서 Debugger 항목을 찾아 ...| 테크리스techchris.org(핵심은 개발자 도구 들어가서 자바스크립트 실행을 중지하는 것.) 2025. 10. 1.
프로그래머스 문제 풀이를 깃허브 레포지토리에 자동 연결하는 방법 프로그래머스에서 문제를 푼 것을 자동으로 내 깃허브 레포지토리에 연결시키는 방법이 있다.https://chromewebstore.google.com/detail/%EB%B0%B1%EC%A4%80%ED%97%88%EB%B8%8Cbaekjoonhub/ccammcjdkpgjmcpijpahlehmapgmphmk?utm_source=ext_app_menu 백준허브(BaekjoonHub) - Chrome 웹 스토어Automatically integrate your BOJ submissions to GitHubchromewebstore.google.com이 크롬 웹스토어 들어간다. 이후 설치를 하고, 깃허브에 연결하라고 뜨면, 그냥 연결 버튼 눌러주면 된다.이제 깃허브에 레포지토리 만들고, 그 레포지토리를 여기 사이.. 2025. 9. 22.
thymeleaf이 무엇인가 thymeleaf(타임리프)는 Java 기반의 서버사이드 템플릿 엔진으로, 웹 및 독립적인 환경 모두에서 HTML, XML 등 다양한 템플릿을 처리하여 동적인 웹 페이지를 생성한다. 서버에서 DB나 API에서 가져온 데이터를 템플릿에 넣어 완성된 HTML을 클라이언트에게 전달하는 서버 사이드 렌더링(SSR)을 지원하며, Spring Boot 환경에서 스프링 팀이 권장하는 템플릿 엔진이다. 주요 특징서버사이드 렌더링(SSR): 서버에서 데이터를 처리하여 최종 HTML을 생성하기 때문에 검색 엔진 최적화(SEO)에 유리하고 브라우저 호환성이 높습니다. 자연스러운 템플릿: Thymeleaf 문법이 포함된 HTML 파일을 브라우저에서 열어도 그 자체로 화면을 볼 수 있어, 개발 단계에서 디자인과 개발이 동시.. 2025. 9. 19.
프론트엔드에서의 CI/CD ci/cd 이야기를 들어본 적이 있다.근데 이건 큰 프로젝트들에서 쓰이기에, 따로 개인적으로 써본 적은 없다. 그래도 하는 방법이랑 개념 정도는 글로 남기는 것이 좋아 보여서 이렇게 글을 남겨본다. (루비온레일즈에서는 약간 찍먹 정도 해봄)CI/CD란?심플하게 말하자면, 배포까지의 과정을 효율적으로 만들어주는 과정이다.CI/CD는 코드 병합부터 테스트, 배포까지의 라이플사이클 전체에 걸쳐 자동화를 이루는 것이다.CI는 빌드 및 테스트를 자동화하는 것이며, CD는 배포를 자동화하는 것이다. (당연히 이 두 개는 묶음 세트이다.)관련 글https://comprogramming.tistory.com/82#%F0%9F%93%8C%20CI%20%3A%20%EB%B9%8C%EB%93%9C%20%EB%B0%8F%20.. 2025. 9. 18.
pnpm이 뭐지? pnpm은 "Performant npm"의 약자로, Node.js 환경에서 패키지를 빠르고 효율적으로 설치하고 관리하기 위한 고성능 패키지 매니저저이다. 저장 공간을 절약하고 설치 속도를 높이며, 기존 npm의 비효율적인 의존성 관리 문제를 개선한 것이 특징.pnpmhttps://pnpm.io/ko/installation 설치하기 | pnpm필수 구성 요소pnpm.io설치하는 방법은 여러 가지이다. OS 마다 설치하는 방법도 다르게 할 수 있다. 자세한 것은 위 공식 사이트를 참고하자. 명령어뿐 아니라 여러 좋은 정보들을 얻어갈 수 있다.설치 같은 경우에 잘 모르겠다면, AI에게 물어봐도 잘 알려준다!주요 특징 및 장점빠른 설치 속도: 패키지를 효율적으로 설치하여 전체적인 빌드 및 개발 속도를 향상시킵니.. 2025. 9. 17.
제대로 이해하는 RESTful - API API가 무엇일까REST - API를 배우기 전에 API가 무엇인지 다시 정리해보자 한다.https://codingworld2002.tistory.com/18 API가 뭘까?https://youtu.be/ckSdPNKM2pY?si=xS4cIt-5GQYixcyz 쉽게 말하자면 "메뉴판"이다.예를 들어 네이버라고 치자. 네이버에 날씨 부분이 있다. 네이버는 기상청의 API를 가져와서 화면에 띄울 것이다. 물론 하루마codingworld2002.tistory.com(정리해 둠)> 요약하자면, 결국 특정 규칙이 존재하는 "메뉴판"인 것이다. https://www.youtube.com/watch?v=fB3MB8TXNXM&t=26s(이 영상을 참고해서 정리했다. 고마워요 코딩사전!) RESTful - API는 A.. 2025. 9. 2.
HTTP 상태 코드(1XX ~ 5XX) 종류 총정리 http 상태 코드를 알아둔다면 데이터를 주고 받을 때에 "에러"의 원인을 바로 알아낼 수 있다.프론트이든 백이든 이건 CS 이니 꼭 알아두는 것이 좋다.(관련 글)https://inpa.tistory.com/entry/HTTP-%F0%9F%8C%90-%EC%83%81%ED%83%9C-%EC%BD%94%EB%93%9C-1XX-5XX-%EC%B4%9D%EC%A0%95%EB%A6%AC%ED%8C%90-%F0%9F%93%96 🌐 HTTP 상태 코드(1XX ~ 5XX) 종류 총정리HTTP Status Code HTTP의 상태 코드는 클라이언트가 보낸 HTTP 요청이 성공했는지 실패했는지를 서버에서 알려주는 숫자 코드다. 개발자 도구의 네트워크 탭을 보면 아래와 같이 Status 숫자 코드로 요청inpa.tis.. 2025. 9. 1.
깃의 스테이징 개념 Git 스테이징이란, 작업 중인 파일에서 커밋(commit)할 내용을 선택하여 '스테이징 영역(staging area)'이라는 임시 공간에 올려놓는 과정을 말한다. 이 과정을 통해 개발자는 어떤 변경 사항을 다음 커밋에 포함시킬지 명시적으로 지정할 수 있으며, git add 명령어를 사용해 스테이징 영역에 파일을 추가한다. 스테이징의 목적 및 과정 > 1. 변경 사항 선택:작업 디렉토리에서 여러 파일에 걸쳐 작업이 진행될 수 있습니다. 이 중에서 특정 파일이나 변경된 부분들만 커밋에 포함시키고 싶을 때 스테이징을 사용합니다. 2. git add 명령어:git add 명령어를 통해 특정 파일 또는 전체 변경 사항을 스테이징 영역에 추가할 수 있습니다. 3. 커밋 준비:스테이징 영역에 추가된 파일들은 .. 2025. 8. 27.
깃허브 메인 언어 설정하는 방법 https://doing7.tistory.com/53 [Github] 리포지토리 언어 변경Github Repository에 코드를 올리게 되면 자동으로 파일을 분석하여 언어별 비율을 알려준다. 이때 언어비율에 미치는 것은 파일의 갯수가 아닌 파일의 크기다. 즉, 큰 서브 코드 파일이 올라게되면doing7.tistory.com이 글을 참고하면 된다.명령어 >*.html linguist-detectable=false혹은*.html linguist-detectable=truelinguist-detectable=false or true 이 쪽은 고정이고, 앞에 *뒤에는 파일평을 기입해주면 된다.자세한 것은 글을 참고. 2025. 8. 16.

티스토리툴바