전체 글29 Git 명령어 모음 1. Git 설정 (Config)Git을 처음 설치하면 내가 누구인지 알려줘야 합니다.커밋에는 작성자의 이름과 이메일이 기록되므로, Git이 이를 알 수 있도록 설정하는 과정이다.전역 사용자명 등록git config --global user.name "Your Name"전역 이메일 등록git config --global user.email "you@example.com"저장소별 사용자명 등록git config user.name "Your Name"저장소별 이메일 등록git config user.email "you@example.com"전역 설정 조회git config --global --list현재 저장소 설정 조회git config --list특정 설정 조회git config user.name기본 브랜.. 2026. 7. 6. CSRF(Cross-Site Request Forgery)란? 웹 서비스를 이용하다 보면 로그인한 상태에서 게시글을 작성하거나, 비밀번호를 변경하거나, 계좌 이체를 하는 등 다양한 요청을 보내게 된다.그런데 만약 사용자가 로그인한 상태라는 점을 악용해, 본인이 의도하지 않은 요청이 서버로 전송된다면 어떻게 될까?예를 들어 은행 사이트에 로그인한 상태에서 다른 악성 사이트를 방문했는데, 그 사이트가 몰래 송금 요청을 보낸다면 사용자는 아무것도 하지 않았는데도 돈이 이체될 수도 있다.이러한 공격을 CSRF(Cross-Site Request Forgery)라고 한다.CSRF란?CSRF(Cross-Site Request Forgery)는 사이트 간 요청 위조(Cross-Site Request Forgery) 공격으로,사용자가 이미 로그인한 상태라는 점을 악용하여 사용자가 .. 2026. 7. 2. XSS(Cross-Site Scripting)란? 웹 서비스를 이용하다 보면 게시글이나 댓글을 작성하는 기능이 있다.예를 들어 게시판에 글을 작성한다고 가정해 보자.일반적인 사용자는 다음과 같이 글을 작성한다.안녕하세요.오늘 날씨가 정말 좋네요.하지만 악의적인 사용자는 글 대신 다음과 같은 JavaScript 코드를 입력할 수도 있다.만약 서버가 이 내용을 아무런 검증 없이 그대로 저장하고, 다른 사용자가 게시글을 열었을 때 HTML 그대로 화면에 출력한다면 어떻게 될까?브라우저는 브라우저는 이를 단순한 문자열이 아니라 HTML 문서의 일부로 해석한다.결과적으로 화면에는 안녕하세요. 가 만들어지고, 다른 사용자가 해당 게시글을 열면 브라우저는 이 스크립트를 실행하게 된다.공격자는 사용자의 쿠키나 민감한 정보를 자신의 서버로 전송할 수도 있다.실제 서.. 2026. 7. 1. 웹 보안 기초 - CORS 쉽게 이해하기 CORS(Cross-Origin Resource Sharing)란?CORS(Cross-Origin Resource Sharing)는*서로 다른 출처(Origin) 간의 리소스 공유를 안전하게 허용하기 위한 브라우저의 보안 메커니즘이다.CORS가 필요한 이유웹 브라우저에서는 여러 사이트를 자유롭게 방문할 수 있다. 하지만 이러한 특성 때문에 악성 사이트가 사용자의 브라우저를 이용해 다른 사이트에 요청을 보내는 보안 문제가 발생할 수 있다예를 들어 우리가 인터넷 뱅킹 사이트에 로그인한 상태에서 악성 사이트를 방문했다고 가정해 보자.만약 브라우저에 아무런 제한이 없다면 악성 사이트는 다음과 같은 요청을 보낼 수도 있다.fetch("https://bank.com/api/transfer", { method: ".. 2026. 7. 1. Local Storage, Session Storage, Cookie 사용 용도와 차이점 정리 웹 서비스를 사용하다 보면 로그인 상태가 유지되거나, 다크 모드 설정이 저장되거나, 장바구니에 담은 상품이 그대로 남아있는 경우가 있다.이러한 기능은 브라우저가 데이터를 저장하기 때문에 가능하다.브라우저에서 데이터를 저장하는 대표적인 방법은 Local Storage, Session Storage, Cookie세가지가 있다.비슷해 보이지만 저장되는 위치와 사용 목적이 모두 다르기 때문에 상황에 맞게 사용하는 것이 중요하다.이번 글에서는 각각이 왜 필요한지부터 사용 방법, 차이점, 실무에서는 언제 사용하는지까지 알아보자.브라우저엔 왜 데이터를 저장할까?웹 페이지는 기본적으로 새로고침하거나 브라우저를 종료하면 JavaScript에서 관리하던 데이터가 모두 사라진다.예를 들어 사용자가 다크 모드를 선택했다고 가.. 2026. 7. 1. 나도할래 하네스 엔지니어링 처음 AI를 사용할 때는 프롬프트를 한 줄씩 입력하고 결과를 받는 것만으로도 충분했다.이후에는 프로젝트의 컨텍스트 파일을 함께 제공하고 원하는 방향을 설명하면 AI가 알아서 코드를 수정하는 수준까지 발전했고 지금은 에이전트(Agent)의 등장으로 AI가 프로젝트의 파일을 직접 읽고, 생성하고, 수정하는 단계에 이르렀다.하지만 에이전트가 프로젝트를 직접 탐색하고 수정하기 시작하면서 새로운 문제가 발생했다.이미 존재하는 컴포넌트를 새로 다시 만들거나, 필요한 설정 파일을 삭제하거나 기존코드를 무시하는 현상이 발생한 것이다.그리고 이 문제를 해결하기위해 규칙과 컨텍스트를 체계적으로 설계하고 관리하는 하네스 엔지니어링(Harness Engineering)이라는 용어가 나왔다.즉, AI에게 더 좋은 명령을 내리는.. 2026. 6. 24. Zustand Zustand란?Zustand는 React 애플리케이션에서 전역 상태(Global State)를 관리하기 위한 경량 상태 관리 라이브러리다. 독일어로 "상태(State)"라는 뜻을 가지고 있으며, Redux보다 훨씬 간단한 API와 적은 보일러플레이트 코드가 특징이다. 현재 React 커뮤니티에서는 가장 인기 있는 상태 관리 라이브러리 중 하나로 자리 잡았으며, 많은 신규 프로젝트에서 Redux 대신 Zustand를 선택하고 있다. 왜 Zustand가 등장했을까?React는 상태 관리를 위한 기본 기능을 제공한다.대표적으로:useState : 컴포넌트 내부 상태 관리useReducer : 복잡한 상태 변경 로직 관리Context API : 컴포넌트 간 상태 공유이러한 기능들은 작은 프로젝트에서는 충분하.. 2026. 6. 22. React Hook Form React Hook Form이란?React Hook Form은 React에서 폼(Form)의 상태와 검증을 효율적으로 관리하기 위한 라이브러리이다.회원가입, 로그인, 검색, 결제 정보 입력처럼 사용자의 입력을 받는 화면에서는 보통 다음과 같은 작업이 필요하다.입력값 관리입력값 검증에러 메시지 표시제출 처리폼 상태 관리React 기본 기능만 사용하면 이러한 코드를 직접 작성해야 한다.입력값마다 상태를 만들고 변경 이벤트를 처리해야 하기 때문에 폼이 복잡해질수록 코드가 증가한다.React Hook Form은 이러한 반복적인 폼 관리 로직을 줄여주는 라이브러리이다.React Hook Form 은 어떻게 폼 관리를 해줄까?1. React 상태 관리 코드 감소일반적인 React 방식에서는 입력값마다 useStat.. 2026. 6. 20. 이전 1 2 3 4 다음
