해당 글은 자바스크립트 라이브러리 'Prettier'에 대해서 이해하고 환경설정을 하기 위한 목적으로 작성된 글입니다. 1) Prettier 이해하기 💡 Prettier는 코드를 읽어 들여서 사용자가 지정한 '옵션'에 따라 코드를 다시 포맷팅(정렬)하는 "코드 포맷터"입니다. 코드 스타일에 초점을 맞추고 있기 때문에, 코드 품질을 위해 사용하는 ESLint와는 성격이 다릅니다 Prettier 지원 언어들 * JavaScript (including experimental features) * JSX * Angular * Vue * Flow * TypeScript * CSS, Less, and SCSS * HTML * JSON * GraphQL * Markdown, including GFM and MDX *..

Git을 관리하는 방법 중 Git CLI(Command Line Inteface)를 통해서 사용되는 명령어에 대해서 알고 이해합니다. 해당 글은 Command 명령어가 무엇이 있고 언제 사용하는지에 대한 설명 글입니다. 1) Git 환경 설정 관련 CLI 💡 Git에서 환경에서 사용하는 CLI 명령어 분류 명령어 설명 config git config --list - 모든 Git 설정에 대해 조회합니다. status git status - 작업 디렉토리와 스테이징 영역의 현재 상태를 보여줍니다. log git log - 커밋 기록을 표시합니다. log git log -n [숫자] - 최신 [숫자]개의 커밋을 커밋 기록에서 보여줍니다. touch touch .gitignore - 새로운 .gitignore ..

Visual Studio Code 툴을 사용하는 중에 편집 중인 파일들이 한 곳에 보이지 않는 상황이 발생하였습니다. 이럴 때 해결할 수 있는 방법에 대해서 공유하며, 역으로 사용 중인 파일 단 하나만 보고 싶을 때 해결할 수 있는 방법 이기도 합니다. 1) 현재 작업 중인 파일 한 개만 보이는 경우가 발생하였습니다. 2) 해결방법 💡 사용자 별로 VSCode의 키보드 키를 다르게 사용하여서 해당 변경이 되는 키를 확인합니다. 1. Code 탭 - 'Preferences' - 'Keyboard Shortcuts'을 누릅니다. 2. ‘Keyborad Shortcuts’ 창이 뜨게 되고 ‘Toggle tab visibility’를 검색하여서, 키보드 키를 확인하고 해당 키를 눌러줍니다 💡 저는 아래의 키와 ..

Visual Studio Code 툴을 이용하고 있는 중에 README.md 파일을 수정 할 일이 있다면 좀 더 가시적으로 볼 수 있는 방법에 대해서 소소한 꿀팁 드립니다. 1. [VSCode] Visual Studio Code를 실행합니다 2. [VSCode] README.md 파일을 연 상태에서 '파일 검색' 단축키를 누릅니다 - Window OS: Ctrl + P - MacOS : Command + Shift + R Go(이동)탭 - Go to file...(파일로 이동...) 메뉴를 이용하여도 가능합니다. 3. 검색어에 '>' 를 입력하면, 'Markdown: Open Preview'가 보입니다. 이를 선택합니다. 4. 해당 미리보기 README.md 파일이 보이고, 기존 README.md 파일과..

해당 글의 목적은 Repository에서 소스 작업 이후 Commit & Push를 하는 경우에 특정 ‘파일’ 및 ‘경로’를 제외하여 해당 작업을 진행하고자 할때, gitignore 파일을 사용합니다.이에 대해 .gitignore에 대한 정의와 구성 방법에 대해서 익히기 위한 목적의 글 입니다. STEP1: .gitignore 이해하기 1. .gitignore 정의 해당 프로젝트 내에서 불 필요하다고 느끼는 특정 '파일' 및 '디렉토리 경로'에 대해서 Repository에 올리지 않기 위해서 이 파일들을 무시(ignore)하기 위한 정보를 가지고 있는 파일(.gitignore)을 의미 합니다 2. .gitignore에 포함되는 정보 용량이 커서 제외 되어야 할 파일 혹은 디렉토리 경로 Ex) npm / ..

