멋진 개발자가 되고 싶어

ck editor는 무엇일까? 웹 페이지나 온라인 애플리케이션에서 콘텐츠를 작성할 수 있게 하는 에디터이다. 자바스크립트 기반의 에디터이다. 위지위그 방식의 텍스트 에디터이다. 위지위그(WYSIWYG)란 무엇일까? What You See Is What You Get의 약자이다. "보는 대로 얻는다"는 뜻이다. 문서 편집 과정에서 화면에 보이는 내용이 출력물과 동일하게 나오는 방식을 말한다. 워드프로세서와 같은 방식을 말한다. 관련 링크 ck editor 공식 홈페이지 ck editor 데모 페이지 ck editor 공식 문서 ckeditor5 npm 페이지 ck editor는 어떻게 사용할까? 아래의 링크에 프로젝트에서 사용하는 방법이 자세하게 정리되어 있다. Predefined CKEditor 5 bu..

Angular 프로젝트에서 ck editor는 어떻게 사용할까? ck editor를 사용하면서 관련된 내용을 한글로 정리해봤다. 영어로 된 문서에 불편함을 느꼈을 사람들에게 조금이나마 도움이 되길 바란다. 자세한 내용은 아래의 공식 홈페이지의 해당 문서 링크를 참고하면 된다. Angular rich text editor component 들어가기 전에 ck editor에는 다양한 버전의 에디터가 준비되어있다. 하지만 이 튜토리얼은 classic버전을 기준으로 작성되었다. 설치 사용하길 원하는 프로젝트를 준비한다. 해당 프로젝트에 ck editor를 설치한다. npm으로 설치하는 경우 npm install --save @ckeditor/ckeditor5-angular @ckeditor/ckeditor5-w..

✏️JS의 이벤트 루프 자바스크립트의 내부동작 방식을 이해하면 함수 실행의 우선순위를 이해할 수 있게 된다. 전체적인 구조 JS 엔진 Web APIs Callback Queue Event Loop Web APIs 노드에서는 백그라운드로 설명된다. 비동기 처리를 담당한다. Callback Queue Task Queue, Event Queue등 다양한 형태로 설명된다. 비동기 처리가 끝난 후 실행되어야 할 콜백 함수가 차례로 할당된다. 구성 Task Queue (Event Queue) Microtask Queue (Job Queue) Animation Frames 우선순위 Microtask Queue > Animation Frames > Task Queue Event Loop Queue에 할당된 함수를 순서..

✏️코드펜 오픈 소스 활용 시 주의할 점 프로그래밍을 하다보면 코드펜과 같은 오픈 소스를 활용할 경우가 자주 발생한다. 하지만 이는 다른 사람의 저작물을 사용하는 것이므로 이와 관련된 사항을 확인하고 제대로 명시해주어야 한다. 코드펜에서 라이센스와 관련된 내용을 확인하는 방법에 대해서 정리해보았다. 코드펜 라이센스는 어떻게 확인하는가? 이용을 원하는 코드펜 페이지로 이동한다. 왼쪽 하단에 comments 버튼을 클릭한다. 클릭 후 뜨는 모달창 가장 하단에 lisence를 확인한다. lisence 저작권과 관련된 내용이 명시되어있다. 저작권과 관련된 내용을 잘 읽어보고 본인의 소스코드에 명시하는 것이 좋다. 저작권 표시는 소스코드의 최상단에 하는 것이 원칙이다. ✅참고자료 백엔드 맛보기 | 로그인 화면 꾸미기

✏️자료구조 ADT ABSTRACT DATA TYPE의 약자 추상적 자료구조를 의미한다. 자료구조는 왜 알아야하는가? 자료구조에 대한 이해가 있으면 프로그램을 보다 쉽고 효율적으로 제작할 수 있게된다. 자료구조의 종류 배열 (ARRAY) 리스트 (LIST) 단일 연결 리스트 이중 연결 리스트 스택 (STACK) 해쉬 테이블 (HASH TABLE) STACK 뒤로 가기, 되돌리기와 같은 기능에 사용한다. 데이터 입출력 방식이 LIFO 이다. LIFO LAST IN FIRST OUT의 약자 마지막에 입력된 데이터가 가장 처음 출력되는 방식을 의미 후입선출 QUEUE 이메일 전달, 푸쉬 알림 같은 기능에 사용한다. 데이터 입출력 방식이 FIFO 이다. FIFO FIRST IN FIRST OUT의 약자 처음 입..

gsap의 기초 greensock 공식문서 gsap의 기초를 설명해주는 유튜브 동영상 강의를 시청하며 정리한 내용이다. 자세한 내용은 아래의 강의링크를 클릭하면 해당 동영상으로 이동할 수 있다. 강의 링크 1강 to, from 2강, timeline 3강, fromTo 4강, stagger 5강, stagger 응용 6강, 스크롤트리거 기초 7강, 스크롤트리거, 토글액션 설치 npm i gsap --save gsap.to() gsap.to('적용시킬 대상 class', { x: x축으로 이동시키고 싶은 정도(숫자), rotation: 회전시키고 싶은 정도(숫자), duration: 애니메이션을 적용시킬 시간(숫자), }) 상기내용의 재생 gsap.from() gsap.from('적용시킬 대상 class'..