[새싹 x 코딩온] 웹 개발자 과정_ 1차 프로젝트 회고(1)

HTML, CSS, JS에 이어 Node.js, ejs, MySQL 까지 배우고 드디어 첫 프로젝트를 마치게 되었습니다. 

 

1.목표와 계획 평가:

• 프로젝트를 시작할 때 설정한 목표와 계획을 다시 살펴보고, 이를 얼마나 달성했는지를 평가합니다. 목표 달성도를 어떻게 평가하였는지 설명하고, 만약 목표를 달성하지 못한 경우 그 이유를 분석합니다.

우선은 기본적인 crud의 자유 주제에 맞추어 저희는 여러 주제를 던지고 최종적으로 개발자를 위한 컨퍼런스 행사 모음과 리뷰 사이트로 선정되었습니다. (저희 사이트 이름도 Conferences & Reviews for U! Developers의 C.R.U.D입니다)

 

9월 4일에 팀원 결정,5일에 주제를 선정, 본격적인 기획 및 개발은 9월 6일 부터 발표일인 9월 22일까지 진행되었습니다.

 

다음은 1차 기획 회의 때 논의되었던 사항을 정리한 노션입니다.

https://sunrise-coal-31d.notion.site/1-f9d5b60f60764995acbe6531471132ca

1차 기획 회의

초기에 원했던 기능은 15일에 거의 완성이 되지 않았나 싶었습니다.(물론 프론트가 완성되지는 않았습니다...) 그 후 리더님의 피드백을 반영해 추가적으로 디벨롭 하기로 한 찜 기능과 관리자 페이지가 추가되었습니다! 새싹 캠퍼스가 열지 않은 일요일에도 카페에 모여서 다 같이 힘쓴 덕분에 피드백 받은 기능은 완성할 수 있었습니다.

 

팀 전체의 기능적 목표는 120% 달성하지 않았나 생각합니다.

 

2. 기술적인 배움

• 프로젝트 도중에 습득한 새로운 기술, 도구, 라이브러리 등을 어떻게 활용하였는지와 개발 기술 및 아키텍처의 개선점을 기록합니다. 무엇을 배웠으며 어떻게 적용했는지를 설명합니다.

저는 이번 프로젝트에서 프론트엔드로서 참여했습니다.

 

제가 사용한 기술은 다음과 같습니다.

: CSS, HTML, JS, ejs, 부트스트랩, typewriter, (full calendar)

 

1. full calendar 도입

저희 사이트의 핵심 중 하나라고 볼 수 있는 필터에 따라 변하는 캘린더입니다.지금은 굉장히 그럴듯해 보이지만, 제가 초기에 도입할 당시에는 완성 못할 것 같았습니다...

(결론부터 말씀드리면 다른 프론트엔드 분이 완성시켰고, 도저히 저는 프로젝트 기간 내 완성 못 시킬 것 같아서 넘겨 드렸습니다.)

 

행사 이벤트 페이지와 리뷰 페이지 중 역할을 나누었는데, 리뷰 페이지 자신이 없어서 차라리 이벤트 페이지라도 하자! 했는데...너무 어려웠습니다.

 

여러 캘린더 api를 검색해봤었을 때, 마땅한 게 없어서 직접 table을 짜야하나 했는데(OMG...) full calendar API를 다행히 발견했습니다.

https://fullcalendar.io/

FullCalendar - JavaScript Event Calendar

하지만 문제는 그 이후 였던 것이

1. 초기에는 행사 캘린더와 행사 카드 리스트를 한 페이지에 도입하려 했었고,(현재는 분리된 상태)

2. 백에서 넘겨주는 데이터를 캘린더에 그려야 했고,

3. 필터에 따라서 캘린더에 그려지는 데이터의 변화가 있어야 했습니다.

 

1과 2에서 calendar가 그려지는 것부터... 데이터를 받아오려고 async await를 이용하면 캘린더가 처음 접속 시 페이지에서 그려지지 않았었습니다.(캘린더가 js로 그려지는 형식이었습니다.) 한 페이지에서 render와 send를 둘 다 받아서 안 된다고 했던가...백엔드에 대한 지식이 꼭 필요하구나를 절실히 느낀 지점이었습니다.

 

당시에 감기가 걸린 상태에 몸이 좋지 않은 상태에서 고민하다가 정말 길이 보이지 않아서 다른 프론트 분에게 넘겨드렸습니다. 지금 돌이켜보면 끝까지 고민하는 게 맞지 않았나 생각이 들면서도, 다른 프론트 분이 짠 코드는 지금도 이해도 안 가고 제가 짤 수 없다는 생각이 들어서 잘 넘겨드린 것 같습니다. 하핳... 빨리 실력을 키워서 이해해 보고 싶습니다.

 

2. 로그인 폼 기초  