웹 상에 캔버스를 통해서 그림, 도형들을 그리는 동작들을 해주는 KonvaJS를 이해하기 위한 목적이며, 해당 작성글은 초기 구조 이해와 용어에 대해 익히기 위한 목적임. 1) KonvaJS 구조 이해 1. KonvaJS 정의 💡 Konva는 HTML5 2D Context를 확장한 Canvas JavaScript framework입니다. Konva는 또한 애니메이션, 전환, 노드 중첩, 계층화, 필터링, 캐싱, 데스크톱 및 모바일 애플리케이션에 대한 이벤트 처리 등을 제공해줍니다 2. Konva 구조 💡Stage, Layer, Group, Shape는 HTML 페이지 내의 가상의 DOM 노드로 구성이 되어서 화면상에 그려집니다. 💡 대략적인 구조는 Stage안에 각각에 Layer를 가지고, 그 안에 Gr..

해당 글의 목적은 Github 소스 중에서 일정 Tag를 만들어서 코드 프리징(=Code Freezing)을 하여 추후 소스 배포를 위한 Releases 버전을 구성하는 방법이며, 해당 작성글은 이를 위한 환경설정 부분입니다. 💡 코드 프리징(Code Freezing) - 소스 코드를 더 이상 개발하거나 수정하지 않는 단계를 의미한다. - 대부분 다음 버전의 배포를 위하여 코드 프리징을 하는 경우가 많습니다. 1. 태그(Tag) 생성하기 해당 필자는 ‘Sourcetree’ 툴을 이용하여서 태그를 생성하는 방식을 서술합니다. 1. [Sourcetree] 태그를 만들려는 구간을 확인합니다 2. [Sourcetree] 해당 구간에서 오른쪽 마우스 키를 누른 뒤, ‘태그...’ 버튼을 누릅니다. 3. [Sour..

해당 글의 목적은 배열에 대한 반복문으로써 필요한 데이터에 대해 도출해 내는 함수에 대해서 공부하는 목적으로 작성하였습니다. 루프와 반복 함수 요약본 함수 설명 함수 반환값 반복문 return 값 추가 시점 for 배열내에서 객체를 반환받기 위해서 순회를 하는 함수이다. undefined 속성(key), 속성값(value) 반환 ES5 이전 for/in 배열내에서 객체값을 반환받기 위해서 순회를 하는 함수이다. undefined 속성값(value) 반환 ES5 이전 for/of 배열내에서 객체를 반환받기 위해서 순회를 하는 함수이다. (배열 뿐만 아니라 이터러블한 객체를 모두 순회할 수 있음) undefined 속성(key), 속성값(value) 반환 ES6 forEach 배열내에서 객체를 반환받기 위해..

해당 글의 목적은 형상 관리 툴인 Sourcetree에서 Github Repository를 가져와서 직관적인 UI와 쉬운 소스 관리를 위해서 해당 연결을 진행하며, 해당 작성글은 최초 연결을 위한 환경설정 부분입니다. 1) 사전 준비 사항 1. 연결하려는 Repository 확보 우선은 받아야 할 소스가 있어야 하므로, 연결하려는 Repository가 준비되지 않으셨다면 아래에 이전에 제가 작성한 글을 토대로 연결을 하고 오시면 될 것 같습니다. 프로젝트 Github 연결 방법 내가 만든 프로젝트를 Github에 연결하여서 Repository 단위로 관리를 하며, 다른 사람과의 협업을 통해서 소스 관리를 하기 위함이며, 해당 작성글은 최초 연결을 위한 환경설정 부분임. 1. Github Repos adj..

해당 글의 목적은 Repository 내에서 같이 협력하려는 사람에 대한 초대를 하기 위한 방법이며 이를 위한 환경설정 부분입니다. 1. [Github] ‘Settings’ 탭에서 ‘Collaborators’ 메뉴를 선택합니다 2. [Github] ‘Add people’ 버튼을 누릅니다. 3. [Github] 해당 팝업이 출력되고, ‘github 아이디’ 혹은 ‘이메일’을 검색하여서 ‘Select a collaboartor above’ 버튼을 누릅니다. 4. [Github] 이메일로 초대한 사용자 정보를 확인하였습니다. 꿀팁 Repository가 public 상태인 경우도 사용자 초대가 가능할까? 💡 YES, 초대가 가능합니다. 💡 Public ↔ Private로 각각 바꾸는 상태라도 초대자는 항상 유지..