상추의 IT저장소

깃 리모트 변경 하기깃 레포지토리에 오타가 있어서 github에서 수정 후에 새로 레포지토리를 연결해줘야 했다. 현재 연결된 리포지토리 확인git remote -v 기존 리포지토리 remote 제거 git remote remove origin   새 리포지토리 remote 추가git remote add origin https://github.com/계정/리포지토리  결과 >>  출처 :https://gist.github.com/480/4681b67d2a906db8c6c1321cc678f05f

이벤트 리스너 & 이벤트 핸들러 이벤트 리스너와 이벤트 핸들러를 합쳐 이벤트 리스너 혹은 이벤트 핸들러라고 한다.하지만, 이를 정확하게 말하자면 이벤트 리스너에 등록된 콜백함수가 이벤트 핸들러이다.div.onClick(() => {});div.addEventListener('click', () => {}); 이벤트이벤트 속성 (이벤트 리스너)이벤트 핸들러clickaddEventListener(), onClick()function(){}  이벤트 핸들러의 호출 과정 1. 하위 요소에 이벤트 저나 캡쳐링2. 타깃요소에 이벤트 전달3. 상위 요소로 다시 이벤트 전파 버블링 이벤트 버블링 (Event Bubbling)- 특정 요소에서 이벤트가 발생됐을 때, 해당 이벤트가 상위 요소들로 전달되어 가는 특성을 말한..

1. 설정창 들어가기 '[파일] - [기본설정] - [설정]' 루트( 단축키 Ctrl+,  를 누르시면 더 간단히 들어갈 수 있다. )로 들어가면 설정창이 나온다. 2. windows 검색해서 Terminal > Integrated > Default Profile: Windows 찾기설정에 들어가서 windows라고 검색하면,Terminal > Integrated > Default Profile: Windows 라고 적혀져 있는 것을 찾을 수 있다 3. 원하는 터미널로 변경해주기cmd, powershell, git bash 등으로 변경이 가능하다.

gird에서의 gapgird 속성 사용 시 자식요소의 box의 여백(공간)을 주기 위한 속성의 값이다. gap과 margin의 차이는 무엇일까?margin : 엘리먼트 요소 이외외 것에도 여백이 생긴다.gap : 엘리먼트 요소에만(!!) 여백이 생긴다.(단, 인접요소가 없다면 적용되지 않는다.) margin을 활용한 여백 주기margin을 이용하여 여백을 주는 방법은 아래의 코드로 확인할 수 있다. .out_box{padding: 30px;}.box{display: flex;flex-wrap: wrap;width: 600px;font-size: 0;background: blue;margin: -10px}.in_b..

자바스크립트에서 length 속성은 다음과 같은 세가지 용도로 사용된다.1. 문자열의 길이를 반환2. 배열의 길이를 반환3. 유사 배열 객체의 길이를 반환 1. 문자열의 길이를 반환 문자열에서 length 속성은 문자열에 포함된 문자의 개수를 반환한다.const greeting = "환영합니다. 반값습니다!";console.log(greeting.length); // 13const emptyStr = "";console.log(emptyStr.length); // 0 2. 배열의 길이를 반환배열에서 length 속성은 배열에 포함된 요소의 개수를 반환한다.const fruits = ["apple", "orange", "banana"];console.log(fruits.length); // 3const e..

SourceTree소스트리( SourceTree )는 GIT 사용을 도와주는 GUI 프로그램이다. - 버튼을 클릭하는 방식으로 필요한 명령을 실행 할 수 있도록 도와주기 때문에 편리하게 사용이 가능하다.- GIT의 핵심인 커밋( Commint ), 푸쉬( Push ), 브랜치( Branch )등을 눈으로 쉽게 확인 할 수 있어서 개념을 이해하는 데도 도움이 된다.  SourceTree설치SourceTree( https://www.sourcetreeapp.com ) 사이트에 접속하여 소스트리를 다운로드 받는다.[Dowload for Windows] 버튼을 클릭하면 팝업창이 하나 나타나는데Atlassian 소프트웨어 라이센스 계약 및 개인정보 보호 정책에 체크하고 [Download] 버튼을 클릭하여Sourc..

Merge란?작업 내용 합치기서로 다른 브랜치에서 작업을 했거나, 작업 내용을 합쳐야 하는 경우 merge를 해주면 됨 브랜치 상태 확인Checkout한 브랜치를 기준으로 —merged, —no-merged 옵션을 사용하여 merge가 된 브랜치인지 아닌지 필터링할 수 있다.git branch --merged git branch --no-merged  Merge 하기‘현재' 브랜치에서 [브랜치 명]의 변경사항을 병합예를 들어 master브랜치와 test 브랜치가 있다고 했을 경우, **git merge test**를 하게되면 test브랜치에만 있던 코드가 master브랜치에 병합된다. // master에 체크아웃 git checkout master // test브랜치의 코드를 master에 합침git m..

Rendering Environments어플리케이션 코드를 렌더링할 수 있는 환경에는 두 가지 환경이 있다. 바로 클라이언트와 서버이다.client어플리케이션 코드에 대한 요청을 서버로 보내는 유저 디바이스의 브라우저를 말한다.그런 다음 서버의 응답을 사용자가 상호 작용할 수 있는 인터페이스로 변환한다.server서버는 어플리케이션 코드를 저장하고, 클라이언트의 요청을 수신하고, 일부 computation을 수행한 후 적절한 응답을 보내는 data center의 컴퓨터를 말한다. Next.js - Server/Client ComponentReact 18 버전 이전까지는 React를 사용하여 어플리케이션을 렌더링하는 주요한 방법이 전적으로 클라이언트에 있었다.Next.js는 HTML을 생성하고 React에..

Commit Message 구조 type(타입) : title(제목)body(본문, 생략 가능)Resolves : #issueNo, ...(해결한 이슈 , 생략 가능)See also : #issueNo, ...(참고 이슈, 생략 가능) 기본 규칙제목과 본문을 빈 행으로 구분제목은 영문 기준 50글자 이하첫 글자는 대문자로 작성제목 끝에 마침표X제목은 명령문으로 사용, 과거형X본문의 각 행은 영문 기준 72글자 이하어떻게 보다는 무엇과 왜TypeType 키워드사용 시점feat새로운 기능 추가fix버그 수정docs문서 수정style코드 스타일 변경 (코드 포매팅, 세미콜론 누락 등)기능 수정이 없는 경우design사용자 UI 디자인 변경 (CSS 등)test테스트 코드, 리팩토링 테스트 코드 추가refact..

stash작업중에 갑작스럽게 다른 작업을 진행해야 할 때, 작업중인 사항을 잠시 치워두고 임시저장하는 방법이다.stash를 사용해서 잠시 코드를 다른곳에 보관한 후에, 내가 원하는 branch에 적용할 수 있다.git stash로 변화 다른곳에 담기git stashgit stash를 통해서 현재 적용된 commit이후로 변경된 모든 사항들이 stash 공간으로 임시저장된다. stash한 변경사항 다시 적용하기git stash pop 다른 브랜치의 commit에 stash로 따로 저장해둔 코드들을 적용한다.원하는 것만 stash 하기git stash -p -p 옵션을 통해서 hunk를 기준으로 변경사항을 하나씩 확인하며 원하는 변화만 stash에 담을 수 있다. 메시지와 함께 스태시 적용하기git stas..