토이 프로젝트를 진행하기 이전에..#

사내에서 화요일 오후2시에 대략 30분 ~ 1시간 정도 자유롭게 참여할 수 있는 기술공유 시간을 가지고 내부적으로 발표시간을 가지고 있었다.

현재 글을 쓰는 시점으로 1년 4개월정도 운영해본 결과 다들 관심있는 기술이 다르고 발표하는 인원이 초반에는 꾸준하게 있었으나 시간이 지날수록 변동폭이나 참여할 수 있는 인원 예측이 어려워 테크톡 시간이 비효율적인 상황이 발생하기도 하였다.

물론, 참여의 경우 부담 없이 참여하는 방식으로 자율방식을 권장 중이지만 최근 6개월 이상은 개인적으로 혼자 발표하는 시간들이 많아진 것 같아 아쉬운 점이 있었다.
(개인적으로 테크톡을 참여하면서 1년 4개월동안 휴계기간 이외에 단 한번도 발표를 하지 않은적이 없다.)

2022.03.15(화) 오후 2시에 테크톡 시간에 테크톡 시간에 각자 IT 관심분야 외에 다 같이 공통 목표를 가지고 토이 프로젝트를 간단하게 구축해 보면 어떨까라는 주제로 회의를 통해 이야기를 나누었다.

이야기의 결론은 CRUD 모두 구현이 가능하고 백앤드부터 프론트앤드까지 전체적으로 구현 가능한 서버리스 메모 웹 어플리케이션 프로그램을 진행하기로 결정하였다.

목표#

메모 웹 어플리케이션을 구성하기 위해 HTTP 웹 어플리케이션에서 요구하는 전반적인 흐름을 파악하고 메모관련 기능 구현을 통해 풀스택 기술스택에 대해 어떤것들이 필요한지 전반적으로 경험할 수 있다.

• AWS 서비스를 이용해 백앤드에서 회원가입, 로그인, 데이터의 CRUD API를 구성한다.
• 프론트앤드에서 React를 사용하며 로그인, 세션, 데이터의 추가, 수정, 저장, 삭제, 파일 업로드 등을 구현한다.

요구사항#

• Javascript 문법에 기본적인 사용법
  • const, let, 분기문, 반복문, array, function, class
• HTTP 통신에 대한 전반적인 이해
• React 16.3 이상 사용
• 1주일에 개인 시간 2~3시간 정도 필요(기능 구현)
• 1주일 동안 구현한 것을 테크 톡 사이트에 간단히 정리하고 발표
• 서로에게 코드공유 및 질문할 수 있는 시간을 가진다.

모든 코드가 제공되기 때문에 따라할 순 있지만 이해를 위해서 직접 구현시에 기본적인 사항들을 조사하고 공부하는것이 요구된다.

백앤드#

• AWS Serverless-Stack Framework 사용
• AWS Cognito 서비스를 사용해 이메일로 회원가입이 가능하도록 구성
• AWS Lambda 서비스를 사용해 백엔드에서 필요한 비지니스 로직을 구성
• AWS ApiGateway 서비스를 사용해 데이터의 컨트롤을 위해 REST API 형태로 구성
• AWS S3 서비스를 사용해 파일 조회 및 저장을 구성

프론트앤드#

프론트앤드는 기본적으로 백앤드가 구성되있는 상태에서 진행

• React 16.3 버전 이상으로 데이터를 받아와 화면을 구성
• 회원가입, 로그인 화면 구성
• 메모 추가, 수정, 삭제, 조회 구성

준비사항#

AWS의 많은 서비스를 명령줄을 통해 쉽게 사용하기 위해서 AWS CLI 설치가 필요합니다.

AWS CLI는 Python 2 버전 2.6.5+ 또는 Python 3 버전 3.3+ 와 Pip가 필요합니다. Python 또는 Pip 설치가 필요하면 아래 링크를 참고해서 설치합니다.

맥 사용자는 아래 Python과 Pip을 설치해야 합니다.

• Python 인스톨하기
• Pip 인스톨하기

MAC OS 사용자#

Python, Pip 인스톨 후 아래 명령어를 터미널에서 실행합니다.
(달러는 명령어에 포함되지 않습니다.)

