[프로젝트 회고] 온라인 교육 소개 홈페이지 개발 프로젝트

🚀 정보

• 프로젝트 링크
• 배포주소 바로가기 (width = 1200px 이상 화면에 최적화되어있습니다.)
• 주제 : TypeScript와 Next.js를 이용한 애니메이션 홈페이지 개발 프로젝트

Facts (사실, 객관)

• Next.js를 사용하여 진행한 두 번째 프로젝트
• 다양한 애니메이션들을 직접 구현, 사용해 볼 수 있었다.

Feelings (느낌, 주관)

인터넷에서 여러 홈페이지를 보다 보면 멋진 애니메이션과 함께 잘 꾸며진 페이지들이 있습니다.

이런 페이지들을 볼 때마다 프론트엔드 개발자로서 자극을 받아 나중에 한번 구현해 보고 싶다 느끼곤 했었습니다.

이번 프로젝트는 생각했었던 여러 애니메이션들을 직접 구현하고 사용할 수 있었던 좋은 기회였으며, Next.js를 사용한 두 번째 프로젝트였습니다.

프로젝트 설계부터 진행했기에 자잘 자잘 한 에러도 많았지만 에러를 수정하고 블로그에 정리하면서 좀 더 성장한 기분을 느낄 수 있었습니다.

Findings (배운 점)

🧇 Next.js + TypeScript + Styled-components 에러

벨로그 정리

😥 Next.js에서 발생한 Styled-Components 에러
React나 TypeScript를 이용하여 프로젝트를 진행할 때 컴포넌트의 props를 이용하여 쉽게 스타일을 다르게 코딩할 수 있는 장점 때문에 styled-components를 사용한다.

하지만 이번에 Next.js를 이용하여 프로젝트를 진행했는데 style이 바로 적용되지 않고 일정 시간 후에 적용되는 에러를 발견했다.

그 전 프로젝트는 프로젝트 설계를 다른 팀원이 했기에 발견하지 못해서 당황했지만 역시 구글은 답을 알고 있었다...(갓 구글!)

링크에서 계속...

🧇 ReactNode와 ReactElement

벨로그 정리
클래스형 컴포넌트는 render메소드에서 ReactNode를 리턴한다. 함수형 컴포넌트는 ReactElement를 리턴한다.

JSX는 바벨에 의해서 React.createElement(component, props, ...children) 함수로 트랜스파일된다.

html 처럼 생긴 문법을 리액트 라이브러리의 렌더링 함수로 변환하는것이다. 그래서 JSX를 사용하지 않고도 리액트를 사용할 수 있으나(JSX없이 사용하는 React) 이렇게 하면 매우 불편하다.

// jsx
<div>Hello {this.props.toWhat}</div>
<Hello toWhat="World" />

JSX는 아래 처럼 변경된다.

// transpile
React.createElement('div', null, `Hello ${this.props.toWhat}`);
React.createElement(Hello, {toWhat: 'World'}, null);

이 React.createElement의 리턴 타입이 바로 ReactElement와 JSX.Element이다.

🧇 css keyframe, transition

애니메이션 장점

CSS 애니메이션은 기존에 사용되던 자바스크립트를 이용한 애니메이션보다 다음 세 가지 이유에서 이점을 가진다

• 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다.
• 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링됩니다.
• 브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있습니다. 예를 들어 현재 안보이는 엘리먼트에 대한 애니메이션은 업데이트 주기를 줄여 부하를 최소화할 수 있습니다.

자세한 설명 및 사용방법은 링크로 대체

🧇 ReactPlayer

React.js 기반 react-player

자동 재생, React.js(Next.js) 프로젝트에 사용하기 편한 라이브러리, Control UI 커스텀 가능, 다양한 브라우저 호환 (IE, Chrome, Firefox, Edge…등)의 이점이 있어 사용

🧇 &:nth-of-type(odd) 가상 클래스

같은 유형의 n번째 형제를 선택
키워드, 정수, 공식(an+b 등)이 들어갈 수 있음.

Affirmation(자기 선언)

• 새로운 걸 배우는 걸 두려워하지 말자!!
• 프로젝트가 끝난 후 정리를 잘하자!!