무딘붓의 코딩기록

기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다. 게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다. 이 게시글에서는 React 프로젝트에서 Fabric.js 라이브러리로 화이트보드(그림판)를 만드는 과정을 정리합니다. 실행 예시와 React 코드는 링크(codesandbox)에서 확인할 수 있습니다. 0. 왜 Fabric.js 라이브러리를 사용하나요? 우선, Fabric.js는 HTML Canvas를 쉽고 강력하게 관리할 수 있게 해주는 라이브러리 입니다. 가장 큰 특징은, 캔버스에 그려진 요소를 객체 형태로 관리할 수 있다는 점 입니다. 이를 이용해서 캔버스의 요소들을 선택, 이동, 회전, 크기조절 할 수 있는..

설명 express를 비롯한 Node.js의 모듈들과, React로 구현한 로그인, 회원가입 예제입니다. React를 사용하지 않고 구현한 예제는 아래와 같습니다. https://sirius7.tistory.com/59 Node.js와 MySQL을 이용한 로그인/회원가입 예제 (소스코드) 설명 express를 비롯한 Node.js의 모듈들과, 5개 정도의 js파일로 구현한 로그인, 회원가입 예제입니다. MySQL을 데이터베이스로 사용하였기 때문에 MySQL을 설치하셔야 사용 가능합니다. (사용방법 링 sirius7.tistory.com MySQL을 데이터베이스로 사용하였기 때문에 MySQL을 설치하셔야 사용 가능합니다. (사용방법 링크) 사용하시면서 궁금하신 점이나 문제점이 있다면 댓글 달아주세요. 필요..

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다. React를 이용하여 CRUD( Create, Read, Update, Delete )기능을 구현한 게시판이다. 예전에 Node.js로 같은 기능을 구현한 적이 있는데, React로 구현하니 더 깔끔한것 같다. Node.js로 구현했던 CRUD 게시판은 아래 링크를 참고. https://sirius7.tistory.com/48 [Node.js] 8. CRUD 게시판 구현 CRUD CRUD란 Create(생성), Read(읽기), Update(갱신), Delete(삭제) 의 약자로, 사용자 인터페이스가 갖추어야 할 기능을 말한다. Node.js로 CR..

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다. 1. 컴포넌트 소스코드 정리정돈의 핵심 : 서로 연관된 것을 모은 다음(그룹핑) 이름을 붙인다. 리액트는 사용자 정의 태그를 만드는 기술이므로, 사용자 정의 태그를 이용해 연관된것을 모아 정리 정돈한다. 사용자 정의 태그 만들기 사용자 정의태그를 만들때는 함수를 정의한다. 사용자 정의태그를 만들때는 반드시 대문자로 시작해야 한다. 리액트에서는 사용자 정의태그를 컴포넌트(component)라고 부른다. 컴포넌트를 사용할 때의 장점 각 코드가 이름을 가지고 있기 때문에 어떤 취지의 코드인지 금방 파악 가능하다. 한번의 수정으로 컴포넌트를 사용하는 모든 ..

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다. 1. 리액트 소개 메타에서 개발한 오픈 소스 자바스크립트 라이브러리 SPA (Single Page Application)을 전제로 한다 웹 앱을 만드는 라이브러리 React, Angular, Vue 중 가장 사용자가 많다. 리액트의 핵심적인 역할 : 사용자 정의 태그를 만드는 것 사용자 정의 태그 부품으로 사용된다 남들에게 공유할 수 있고, 남들의 부품을 사용할 수 있음 거대한 리액트 부품 공유망으로 들어가는 것은 큰 가능성을 열어준다 리액트를 만드는 2가지 방법 클래스(class) 문법 사용 → 이전 강의 참고 함수(function) 문법 사용 :..