시작하는 글
오늘은 주말이다.
주말 동안 밀린 일지작성과 인스타그램 클론코딩 기능 구현을 했다.
(물론 저녁엔 한잔하기도 함)
근데,
주말 시간을 사용했는데도 내가 기획한 프로젝트도 다 못 끝내고
일지도 다 못 썼다.
ㅋㅋㅋㅋㅋㅋㅋ
(슬슬 스트레스 쌓이기 시작함)
원통하다.
훈련 내용
지난 이야기
(아직 UI만 만들어 놓은 상황이고 아무 기능이 없음)
1부 : JS 기능 추가
구현한 기능이 많지는 않지만 하나하나 진행했다.
구현한 기능은,
(UI 상하순)
- 반응형 웹 구현
- 피드 컨텐츠 이미지 캐러셀 추가(부트스트랩)
- 좋아요 버튼 클릭 시 아이콘 변경
- 게시글 글자수 오버 시 "더 보기" 버튼 활성화
- 코멘트 입력 시 코멘트박스에 리스팅
- 코멘트 개수 3개 이상 될 경우 댓글 숨기기 / "댓글 00개 모두 보기" 버튼 활성화
- 파이썬(flask) 서버 구현 / 코멘트 DB 관리
전체적으로 정신없이 살만 붙이듯
코딩을 한 것 같아서
코드도 복잡하고
나도 복잡하고
이번 프로젝트는 망했어....
그래도 구현한 기능의 코드 리뷰를
하나만 해보자면,
# 코멘트 일정 개수 초과 시 숨기기 / "댓글 00개 모두 보기"
<script 부분>
$(document).ready(function () {
$('#hideComment').hide();
});
<body 부분>
<div id="hideComment" class="hideComment">
<button id="hideCommentButton" class="hideCommentButton" onclick="showComments()">
댓글 0개 모두 보기
</button>
</div>
먼저 "댓글 00개 모두 보기"라는 버튼을 준비해놓고,
index.html 파일이 실행되자마자 숨겨지도록( hide( ) ) 처리해놓았다.
그런 다음
코멘트 input에 코멘트를 작성하고 '게시' 버튼을 누른 후
POST 주소를 통해 DB에 저장되면,
(POST 코드 리뷰는 생략)
function showComment() {
$.ajax({
type: "GET",
url: "/comment",
data: {},
success: function (response) {
let comments = response.comments;
for (let i = 0; i < comments.length; i++) {
let user = comments[i]['user']
let comment = comments[i]['comment']
let temp_html = `<div class="commentBox">
<a class="commentUserId" alt="계정">${user}</a>
<span class="comment">${comment}</span>
</div>`
$('#comments').append(temp_html);
}
let commentsLength = Object.keys(comments).length;
$("#hideCommentButton").text('댓글 ' + commentsLength + '개 모두 보기');
if (commentsLength >= 4) {
$('#comments').hide();
$('#hideComment').show();
}
}
})
}
GET 요청을 통해 위와 같은 로직으로 코멘트를 리스트업하게 된다.
그와 동시에
게시된 코멘트의 개수에 대한 if문으로 조건을 거르고
일정 개수(4개) 이상 게시할 경우,
초기에 숨겨놓았던 "댓글 0개 모두 보기" 버튼이 활성화( show( ) )되도록 처리해두었다.
이 부분은 가장 신경 쓴 부분이자 아직 해결 못한 과제이다.
문제의 상황은 이러함.
게시물별로 구분하지 않은 id가 문제였다.
input 태그의 id값(=postComment)으로 입력된 코멘트를 받아내는데,
모든 게시물의 input의 id값이 같아서
첫번째 게시물의 id값만 인식하기 때문.(이거 때문에 날밤깠지만, 해결 못함)각 게시물마다 POST/GET을 파는 건 의미가 없다고 생각하여 그냥 두었다.
분노+1
시간관계 상 프로젝트는 이 상태로 제출되었지만
충분한 시간을 가지고 꼭 문제를 해결해내리다.
2부 : 커밋 남발
그래도 git은 진짜 나름 열심히 했다.
커밋 푸시만 22번함.
내 푸시업 결과,
자세한 프로젝트 코드는 : https://github.com/angar2/project03
뭔가 전체적으로 기준이 없고 지저분한 것 같아서
다음부터는 커밋을 남발하지 말아야겠다.
그리고
리드미 같은 마감부분은 신경도 못 썼다.
이번 프로젝트는 망했어....
그래도 한번 보자
(좋아요 버튼 기능도 만들었지만 코멘트를 작성하면 리로드로 인해 사라짐..)
프로젝트 유튜브 영상 : https://youtu.be/K4cXI9KI-58
끝내는 글
이번 프로젝트는 코딩을 하면서 깨달음을 제대로 때려 맞았다.
난 아직 기초도 많이 안 잡혀 있고,
무엇을 모르는지를 모르는데,
이번 프로젝트처럼 욕심만 가지고
맨땅에 헤딩하듯 혼자서 내 생각만을
키보드로 두드리는건 최선이 아니었을 것.
그게 내 성격이더라도
현재 내 입장과 맞지 않는다면 방식을 타협할줄도 알아야하니까,
다양한 자료와 방식을 수용하고
주변 동료의 의견을 적극적으로 구할줄도 알아야한다는 것
그게 이번에 확실히 나에게 필요했던 것 같다..
나 울고 온당.
'내일배움캠프 > 1 ~ 4 주차' 카테고리의 다른 글
| [내일배움캠프] - 15일차 : 개인 프로젝트 | instargram 클론코딩 | 발표회 소감 (0) | 2022.05.02 |
|---|---|
| [내일배움캠프] - 2주차 : 두 개의 개인프로젝트 | 쉽지만은 않더다 (0) | 2022.05.02 |
| [내일배움캠프] - 12일차 : 개인 프로젝트 | instargram 클론코딩 투 (0) | 2022.04.30 |
| [내일배움캠프] - 11일차 : 개인 프로젝트 | instargram 클론코딩 (0) | 2022.04.28 |
| [내일배움캠프] - 10일차 : 개인 프로젝트 | 파이썬으로 게임만들기 쓰리 | 제출 (0) | 2022.04.27 |
