지금 보니까 왜이렇게 감정 호소만 하고 ㅋㅋㅋㅋ 설명도 제대로 안 써놨지
새끼 기린같은 날것의 표현 최대한 그대로 두고
쓸데 없는 사담만 지워놓겠습니다~~
: javascript에서 객체를 요소로 갇는 배열을 데이터로 받아서
나의 사이트를 만드는 프로젝트였다 <보러가기>
~지난 이야기~
솔로 프로젝트를 진행하는 동안 많은 난관이 있었다
오늘 4:30까지 제출 기한이 있었고
**form태그 submit을 하면
자바스크립트 파일 내 배열에 새로운 요소로 추가되는 것**은 실패했다
어제 운동 다녀와서 밤부터 오늘 아침 해뜨는 것 보면서... 열심히 했는데...
그 시간동안 한 것:
dom으로 질문과 답변 받아와서 출력하고
css로 예쁘게 구현한 것
이것만 한 7시간 했을 거다
그리고 쪽잠자고 오늘 약 4시간동안 form태그와 submit에 대해 알아보고 있었다.
---> 결국 성공!!!!!!!!!
다른 분들의 코드를 보고 공부해서 나의 환경에 맞게 적용시켰다
나의 경우는 html 태그 구조가 이런 상황이었다
~시행착오~
form내부의 입력값을 받아오기 위해
input의 value,
input의 value,
textarea의 value 를 가져오고
form.addEventListner('submit', 입력값을 받아서 사용할 함수);
라고 생각했다
그 중 한 케이스...
이때 input value를 가져오기 위해 선택한 방법은
document.createElement('form')
부터 시작하여 폼을 새로 만들어놓고
document.getElementsByName()
메소드로 input태그의 name을 가져오는 것.
각각이 따로 움직인다고 생각했다
return false는 뭔지도 모른채 썼다
---> 출력이 되지도 않고 오류가 나지도 않았다
그러다 알게된 것은 queryselector()
로 html내부에 있는 태그를 바로 가져오는 거였다 (!)
새로 값이 계속 들어오는 거니까
화면에 결과물이 연달아서 출력되려면 document.createElement('form')
로 만드는 거라고 생각했다.
아니까 이제 보인다...
/* submit */
// 변수선언 = 쿼리셀렉터로 가져와서, 함수밖에, form태그를 가져온다
const newContent = document.querySelector('.form__container form');
const newName = document.querySelector('div.form__input--name input');
const newTitle = document.querySelector('div.form__input--title input');
const newText = document.querySelector('div.form__textbox textarea');
const addPost = function(event){
event.preventDefault();
agoraStatesDiscussions.unshift({
id: '비공개',
createdAt: new Date(), //로컬 시간으로 변환하는 것은 글 밑으로...
title: newTitle.value,
url: null,
author: newName.value,
answer: null,
bodyHTML: newText.value,
avatarUrl: "https://img.icons8.com/dusk/64/000000/new.png", //무료아이콘
});
render(ul); //다른 자바스크립트 파일 배열 데이터를 화면에 렌더링해주는 함수
};
newContent.addEventListener('submit', addPost);
submit 이벤트 핸들러는'버튼'이 아닌 form 요소에 적용해야 한다.
다른 컨테이너도 건드려야해서 바로 해결된 것은 아니지만
결국 했다...!!!!
직접 부딪히며 배우니까 오래 기억 남을 것 같다
기능 구현부터 하느라 많은 건 못했지만
input 요소들에 border-bottom만 주고,
textarea도 높이를 길게 해놓고 자동완성도 없앴다.
//자동완성 없애기
autocomplete='off'
답변자 정보는 text-align: right;
로 설정하여 질문과 답변이 구분되게끔 했다
색조합사이트를 참조해서 편안하고 부드러운 색감으로 꾸며보았다
질문을 클릭하면-> 질문 내용content와 그 아래 답변 container(답변자 정보, 답변 내용)이 나오게 했다
서툴러서 한참 걸렸다...
html에서 질문내용 content와 답변 container의class='hide'
를 주고
css에서 .hide {display: none;}
을 설정해 주었다.
//이벤트리스너
const openContent = function(){
if (!(질문내용.classList.contains('hide'))) {
질문내용.classList.add('hide');
답변묶음.classList.add('hide');
}
else {
질문내용.classList.remove('hide');
답변묶음.classList.remove('hide');
}
}
질문제목.addEventListener('click', openContent);
+자바스크립트 시간 데이터 로컬 시간으로 반환하기
const localData = new Date(element).toLocalTimeString();
앞으로 더 공부해야 할 것들
페이지네이션
이전 페이지, 다음 페이지 이동하기
한 페이지에 10개의 게시글 나타내기
LocalStorage
페이지 새로고침해도 새 글 유지하기
혼자서 프로젝트를 진행하는 건 정말 많은 공부가 되었다.
어째 더 책임감이 생긴 기분이라 열심히 하게 됐다.
나 진짜 잘 하고 싶다
오기가 생긴다...!!!
더 더 집착해서 열심히 할 거다