또는 Homebrew를 사용하고 있다면 아래 명령어를 터미널에서 실행합니다.

Window OS 사용자#

윈도우 사용자는 아래 msi로 설치를 진행합니다.

AWSCLIV2 msi 다운로드

AWS 서버리스 데이터 분석 시스템 아키텍쳐#

아래 유튜브 영상을 보고 관심이 생겨 글을 작성하게 되었다.

서버리스 데이터 분석 시스템 구축 | Part 1. 개념 및 워크 플로우

• Sungmin Kim.
• Solutions Architect, AWS

데이터로 어떤 작업을?#

• 네트워크 분석
• 추천
• 머신러닝
• 그 외...

What is Architecting

어떤 문제를 풀기위해서 다양한 방법들이 있을텐데, 다양한 장단점들을 Trade-off 해서 밸런싱하는것이 아키텍팅의 중심이라고 생각할 수 있다.

꼭 어떤 방법론이나 적용법이 가장 좋은 방법이라고 단정지을 순 없다.

데이터#

데이터만 가지고 가치가 있는것이 아니라 데이터를 가지고 원하는 결과 및 인사이트를 내기위하여 과정들이 필요하다.

3+1 Vs of Big Data

과거에 비해서 분석시스템이 만들기가 더 어려워졌을까?

그것은 빅데이터의 4가지 특성#

• 어마어마게 커진 Volume
• 생산되는 속도의 차이 Velocity
• 데이터의 다양성 Variety
• 원하는 가치 Value

이런 복잡성 때문에 현대에 와서는 데이터분석 시스템이 복잡해지고 구축해지기 어려운 점이 있다.

Structured, Unstructred, and Semi-Structured#

데이터의 다양한 모양 및 구조

• Structred Data
  • RDB에 잘 정의되있는 데이터
• Unstructred Data
  • 동영상, 텍스트 데이터
• Semi-Structured Data
  • CSV 데이터, JSON 데이터

Data Temperature Spectrum#

• Hot data
  • 빠른 빈도로 데이터 요청
  • 응답시간이 빨라야 함
  • 데이터의 양은 적음
  • In-Memory DB 사용

세션값 요청

• Cold data
  • 많은 양의 데이터 요청
  • 응답시간은 좀 높아도 괜찮음

연말에 정산되는 데이터

• Warm data
  • 상시적으로 사용하는 데이터
  • 적당한 응답시간

모든 데이터를 동일한 스토리지, 분석 솔루션으로 처리하기 보다는 목적에 맞는 데이터의 온도에 따라 나누어서 적용하는게 바람직하다.

Simpilfy Big Data Processing#

아주 단순한 과정을 표현하자면

1. 데이터 수집
2. 데이터 저장
3. 분석 및 프로세싱
4. 데이터 소비 및 활용

중요한 점#

• 데이터의 처리 속도
• 데이터의 볼륨의 처리 가능량
• 전체적인 프로세스의 비용

Business Intelligence System#

CRM & CDC#

주기적으로 변경되는 데이터 저장

WEB#

쇼핑몰 등에서 클릭하는 데이터등을 저장

IoT#

사물 인터넷의 센서 데이터를 모아서 저장

BI-Architecture#

• 모바일, 데스크탑등의 접근
• Amazon RDS 서비스를 통한 데이터 저장
• QuickSight 서비스를 통한 데이터 시각화

QuickSight#

• 빠른 응답의 BI 서비스
• 세션당 요금이 청구
• 보다 쉽게 적용가능한 머신러닝 적용가능
• 데이터를 시각화해주는 서비스

서버리스 데이터 분석을 통해..#

AWS의 추상화된 서비스를 잘 연계해서 사용하면 보다 복잡하고 여러 기술들을 요구하는 BI 시스템에 대해 보다 쉽게 구축이 가능하다.

아주 간단한 예시외에도 여러 인프라 및 아키텍쳐를 통해 원하는 데이터를 분석하고 보다 미래에 있을 상황 및 수요를 어느정도 정확도 있게 예측하고 대비 가능하지 않을까라고 생각해본다.

정적 사이트 생성#

