이 글은 원래 제 블로그 포스트에서 작성된 것입니다. AstroPaper 테마를 사용하여 블로그 글을 작성하는 방법을 보여주기 위해 이 글을 게시했습니다.
ReactJS, TypeScript, Styled-Components를 사용하여 터미널 형태의 웹사이트를 개발했습니다. 자동 완성, 다중 테마, 명령어 힌트 등의 기능을 포함합니다.
소개
최근에 포트폴리오와 블로그를 개발하고 배포했습니다. 좋은 피드백을 받아 기뻤습니다. 오늘은 새로운 터미널 형태의 포트폴리오 웹사이트를 소개하려 합니다. ReactJS와 TypeScript를 사용하여 개발했습니다. CodePen과 YouTube에서 이 아이디어를 얻었습니다.
기술 스택
이 프로젝트는 백엔드 코드 없이 프론트엔드로만 구성된 프로젝트입니다. UI/UX 부분은 Figma에서 디자인했습니다. 프론트엔드 사용자 인터페이스에는 순수 JavaScript나 NextJS 대신 React를 선택했습니다. 왜 그랬을까요?
- 첫째, 선언적 코드를 작성하고 싶었습니다. JavaScript로 HTML DOM을 명령형으로 관리하는 것은 정말 지루합니다.
- 둘째, React이니까요! 빠르고 신뢰할 수 있습니다.
- 셋째, NextJS가 제공하는 SEO 기능, 라우팅, 이미지 최적화가 크게 필요하지 않았습니다.
물론 타입 체크를 위해 TypeScript도 사용합니다.
스타일링에는 평소와 다른 접근 방식을 택했습니다. 순수 CSS, Sass, TailwindCSS 같은 유틸리티 CSS 프레임워크 대신 CSS-in-JS 방식(Styled-Components)을 선택했습니다. Styled-Components에 대해서는 한동안 알고 있었지만 실제로 사용해 본 적은 없었습니다. 그래서 이 프로젝트에서의 Styled-Components 작성 스타일과 구조가 매우 잘 정리되어 있거나 훌륭하지는 않을 수 있습니다.
이 프로젝트는 매우 복잡한 상태 관리가 필요하지 않습니다. 다중 테마 지원과 prop drilling을 방지하기 위해 ContextAPI만 사용했습니다.
기술 스택을 간단히 정리하면 다음과 같습니다.
- 프론트엔드: ReactJS, TypeScript
- 스타일링: Styled-Components
- UI/UX: Figma
- 상태 관리: ContextAPI
- 배포: Netlify
주요 기능
이 프로젝트의 주요 기능은 다음과 같습니다.
다중 테마
사용자가 여러 테마를 변경할 수 있습니다. 이 글을 작성하는 시점에 5가지 테마가 있으며, 앞으로 더 많은 테마가 추가될 예정입니다. 선택한 테마는 로컬 스토리지에 저장되어 페이지를 새로고침해도 테마가 변경되지 않습니다.
명령줄 자동 완성
실제 터미널과 최대한 유사한 느낌을 주기 위해, ‘Tab’ 또는 ‘Ctrl + i’를 누르면 부분적으로 입력된 명령어를 자동으로 완성해주는 명령줄 자동 완성 기능을 구현했습니다.
이전 명령어
위/아래 화살표 키를 눌러 이전 명령어로 돌아가거나 이전에 입력한 명령어를 탐색할 수 있습니다.
명령어 기록 보기/지우기
명령줄에 ‘history’를 입력하면 이전에 입력한 명령어를 볼 수 있습니다. ‘clear’를 입력하거나 ‘Ctrl + l’을 누르면 모든 명령어 기록과 터미널 화면을 지울 수 있습니다.
마치며
이것은 정말 재미있는 프로젝트였으며, 이 프로젝트의 특별한 점은 (프론트엔드 프로젝트임에도 불구하고) 사용자 인터페이스보다 로직에 집중해야 했다는 것입니다.