Coz’ Mini Hackathon-2

1.링크 CSS로 정리하기

a:link { color: }
방문하지 않은 링크 글자색
a:visited { color: }
방문한 링크 글자색
a:hover { color: }
호버 중 링크 글자색
a:active { color: }
누르는 중 링크 글자색
@주의사항
link=visited>hover>active순서로 배치해야 제대로 작동한다.

 

2.아래 내용 분석

// convertToDiscussion은 아고라 스테이츠 데이터를 DOM으로 바꿔줍니다.
const convertToDiscussion = (obj) => {    //디스커션에 넣을 데이터를 DOM으로 변형해준다
  const li = document.createElement("li"); // li 요소 생성 
  li.className = "discussion__container"; // li에 클래스 이름 지정

  const avatarWrapper = document.createElement("div"); //div태그 제작
  avatarWrapper.className = "discussion__avatar--wrapper"; //div태그에 클래스명 부여
  const discussionContent = document.createElement("div"); //div태그 제작
  discussionContent.className = "discussion__content";      //div태그에 클래스명 부여
  const discussionAnswered = document.createElement("div"); //div 태그 제작
  discussionAnswered.className = "discussion__answered"; // div에 클래스명 부여

//윗줄에서 한 태그,클래스명은 필요한 자료(디스커션용)를 DOM화 하기 위해

//각자 div태그 제작 후 클래스명을 부여하는 과정이다.

  const avatarImg = document.createElement('img'); //이미지 태그를 제작
  avatarImg.src = obj.avatarUrl;                            // 이미지태그 소스에 obj의 아바타 url배정
  avatarImg.alt = "avatar of " + obj.author;      //  이미지 태그 alt에  XXX(obj에서 가져옴)의 아바타라는 문자열 배정
  avatarWrapper.append(avatarImg);              //이미지 부분에 이미지(div로 dom 형태로 제작한)를 부착해준다.

const discussionTitle = document.createElement("h2");  //h2태그 제작
const titleAnchor = document.createElement("a");     //a태그 제작
titleAnchor.href = obj.url;                                                //오브젝트url을 a태그의 주소값으로 배정(제목의 링크)
titleAnchor.textContent = obj.title;                                 //a태그 내부 텍스트에 제목 할당
discussionTitle.append(titleAnchor);                             //h2태그에 a태그 부착

const discussionInformation = document.createElement("div");        //div 태그제작
discussionInformation.className = "discussion__information";      //클래스네임 할당
discussionInformation.textContent = `${obj.author} / ${new Date(obj.createdAt).toLocaleTimeString()}`; 

//인포메이션 클래스에 '작성자 / 시간' 표기 할당 (obj에서 가져옴)
discussionContent.append(discussionTitle, discussionInformation); //만든 h2(a태그)div(information클래스)를 디스커션 컨텐트에 부착

const checked = document.createElement("p");     // p태그 만들기
checked.textContent = obj.answer ? "✅" : "❎" ;  //p태그 내용물이 체크'[x]'면 앞 아니면 뒤 반환
discussionAnswered.append(checked);             // p태그 답변됨 부분에 부착



  li.append(avatarWrapper, discussionContent, discussionAnswered);  //li에 만든 3가지를 부착시킨다.
  return li;   //그리고 li를 반환해라
};

요약하자면 넣고 싶은 데이터들을 각자 받아온 후 상위태그에 부착시킨 후 

만든 컴포넌트 양식에 맞게 그 부분에 다시 부착시키고

그 부착시킨 애들(여기서는 avatarWrapper, discussionContent, discussionAnswered)을 li에 다시 부착해라 라는 함수로

객체들을 대량으로 받는다고 해도 양식에 맞는 내용들이 포함되어 있으면 그 데이터만 뽑아서 컴포넌트에 다시 넣어주는 기능을 가지고 있다.

객체의 배열을 가지고 있다면 for문을 통해 각각 분배해서 자동으로 넣어주게 할 수 있으며

input을 받아 textbox들에 기입된 내용을 가지고 위치값들을 받아 객체화 해준 후 다시 함수에 넣으면 게시글이 추가된다.

 

3.문제가 발생했을 때는 자기 자신이 수도코드를 제대로 작성했다는 가정하에 자기 자신을 의심하지 마라

의심해야 할 것은 자신의 오타이다. 오타 하나를 발견하지 못한 채 계속해서 코드를 수정해 100줄이 넘어가버리고

12시가 넘어가기 직전 홍식님과 수완님의 도움을 받아 오타와 클래스명을 수정해 해결할 수 있었다.

막혔을 때는 스펠링 체크가 필요한 것 같다....

 

4. @@@@id를 추가한 상태에서 다른 id를 새로 id를 적어서 추가하지 말자 class처럼 id 내부 값에 추가하던지 id="a b" 아니면 유니크한 클래스명을 추가해서 사용하자 id가 두개 배치될 경우(id='a' id='b') 이유는 아직 모르겠지만 작동을 하지 않아 null값을 받아온다.

 

5.px로 값을 줄 경우 노트북 또는 컴퓨터 환경(모니터 및 해상도)에 따라 정렬이나 크기가 다르게 보일 수 있으므로 일정한 모양을 유지하고 싶다면 px대신 %를 이용해야 한다.

 

6.@@@@부착 속성 등 속성에 대한 공부가 더 필요한데 stiky? 붙어서 내려가는 속성? text-indent(홀더 내부에 있는 텍스트를 움직이는 것? 오른쪽으로)

 

7.그라데이션은 생각보다 사용하기가 쉬운데 https://uigradients.com/#PiggyPink 에서 원하는 색 배열의 그라데이션을 선택한 후 코드를 복사하면 된다. 또한 값을 수정하거나 색을 수정해 원하는 방향으로 조절할 수 있다!

 

 

오늘은 11시 52분까지 베어미니멈을 위해 달렸는데 생각보다 배울 점이 많았다.

성공했기 때문에 기억보정효과가 있는지는 모르겠지만 막혀서 진행되지 않던 긴 시간동안 이것저것 시행해보면서 숙달된 것 같고

작동 원리에 대해서도 좀 더 많이 파악된 것 같다.