중간에 로그인 관련해서 폼을 작성해 PR을 올린 후 다른 팀원분이 갑자기 로그인이 안 된다고 해서 당황한 기억이 있습니다. css만 건드렸다고 생각했는데, 알고보니 한페이지에 한 개만 존재해야하는 form의 name값이 같은 name으로 두 개가 있고, 같은 id로 여러 값을 입력받아서 에러가 난 것이였습니다. 다행히 빨리 깨달아서 고칠 수 있었지만 아찔한 기억입니다. 기초의 중요성을 다시금 알려준 경험이었습니다.

 

3.  typewriter

https://www.npmjs.com/package/typewriter-effect

typewriter-effect

메인페이지에 typing 효과를 내기 위해 찾은 라이브러리입니다.

 

html 내에 아래와 같이 id로 어떤 div안에 글이 입력될지 지정해준 후,

  <div class="wrapper">
  	<div id="typing"></div>
  </div>

script로 head에 CDN을 불러온 후, 아래의 내용을 통해 효과를 지정해 줄 수 있습니다.  

//head 태그 안의 script
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

// body 태그 안의 script
let typewriter = new Typewriter('#typing', {
    loop: false, // 반복 여부
    delay: 75, // 타이핑 속도
    cursor: '', // ''안에 커서의 모양을 지정해줄 수 있다.
});

typewriter
    .pauseFor(400)
    .typeString('Conferences & Reviews for you!')
    .pauseFor(400)
    .deleteChars(4) //지우려는 글자의 수 입력
    .typeString('U! Developers')
    .pauseFor(10000)
    .start();

 

3.문제 및 해결책 분석:

• 프로젝트 진행 중 마주친 기술적인 어려움, 버그, 성능 문제 등을 정리하고 해당 문제들을 어떻게 해결했는지에 대한 과정을 설명합니다. 다른 개발자들이 유사한 문제에 대해 도움을 얻을 수 있도록 자세한 내용을 기록합니다.

그나마 이번 프로젝트에서 가장 저의 고민이 많이 담긴 페이지라면 마이페이지와 관리자 페이지라서 그 내용을 풀어보려 합니다. 부트스트랩 디자인을 그대로 사용해서 좀 민망하지만...

 

분명 수업 초반에 td tr th 등  table을 배우면서 이걸 쓸 일이 있을까? 했는데 제 프로젝트의 구원자였습니다. 마이페이지와 관리자페이지 특성상 한 페이지에 나열되는 정보 양이 많을 수 밖에 없는데 여기에 최적화 된게 table이였기 때문입니다. 

 

여러가지 백에서 넘어오는 정보 중 각 페이지별로 사용자에게 유의미한 데이터를 정하고, 백엔드 분과 상의 끝에 넘겨주는 데이터와 방식을 정하고, 페이지를 완성해나갔습니다.

 

(아래의 페이지는 프로젝트를 위해 수집한 이미지와 내용으로 허위의 정보이며 저에게 어떤 저작권도 있지 않음을 알려드립니다.)

마이페이지

 

관리자페이지

하지만 프론트엔드의 숙명인 반응형으로 만들어야 하는 일이 남아있었습니다...

 

좌측의 사이드바를 반응형으로 만드는 것이 1차 과제였고,(사이드바를 위로 치워야 아래 공간에 table을 그릴 수 있었습니다.) 저 많은 글씨들 중 모바일에서 뭘 보여야 할지가 2차 과제였습니다.

 

1차 과제인 반응형 사이드바는 아래의 사이트를 참고했습니다.

https://www.w3schools.com/howto/howto_css_sidebar_responsive.asp

How To Create a Responsive Sidebar

해당 사이트 내에 제가 봐온 거의 모든 형태의 menu바가 존재해서, 숙달되기 전까지는 앞으로 많은 참고를 하게 될 것 같습니다. 

 

그 후 2차 과제인 반응형 table 작업에 들어갔습니다. Table을 반응형으로 만들고자 하면 두 가지 방법이 있다고 생각합니다. 화면이 줄어들어도 모든 정보를 볼 수 있도록 scroll이 되는 방식으로 만들던지, 정말 최소의 column 만 표시하도록 화면 크기에 따라 column을 삭제하던지. 저는 이 중 후자를 택했습니다. stackoverflow에서 저에게 알맞는 조언을 찾았기 때문입니다.

https://stackoverflow.com/questions/21191887/how-to-remove-a-html-table-particular-column-to-make-other-datas-visiblerespons

How to remove a html table particular column to make other datas visible(responsive) using media queries?

@media (max-width:480px) {
table tr th:nth-child(1),
.un{
    display:none;
}
}

media쿼리를 이용하여, 반응형으로 없어지길 원하는 column의 tr과 th에 class 명 un을 써주면 바로 해결이 되었습니다!

 

이번 프로젝트에서 stackoverflow에서 유용한 정보들을 얻어, 구글링에 대한 감이 잡히는 것 같아서 이것도 하나의 성과이지 않을까 생각하고 있습니다.

 

내용이 너무 길어지는 것 같아 다음 글에서 이어서 작성하겠습니다.