가장 많은 시간이 걸린 페이지이고 최대한 구현할 수 있는 부분까지만 구현해 보았다. 다른 페이지보다 구현해야할 것이 많았고, 특히 화면 UI 구현이 많은 시간이 걸렸는데 코드를 수정하면 계속 틀어져서
엄청난 짜증이....🤬
그래도 이러한 과정에서 많은 도움을 받은 것이 바로 구글링이다. 구글링을 정말 많이 했는데 시간이 많이 걸린만큼 많이 배우기도했다. 여러 사람 코드를 보고 내 코드와 비교해보면서 느낀점은 기능 하나를 만들더라도 사람마다 표현해내는 코드가 다 다르며 어떤식으로 코드를 짰구나라며 다양하게 공부해 볼 수 있는 정말 좋은 경험이었다.
어떤 기능은 며칠을 붙잡고 있느라(오기가 생겨서 해결할 때까지 넘어가질 않았다... 그래서 시간이 더 걸렸다) 스트레스가 정말 많았는데 구현되는 순간은 이 맛에 코딩하나 싶었다!!!!😭😭
📌구현할 기능
- 게시글 좋아요 ❤️
- 게시글 좋아요 클릭시 조회수 증가 ➕
- 댓글 추가 2가지✍️
- 게시 버튼 클릭시 댓글 추가 🖱️
- 엔터키로 댓글 추가 ↩️
- 댓글 입력창에 입력이 될 경우에 버튼 활성화 ⬜->🟦
- 댓글 좋아요 ❤️👍
- 댓글 삭제 🗑️
css
코드가 워낙 길어서 중요한 부분만 적어보았다.
.li{
height: 90px;
overflow: auto;
} overflow: auto; 를 주어서 추가 댓글이 많아지면 스크롤바가 생성되도록 했다.
💡clear:both 속성💡
clear:both는 float속성을 해제.
float 속성 적용시 이후에 오는 다른 요소들까지같은 속성이 전달되어 둘러싼 형태가 되거나 영역 아래로 들어간다.
즉, float한 아래 박스를 원래대로 배치하도록 하는 속성으로 블록이어야한다.
📍css코드
.fixedclear:after{
content:"";
display: block;
clear: both;
}이 부분이 css에서 핵심 내용이라고 생각했다.
인스타에는 자잘 자잘한 메뉴 아이콘들이 많은데 하나하나 속성을 주면서 맞추기가 번거롭고 코드가 길어지기에 clear:both 속성을 주었다.
📍html코드
<ul class="fixedclear">clear:both를 html 코드의 부모 태그에 class name을 주고, ::after 가상 요소 를 이용한다.
javascript
📝 게시글 좋아요❤️
📍html코드
onclick="addLike()"만들기
<button class="heartBtn" onclick="addLike()">
<i class=" xi-heart-o xi-2x"></i></button>📍js코드
function addLike(){
const pushHeartBtn = document.querySelector(".heartBtn");
pushHeartBtn.innerHTML ='<i class="xi-heart xi-2x"></i>';
pushHeartBtn.style.color ='red';
}querySelector로 받을 const변수를 만들고,
클릭했을 때 빈하트 -> 꽉 찬 하트로 바뀌도록 innerHTML에 꽉 찬 하트 아이콘을 넣어주었다.
코드 작성 후 클릭하니 바뀌긴하나 색상이 기본 검은색이라 색상 변경을 해주었다.
📝 좋아요 조회수 증가➕
var count = 1324;
function countPlus(){
count=count+1;
document.querySelector(".like_count").innerHTML="좋아요 "+count +"개";
}count 변수는 임의로 정한 숫자가 기본으로 있도록 한 후,
누를 때마다 count가 1씩 증가하도록 했으며 querySelector.innerHTML에 들어갈 문구를 작성했다.
function addLike(){
const pushHeartBtn = document.querySelector(".heartBtn");
pushHeartBtn.innerHTML ='<i class="xi-heart xi-2x"></i>';
pushHeartBtn.style.color ='red';
pushHeartBtn.addEventListener("click",countPlus);
}또한 좋아요❤️를 누를때마다 바로 밑에 있는 조회수가 같이 증가해야 하기 때문에 위에 작성했던 function addLike() 부분에 addEventListener를 이용하여 클릭시 조회수 증가하는 코드 countPlust를 실행하도록 pushHeartBtn.addEventListener("click",countPlus);를 적어주었다.
📝 댓글 추가 ✍️
const postReviewBtn = document.querySelector(".review_upload");
const addReview = document.querySelector('.input_review');
const newReview = document.querySelector('.comment');
const commenter = ['uuu', 'pdds','hooe','ddwwe']; //db연결대신 배열로 선언사용할 변수들 만들기
postReviewBtn : 게시 버튼
addReview : 입력한 댓글
newReview : 추가된 댓글
commenter : 사용자
const commenter = ['uuu', 'pdds','hooe','ddwwe']; 은 댓글 사용자 이름이 랜덤으로 올라가도록 배열로 선언해 주었다.
js로 간단하게 구현하기위해 db연결 대신 만든 코드이다.
☝️ 게시버튼 클릭🖱️
function uploadReview(){
if(addReview.value.length > 0){
const newComment = document.createElement("li");
const deleteBtn = document.createElement('removeComment');
const likeBtn = document.createElement('likeHeart');
const commentervalue = Math.floor(Math.random() * commenter.length); //배열 길이만큼 무작위로 값을 생성
const commenterPick = commenter[commentervalue];//무작위로 생성된 값을 고르도록
newComment.innerHTML = commenterPick + " " + addReview.value ;
newReview.appendChild(newComment);
newReview.style.fontSize ='small';
likeBtn.innerHTML='<i class="xi-heart-o"></i>';
newComment.appendChild(likeBtn);
likeBtn.style.cursor ='pointer';
likeBtn.style.float='right';
likeBtn.style.marginLeft='-0.9rem';
likeBtn.style.marginRight='0.8rem';
likeBtn.addEventListener("click", pushHeart);
deleteBtn.innerHTML='<i class="xi-trash-o"></i>';
newComment.appendChild(deleteBtn);
deleteBtn.style.cursor='pointer';
deleteBtn.style.float='right';
deleteBtn.addEventListener("click", removeComm);
addReview.value="";
addReview.focus();
}else{
alert('댓글을 입력해 주세요');
}
}
}
newComment : 입력한 댓글이 추가될 변수
deleteBtn : 삭제 버튼
likeBtn : 좋아요 버튼
commentervalue : 배열 길이만큼 무작위로 값을 생성
commenterPick : 무작위로 생성된 값을 고르기위한 변수
💡난수 생성 : Math.floor(Math.random())💡
1.댓글이 1글자 이상 입력되면 newComment에 추가되고, 임의로 만든 사용자 이름을 무작위로 고른 변수 commenterPick와 입력한 댓글이 들어온다.
2.newReview(새로운 댓글)에 appendChild로 입력한 댓글이 계속 추가되고, 추가된 댓글에 동시에 ❤️(좋아요) 버튼과 🗑️(삭제) 버튼이 생성되도록했다.
3.addReview.value="";로 댓글이 입력되면 초기화가 되며, 입력창을 다시 클릭해야하는 번거로움을 없애기 위해 focus()를 주었다.
4. 댓글을 입력하지 않으면 게시할 수 없도록 ⚠️alert로 경고창을 만들었다.
✌️ 엔터키로 댓글 추가↩️
addReview.addEventListener("keypress",(e) => {
if(addReview.value.length !== 0){
uploadReview();
}
}
);keypress로 입력 후 enter key를 누르면 댓글이 입력되도록 했는데, 구글링을 해보니
❗현재는 keypress 사용을 지양한다고 한다. ❗
📝 댓글이 입력될 경우 버튼 활성화 ⬜->🟦
function inputReview(){
if(addReview.value.length>0){
postReviewBtn.style.color = "rgb(11, 159, 228)";
}else{
postReviewBtn.style.color = "rgb(199, 235, 245)";
}
}
1글자 이상 입력될 경우 색 변경으로 활성화 되도록 단순하게 구현했고,
게시글이 올라가면 버튼은 초기화된다.
📝 댓글 좋아요 ❤️👍
function pushHeart(){
if(likeBtn !== 0){
likeBtn.innerHTML='<i class="xi-heart"></i>';
likeBtn.style.color ='red';
}else{
likeBtn.innerHTML='';
}
} 새롭게 추가된 댓글에 좋아요 버튼을 클릭하면 각각 좋아요❤️ 할 수 있도록 구현했다.
📝 댓글 삭제 🗑️
function removeComm(){
newComment.remove();
}추가된 댓글에 나타나야 하기 때문에 uploadReview() 코드에 같이 넣었다. 휴지통 버튼을 클릭하면 해당하는 댓글만 삭제된다.
