📆 오늘 한 일
- [ 09:00 ~ 11:30 ] 개인공부
- [ 11:30 ~ 20:00 ] 팀 프로젝트 (js 위주로 수정)
- [ 20:00 ~ 21:00 ] 팀 회의 - 마지막 수정할 부분 피드백, 발표 내용 구상하기
- 개인공부
- SQL DAY 2
- SQL DAY 1 정리하며 벨로그 작성하기
- java 기초
📋 미니 프로젝트 - 팀원 소개 페이지 만들기
📑 오늘 작업 내용
✔️ 메인 페이지 2번 섹션 수정
-
일단 내용 추가함 (html)
-
circle-item에 호버하고 클릭하면 그 자리 고정 되게끔 변경 (js, css)
=> circle-item에 호버링 : 아이콘만 강조 (자리는 그대로)
=> circle-item을 클릭 : 아이콘 강조된채로 중앙으로 이동, 같은 key값의 desc.item 강조 -
circle-item이 초기화 될때도 애니매이션 추가하기
=> 기존에는 초기화 될때transform이""로 되어 있어서 이동하는 느낌이 아니라 걍 초기화면이 나옴-
transform을 위해 초기 위치 (css로 원형 정렬 해뒀음)를 한번 더 저장!
(item.dataset.originalTransform = window.getComputedStyle(item).transform;)
-
function removeActiveStates()설정
- item의 위치를 1번에서 저장한
item.dataset.originalTransform로 변경해주자 - item에 트랜지션을 걸어 움직이는 것처럼 보여주자!
item.style.transition = "transform 1s ease-in-out"
-
📑 오늘 사용한 코드 분석 하기
/* 기본 세팅 */
document.addEventListener("DOMContentLoaded", () => { // 이벤트리스너 - html 로드된 후, javascript가 실행
const circleItems = document.querySelectorAll(".circle-item");
circleItems.forEach((item) => {
// 초기 transform 값을 가져와서 아래처럼 저장하기 !
item.dataset.originalTransform = window.getComputedStyle(item).transform;
});
/*console.log("원래 위치 저장:", circleItems); ---디버깅 */
const descItems = document.querySelectorAll(".desc-item"); // 써클아이템과 설명아이템을 불러온다
/* 초기 화면 세팅 */
function removeActiveStates() {
document.querySelectorAll(".desc-item, .circle-item").forEach(item => {
item.classList.remove("active", "clicked"); // 써클과 설명에서 active,click을 제거 -> 강조했던 거 초기화
if (item.classList.contains("circle-item")) {
item.style.transition = "transform 1s ease-in-out"; // 애니매이션 효과
item.style.transform = item.dataset.originalTransform; // 클릭 해제 시 원래 위치로 되돌리기
}
});
}
/* 같은 data-key를 가진 써클아이템과 설명아이템을 찾아서 active, clicked를 준다 */
function activateItems(key) {
document.querySelectorAll(`.desc-item[data-key="${key}"], .circle-item[data-key="${key}"]`).forEach(el => {
el.classList.add("active", "clicked");
/* 클릭된 circle-item은 중앙으로 이동 */
if (el.classList.contains("circle-item")) {
el.style.transform = "translate(0, 0) scale(1.3)";
} // ↳ 위치(중앙) ↳ 크기
});
}
/* 이벤트리스너 추가 - 클릭하면 중앙으로 이동& 강조되는데 -> 이것을 유지 */
circleItems.forEach((item) => { // 모든 circle 아이템에 클릭 이벤트 추가
const key = item.dataset.key;// 아이템의 데이터 값을 가져온다
item.addEventListener("click", (event) => {
event.stopPropagation(); // 이벤트 전파 방지 (circle-item 클릭 시, document의 클릭 이벤트((밑 문단))가 실행되지 않아서 강조 효과가 유지됨)
removeActiveStates();// 다른 클릭된 요소들 초기화
activateItems(key);// 같은 data-key를 가진 desc아이템도 강조
});
});
/* 다른 곳(페이지의 아무곳) 클릭하면 초기화 */
document.addEventListener("click", () => {
removeActiveStates();
});
});
📑 유용했던 것
- git log
: 팀원이 많고 git을 처음 사용하다 보니,,, 자꾸 충돌이 일어난다!
: 마지막 회의에서 각자 최종버전을 보고 있는 것 같은데 보이는 화면이 다 달라서 로그를 보고 맞췄다! - vs code의 다양한 확장팩들
: 오타가 너무 많아서 다양한 확장팩들을 설치했는데 쪼오끔 도움이 된다!!
( 아직 뭘 몰라서 어케 쓸지 다 몰라서 그런듯 )
📓 오늘의 소감
- 오늘처럼 강의 없이 코딩에만 매달렸다면,, 꼭 코드 분석을 하고 잠들자!
- 내일부터는 지피티에 너무 의존 않고 자바스크립트 언어로 원하는 동작을 구상할 수 있도록 능동적으로 공부하자..!
- SQL 기출문제를 보니 생각보다 이론적인 부분이 많은데, 단어들이 다 비슷해서 헷갈린다.
이론에서 쓰이는 단어들은 시험보기 전에 달달 외우고 갈 수 있도록 그때그때 요약을 해두자!
오늘은 진짜 어려웠다,,,!! 그치만 다 하고나니 유익하다는 생각이 마구 마구 든다 ㅎㅎ
중간중간에 아이템이 술래잡기 하듯 도망가서 웃겼고
git pull 할때마다 아까 분명 지웠던 텍스트들이 그대로 있어서?
몇번이나 지웠는데도 있어서.. 울고싶었다ㅠ
팀원분들이 내일 해결해주실 것이다..... 우리조 너무 좋은데 다음주에 팀 구성 바뀐다니 슬프다 ㅠ
암튼,,, 힘내자 화텡 !!
