개발_TIL | 2022-08-08 (77)

https://gomunity.shop

0808 프로젝트 피드백 기준 수정

create_article.html 마크다운 editor 폰트 크기 수정

• css를 통해 마크다운 에디터 좌측과 우측 클래스이름으로 폰트 크기를 수정함
  • 기존 editor 폰트 크기가 13으로 되어있어 important로 강제로 조절하였다.

/* create_article.css */
.ProseMirror {
  font-size: 24px !important;
}
.toastui-editor-contents {
  font-size: 24px !important;
}

• 추가적으로 detail.html에 보여지는 마크다운 내용도 클래스이름을 찾아서 css를 통해서 크기를 수정하여 주었다.

/* detail.css */
.tui-editor-contents {
  font-size: 24px !important;
}

좋아요 버튼 수정

• 기존에 있던 부트스트랩 버튼 primary 와 danger 클래스 이름을 없애고 id값으로 주었던것을 이용하여 css를 적용시켜 수정하였다.
  • 추가적으로 좋아요를 눌렀을 때, 기존 main.html 카드에 구현해놓은 좋아요 표시 이모지가 뜨게 해놓음.

/* detail.css */

/* 질문 좋아요 */
#Question_like {
  font-size: 30px;
  color: #775aae;
  background-color: white;
  box-shadow: 0 0 0 0;
  border: 0;
  margin-left: 10px;
}

#Question_like:hover {
  color: #775aae;
  background-color: white;
  box-shadow: 0 0 0 0;
  border: 0;
}

/* 답변 좋아요 */

#Answer_like {
  font-size: 25px;
  color: #775aae;
  background-color: white;
  box-shadow: 0 0 0 0;
  border: 0;
}

#answer_like:hover {
  color: #775aae;
  background-color: white;
  box-shadow: 0 0 0 0;
  border: 0;
}

전체적인 버튼 수정

• 기본 버튼 안에 글씨가 하얀 글씨로 보이고 마우스를 올려 호버 기능이 작동 하였을 때, 검은 글씨로 변경되게 통일 하였다. 전체적인 css 수정

로그인 / 회원가입 페이지 enter 키 입력시 api실행함수 실행 구현

• 로그인 및 회원가입 등 특정 페이지에서 인풋창을 통해서 입력값을 받고 버튼을 클릭하여
  api를 실행하는 형태로 되어있을 때, enter키를 눌러 버튼을 따로 누르지않고 api를 실행 시킬 수 있게 끔 해줄 수 있다.

// api.js  여기서 keyCode == 13은 키보드의 enter key의 코드 넘버를 의미한다
// 따라서 만약 엔터키가 눌렸다면 login_api()를 실행하라는 함수 인 것이다.
function 함수이름() {
        if (window.event.keyCode == 13) {

             // 엔터키가 눌렸을 때 실행할 api
             login_api();
        }
}

• 자바스크립트에 만들어둔 상태에서 html로 넘어가서 입력값을 넣는 input 태그에
  onkeyup=”함수이름()” 을 추가해준다.

<!-- login.html !-->
<input id="username" onkeyup="함수이름()" name="username" type="text" placeholder="username">
<input id="password" onkeyup="함수이름()" name="password" type="password" placeholder="password">

• 추가적으로 onkeyup의 기능은 사용자가 키보드의 키를 눌렀다가 떼어질 때 작동하는 기능이다.
  • 그 외에 onkeyPress 와 onkeydown 은 눌렀을 때 작동하는 기능이며,
    둘의 차이점은 onkeyPress는 ASCII값으로 사용되고, onkeydown은 keyCode값으로 사용된다.
    또한, onkeyPress는 ASCII 값이라 shift, ctrl 같은 키는 인식하지 못한다고 한다.
  • main.html 질문글 내용 마크다운 editor 적용하여 붙이기
• main.js 에서 main.html를 온로드할때 카드를 생성하여 질문글을 붙여주는데, forEach 문 안에서
  질문글에 대한 내용의 코드는 다음과 같았다.

// main.js

const p_text = document.createElement("p");
p_text.setAttribute("class", "card-text");

p_text.innertext = question.content;

• 다음과 같이 p 태그를 생성하여 변수를 선언해주고 클래스를 만들어준 후 질문글의 내용을 변수의 innertext 로 넣어주었다.

해결 방안

• 여기서 질문글에 대한 내용을 innertext 가 아닌 innerHTML로 받아주게 하여 자동으로 변환되게끔 해주었다.

// main.js

const p_text = document.createElement("p");
p_text.setAttribute("class", "card-text");

p_text.innerHTML = question.content;