v2.2.2

다음과 같은 사항들을 반영합니다.

• Mobile View 에서 Project, Member 페이지의 폰트 사이즈가 커 보이던 이슈 수정
• Footer 에 아이콘 크기 수정

What's Changed

• v2.2.2 QA 반영 by @jonghopark95 in #78

Full Changelog: v2.2.1...v2.2.2

v2.2.1

v2.2.1 에선 다음과 같은 사항을 반영합니다.

• Mobile 버전에서 Navigation List font-family 가 의도한 설정대로 반영되도록 수정
• #76 Person 컴포넌트의 블러 효과 조정
• #77 NavigationItemList 의 google form 버튼 정렬되도록 폰트 수정
• 일부 운영진 정보 수정
• Person 컴포넌트 아이콘 사이즈 수정 (48 x 48 => 36 x 36)

What's Changed

• v2.2.1 QA 반영 by @jonghopark95 in #75

Full Changelog: v2.2.0...v2.2.1

v2.2.0

멤버 페이지 추가

해당 버전은 역대 운영진을 알 수 있는 member 페이지와 관련된 컴포넌트를 새롭게 추가합니다.

What's Changed

• v2.2.0 멤버 페이지 추가 by @jonghopark95 in #73

Full Changelog: v2.1.0...v2.2.0

v2.1.0

해당 버전은 개발자 경험을 향상시키기 위한 큰 리팩토링이 있습니다. 주로 다음과 같은 부분이 수정되었습니다.

• 폴더 구조
• 컴포넌트
• 패키지
• Bundle Size
• 개선해야 할 점

폴더 구조

common, modules

기존 폴더에서는 페이지 별로 사용하는 로직들과 모든 페이지에서 사용하는 로직들의 구분이 되어있지 않았습니다.

예를 들어, v1.0.0 에선 components 라는 폴더에 여러 컴포넌트를 추가하였습니다.

v2.0.0 으로 올라오며 페이지 별로 사용하는 컴포넌트를 구분하기 위해 page-components 라는 폴더를 만들었지만,

이는 임시 방편에 불과할 뿐 근본적으로 여러 컴포넌트 간 hierarchy 가 일관성이 없었습니다.

또 하나의 예로, image 를 관리하기 위해 public 에 모든 파일들을 넣었으며 이로 인해 어떤 파일이 어떤 페이지에서 사용되는지 잘 분간이 되지 않았습니다.

이를 개선하기 위해 common, modules 폴더를 추가하였습니다.

common 은 둘 이상의 페이지들이 공용으로 사용하는 로직, assets 들을 넣고, modules 는 특정 페이지가 사용하는 로직들을 넣는 방식으로 위계를 확실히 정하였습니다.

컴포넌트

전반적인 로직 수정, 추상화, 모듈화

기존 컴포넌트들은 특정 도메인에 지나치게 종속되어 있거나, 충분한 모듈화가 되어있지 않아 가독성과 가용성이 매우 낮았습니다.

이를 문맥에 맞게 모듈화, 추상화하였습니다.

또, 좀 더 효율적인 로직이나 보다 나은 가독성을 지닌 코드가 생각나는 경우 관련 로직을 수정하였습니다.

media query 제거

v1.0.0 에선 주로 media query 를 사용하여 반응형 컴포넌트를 표현했습니다.

그러나 JS 단에서 device 너비에 따라 대응하기 위한 공통된 수단이 없었고, 이에 v2.0.0 에선 device 너비에 따라 mobile, tablet, desktop 을 구분할 수 있는 useDeviceContext 훅을 추가하였습니다.

그러나 이는 css, js 단에서 일관되지 않은 방식으로 반응형에 대한 대응을 하게 만들었습니다.

이에 v2.1.0 에선 media query 를 제거하고 useDeviceContext 로 반응형 스타일을 관리합니다.

패키지

styled-components 에서 emotion.js 로의 대체

css-in-js 패키지를 styled-components 에서 emotion.js 로 교체하는 작업을 하였습니다.

이유는 아래와 같습니다.

css prop, className 을 사용한 깔끔한 코드 작성

styled-components 를 하위 컴포넌트로 스타일을 넘겨줘야 할 경우 일일히 새로운 prop 을 만들어서 해당 prop 에 스타일을 받아 wrapper 컴포넌트에 넣어줘야 합니다.

일관성있는 style prop naming 을 작성하기 어렵기 때문에 이는 다소 번잡해보입니다.

emotion.js 는 css prop 을 지원합니다.

해당 prop 은 key, ref prop 처럼 하위 컴포넌트로 전달되는 prop 이 아니며, 컴파일 과정에서 className 으로 대체됩니다.

css prop 에 스타일을 넣어주고, 하위 컴포넌트에선 이를 className 으로 받아 wrapper component 에 className={className} 처럼 넣어주면 됩니다.

간단한 스타일을 css prop 을 사용하여 표현 가능

styled-components 는 간단한 스타일을 작성한다 하더라도 새롭게 태그를 만들어줘야 합니다.

emotion.js 는 css prop 을 이용하여 아래와 같이 간단하게 작성할 수 있습니다.

<div css={{ marginBottom: 16 }} />

next.js 와의 궁합

emotion v10 버전부터 next.js 에서 특별한 설정없이 SSR 지원이 됩니다.

사용하지 않는 패키지 제거

더 이상 사용하지 않는 아래의 dependency 를 제거하였습니다.

• css-loader
• file-loader
• react-ripples
• sass
• styled-components
• styled-reset

Bundle Size

위 작업들의 결과로, 초기 bundle size 가 다소 감소하였습니다.

왼쪽이 이전 버전, 오른쪽이 현 버전입니다.

개선해야 할 점

추가 페이지 작업이 시급하여 시간 관계상 넘어가지만, 다음 버전에서 개선해야 할 점입니다.

• Carousel 컴포넌트를 더 추상화해야 합니다. 지금은 지나치게 project 라는 도메인에 종속되어 있습니다.
  해당 컴포넌트 추상화 후에 Card 컴포넌트를 수정해야 합니다.

• Carousel 컴포넌트의 hierarchy 를 더 올려야 합니다. about, page 에서 둘다 사용하는 컴포넌트인데 지금은 project 폴더에 위치하고 있습니다.

• project 페이지에서 선택된 project 정보를 하위 컴포넌트로 넘겨주는 로직 개선이 필요합니다.
  지금은 useProjectInfo 훅을 사용하고 있는데, 관련 context 의 개선이 필요합니다.

• 특정 페이지, 공용으로 사용하는 대부분의 이미지를 common, pages 에 넣었지만, 아직 public 폴더에 남아있는 파일들이 있습니다. 이와 관련한 개선이 필요합니다.

• 의존성 버전들을 최신으로 올려야 합니다.

• 현 버전은 개발자 경험 향상을 위한 버전 업데이트이며, 웹 접근성, 번들 사이즈 최적화를 위한 버전 업데이트가 아닙니다.
  이를 위한 개선도 필요합니다.

What's Changed

• v2.1.0 repository 리팩토링 by @jonghopark95 in #72

Full Changelog: v2.0.0...v2.1.0

v2.0.0

favicon 바꾸기