기술 블로그를 시작하기전에 Github과 연동하여 운영하고싶어 정적 사이트를 만들만한 프레임워크들을 조사했다.

Jekyll#

• 루비 기반
• 가장 보편적이고 인기많은 정적 사이트 제작 프레임워크
• 문서가 많아지면 빌드하는데 5분이상이 소요될 수 있음
• 다양한 테마

Hexo#

• 자바스크립트(Node.js) 기반
• 한글 레퍼런스 꽤 많음
• 다양한 테마

Hugo#

• Golang 기반
• 매우 빠른 빌드속도
• 잘 정리된 문서화
• 사용할만한 테마는 부족

Hugo? Hexo?#

처음에 빠른 빌드속도가 빠른것이 장점이라고 많이 알려져있어서 Hugo로 시작했으나..

하지만, Go언어 기반으로 되어있고 및 테마 사용 시 구조 파악 및 커스텀화 시키기가 매우 어려웠음.

결국, 현재 자바스크립트를 많이 사용하고 있으니 Hexo 프레임웤을 사용하기로 결정.

Hexo 설치#

Hexo는 Node.js 기반이기 때문에 Node.js가 설치되어있어야 한다.

1. 글로벌하게 hexo-cli 설치한다.

2. hexo로 Blog 프로젝트를 만들어준다.

3. 테마적용을 위해 git clone 진행 (필자는 icarus 테마를 선택)

• hexo 테마

4. themes 폴더안에 clone 받은 테마의 폴더명을 hexo-theme-icarus -> icarus로 변경해준다.
5. 루트 경로에서 _config.yml 파일을 아래처럼 수정해준다.

6. 테마에 필요한 npm 패키지들을 설치해준다. (icarus 경우 아래 패키지들이 필요함)

• bulma-stylus
• hexo-component-inferno
• hexo-renderer-inferno
• inferno
• inferno-create-element

7. hexo s 명령어로 로컬에서 테마가 적용됬는지 확인

GitHub Pages#

깃헙 페이지를 이용해 블로그를 배포하기 위해 우선 Repository를 생성해둔다.

"GitHub사용자이름".github.io 로 Repository를 생성해주면 https://사용자이름.github.io/ 블로그 주소로 사용 가능

깃헙 페이지로 홈페이지 만들기

Hexo-Deployer-Git#

Hexo에서 Git으로 정적파일을 생성후 편하게 배포하기위한 패키지를 받아준다.

Github에서 만들어둔 Repository의 Clone 주소를 Hexo 프로젝트 설정파일에 적어준다.

_config.yml

publish용 정적파일 생성

Github 배포

동시 생성 & 배포

업데이트가 안될 경우#

캐쉬때문에 간혹 업데이트가 반영이 안될경우가 있는데 아래 명령어 후 다시 배포를 진행하면 된다.

정적 사이트 생성기#

내가 찾아본 정적 사이트 생성 프레임웤 외에도 정말 많은 사이트와 자료들이 있으니 잘 찾아보고 활용 후 본인에게 맞는것을 사용했으면 좋을 것 같다.

참고#

• GitHub.io
• Hexo Deploy

Visual Studio Code#

Visual Studio Code는 Microsoft 에서 개발한 Code Editor

• 기본적으로 Dark Theme (눈은 소중하니까요..)
• 무겁지 않은 프로그램
• 각 언어 및 개발환경에 제공되는 수많은 extension
• 등등..

글을 작성한 본인을 포함하여 많인 개발자들이 애용중인 훌륭한 에디터 👍

Visual Studio Code Shortcut#

가볍고 실행하기 좋은 Visual Studio Code(이하 vsc) 에디터를 좀 더 잘 활용하기위해 단축키를 알아보자.

mac shortcut#

window shortcut#

• Mac Shortcut PDF
• Window Shortcut PDF

단축키를 모아보니 우주비행선을 조종해야할 것 같다.

많이 사용하는 단축키?#

1. Mac ⌘ + D & Window Ctrl + D#

현재 커서가 있는 단어와 동일한 단어를 아래 단축키 입력시마다 한번에 수정 가능하도록 커서를 잡아준다.

Tip

• Mac ⌃ + F 단어 찾기 후 ⌥ + Enter
• Window Ctrl + F 단어 찾기 후 Alt + Enter

