상세 컨텐츠

본문 제목

[회고] 랜딩페이지를 A-Z까지

일상

by 개봉박살 2022. 2. 28. 17:48

본문

0. 들어가기 전에...

아는 지인으로 부터 랜딩페이지를 하나 만들어달라는 요청이 들어왔다.

많은 개발자들이 자주 받는 부탁중에 하나다. 이번기회에 해보고 싶은 기법들을 적용하며 공부도 할겸 기간을 넉넉히 달라고 부탁했다.

다행히도 승낙을 해줬고 나는 고작 랜딩페이지에 온갖 기법들을 적용해 보기로 했다. 

이 글은 V1.0으로 랜딩페이지를 런칭하기까지의 회고이다.

 

1. 프로젝트 구성

  • Front-end
    • React-js : 랜딩페이지라도 요구사항을 뜯어보다보면 눈덩이처럼 불어난다....이번에도 마찬가지 였다. 이메일 발송/ 카카오톡 발송 / 관리자 페이지에서 이미지 변경 및 등록 ...등등....결국 나중에 유지보수도 해야겠다 싶어서 프레임워크를 도입하기로 했다.(라이브러리인가 프레임워크인가를 여기서 논하지는 말아달라....)
  • Back-end
    • Spring-boot : TDD를 적용하고싶었기에 rest-docs를 적용했다.(참...별것도 아닌 랜딩페이지에 별걸다 갖다 붙였다....)
      • Plug-in
        1. Spring-security    - JWT token authorization
          • LoadBalancer가 분산처리를 해서 session인증을 사용 할 수 없다. 물론 쿠키를 이용해서 로드벨런서에게 인스턴스를 지정해 줄수는 있지만 여기선 그런것따위 고려하지 않는다....내맘이다...
        2. Spring-restdocs  - API Documentation
        3. Spring-validation - 유효성 검사
        4. flyway                   - Schema(Domain) version management
        5. Spring-JPA          - Java ORM
          • QueryDSL을 쓰고싶었지만 그럴만한 규모가 되지 않고 그걸 쓸만한 일을 만드는것도 귀찮아서 패스...
        6. Lombok
        7. ModelMapper      - Persistence Control - 거창하게 썼지만 entity에 영속성을 끈어주기 위해 사용함
        8. Junit5                    - Test Driven Development - 이번 프로젝트의 핵심 TDD!!!!
  • Infrastructure
    • AWS
      • Elastic Beanstalk : 무중단 배포와 영리한 LoadBalancer를 위해 탁월한 선택이 될 Elastic Beanstalk를 사용해 보고 싶었다.
      • S3 : 배포를 위한 저장공간과 프론트 서비스를 위해
      • Cloud Front : SSL인증서를 적용하기 위한 서비스
      • ACM : AWS Certification Manager / HTTPS 프로토콜을 위해 SSL인증서 발급
      • RDS : AWS mariadb
    • Git hub
      • Branch
        • master : 랜딩 페이지 - React
        • admin : 관리자 페이지 - React
        • back : RestAPI - Spring boot
      • action
        • 각 브랜치 푸시 이벤트 배포 트리거
          • 아직 백엔드 CI/CD적용 못함....귀차니즘....

 

2. Out put

  front : https://hana-package.syopingbaeg.com/

 

종이쇼핑백 및 포장박스(케이스) 제작,가공, 전문회사

 

hana-package.syopingbaeg.com

  admin : https://admin.syopingbaeg.com/

 

React App

 

admin.syopingbaeg.com

  api - document : https://hana-api.syopingbaeg.com/docs/index.html

 

Rest API Guide

files 컬렉션 파일 첫 첫이미지로 썸네일 제작함(정사각형 추천)

hana-api.syopingbaeg.com

 

  git : https://github.com/zero2080/hana-package.git

 

GitHub - zero2080/hana-package: 하나패키지 - 프론트

하나패키지 - 프론트 . Contribute to zero2080/hana-package development by creating an account on GitHub.

github.com

 

3. 돌아보며...

참 이 프로젝트는 의미가 다양하다....회사 사수라 부를만한 사람이 들어오면서 시작했고...그사람이 나가며 끝났다....

회사와는 별상관없이 진행했던 개인프로젝트지만 이상하게 느낌이 다르다...

어쨋든...이 프로젝트를 하며 배운건 혼자 다 하려는 욕심을 조금은 내려놔도 될만한 타이밍에 온거같다. 이제 백엔드에 집중해도 될만한 시기라 생각된다...내가 온 이뤄온 웹개발자로서의 길....그리고 앞으로 걷게될 개발자로서의 방향성...

이만하면 개념은 잘 잡혔다 생각한다....앞으로도 이런 프로젝트를 많이 부탁 받겠지만 개발자로서 성장의 기회로 삼으며 계속해 나갈것이다....블로그에 올리지못한 다양한 기술들을 썼지만 이 하나의 포스트로 정리가 좀 된것같다...

설계의 중요성...변화에 유연하게 대처할 수 있는 프로젝트 구조....글재주가 참 없어서 슬프다....ㅠㅠ

 

'일상' 카테고리의 다른 글

[잡설] 샤드를 고려할때...  (0) 2021.07.08
[숨고] 오류 수정 사례  (0) 2021.05.03
이클립스 - Javascript - Text editor gray tone  (0) 2021.04.07
오라클 클라우드  (0) 2021.03.30

관련글 더보기

댓글 영역