오늘 한 일
팀프로젝트 마무리
자바스크립트 SPA 특강
팀 과제 리뷰
오늘 공부한 내용
✅ JS에서 동적으로 요소 만들기
💥 동적으로 요소를 만들 때 그동안은 (개인프로젝트에서)
html 태그를 바로 삽입하는 형식으로 만들었는데
이 방법은 추후에 기능 추가할 때 불편함이 많이 생겼다 ㅠㅠ
const makeCard = (movieData) => {
cardSection.innerHTML = movieData
.map((item) => {
return `<div>
...
</div>`;
})
.join('');
};이벤트리스너 붙이기도 까다롭고.. (forEach를 또 돌아야하기 때문에)
함수 밖으로 데이터를 넘겨주기도 어려웠다
그래서 상세 페이지 보완할 겸 팀원분의 코드에 덧붙여서 연습을 했다!
💡 데이터를 가지고 요소들을 생성하는 makeMovieDetail 함수,
각각의 요소를 만드는 createTag(만들태그, 내용) 함수,
만들어진 요소들을 붙여줄 appendChild(부모요소, 붙일요소) 함수를 만들어서 동적요소 생성!
const makeMovieDetail = async () => {
const data = await getMovieDetailData();
const image = createImage(
'img',
`${'https://image.tmdb.org/t/p/original'}` + data.poster_path
);
const infoGroup = createInfoGroup('div', 'info-group');
const title = createTitle('h1', data.title);
const desc = createDesc('p', data.overview);
appendChildren(infoGroup, [title, desc]);
appendChildren(main, [image, infoGroup]);
};
const createImage = (tagName, imageSrc) => {
const element = document.createElement(tagName);
element.src = imageSrc;
return element;
};
const appendChildren = (parent, children) => {
children.forEach((child) => {
parent.append(child);
});
};✅ 랜덤하게 배경색 밝은 톤으로 바꾸기 (CSS)
💥 영화 상세 페이지에 해당 영화의 장르를 가져오는데 이를 각각 다른 컬러로 표현하고 싶었다
처음에는 무작위 random 컬러로 했으나
색이 어둡게 뽑히면 보기에도 예쁘지 않고 글자 색이 묻혀
가독성도 해치기 때문에 밝은색으로만 가져오는 방법을 찾았다
✔ 헥스코드는 16진수 6자리로 이루어져 있는데, 이중 2자리씩 앞에서부터 R(빨강), G(녹색), B(파랑)을 나타내며 00(0)~FF(255)까지 총 256 단계로 각각의 색의 각도를 나타냄
모두 0인 경우 #000000 검정, 모두 FF일 경우 #FFFFFF 흰색이 됨
💡 색의 값의 합이 높을 수록 밝아지기 때문에
랜덤하게 만들어진 값에 255의 반(178)을 곱한 다음 나머지 반을 더해
RGB 값이 128, 16진수로는 80 ~ 255이하로 나오도록 반환하고
그 값을 각각의 span 태그 배경색으로 넣어줌
genreItem.style.backgroundColor = randomBrightColor();
const randomBrightColor = () => {
let color_r = Math.floor(Math.random() * 127 + 128).toString(16);
let color_g = Math.floor(Math.random() * 127 + 128).toString(16);
let color_b = Math.floor(Math.random() * 127 + 128).toString(16);
return `#${color_r + color_g + color_b}`;
};✅ pull 안하고 merge 해서 충돌났을 때
💥 또 pull 안하고 merge 하려고 해버렸다
역시 내용이 겹쳐서 충돌이 나버렸고..!
팀원님이 깃헙내에서 해결해주셨지만 해결방법은 적어놓는다!
git checkout main으로 main 브랜치로 이동git pull origin mastergit checkout 작업브랜치로 이동git merge master
(작업 브랜치와 최신버전의 main 브랜치를 merge 해줌)- pull request 시 충돌 발생한 상황과 똑같은 상황 발생
- 편집창에서 충돌된 부분 수정
git add,commit,push,pull request다시 진행
✅ CSS도 선언 순서가 중요하다
💥 flex 를 grid로 바꾸는 과정에서 반응형 세팅을 하는데
1440px 아래에서 원하는 형태가 나오지 않았다
💡 max-width를 썼기 때문에 1440 -> 768 -> 480 순으로 써야 됐는데
반대로 480 -> 768 -> 1440 순서로 썼기 때문에
가장 나중에 선언한 1440 아래 값이 적용이 안된 것 😇
@media (max-width: 1440px) {
.main {
grid-template-columns: repeat(auto-fill, minmax(30%, auto));
}
@media (max-width: 768px) {
.main {
grid-template-columns: repeat(auto-fill, minmax(50%, auto));
}
}
@media (max-width: 480px) {
.main {
grid-template-columns: repeat(auto-fill, minmax(90%, auto));
}
}✅ 반응형 braekpoint
- ~ 480px: 모바일 세로
- 481px ~ 768px: 모바일 가로, 타블렛 세로
- 769px ~ 1024px 또는 1280px: 타블렛 가로, 노트북
- 1025px 및 1281px ~: 데스크탑
✅ SPA 특강
📍 https://velog.io/@jetiiin/SPA-특강
📝 팀과제 개인회고
- 또 한 번의 팀 프로젝트가 끝났다!
요번 팀에서도 무사히 프로젝트를 끝냈고
팀원들과 매일 소통하면서 많이 배운 것 같다!
(나는 많이 배웠는데... 팀원들에게 나는 도움이 됐을까 ㅎㅎ;)
- 다들 파워 내향형인 팀원들이라 처음엔 매우 어색했지만
첫 회의 때부터 뭘 만들어야 할지 똑부러지게 정리해 주신 덕분에
바로 역할 분담에 들어가서 기능구현에 집중할 수 있었고
모르는 거 있을 때마다 같이 고민하고 잘 알려주셔서 하나씩 완성해 나갈 수 있었다
- 각자 공유할 내용이나 질문거리를 모아뒀다가
시간 맞춰 회의한 것이 참 도움이 많이 된 것 같다!
- 아쉬운 점이라면 (오늘 과제리뷰 보면서 느꼈는데)
API를 좀 더 다양하게 활용해 봤으면 어떨까 싶다!
그랬으면 페이지가 좀 더 다채로워지지 않았을까.. 생각해봄 🤔
- 만족스러운 점이라면 처음부터 리뷰 (등록/수정/삭제) 기능을 만들어 보고 싶었는데
온전히 내 힘으로 한 것도 아니고 아쉬운 점도 물론 있지만!
어쨌든 동작하도록 구현해 냈다는 거다!
하면서 현타가 많이 왔는데 그래도 해낸 거, 아주 칭찬해 😏👏
- git 사용도 두 번째로 해보니 조금 더 손에 익었다
다음 프로젝트에서는 더 익숙해지겠지 :)
느낀점
- TIL 열심히 쓰다가 한 파트를 날려버렸다 ㅎㅎ
잠깐의 현타가 왔다가 정신차리고 다시 작성
길지 않은 내용이어서 다행 ㅠㅠ
(임시저장 만세)- 지금은 작업 중간중간 시간이 남을 때 TIL을 작성하고 있는데
일을 하면서는 TIL 쓰는 게 가능할까?
집에 와서 쓰려고 하면 다 까먹을 것 같은데.. 🤔- 내일부터 리액트다!!! 두근두근 👀
참고 :
랜덤색 : https://kimk2062.tistory.com/25
merge충돌 : https://velog.io/@devmin/git-conflict-solution-basic
breake포인트 : https://velog.io/@sangpok/%EB%B0%98%EC%9D%91%ED%98%95-UI-%ED%95%B4%EC%83%81%EB%8F%84-%EA%B8%B0%EC%A4%80