위에 단축키 통해 원하는 단어 검색 후 입력을 통해 현재 파일의 해당 단어 모두를 한번에 수정 가능하도록 커서를 잡아준다.

2. Mac ⌥ + Click & Window Alt + Click#

위에 단축키를 누른 상태로 마우스로 클릭하는 곳 커서를 모두 한번에 잡아줘 수정하고싶은 부분들을 한번에 수정할 수 있도록 해준다.

Tip

세로로 한꺼번에 편집하고 싶은 부분만 지정할 때 완전 편함.

3. Mac ⌥ + ↓or↑ & Window Alt + ↓or↑#

현재 커서가 있는 줄을 위로, 아래로 한 줄 보낸다. 보내진 곳에 있던 줄은 이동된 줄의 위치로 이동된다.

4. Mac ⌥ + Shift + ↓or↑ & Window Alt + Shift + ↓or↑#

현재 커서가 있는 줄을 복사하여 위 or 아래로 복사해준다.

5. Mac ⌘ + / & Window Ctrl + /#

현재 사용하는 언어를 VSC에서 알아내 알아서 주석 처리를 해준다. (완전 편함.)

6. Mac ⌥ + Shift + I & Window Alt + Shift + I#

드래그된 모든 줄의 끝에 커서를 모두 생성해준다.

Tip

선택한 라인들의 끝에 뭔가 수정하거나 입력하고 싶을때

7. Mac ⌥ + Shift + Drag & Window Alt + Shift + Drag#

마우스 커서가 드래그하는 곳을 세로줄로 드래그후 한꺼번에 편집 가능

단축키는 잘 쓰면 능률도 올라간다.#

개발자 외에도 많은 사람들이 Ctrl + C, Ctrl + V 복사 붙여넣기를 많이 사용하는 것처럼

VSCode에 내장된 단축키를 잘 활용한다면 좀 더 효율적으로 vsc 코드 에디터를 활용할 수 있다는 기대감을 가지면서..

vsc 단축키 잘 사용하다가 다른 에디터에 vsc 만큼 단축키가 없으면 어떻하지..라는 생각도 든다.

what why 왜 필요한가?#

회사에서 매주 화요일 기술미팅인 테크톡을 온라인으로 진행하는데, 그 내용을 영상으로 캡쳐해서 유튜브에 올리는 작업을 하고 있습니다. 혼자 말하면서 영상을 캡쳐하는 작업이라면 내가 사용하는 맥북의 기본 마이크 또는, 헤드셋이나 이어셋에 붙어 있는 기본 마이크를 사용하면 됩니다. 하지만 온라인 미팅 내용이나 다른 영상을 플레이 하면서 나오는 소리를 다시 내 영상에 포함하려면 몇 가지 생각해야할 문제가 있습니다.

만약 내 PC의 기본 스피커에서 흘러 나오는 소리를 그대로 기본 마이크를 통해 다시 영상에 넣는다면 주변의 잡음이 오디오에 섞이게 됩니다. 아무리 좋은 비디오편집 도구를 사용한다고 해도 오디오에서 주변 잡음을 제거하는 일이 쉽지 않습니다.

제일 좋은 방법은 PC에서 나오는 오디오를 직접 영상 캡쳐프로그램(QuickTime Player)으로 넣어주는 방법입니다. 그때 필요한 장치가 바로 가상오디오 장치입니다.

macOS 11 이전에는 Soundflower 라는 이름의 가상오디오를 사용했었는데, macOS 11에서 Sourdflower 설치에 어려움이 있습니다. 그래서 검색하다 발견한게 BlackHole 입니다.

how 설치#

BlackHole Download에서 이메일과 이름을 입력하고 구독을 누르면 파일을 받을 수 있습니다. 좋은 프로그램을 무료로 사용하기 위해 구독은 기쁜마음으로 할 수 있습니다. 게다가 이 프로그램은 오픈소스이며 GPL-3.0 License 입니다.

파일을 다운받아 실행하면 BlackHole 2ch 라는 이름의 새로운 오디오기기가 추가됩니다. 추가된 오디오 기기를 확인하기 위해 응용프로그램 > 유틸리티 > 오디오 midi 설정를 실행 합니다.

