나의.... 첫...빛이나는..솔로 프로젝트...

🥯 구현한기능

1. 더미데이터를 화면에 나열한다 (거의 떠먹음)
2. 답변완료인것 팡파레 이모지, 초록 박스. 미완료인것 고구마이모지, 오렌지 박스, notice 이모지 없음, salmon색 박스
3. submit 클릭했을때 게시판 추가
4. 새로고침 했을때 기존에 등록한 질문들 유지하기(수정필요)

1. 더미데이터 화면 나열

• 이미 있던 코드 2가지
  1. ul 요소 선언후 reunder함수에 전달인자로 준다.
  2. render함수 : 더미데이터 배열의 각각의 요소를 li에 넣어 리턴하는 convertToDiscussion함수에 전달인자로 넣어준다. ul의 자식요소로 리턴된 li를 반복문을 이용해 화면에 렌더링 해준다.
• 위의 두가지 코드가 이미 있었기에 li안에 들어갈 요소들을 만드는 함수 convertToDiscussion안만 손보면된다.
• convertToDiscussion: li요소에는 아바타이미지, 질문자이름, 질문제목, 시간 답변유무 아이콘을 생성한다.

2. 내용에 따라 다른 이모지, 색상 주기

• 간단하므로 코드에 할일 위임..

  const discussionAnsweredPtag = document.createElement("p");
  const keyValue = obj.title;
  if (keyValue.includes("notice")) {
    discussionAnsweredPtag.textContent = "";
    li.style.background = "#f2958a";
  } else if (obj.answer === null) {
    discussionAnsweredPtag.textContent = "🍠";
    li.style.background = "orange";
  } else if (obj.answer !== null) {
    discussionAnsweredPtag.textContent = "🎉";
    li.style.background = "#2f962f";
  }

3. submit 클릭했을때 게시판 추가

• submit 이벤트는 홈페이지를 새로고침하는 기본기능이 들어있다. 새로고침하면 데이터를 잃게 되므로 이를 막아줘야하는데 event.preventDefault() 메소드를 사용하면된다.
• 필요한 요소들을 불러오고나서 더미데이터 나열할때처럼 객체에 input에 입력한 정보들을 받아와 convertToDiscussion에 전달인자로 보내준다. 이를 ul태그에 append시켜서 화면에 보여준다.

4. 새로고침 했을때 기존에 등록한 질문들 유지하기(수정필요)

• 3번에서 완성된 객체를 localStorage에 setItem메소드를 사용하여 저장해야하는데 value값에는 문자열만 들어갈 수 있으므로 객체를 문자열로 변환해주는 메소드인 JSON.stringify를 사용한다.

localStorage.setItem("key", JSON.stringify(obj));

-localStorage에 저장 되어있는 값들을 화면에 출력해야 하므로 문자열상태인 값을 JSON.parse를 이용해 객체로 변환해준다. 그리고 변환한 값을 li를 리턴하는 함수인 convertToDiscussion에 매개변수로 넘겨주어 ul에 prepend한다.

ul.prepend(convertToDiscussion(JSON.parse(localStorage.getItem("key")))

• 새로고침시 localStorage에 저장되어있는 값이 비어있지 않다면 저장되어있는 값을 출력하므로 if문을 사용한다.

if (localStorage.getItem("key") !== null) {
  ul.prepend(convertToDiscussion(JSON.parse(localStorage.getItem("key"))));
}

이렇게 끝낸다면 여러개의 질문이 추가 되었을때, 새로고침을 하면 마지막 질문만 남게된다. 어떤 코드를 변경하여unshift를 하면 해결되는데 왜 내가 짠 코드는 실행이 안될까? 나중에 도전....

---

⚒️ 개선할 점

• css 코드가 진짜 엉망이다. 드림코딩에서 배웠던 색상이나 마진,패딩 값을 변수에 저장해서 깔끔하게 사용하는 방법으로 다시 정리해야 한다.
• 전체 박스 모서리를 둥글게 만들었는데 스크롤이 같이 둥글어지지 않아서 고쳐야한다. 하는 김에 예쁜 스크롤로 바꾸고싶다.
• 원래 있던 더미데이터 날짜에 이상한 문자가 들어가 있다. 빼주는 무언가를 사용해서 깔끔하게 바꾸기.
• 제출전에 반응형을 후다닥 바꿨는데 좀더 세밀하게 바꾸기

🪄더 구현해 보고싶은 기능

• 말모 페이지네이션! 알아서 사용해 보라그래서 알아봤더니 첫번째 줄 읽고 포기했다. 나는 한 18시간 걸릴것 같은데.. ^^44기엔 능력자 분들이 많아서 그분들 블로그 꼼꼼히 읽고 만들어봐야지
• top버튼 만들기
• 동기분께서 내 프로젝트를 보고 질문을 작석하는 form 칸이 고정되어있으면 좋겠다는 아주좋은 피드백을 주셨다. 진짜 너무감사해... 동기들 최고 ㅠㅠ