What is DEVELOPIC 🚀

사진 작가들을 위한 블로그 플랫폼
사진과 이야기를 기록하고 공유할 수 있는 공간을 제공하고,
같은 분야의 경험·지식을 나눔으로써 작가들의 커뮤니티 구축을 돕는 서비스를 목표로 한다.

Next.js

리액트는 컴포넌트 기반 UI를 만들기 위한 라이브러리이다. 정해진 규격 안에서 각각의 기능을 구현하는 프레임워크가 아닌, 필요한 기능 단위 별로 도입해 사용하는 라이브러리인 만큼 UI 구현에 초점을 두고 있다.

그렇기 때문에 리액트로 웹사이트를 만들 때 UI 구현 외의 기능은 별도의 라이브러리를 조합하거나 규격화된 리액트 프레임워크를 사용하여 개발자 경험과 개발 속도를 향상시키는 방법이 있다. Next.js는 리액트 개발 성능을 향상시키는 다양한 기능을 지닌 프레임 워크이다. 그 중에서도 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임 워크로 널리 알려져 있다.

디벨로픽의 핵심인 블로그 서비스의 특성상 검색엔진 노출을 위한 SEO 점수를 높이기 위해 SSR을 적용하기로 했기 때문에 조금 더 편리한 구현을 위해, 그리고 SSR 외에도 Next.js에서 제공하는 여러 유용한 기능들과 프레임워크를 사용한 개발의 장단점을 경험해보고 싶었기 때문에 Next.js를 선택해 프로젝트를 진행했다.

자세한 이야기 📝
👉 [developic] Next.js를 사용하는 이유-1 CSR vs SSR?
👉 [developic] Next.js를 사용하는 이유-2 개발자 경험과 유저 경험
👉 [developic] Image Component - Next.js 이미지 최적화 기능

TypeScript

자바스크립트의 큰 특징인 동적 타입(dynamically typed)은 프로그램이 동작할 때 실시간으로 타입이 결정되어 런타임 환경 때 에러가 발생할 위험 요소를 가진다. 이런 자바스크립트에 타입이 더해진 타입스크립트는 정적 타입(statically typed)으로 코딩을 할 때 타입이 결정되어 코딩을 하면서 사전에 많은 에러를 잡을 수 있다는 큰 장점이 있다.

동적으로 타입이 결정되는 자바스크립트가 더 유연하고 빠르게 만들 수 있어 좋은 게 아니냐고 생각할 수도 있지만, 자바스크립트는 타입이 없기 때문에 코드를 봤을 때 어떤 데이터를 담고 있는지, 어떤 인자를 받는지 한번에 유추하기 힘들어 가독성이 떨어지고, 앞서 말한 것처럼 개발을 하면서 실시간으로 에러를 잡아내기 어렵기 때문에 타입스크립트를 이용하여 프로젝트의 안정성과 유지 보수성을 높이는 것이 중요하다고 판단해 타입스크립트를 도입했다.

Emotion

emotion.js는 CSS-in-JS의 종류 중 하나로 JavaScript 안에서 스타일을 작성할 수 있게 해준다. 먼저 우리 프로젝트는 리액트 컴포넌트를 기반으로 하기 때문에 컴포넌트 단위의 추상화, 중복 컴포넌트 스타일링 재사용성, 스타일 스코프 지정, JavaScript를 최대한 활용한 향상된 동적 스타일링 등의 이점을 고려하여 스타일 구성 방식 중에서 CSS-in-JS를 선택했다.

그리고 CSS-in-JS의 대표적인 라이브러리인 emotion과 styled-components를 비교해 비슷한 기능을 수행하면서 더 적은 번들 크기를 가지고 있고, styled-components의 style API 기능을 동일하게 사용할 수 있으며, 서버사이드렌더링 시 별도의 작업이 필요한 styled-component와 달리 Next.js 10버전 이상이라면 추가 작업이 필요하지 않다는 장점을 가진 emotion으로 결정했다.

자세한 이야기 📝
👉 [developic] CSS-in-JS & styled-components vs emotion

코딩 컨벤션

코딩 스타일의 일관성을 지키고 코드 가독성을 높이면서 팀원들과 원활한 커뮤니케이션을 하고자 코딩 컨벤션을 적용하기로 했다. Airbnb의 React/JSX 스타일 가이드를 커스텀하여 따른다.