how 스크린 캡쳐#

맥북에서 스크린 캡쳐는 QuickTime Player를 사용합니다. Command + Shift + 5 키를 누르면 바로 아래 이미지 같이 화면캡쳐 도구가 실행됩니다.

옵션에서 마이크를 BlackHole 2ch로 선택 하면 됩니다. 이때 한 가지 잊지말아야 할 내용은 맥북에서 나오는 출력 오디오도 BlackHole 2ch로 설정해야 한다는 사실입니다. 즉 스피커로 나오는 소리의 출력을 BlackHole 2ch로 우회하는 것이죠.

이 상태로 스크린 캡쳐를 실행하면 맥북에서 실행되는 유튜브 영상과 소리가 깨끗하게 잡음없이 캡쳐됩니다.

more 통합 오디오#

그런데, 여기서 또 하나의 문제가 있습니다. 블랙홀로 출력을 하게 되면 영상을 캡쳐하는 동안 스피커나 이어폰으로 소리를 들을수 없다는 겁니다. 이 문제는 영상을 캡쳐할때 내 목소리를 같이 녹화하지 못한다는 문제와도 연결이 됩니다.

이 문제를 해결하기 위해 mac에서 여러 오디오 장치를 통합 할 수 있는 통합 오디오기능을 이용할 수 있습니다.

위에서 실행했던 오디오 midi 설정을 다시 실행하고 아래쪽 + 버튼을 눌러 통합 기기(Aggregate Device) 를 추가하고 원하는 기기를 체크해서 새로운 입출력기기를 만듭니다.

이 기능을 이용하면 Google Meet 등 온라인 화상회의 내용을 캡쳐할 때 유용하게 이용할 수 있습니다.

즉,

• 화상회의 프로그램의 출력장치를 위 화면에서 만든 통합기기로 선택하고
• 캡쳐 프로그램의 입력장치도 통합기기로 설정하면
• 플레이되는 화상최의 영상을 캡쳐하면서
• 화상회의 대화도 녹음되고
• 이어폰으로 대화내용도 듣고
• 내가 마이크로 하는 말도 녹음이 가능하게 됩니다.

close#

맥북에는 비디오, 오디오 관련해서 다양한 장치와 기능이 있는것 같습니다. 좀더 많은 기능을 확인하려면 오디오 MIDI 설정 사용 설명서를 참고하세요.

more 윈도우용#

윈도우용은 아직 준비중인것 같습니다. 알림을 받고 싶다면 구독~
https://existential.audio/blackhole/windows/

svg#

• SVG = Scalable Vector Graphics 확장 가능한 백터 그래픽 입니다.
• xml 형식으로 그래픽을 정의 합니다.
• 텍스트 기반 웹 표준, 별도의 편집기가 없어도 편집 가능
• W3C 권장사양
• 비트맵 이미지와 비교해 이미지 품질 손실없이 렌더링 가능

new study project with D3#

d3js.org

앞으로 테크톡 시간에 제가 시리즈로 진행할 프로젝트에 대해 소개할까 합니다. 제목에도 있듯이 디쓰리 라는 이름을 가진 자바스크립트 라이브러리를 이용한 프로젝트 입니다. 디쓰리는 데이터 비주얼라이제이션을 위한 그래픽 라이브러리 인데요, 데이터 비주얼라이제이션이란 말 그대로 데이터를 보여주는 방법. 즉, 데이터 시각화를 의미합니다.

이 분야에 우리회사는 이미 아주 깊숙히 들어와 있고 관련된 리얼드리드, 리얼피봇, 리얼리포트 등, 제품도 이미 만들었고, 만들고 있습니다.

이런 시각화 라이브러리인 디쓰리 D3 를 이용해서 테크톡 시간에 진행 할 수 있는 간단한 무언가(?)를 만들어 볼 계획입니다.

example#

Times Sunday Review 2013년 기사

이 페이지는 미국의 타임즈지에 2013년에 올라온 기사인데요, 2007년 부터 2012년까지 S&P 500에 올라온 기업들이 법인세를 어떤 세율로 내고 있는가에 대한 데이터를 그래프로 표현한 겁니다.

