🔍Project Overview
Node.JS를 처음 배우면서 시작한 프로젝트로 기존에 존재하는 네이버 스포츠를
클론코딩 하는것을 목표로 진행한 프로젝트 입니다.
뉴스나 영상에 사용된 이미지의 출처는 네이버 스포츠 해외축구 뉴스 이미지입니다.
💭프로젝트를 하며 배운점
1. Node.js
연구실을 들어와 공부를 하며 처음으로 만들어본 Node.js 프로젝트 였다.
평소에 관심이 많은 축구페이지를 들어가는 것을 목표로 하였으며 흥미가 있어서 막히는게
많더라도 찾아보며 재미있게 프로젝트를 진행할 수 있었다
2. DB 사용법
Node.js 와 함께 데이터베이스도 처음으로 제대로 사용하여 프로젝트를 진행하였다.
다양한 기준에 맞춰서 게시글을 노출시키고 수정 , 삭제, 생성들 다양하게 데이터베이스를
사용해볼수 있는 기회였다
3. 기본적인 웹 UI
웹을 만들다 보니까 클론코딩임에도 불구하고 UI를 짜면서 3번은 엎었던거 같다.
생각보다 고려해야 될 것이 많았고 왜 이런식으로 UI를 구성하고 어떤방식으로 구현을 하는지
다양한 생각을 하며 코딩을 할 수 있었다.
4. Javascript
웹의 거의 모든 기능, 아니 100퍼센트에 가까운 기능을 자바스크립트로 구현하다보니
하루종일 구글링만 해가며 개발을 했는데 하나하나 구현해나가며 자바스크립트 숙련도의
중요성을 뼈저리게 몸소 느꼈다. 다음에 기회가 있다면 더 높은 수준의 프로젝트를 해가며
자바스크립트 숙련도를 올려야 겠다고 절실하게 느꼈다.
5.영어의 중요성
구글링 과정에서 공식문서 또는 스택오버플로우를 자주 접하게 되었는데 보면서
도무지 이해를 하기 어려운 문장들이 많았다. 이는 내 영어의 무족함이라고 생각했다.
영어공부도 굉장히 중요하구나 라고 느낄수 있었다.
⌛️작업기한
⭐️ 2020. 06 ~ 2020. 08
🔨기술스택
· HTML/ CSS3
· JavaSript
· Mysql
· MariaDB
· Express
· Phpmyadmin
구현기능사항
· 회원가입/로그인/로그아웃
· 게시글 생성
· 게시글 수정
· 게시글 삭제
· 게시글 좋아요
· 게시글 상세정보 (좋아요/게시글 생성일자/댓글 수 등...)
· 리플 생성
· 사용자 마이 페이지, 프로필
· 반응형 웹
✨메인페이지
최대한 비슷하게 구현하였다. 최신 / 좋아요 / 댓글 기준순으로 메인페이지에 노출되고 영상은 유튜브 링크를 걸어서 실제 페이지와 유사하게 동작하도록 개발하였다.
페이지 뷰는 ejs를 사용하여 기본 틀을 잡아주고 안에 들어가는 내부 페이지는
따로 구성하였습니다.
세부 페이지는 따로 만들어 include 통하여 페이지를 연결해주고
시스템은 mvc 패턴으로 구성하였습니다.
설계페이지는 view폴더를 만들어 따로 구성해주고 설계한 페이지는 view 폴더 내부에 넣은 다음 기능설계부분을 javascript 파일을 따로 라우터 폴더를 생성하여 사용하였습니다.
✨뉴스 게시글 페이지
게시글 페이지는 DB URL에 params값 받아와서 해당 링크 접근해서 페이지를 탐색하게 만들었습니다.
✨뉴스 동영상 페이지
게시글과 마찬가지로 파라미터값을 받아와서 해당 페이지의 데이터가 노출되게 만들었습니다. 오른쪽의 뉴스와 영상 노출은 조회수순으로 나열하여 많이 본 뉴스와 영상순으로 노출되게 만들었습니다.
✨기사 리스트 페이지
네이버 기사 리스트 페이지와 최대한 유사하게 구현하였습니다. 최신/인기/댓글 순으로 날짜별 리스트를 볼 수 있도록 구현하였습니다.
🌿후기
Node.js로 처음해본 프로젝트인데 사실 백엔드만큼 프론트에 힘을 많이 준
프로젝트가 아니었나 생각합니다. mysql로직을 짜다가 무한루프가 걸려서 페이지가
터진적도 있었고 어떤 페이지는 속도가 빠른반면 어떤페이지는 느리거나 해서
서버쪽 로직을 구성함에 있어서 어떻게 구현하냐에 시간을 많이 할애하였으나
프로젝트를 진행하여 보니 프론트가 UI가 깔끔해야 사용자 관점에서 더 접근성높게
해당 페이지를 사용하지 않을까 싶어 프론트에서 시간을 많이 소모하였습니다.
프론트와 백엔드 부분 양쪽으로 숙련도가 부족함을 뼈저리게 느낄수 있었고
경험치를 쌓는게 중요하겠다라는 생각을 많이 하였습니다.
데이터 베이스도 처음 사용하면서 바로 관계형 디비를 사용해보았는데 어떤 이유로
관계형 디비를 사용하는지 느낄수 있는 좋은 경험이었고 여러모로 아쉬운 점이 많이 남아
다음에는 서버부분에 시간을 좀 할애하고 프론트는 숙련도를 점차 높여서 이번 프로젝트보다
훨씬 짧은 시간만 투자해도 되도록 해야겠다고 생각하였습니다.
