어찌 하늘은 나에게 개인과제라는 문제를 주고 다음 날이 되자마자 팀 프로젝트를 주신단 말입니까..
아아 부트캠프에서 준거였지(머쓲);
이번 팀 과제는 지난번 개인과제를 같이 해온 조 5명이서 하나의 프로젝트를 더 심화시키는 작업이다. 다음주 월요일까지인 것 만큼 꼭 기간내에 누 안끼치게 만들어 보겠다.
내가 맡은 업무
- 영화 카드 클릭시 상세페이지 뜨게 <->상세페이지에서 메인페이지로 가게
- 리뷰작성기능 구현
둘 다 직접 구현하지 않았기에 엄청나게 어려울거라 생각이 들지만, 팀원들의 도움을 받으며 해보도록 하겠다
깃 허브
문제점이 발생했는데, 총5명의 팀원이 각자 맡은 프로젝트 중 한분것이 채택되어서 모두가 그 파일을 공유할 수 있도록 그분이
git init
git add .
git commit
그리고 깃헙 접속
레파지토리 생성
초기코드올리기 (git remote add origin <저장소주소>
git branch -m main
git push -u origin main
여기까지가 팀장이 해야할 일
===============
git clone <주소>
<코드 수정>
git branch <브랜치명> - 브랜치 생성
git checkout <브랜치명> - 브랜치로 이동
git checkout -b <브랜치명> - 브랜치 생성 후 바로 이동
근데 여기서 git branch가 안되길래 git checkout -b <브랜치명>으로 하였더니 내가 있는 위치가 switch되서 그 해당 브랜치로 이동을 해있었고,
거기선 git branch -v로 리스트를 확인해도 내 브랜치가 깃허브사이트에 없었고, git push도 안되는 상태였다. 원인을 찾다보니 권한을 이메일로 주셨는데, 허용을 안했었고, 그 상태에서 remote 즉 저장소와 원격저장소가 연결되어있나 확인해봤더니 연결이 안되어있었다 그래서
git remote add origin main 으로 연결하고
checkout으로 위치 변경 및 생성하고
git add . 하고(변경된 코드를 저장할 파일을 지정하는 명령어)
git commit -m "변경한 내용입력"
git push origin <브랜치명>
과정이 진행되어야 새로운 브랜치명이 생성되고 거기에서 수정이 가능하다는걸 파악했다. 중간중간 안되긴했지만 다시 몇번 더 해보면 익숙해질 것 같다
영화 리뷰 작성 만들기
label
폼의 양식에 이름 붙이는 태그
<label for="jb-input-text">Input - Text</label>
<input type="text" id="jb-input-text">
// Input - Text[ input box] 이런식으로 만들어짐for값과 양식의 id 값이 같으면 연결됨
label을 클릭하면, 연결된 양식에 입력, 체크, 체크해제 같은게 가능
ex) 버튼창 클릭하지 않아도 버튼 앞에 label로 묶여있는 글씨 눌러도 체크됨
input
required
<form>
아이디: <input type="text" name="usrname" required>
<input type="submit">
</form>여기서 required를 추가해주면 input 내용을 입력없이 submit했을 경우 경고창이 뜨게 만들어줌
fieldset
form요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용하는 태그
하나의 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려줌
legend 태그 요소를 사용하면 fieldset 요소의 캡션(caption)을 정의할 수 있음
legend 태그
그룹으로 묶는 구역에 제목을 붙이는 태그
즉 fieldset에 제목을 달아준다 생각
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>영화 리뷰 작성</title>
<link rel="stylesheet" type="text/css" href="./css/detail.css">
</head>일단 detail.css로 따로 상세페이지 전용 css를 만들어 준 모습
<body>
<h1>영화 리뷰 작성</h1>
<form id="reviewForm">
<fieldset id='reviewer' class="namePwd">
<label for="nameInput">작성자 이름:</label>
<input type="text" id="nameInput" required><br>
<label for="passwordInput">확인 비밀번호:</label>
<input type="password" id="passwordInput" required><br>
<!-- 리뷰 작성란 위에 별점 체크 기능 넣을 예정 -->
<textarea id="reviewInput" required></textarea><br>
<button id="btn" type="submit">리뷰 등록</button>
</fieldset>
</form>form태그로 안에 input button 클릭 시 submit이 정상적으로 제출 되도록 만들었고, 내용 구성으로는 이름,비밀번호,textarea,button을 넣었다
id 뒤 required를 넣은 이유는 빈 여백 제출 시 경고창을 띄우기 위해 기재했고, 각각 아이디를 넣은 이유는 addEventListener 함수 실행시 어디쪽에서 동적언어를 실행할지 위치를 정해주기 위해서 기재했다.
<div id="reviews">
<!-- 리뷰 나타남 -->
</div>
</body>
<script src="./js/detail.js"></script>
</html>여기서 js파일을 body아래로 내린 이유는, body코드 실행 전 id에 해당되는 값을 js쪽에서 변수로 선언해줬는데 그때 getElementById로 찾았지만 js파일먼저 해독 시 Id를 찾을 수 없기 때문에 body먼저 해독하고 그 후에 js파일이 실행되도록 조치하였다.
const reviewForm = document.getElementById('reviewForm');
const nameInput = document.getElementById('nameInput');
const passwordInput = document.getElementById('passwordInput');
const reviewInput = document.getElementById('reviewInput');
const reviews = document.getElementById('reviews');각각의 아이디에 해당되는 변수를 따로 지정해주었다. 언제 어떻게 쓰이던지 편할 수 있도록..!
console.log(reviewForm);
console.log(nameInput);
console.log(passwordInput);
console.log(reviewInput);
console.log(reviews);처음에 4번째 console 내용이
Uncaught ReferenceError: Cannot access before initialization at
uncaught referenceerror: cannot access 'review' before initialization at HTMLFormElement.
이러한 에러가 뜨면서 실행이 안되었던 것이다. 1시간을 넘게 이것저것 뒤져보았는데 원인은 변수 선언하기 전 id를 찾을 수 없기에 저런 에러문구가 뜬다고 하여서 js파일을 body아래로 내렸는데, 사실 그 위에것들도 실행이 안되어야 맞지 않나 생각했지만 그것만이 문제가 아니였고, 변수 값을 넣어줄때 html파일의 이름과 같지 않아서 생긴 문제도 있어서 다행히 오류는 잘 넘겼다.(이거 때문에 방명록 결과값이 안나왔었음)
reviewForm.addEventListener('submit', function (e) {
e.preventDefault();
// 사용자 입력 가져오기
const reviewerName = nameInput.value;
const password = passwordInput.value;
const review = reviewInput.value;
// 리뷰 생성 지향님 코드 참고 예정
const reviewElement = document.createElement('div');
reviewElement.innerHTML = `<p>${review}</p><p>작성자: ${reviewerName}</p><p>비밀번호: ${password}</p>`;
reviews.appendChild(reviewElement);
//입력 필드 초기화
nameInput.value = '';
passwordInput.value = '';
review.value = '';
});
addEventListener
매서드
const button = document.querySelector('h1');
button.addEventListener('click',() => {
alert('You clicked me!!');
}) 첫번째 인자엔 click,double click('dblclick' 으로도 사용가능), mouseenter 등 문자열 기입
mouseup - 마우스를 떼는 순간 실행
mousedown - 마우스를 누르자마자 실행
mouseenter - 마우스가 요소에 닿자마자 실행
두번째 인자는 콜백함수, 실제 실행했을때 실행하고 싶은 코드 기입
두번째 쪽엔 ()=>{} / function() {} 둘 다 사용가능
onclick으로도 클릭실행일때 같은 값이 나오는데 addEventListener로 만드는 이유는 onclick으로 해당 버튼으로 여러 alert를 띄우고싶다 가정하면 addeventlistener는 여러 함수 안의 alert값을 넣어서 그 함수명을 콜백함수안에 넣었을 때 실행하기 때문에 중복되지않은 여러개의 클릭실행값을 다 실행할 수 있지만 onclick은 여러값을 넣으면 중복되어서 결국 하나밖에 실행되지 않기때문에 여러개의 실행을 하기 위해선 add가 더 적합하다
다른 방면에서 좋은 이유가 있는데
a.button.addEventListener('click', twist, {once:true})이런식으로 콜백 함수 뒤에 객체가 들어가면 한번만 실행하고 event가 중단될 수 있다 (once - 한번 / true 진실[실행])
느낀점
오늘은 내가 맡은 역할을 부트캠프 시간 안에 다 끝냈고,
10시까지 깃허브 오류를 다루다가 오랜만에 알고리즘 css를 건드릴 수 있게 될 거 같다 내일은 개인공부시간이 더 많을 것 같아 뿌듯하다 ㅎㅎ
코드를 내가 0부터100까지 다 알아서짜지않고 검색해서 짠거지만, 예전엔 이해만 한세월이였다면, 나름 지금은 쉬운파트라서 그럴수도있지만 금방 만든 것 같다 ㅎㅎㅎ
오늘도 약간 성장한 나 칭찬해!