자세히 보시면 애플에 부과한 세율이 14% 인데요 이 세율이 너무 낮게 책정되었다는 의회 청문회를 기사로 작성하면서 그 근거 데이터를 비주얼하게 보여준 기사라고 할 수 있습니다.

또 The View by Industry 버튼을 누르면 업종별로 펼쳐서 그래프를 볼 수도 있습니다. 여기서 애플은 정보기술 업종의 다른 기업들에 비해서도 아주 낮은 세율을 적용받고 있는걸 볼 수 있습니다. 물론 금액을 표시하는 시가총액을 나타내는 원의 크기를 보면 대표적인 기름 회사인 엑슨모빌 같은 기간산업 기업들과 비슷한데도 불구하고 부과되는 세율은 아주 작다는 것을 한눈에 알 수 있습니다.

이런 형식의 그래프를 버블 차트라는 이름으로 부르는것 같습니다. 저도 아직은 잘 모르겠지만 공부를 하다보면 알 수 있겠죠?

plan#

일단 디쓰리 D3 학습을 통해 알게된 내용을 매주 테크톡 시간에 발표하고 테크웰 문서에 올려놓을 계획입니다. 그리고, 매주 공부한 내용을 블로그를 통해 텍스트로도 올려놓을 생각입니다.

지금 하고있는 업무가 있기 때문에 많은 시간을 할애하지는 못하겠지만 그래도 틈틈이 공부해서 2달 안에 뭔가 작은 결과물을 하나 만들어서 볼 계획 입니다.

초급 개발자들도 같이 참여할 수 있게 내용은 처음부터 쉽게 작성하고 테크톡 시간에는 학습한 내용에 대한 리뷰만 발표하겠습니다.

methods#

D3를 학습하는 방법은

• 매주 조금씩 학습
• 테크웰에 학습하면서 작성한 문서 공개
• 테크톡 시간에 간단하게 학습한 내용 또는 학습할 내용을 발표

resource#

여러가지 산발적인 리소스들, 하지만 그들이 향하는 방향은 단 하나 여야 한다. 데이터 시각화.

• svg
  • w3schools
  • mozilla
• d3 examples
  • observable
  • vega-lite
• data
  • learn
    • data science
  • samples
    • github wooritech
    • ilab service request
    • realdesk
• others
  • kaggle

trace#

백패킹이나 캠핑의 생태계에 leave no trace (LNT) 라는 말이 있습니다. 우리가 어딘가에서 머무르고 있다가 그 자리를 떠날 때, 쓰레기 같은 흔적을 남기면 안 된다는 의미에서 사용하는 말입니다. 하지만, 일반적인 회사의 생태계에서 이런 말을 듣는다면 "놀았네" 라는 말을 들을 수도 있을 것입니다. ㅋㅋ

개발자로서 나는 가능한 한 많은 발자취를 남기려고 애를 썻던것 같습니다. 온라인이건 오프라인이건 여러 가지 방법으로 많이 남기려고 노력 했습니다. 물론 그 흔적들을 한눈에 볼 수 있는 방법은 없지만 찾아보고자 마음먹으면 방법은 있을 것입니다.
하지만, 나는 정말 해야 할 일들을 한 것인가에 대한 의문이 들 때가 있습니다. 예를 들어 - 그럴 리는 없겠다 싶지만 - '혹시 하지 말아야 할 일을 한 것은 아닌가?' 또는 '하지 않아도 되는 일을 한 것은 아닌가?' 하는 생각들 입니다.

곰곰이 생각해 보면 가야 할 길을 미리 정하고 남긴 발자국이 아니라 여기저기 다니면서 흔적만 잔뜩 만들어 놓은것 같은 느낌입니다.

올해에는 흔적 남기는 일을 잠시 멈추더라도 가야 할 길을 미리 정하고 가야겠습니다. 다시 말해서, 장기적으로 또는, 단기적으로 목표를 계속 되짚어 점검하면서 일을 해야겠는 생각입니다.

로드맵을 통해 목표 설정하기.#

draft#

완성된것 보다 더 많은 영감을 주는 미완성들이 있습니다.

