동아리 Promotion 프로젝트 회고

minsgy·2021년 2월 13일
2

회고

목록 보기
4/8
post-thumbnail

동아리 모집을 준비하면서..

내가 현재하고 있는 동아리는 웹 프로그래밍 교육 동아리이다.

멋쟁이사자처럼 9기 모집을 준비하면서 어떻게 홍보를 할까? 라는 고민을 했었다.

결국에는 하나의 프로모션 페이지를 간단히 설 연휴(...)를 이용해서 내 개인 프로젝트로 만들어보기로 했다!


그렇게 시작된 프로젝트 개요

나는 디자인에 대해서 못하는 걸 알기 때문에,
어디서 참고를 하고 만들어야 할까? 고민을 많이했다.

또한 가장 문제였던 부분은 반응형 웹에 대한 고민 이였다.

먼저 프로모션 페이지들을 참고하기로 했다.


멋쟁이사자처럼 공식 홈페이지

  • 모바일 + 데스크탑 반응형이 적용되어있는 페이지
  • 기본적으로 Burger메뉴 등 으로 이루어져있다.

패스트캠퍼스

  • 모바일 + 데스크탑 반응형으로 이루어짐.
  • 역시 Burger 메뉴가 존재한다.

모아둔 내용

  • [X] 데스크탑 화면 구성 생각
  • [X] 모바일 화면 구성 생각
  • [X] 버튼 이벤트 및 애니메이션 구성 생각

15일날, 바로 만든 페이지를 배포 할 생각이므로 간단하게 구성했다.
그리고 추가적인 컴포넌트 설계를 바로 시작했다.


컴포넌트 구성

┣ 📂MainPanel
┃ ┣ 📂CenterPanel
┃ ┃ ┣ 📜About.js
┃ ┃ ┣ 📜Curriculum.js
┃ ┃ ┣ 📜History.js
┃ ┃ ┣ 📜Recruit.js
┃ ┃ ┗ 📜SNS.js
┃ ┣ 📜Center.js
┃ ┣ 📜Footer.js
┃ ┗ 📜Header.js
┣ 📂PromotionPanel
┃ ┗ 📜Promotion.js
┣ 📂SidePanel
┃ ┗ 📜SideMenu.js
┣ 📂assets
┃ ┣ 📂Css
┃ ┃ ┣ 📜Main.css
┃ ┃ ┣ 📜Promotion.css
┃ ┃ ┗ 📜SideMenu.css
┃ ┣ 📂Font
┃ ┃ ┣ 📜Eland.otf
┃ ┃ ┗ 📜Eland.ttf
┃ ┗ 📂Image
┃ ┃ ┣ 📜about_img.png
┃ ┃ ┣ 📜likelion-background.png
┃ ┃ ┣ 📜likelion-logo.png
┃ ┃ ┗ 📜logo.png
┣ 📂utils
┃ ┣ 📜RecruitButton.js
┃ ┗ 📜TopButton.js
┗ 📜MainPage.js

정말 많은 컴포넌트 구조이다...

  • MainPanel - 메인 페이지 구성
  • PromotionPanel - 프로모션 페이지 구성
  • SidePanel - Burger Menu 구성
  • Assets - 여러 정적(Static) 파일 구성
  • Utils - 버튼 및 링크 구성

굉장히 많은 컴포넌트로 분리해서 관리를 했다.

만들때는 힘들었지만, 유지보수 및 관리를 할 때는
최대한 명시적이고 편하게 하려고 노력했다.

그리고 ReactJS로 시멘틱 Markup 방법을 할 수 있다는 걸 알고, 처음 시도해보았다.


Styled-components

CSS만으로 React Component를 스타일링?

Styled-components은 CSS-in-JS 라이브러리에 가장 대표적인 라이브러리다.

  • CSS in JS
    스타일 정의를 CSS파일이 아닌 JS로 작성된 컴포넌트에 바로 삽입.

이거를 왜 사용할까?

  • React/Vue/Angular와 같은 모던자바스크립트 라이브러리가 유행.
  • 이는 웹 애플리케이션의 재활용 빌딩 블록을 개발 방법을 주류로 유행.

이러한 방식으로 재활용성을 높여서 프로젝트를 보다 쉽게 구성할 수 있게함!

물론.. 이러한 방식도 결국 **하나의 유행 이라는점! **알아두면 좋다.


Styled-component 사용 방법

  1. npm i styled-components --save
  1. import styled from "styled-components"; 정의
  2. 그렇게 만들어진 컴포넌트를 사용한다.

위와 같은 방식으로 **하나의 컴포넌트에 대해서 Style을 지정해준다.
**

위와 같은 방식으로 프로젝트를 진행했는데 너무 좋더라..
무엇보다 SCSS을지원해 코드 방식이 직관적이고 정말 편했다.

그렇게 뚝딱뚝딱 페이지를 반응형까지 구현한 페이지이다.


최종 결과물 페이지

**최종적으로 반응형 React를 활용한 SPA **프로젝트이다.

🔗 [배포 페이지 링크] (https://minsgy.github.io/2021_SCH_Likelion_Promotion/#/) + favicon 설정 및 OG Tag까지 완료했다.

📃 Promotion Animation Page

🖥 Main Page - Desktop

📱 Main Page - Mobile

🏷 OG Tag Setting

아주 팬시하게 배경과 설명이 적혀있다. :)


마무리하며..

와.. 이번 프로젝트를 진행하면서,
웹에 대한** 시멘틱 마크업**이 React에서도 가능하다는 것을 알았다.

그리고 어느새 내 깃허브에 핀 박힌 프로젝트들은 반 이상 주제가
현 동아리에 대한 주제로 진행 되있더라..^^~

개인적으로 이러한 아이디어를 주는 자체가 너무 고맙다.
만들고 싶은것들이 절로 생기는 동아리 활동이더라.

프로모션을 보고 열정 넘치는 지원자들이 많았으면 좋겠다 :)

profile
커뮤니케이션은 내 성장제🔨

관심 있을 만한 포스트

0개의 댓글