몽땅뚝딱 개발자

◽️ 기본개념 [HEAD] - 현재 브랜치를 기리키는 포인터이며 브랜치에 담긴 커밋 중 가장 마지막 커밋을 가리킨다. - 지금의 HEAD가 가리키는 커밋은 바로 다음 커밋의 부모가 된다. 단순하게 생각하면 HEAD는 현재 브랜치 마지막 커밋의 스냅샷이다. [Index] - 바로 다음에 커밋할 것들이다. (like Staging Area) - 다음에 커밋할 스냅샷이다. ◽️ 흐름 1. git init 일 때는 워킹 디렉토리에만 데이터가 있다. 2. git add하면 워킹디렉토리의 내용을 Index로 복사한다. 3. git commit 명령을 실행한다. 1) Index의 내용을 스냅샷으로 영구히 저장하고 2) 그 스냅샷을 가리키는 커밋 객체를 만든다. 3) master가 그 커밋 객체를 가리키도록 한다. =..

📄 예제 코드 expect를 사용해본다. import {expect} from "chai"; import {substringsBetween} from "../script/chapter2"; describe('chapter2', () => { it('T1: null', () => { expect(substringsBetween(null, 'a', 'b')) .to.equal(null) }) assert 단언문을 사용해본다. import {indexOf} from "../script/chapter5"; const assert = require('assert') describe('chapter5. 속성 기반 테스트 - 예제 3', () => { it('T1: array가 널인 경우', () => { asser..

📄 예제. const iterator = values[Symbol.iterator]() while (iterator.hasNext()) { console.log(iterator.next().value); out.push(iterator.next().value) } iterator는 지원하면서.. 왜 hasNext는 지원하지 않는건지..? 직접 구현해야하나보다....^_ ^ JavaScript - 이터레이터(iterator)와 for/of 문 모던 자바스크립트 입문(아소 히로시, 길벗, 2018)을 공부하고 정리한 내용입니다.이터레이션은 반복 처리라는 뜻으로 데이터 안의 요소를 연속적으로 꺼내는 행위를 말합니다.예를 들어 배열의 velog.io

1. 아래 플러그인을 설치한다. 2. UI에서 확인할 수 있고 검색도 할 수 있다. 자주 쓸 것만 정리해보면 아래와 같다. 아이콘 코드 설명 원문 🎨 :art: 코드의 구조/형태 개선 Improve structure / format of the code. ⚡️ :zap: 성능 개선 Improve performance. 🔥 :fire: 코드/파일 삭제 Remove code or files. 🐛 :bug: 버그 삭제 Fix a bug. ✨ :sparkles: 새 기능 Introduce new features. 📝 :memo: 문서 추가/수정 Add or update documentation. 💄 :lipstick: UI/스타일 파일 추가/수정 Add or update the UI and style files..

Git으로 일하다 보면 어떤 이유로든 로컬 커밋 히스토리를 수정해야 할 때가 있다. 1) 커밋의 순서 변경 2) 커밋한 파일 변경 3) 여러개의 커밋을 하나로 합치기 4) 하나의 커밋을 여러개로 분리하기 5) 커밋 전체 삭제 이 모든 것은 다른 사람과 코드를 공유하기 전에 이뤄져야 한다. ◽️ 마지막 커밋을 수정하기 1) 커밋 메시지를 수정하기 자동으로 텍스트 펀집기를 실행시켜 마지막 커밋 메시지를 열어준다. $ git commit --amend 2) 나중에 수정한 파일을 마지막 커밋안에 밀어넣기 // 1. add하여 Staging Area에 넣은 뒤 $ git add // 2. 아래 명령어로 커밋하면 커밋 자체가 수정되며 추가로 수정사항을 밀어넣을 수 있다. $ git commit --amend // ..

◽️ 블록 차단 리소스 HTML을 파싱할 때 CSS나 js를 만나게되면 HTML 파싱을 중단하고 해당 파일을 파싱하거나 다운로드 후 실행하게 되는데 이처럼 HTML 파싱을 차단하는 요소를 블록 차단 리소스라고 한다. HTML 파서는 인라인 스크립트 태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진에 제어 권한을 넘기고 스트립트 엔진이 모두 실행된 후에 DOM 생성을 재개한다. 이렇게 위치시킨다. 1) CSS는 ◽️ media 속성 CSS와 js에 media attribute로 단말기 유형에 따라 해당 CSS를 적용할지를 명시해주면 블로킹을 방지할 수 있다. media attribute는 연결된 HTML(리소스)이 최적화되는 미디어 또는 장치를 지정한다. Operators: and, not ..

◽️ 렌더링이란? 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 것이다. SSR과 CSR의 차이점은 표시해 줄 화면을 어디서, 어떻게 그리냐의 차이이다. ◽️ 클라이언트 사이드 렌더링(CSR, Client Side Rendering) 페이지의 내용을 브라우저에서 표현한다. SPA 트렌드와 CPU의 성능 상승과 함께 본격적으로 시작되었다. CSR은 클라이언트에서 모두 처리하는 것으로, 서버에서 전체 페이지를 한번 렌더링하여 보여주고 사용자가 요청할때 마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링 하는 방식이다. 이렇게 body 안이 텅텅비어있어 처음 접속하게되면 빈 화면만 보이게되고 링크된 자바스크립트를 다운로드 받아서 동적으로 화면을 구성하여 최종적인 화면을 보여준다. 그래서 ..

◽️ 트래킹Tracking 브랜치와 업스트림Upstream 브랜치의 의미 리모트 트래킹 브랜치를 로컬 브랜치로 Checkout하면 자동으로 "트래킹Tracking 브랜치"가 만들어진다. 트래킹 브랜치는 리모트 브랜치와 직접적인 연결고리가 있는 로컬 브랜치이다. 이 때, 트래킹 하는 대상 브랜치를 "업스트림Upstream 브랜치"라고 부른다.

◽️ stashing 가끔 커밋을 할 수 있을정도로 안정된 코드가 아닌 상태에서 다른 브랜치로 이동하여 작업해야하는 경우가 있다. 이 때 stash를 사용하면 커밋하지 않고 나중에 다시 돌아와서 작업을 다시 할 수 있다. stash 명령을 사용하면 워킹 디렉토리에서 수정한 파일들만 저장한다. Stash는 Modified이면서 Tracked 상태인 파일과 Stagin Area에 있는 파일들을 보관해두는 장소다. 아직 끝내지 않은 수정사항을 스택에 잠시 저장했다가 나중에 다시 적용할 수 있다. ◽️ 하던 일을 stash하기 임시저장 할 브랜치에서 해당 명령어를 수행한다. $ git stash ◽️ 저장된 stash 목록 나열하기 스택에 만들어진 stash 목록을 나열한다. $ git stash list //..

이번에 가로로 된 리스트를 구현하면서 모바일웹처럼 드래그 할 수 없는 점이 불편하게 느껴졌다. 사용자입장에서도 불편해 할 요소라 느껴져 적용하게 되었다. 📄 HTML Vertical Scroll 📄 script data() { return { // 드래그 제어 요소 isMouseDown: false, startX: 0, scrollLeft: 0, }; }, // 제어할 스크롤 요소 const verticalScrollWrap = this.$refs.verticalScrollWrap verticalScrollWrap.addEventListener('mousedown', (e) => { this.isMouseDown = true this.startX = e.pageX - verticalScrollWrap.o..