여러 가지 프로젝트를 동시에 개발 하다 보면 외부 라이브러리나 패키지를 사용할 일이 많이 있습니다. 이런 외부 프로그램을 사용해 보기 위해 연습용 디렉토리를 만들고 코드를 만들어 보는데 실제로 연습을 완성한 것도 있지만 그렇지 못한 미완성의 코드들도 많이 있습니다.

이것들을 한군데 모아놓고 시간 날 때 하나씩 열어서 코드를 보다 보면 그것들을 만들 당시의 기억이 떠오를 때가 있습니다. 그때는 왜 그런 생각을 했었는지, 지금은 어떻게 생각이 바뀌었는지, 또 어떤 지식이나 방법들 때문에 지금은 그런 방식을 사용하지 않는다든지 등등 여러 가지 생각들이 떠오르기도 하고 잘못된 습관이나 지식을 다시 깨닫게 되기도 합니다.

올해에는 이런 경험을 같이 공유해 보면 좋겠다는 생각을 해 봅니다.

샌드박스에 연습 공유하기#

read#

글을 읽는 다는건 무지 귀찮은 일입니다.

유튜브같은 영상물을 자주 보다보니 더더욱 글을 읽는 것이 불편하고 힘들어 지는것 같습니다. 글과 영상에는 각각의 장단점이 있습니다. 개인적으로, 아무리 잘 만들어진 강좌 영상 일지라도 글에서 얻게되는 안정된 느낌의 지식은 기대하기 어렵다고 생각합니다.

꼭 이런 이유에서만은 아니지만 올해에는 더 많이 읽고, 또 읽는것에 멈추지 않고 정리까지... 해야 겠습니다.

📚 추천 바랍니다.#

write#

글읽기 만큼이나 글 쓰기도 귀찮은 일입니다.

요즘들어 깃허브에 올리는 이슈, 업무적인 메일이나 단순 기록, 문자를 보내거나 채팅에 쓰는 글 말고 글쓰는 일이 거의 없는것 같습니다. 조금 오랜시간 고민하고 생각하면서 글쓰는 일은 거의 없는 것 같습니다. 더군다나 작년엔 코로나로 취미생활도 못하는 바람에 동호회 카페에 후기 같은 것도 작성할 일이 많지 않았습니다.

올해는 가끔이라도 생각하면서 글을 써야 겠습니다. 생각하면서 글을 쓰고 지우고 고치고 하다보면 조각이 사라진것 처럼 보이던 퍼즐의 한 부분이 맞춰지는것 같기도 합니다. 지금처럼 블로그에 글도 자주 올려봐야 겠습니다.

블로그에 글쓰기#

custom blog page#

도큐사우러스가 제공하는 블로그 목록페이지를 조금 수정했습니다. 도큐사우러스의 블로그 플러그인 페이지에 대한 연습 정도로 생각하고 변경할 수 있는 아래 네개의 페이지 중 목록과 내용 페이지만 수정했습니다.

writing, what?#

테크웰 사이트의 블로그 포스트 작성은 아무런 제약이 없는게 맞겠죠? 누구나, 어떤 내용이든 작성해서 공유하면 좋을것 같습니다. 물론 사이트는 외부에 공개되겠지만 보안사항이 아니면 관계없을것 같습니다.

writing, how?#

blog 디렉토리에 기존에 작성된 내용을 참고하세요. 2019 폴더는 내용에 포함된 경로등의 오류로 일단 새로운 사이트에 포함시키지 않았습니다. 필요하면 추가하면 나중에 추가하기로 하죠. 다시한번, 작성 방법은 기존 작성된 포스트나 도큐사우러스의 블로그 작성 가이드 를 참고하세요.

CropImg#

CropImg 라는 이름의 이미지 잘라내기 컴포넌트를 사용해 보세요. 사용법은 소스코드를 참고하거나 기존에 작성된 블로그 포스트를 참고하세요.

CropImg 사용예#

소스 이미지의 상단 50픽셀을 잘라낸것 처럼 상단으로 이동시켜 보여줍니다. 아래 내용을 마크다운파일 내부에 입력하면 이미지를 표시할 수 있습니다. 이 컴포넌트는 완전히 테스트를 마치지 않은 미숙한 컴포넌트 입니다.