• 요구사항
  • 글 쓰기 수정 목록 삭제
  • 댓글기능
  • 관리자 기능
  • UI 디자인

• 글 쓰기, 수정
  • Plain Text 글 쓰기 형태로 개발해도 되지만, 웹 에디터를 연결해서 HTML 및 사진 등까지 지원하면 더 좋음
• 글 목록, 삭제
  • 게시물 페이지네이션, 삭제처리할 때의 권한 및 컨텐츠 관리를 고려
• 댓글
  • 게시물과 댓글의 구조 로직, 댓글 수 와 댓글 작성자 등 관련된 퍼포먼스 고민
• UI 디자인
• 관리자 도구
  • 관리자 기능 - 설정, 게시물, 댓글 등 모든 내용 관리

• HTML

  • 웹사이트의 모습을 기술하기 위한 마크업 언어

• CSS

  • HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일 시트 언어.

  • Selector(선택자) : 스타일을 입힐 요소를 선택하는 문자

    선택자 { (스타일 속성): (스타일 값); }

• EJS

  • HTML 파일만 보내주면 Static페이지가 됨, 실제 DB데이터를 HTML에 넣어서 보내줄 수 없기 때문
  • 서버 데이터를 HTML에 쉽게 박아넣을 수 있게 도와주는 일종의 HTML 렌더링 엔진
  • 주의사항 - 반드시 작업폴더 내에 views라는 이름의 폴더를 만든 후 거기에 ejs파일을 만들어야 함

• Express

  • 서버를 쉽게 짤 수 있도록 도와주는 라이브러리

• JavaScript

  • 거의 모든 웹 브라우저에 인터프리터가 내장되어 있는 언어. HTML이 웹 페이지의 기본 구조, CSS가 디자인을 담당하고, JS는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당.(엔진! 에 해당)

• Node.js

  • 자바스크립트를 브라우저 말고도 로컬PC에서도 실행시켜줄 수 있는 실행창(런타임)
  • Node.js에 의해 자바스크립트를 일반 프로그래밍 언어처럼 다룰 수 있게 됨
  • Non-blocking 이라는 장점
    • 요청이 온 순서는 상관 없이 결과가 빨리 나오는 순으로 예매해준다.
    • SNS, 채팅서비스 웹서버에 강점을 보인다 - 한번에 많은 요청을 감당할 수 있기 때문
  • 초보자에게 쉽고, 대량의 요청이 들어와도 감당이 가능하고, 자바스크립트 문법만으로 프론트, 백엔드가 전부 가능하다
  • 단점
    • 처리속도가 떨어지고, 수학연산, 이미지처리같은 라이브러리가 부족할 수 있다

  (server.js 파일)
  
  const express = require('express');
  const app = express();
  
  app.listen(8080, function() {
      console.log('listening on 8080')
  })

• MongoDB

  • Database
    • 데이터를 일정한 형식으로 저장할 수 있게 도와주는 곳
  • NoSQL DB이므로, 복잡한 SQL 없이 서버 생성 가능
  • 스키마 생성 등 어려운 셋팅작업이 처음에 필요하지 않음

• 글 쓰기, 수정
  • 글 쓰기는 구현완료, 수정하는 기능을 구현하지 못하였음
    • 추후 수정기능 구현 예정
  • Plain Text 글 쓰기 형태만 개발하였음
    • 추후 웹 에디터(WYSIWYC) 연결해 HTML 및 사진까지 지원할 예정
• 글 목록, 삭제
  • 목록, 삭제 둘 다 구현 완료
    • ajax라는 방식을 이용하여 삭제를 구현하였으나, 다른 기능을 알아보고 다른 기능으로도 구현해볼 예정
  • 목록의 경우 전체를 다 볼 수 있고, 스크롤을 내려가며 볼 수 있으나, 페이지네이션 기능을 추가하지 못함
    • 일정 게시물 숫자를 넘어갈 경우 페이지네이션 기능을 추가할 예정
• 댓글
  • 댓글기능 구현 자체는 완료. 굉장히 단순하게 DISQUS 라는 사이트에서 코드를 가져왔음
    • 너무 쫒기듯이 나만의 댓글기능을 구현하지 못하였고, 게시물과 댓글간의 구조 로직을 파악할 수 없었음, 또한 댓글 수, 댓글 작성자 등과 관련한 퍼포먼스 고민이 미비하였음.
    • JS이용 댓글기능, 구조로직 파악, 퍼포먼스 고민 후 구현 예정

Disqus - The #1 way to build your audience

• UI 디자인
  • 버튼, Navbar 등을 이용하였으나, 아직 프론트 전반에 대하여(특히 css) 깊은 이해가 부족, 그로 인해 사용자 입장에서 너무나 불친절한 페이지를 만들었다고 생각됨
    • 추후 HTML, CSS 를 더 공부하고 UI 디자인을 사용자 입장에서 최대한 친절하고 쉽게 원하는 정보에 접근할 수 있도록 페이지 디자인을 변경할 예정
• 관리자 도구
  • ‘관리자’라는 개념에 대한 이해가 부족.
    • 회원 정보, 작성 게시물, 쓴 댓글, 회원 관리 즉 admin은 CRUD가 일괄처리가 가능해야 하다는 것을 공부하였음.
    • 백엔드 ‘인증처리’에 관해 공부할 예정

[Node.js] 관리자 권한을 위한 npm AdminJs

• CSS 공부

  • ‘Selector(선택자)’개념을 정확히 가져갈 예정
  • CSS 위치를 조절할때 많이 쓰이는 flex, gird에 대해서 배울 예정
  • 크기 및 위치를 조절하기 위해 사용하는 margin, padding, translate에 대해서 배울 예정

• 위의 '예정' 이라고 표기된 것들은 23.04.24 ~ 23.05.07 동안 리팩토링을 끝낼 것

• node: 18.x

cd git이름
node index.js

• 웹 프론트엔드 프로젝트를 처음 하는데 이렇게 공부해나가면 될 것인지
• 어떤 부분이 부족해 보이는지
  • 만약 추천해주고 싶다면 어느 정보를 추천해주시는지
  • 도서 혹은 강의 등 어떤 내용이라도 감사히 받겠습니다.
    • 현재 공부한 방법
      1. 생활코딩 HTML, CSS, JS 기본 개념강의
      2. 유튜브 조코딩 Node.js 강의
• 뭔가 만들 때, 틀에 갇힌 느낌인데, 이를 벗어나려면 어떻게 해야하는지
  • ex. 유튜브 강의대로 만드려는 느낌