Learning

branch 브랜치(branch)는 나뭇가지라는 뜻으로, 여러 갈래로 작업 공간을 나누어 독립적으로 작업할 수 있도록 도와주는 git의 도구이다. 장점 독립 공간을 형성하기 때문에 원본(master)에 대해 안전하다. 하나의 작업은 하나의 브랜치로 나누어 진행되므로 체계적인 개발이 가능하다. Git은 브랜치를 만드는 속도가 굉장히 빠르고, 적은 용량을 소모한다. 브랜치 조회 로컬 저장소 및 원격 저장소의 브랜치 목록을 확인한다. 생성된 브랜치가 많은 경우 q를 입력하여 빠져나온다. # 로컬 저장소의 브랜치 목록 확인 $ git branch # 원격 저장소의 브랜치 목록 확인 $ git branch -r 브랜치 생성 브랜치의 이름을 지정하여 새로운 브랜치를 생성한다. $ git branch {브랜치이름} ..

Git Undoing git에서 작업 되돌리기는 작업 상태에 따라 크게 세 가지로 분류된다. Working Derectory 작업 단계 Working Derectory에서 수정한 파일 내용을 이전 커밋 상태로 되돌린다. Staging Area 작업 단계 Staging Area에 반영된 파일을 Working Derectory로 되돌린다. Repository 작업단계 커밋을 완료한 파일을 Staging Area로 되돌린다. 1. Working Derectory 작업 되돌리기 restore Working Derectory에서 수정한 파일을 수정 전(직전 커밋)으로 되돌린다. 단, 이미 버전 관리가 되고있는 파일만 되돌릴 수 있다. git restore 명령을 통해 되돌리면, 해당 내용을 복원할 수 없다. $ ..

Git 구성요소 워킹 디렉토리(Working Derectory) 실제로 작업을 하는 공간, 디렉토리 .git 폴더가 위치한 폴더 스테이지(stage) 저장소에 올리기 직전의 파일이 존재하는 영역 커밋으로 남기고 싶은, 특정 버전으로 관리하고 싶은 파일이 있는 곳 저장소(repository) .git 디렉토리 커밋들이 저장되어 있는 곳 프로젝트의 버전 정보를 관리하기 위해 필요한 모든 파일이 저장되어 있는 곳 기본 명령어 clone 원격 저장소를 로컬에 가져온다. $ git clone {원격 저장소 주소} status 현재 폴더의 상황을 깃의 관점으로 보여준다. $ git status add 프로젝트의 변경 사항을 stage 영역에 담는다. # 현재 디렉토리의 모든 파일 $ git add . # 원하는 파..

Git이란? Git은 버전 관리 시스템이다. 우리가 사용하는 프로그램들은 각각의 버전이 있는데, 그 버전을 관리하기 위해 가장 널리 쓰이는 소프트웨어다. Git 설치 https://git-scm.com/downloads Git - Downloads Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific exp gi..

Event Storming, 이벤트 스토밍 Alberto Brandolini가 제안한 워크숍, 복잡한 비즈니스 도메인을 빠르게 탐색하고 학습할 수 있는 방법 개발자뿐 아니라 도메인 전문가, 기획자, 디자이너, 테스터 등 해당 소프트웨어 개발의 모든 이해관계자들이 서로가 가지고 있는 관점을 논의한다. 진행 Tip 의자를 치우고 넓은 공간을 확보한다. 다른 참여자의 의견을 무시하거나 반박하기보다 토론을 통해 의견을 맞춰간다. 모든 참여자가 마커펜을 하나씩 가지고 설계 공간을 바라보게 한다. 퍼실리테이터의 지시에 따라 워크숍을 진행한다. 퍼실리테이터: 회의나 교육의 진행을 원활하게 이뤄지게 돕는 역할 모든 활동은 제한된 시간에 진행하여 집중력을 유도한다. 참여하고 있는 모든 사람들이 이해할 수 있는 유비쿼터스..

Design Thinking, 디자인씽킹 여러 분야의 팀들이 협업해서 사용자의 욕구와 기술적 가능성, 경제적 실현성을 조합하여 혁신할 수 있도록 하는 방법론 Design 디자이너의 핵심 역량은 Visualization(시각화)와 Tangibilization(실체화)이다. Thinking 실용적인 생각(Practical thinking). 즉, 문제 해결을 위한 생각이다. 즉, 디자인씽킹이란 눈에 보이지 않는 문제점을 창의적인 방법으로 해결하여 시각화, 가시화하고자 하는 "프로세스"를 의미한다. Design Thinking Process 디자인 씽킹은 5단계 과정을 수행한다. 1. Empathize, 공감 고객의 관점에서 상황을 관찰하고 문제를 발견하는 과정 2. Define, 문제 정의 공감 단계에서 얻..

Intro 프로젝트를 수행하며 git commit을 하다보면, 몇 개의 파일을 빠트리는 경우가 있다. 이 때 같은 커밋 메시지를 여러 번 사용하면, 커밋 하나하나의 크기가 작아지고 후에 커밋을 추적하기 어렵다. 혹은 단순한 파일 하나의 수정에 하나의 커밋을 사용하는 것도 애매하다. 이 때 amend 옵션을 사용해 해결할 수 있다. Amend amend 명령은 커밋을 완료한 파일을 Staging Area로 되돌린다. 상황 별로 두 가지 기능으로 나뉜다. 1. Staging Area에 새로 올라온 내용이 없다면, 직전 커밋의 메시지만 수정한다. 2. Staging Area에 새로 올라온 내용이 있다면, 직전 커밋을 덮어쓴다. amend(수정하다) 즉, 이전 커밋을 수정해서 새 커밋으로 남긴다. 커밋 내용을 ..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 별은 단순한 모양이다. 별의 한 꼭짓점을 다각형 묶음으로 정의하고 각 점을 개별적으로 설정할 수 있다. 별의 각 꼭짓점의 좌표를 알면, 한 방향을 정의한 다음 회전을 5번 수행해 별 모양을 얻을 수 있다. 회전은 transform 속성을 이용해서 설정한다. transform 속성을 사..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 나무 모양 하나를 정의한 다음 다양한 위치에 다양한 크기로 배치하여 숲을 그릴 수 있다. 배경 만들기 직사각형과 원을 이용해 배경을 만든다. 나무 만들기 간단한 다각형과 선으로 나무 모양을 정의한다. 눈송이 예제에서 했던 것과 유사한 방식으로 이를 재사용할 수 있다. 이 모양을 def..

CSS Media Query(미디어 쿼리) 미디어 쿼리는 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성된다. 표현식은 width, height, color와 같은 미디어 특성(media feature)을 이용해 그 특성들의 상태에 따라 다른 스타일을 적용할 수 있다. 미디어 쿼리는 CSS3에 포함되어 있으며, 주로 화면의 크기에 따라 스타일을 달리하는 방법을 사용한다. 미디어 쿼리는 다음 두 가지 방법으로 사용할 수 있다. 요소 link 요소에 사용하여 특성이 조건에 맞을 때 css 파일을 불러온다. CSS 스타일 적용 css 파일 내에서 @media 키워드로 시작하고 그 뒤에 조건을 붙여 사용한다. 조건이 맞으면 대괄호 안의 스타일이 적용된다. @media..