changi1122

이번에 토이프로젝트로서 만들고자 한 프로그램은 웹 브라우저의 동영상과 음악을 재생, 정지 등을 할 수 있는 제어 프로그램이다. 이와 같은 프로그램을 계획하게 된 이유는 동영상을 재생한 상태로 창을 최소화하고 소리만 들을 때가 있는데, 브라우저 창을 다시 열 필요 없이 편하게 제어하기 위해서이다. 사실 비슷한 기능이 존재하긴 했지만 부족한 점이 있었다. 문단 아래 사진은 크롬 브라우저와 윈도우에서 제공하는 미디어 제어 기능의 사진이다. 크롬 브라우저는 Media Session이 잘 정의된 웹페이지의 경우 '뒤로 이동' 등 모든 기능을 제공하지만, 무조건 창을 키우고 주소창 옆의 버튼을 눌러야 하는 점이 불편했다. 이와 달리 윈도우의 기본 기능은 불륨 조절 키를 누르면 우측 위에 바로 나타나지만, '뒤로 이동'과 같은 기능을 제공해 주지 않았다.

이 글에는 Next.js에서 react-quill의 사용 없이 Quill 에디터를 사용하기 위한 코드를 제공한다. 아래와 같이 Quill 에디터를 사용하게된 이유 Next.js를 통해 개발을 진행하면서 Quill 에디터를 사용하고자 했다. 그런데 Quill에서 바꾸고 싶은 부분이 있어 그 부분을 수정한 후 직접 빌드하여 사용해야 했다. 직접 빌드된 걸 react-quill에 적용하기 번거로워 보였다. 또, 어떤 블로그 글에서 react-quill을 사용하는 것이 직접 스크립트를 불러오는 것보다 번거롭다는 말이 있어 react-quill을 사용하지 않고 아래와 같은 방식으로 시도하였다. 이 글의 코드는 이 분의 블로그에서 소개된 내용에서 React Hook으로 변환 및 일부 코드를 추가한 것이다. 해당 블로그에서 React에서 Quill을 적용하는 방법을 올려주셔 잘 적용할 수 있었으나, 아쉽게 글을 내리신 걸로 보인다. 그래서 혹시 Next.js에서 Quill 에디터를 직접 로드하는 방식으로 사용하려는 분이 있다면 코드를 참고하라고 이 글을 올리게 되었다.

개인 프로젝트로서 개발중에 위지윅 에디터가 필요했다. 여러 에디터들을 비교해보니 Quill 에디터가 괜찮아 보였고, Next.js로 만든 페이지 위에서 사용하고자 하였다. 그래서 찾다보니 Quill 에디터를 React에 적용하는 코드까지 올려주신 감사한 글이 있었고, 이를 활용하여 정상적으로 에디터를 띄울 수 있었다. 그런데, 위 사진과 같이 영문과 한글 모두 첫 글자를 입력하게 되면 커서가 맨 앞으로 가버리는 문제가 있었다.

이 글은 C#에서 public 필드(Field)와 자동 구현 프로퍼티(Auto-Implemented Property) 중 무엇을 사용해야 하는가 고민에서 시작하여, 필드와 자동 구현 프로퍼티의 차이점, 성능에 관해 실험해본 내용을 다룬다.

이번 글에서는 라즈베리파이 단말기의 내부 IP를 고정하고, 외부 IP의 특정 포트가 라즈베리파이의 내부 IP로 연결되도록 포트포워딩을 하는 방법을 다룬다. 이를 통해 외부에서 라즈베리파이로 접속할 수 있도록 한다.

이 글에서는 라즈베리파이에서 Node.js와 Mongo DB를 사용하여 웹페이지를 제공하는 웹 서버를 만든 경험을 되새기면서, 알게 된 지식을 공유하고자 한다. 독자의 관련 지식이 없다고 생각하고 설명해볼 테니, 라즈베리파이로 본인의 웹페이지를 만들어보려는 사람에게 도움 되었으면 한다.

며칠 늦긴 했지만, 2020년 새해가 밝았다. 새해가 되면 많은 사람들이 새해 인사말을 보낸다. 그래서 그런지 카카오톡도 1월 1일 새벽에 2시간 정도 멈췄다고 한다. 나도 마찬가지로 여러 개의 새해 인사말을 보냈다. 새해 인사말을 보내다 보니 컴퓨터로 인사말을 보내는 작업을 자동화해보자 생각했다. 금방 결과물을 볼 수 있을 걸로 보여 작은 토이 프로젝트 삼아 해보면 재밌을 것 같았다.