안녕하세요. 이번 포스팅은 HTML에 있는 contenteditable을 이용해서 editor를 만들기입니다. 만드는 방법은 아주 간단합니다. input, textarea와 같은 텍스트 입력 태그가 아닌 div와 같은 태그에 contenteditable="true"를 추가해주면 됩니다. 그렇게 되면 아래와 같이 원래는 텍스트 입력이 불가능한 div 태그에 아래와 같이 텍스트를 입력할 수 있습니다. 그럼 이제 텍스트 입력이 되는 것을 확인했으니 CSS를 적용해보겠습니다. 그렇게 하면 아래와 같이 에디터 영역이 보이게 됩니다. 이제 추가로 editor 메뉴를 만들어 보겠습니다. 기본적으로 굵기 적용, 기울임 적용, 밑줄 적용, 취소선 적용, 숫자 목록, 기호 목록 메뉴를 만들어보겠습니다. 먼저 메뉴 버튼을 ..

Bitbucket은 Atlassian에서 운영하는 Git 버전 관리 저장소입니다. Github에는 CI/CD를 위한 Action이 존재하고 Bitbucket에는 pipeline이 있습니다. 아래에서 확인 할 수 있다시피 무료 버전의 경우 한달에 50분이라는 build 시간이 주어집니다. 추가로 시간이 더 필요한 경우에는 업그레이드를 통해서 build 시간을 늘릴수 있습니다. Standard의 경우에는 한달에 2,500분, Premium의 경우에는 한달에 3,500분이 주어집니다. Bitbucket - Pricing | Atlassian Bitbucket is the Git solution for professional teams. Bitbucket Cloud is free for teams of 5. B..

오늘은 Angular CLI에 대해서 포스팅을 하도록 하겠습니다. 간단하게 Angular CLI는 NPM을 통해서 쉽게 설치를 할 수 있습니다. $ npm i -g @angular/cli 처음으로 알아 볼 건 프로젝트 생성입니다. 프로젝트 생성은 아래와 같이 new를 사용하여 생성을 할 수 있습니다. $ ng new [project-name] 추가로 option을 추가할 수 있는 옵션이 꽤 많지만 몇가지만 알아보도록 하겠습니다. 먼저 prefix 옵션에 대해서 알아보겠습니다. 기본 적으로 Angular는 prefix가 app으로 설정이 되어 있습니다. 만약 이걸 다른 걸로 변경을 하고 싶다면 --prefix 옵션(짧게 -p)을 사용하면 됩니다. 예를 들어 prefix를 my로 사용을 하고 싶다면 아래와 ..

이전 포스팅에서는 Angular와 Cloud Firestore 연동하는 것을 해보았습니다. 자세한 내용은 이전 포스팅을 참고해주세요. Angular와 Firebase 연동(Cloud Firestore) 이전 포스팅에서는 Angular와 Firebase Authentication(인증)을 연동했습니다. 자세한건 이전 포스팅을 참고 해주세요. Angulre와 Firebase 연동(Firebase Login) 이전에 Angulre와 Firebase를 연동하는 것을 해보.. dev-bak.tistory.com 이번 포스팅에서는 Angular와 Cloud Storage를 연동하는 것을 해보겠습니다. 먼저 이전에 작성한 firebase.module.ts에 Cloud Storage를 사용하기 위한 라이브러리를 추가해..

이전 포스팅에서는 Angular와 Firebase Authentication(인증)을 연동했습니다. 자세한건 이전 포스팅을 참고 해주세요. Angulre와 Firebase 연동(Firebase Login) 이전에 Angulre와 Firebase를 연동하는 것을 해보았습니다. 자세한 내용은 이전 포스팅을 참고해주세요. Angualr와 Firebase 연동 Angular와 Firebase는 Angualrfire를 이용하여 쉽게 연동을 할수 있습니다. 먼저. dev-bak.tistory.com 이번에는 Angular와 Firebase의 Cloud Firestore를 연동해보겠습니다. Cloud Firestore는 MongoDB와 AWS의 DynamoDB와 비슷한 NoSQL입니다. 다만 실시간으로 변경된 데이터..

이전에 Angular와 Firebase를 연동하는 것을 해보았습니다. 자세한 내용은 이전 포스팅을 참고해주세요. Angualr와 Firebase 연동 Angular와 Firebase는 Angualrfire를 이용하여 쉽게 연동을 할수 있습니다. 먼저 Angular CLI를 이용하여 새로운 Angular 프로젝트를 생성합니다. Angulre CLI 설치는 이전 포스팅을 참고해주세요. Angular CLI 설.. dev-bak.tistory.com 이번에는 Firebase 인증(Authentication)을 이용하여 로그인을 구현해보겠습니다. 여기서는 간단하게 Email과 Google 로그인을 해볼겁니다. 먼저 Firebase 콘솔에 이전에 생성한 프로젝트에서 로그인 사용을 허용해줘야합니다. Authenti..