✏️ 0416
JS 기능 구현
매니저님과 면담
추가 페이지(방명록) 구현 회의
[ 특강 ] TIL
메인 페이지의 팀원 카드
document.addEventListener("DOMContentLoaded", function() {
const cards = document.querySelectorAll('.card');
function cardPage(event) {
const name = event.currentTarget.querySelector('.name').innerText;
let url;
switch (name) {
case '팀장님':
url = 'personal/jw.html'
location.replace('url')
break;
case '팀원':
url = 'personal/sy.html'
location.replace('url')
break;
case '팀원':
url = 'personal/my.html'
location.replace('url')
break;
case '팀원':
url = 'personal/hw.html'
location.replace('url')
break;
case '팀원':
url = 'personal/kj.html'
location.replace('url')
break;
default:
return;
}
window.open(url, '_self');
}
// 각 카드에 클릭 이벤트 추가
cards.forEach(function(card) {
card.addEventListener('click', cardPage);
});
});
// 팀 소개 페이지 이동
document.addEventListener("DOMContentLoaded", function() {
const team_img = document.getElementById('team_box')
team_img.addEventListener("click", function() {
location.href = "team_section.html"
})
}): 팀원 카드를 누르면 해당 팀원에 대한 페이지로 이동하는 JS 작성 ( 이름은 바꿨습니다 )
분명 코드에는 이상이 없는 것 같은데 지정한 이름을 가진 코드가 없다고 뜨거나 값이 없다고 떴다
script 연결을 잘못한 것도 아니었는데 뭐가 문제였나 싶었더니
일반적으로 브라우저는 파일을 위에서 아래로 코드를 순서대로 읽기 때문에
DOM을 다 읽지 않았는데 JS 파일을 먼저 읽어서 일어난 오류였다
이 코드를
<script src="./comment_section.js"></script>
이렇게 변경하면
<script src="./comment_section.js" defer></script>
DOM을 다 읽은 후에 스크립트를 실행시킬 수 있다
<script> 태그 속성
HTML 파일을 로드하다가 중간에 스크립트 파일이 있는 경우,
해당 파일을 모두 해석하기 전까지 HTML 파일을 읽는 걸 일시적으로 멈춘다고 한다.
그러면 이번과 비슷한 상황이 발생한다.
이것을 방지하기 위해 <body> 태그가 끝나는 부분에 <script> 를 넣는 방법도 있다.
하지만 이 방법도 사용자가 버튼을 클릭하거나 텍스트를 입력하는 상호작용을 시도하면 제대로 동작하지 않을 수 있다.
완성된 웹사이트에 접속한 것처럼 보이지만 사실 백그라운드에서 스크립트 해석을 실행하는 중일 수 있기 때문이라고 한다.
그래서 사용하는 <script> 태그의 속성, defer 와 async 가 있다.
defer 속성은 모든 DOM이 로드 된 후에 스크립트를 실행한다.
<script> 로 여러 파일을 불러올 경우,
아래에 있는 파일의 해석이 먼저 끝나도 위에서 아래로, 선언한대로 실행 순서가 보장된다.
서로의 의존성이 있을 때 문제없이 순서대로 실행될 수 있다.
가장 범용적으로 사용할 수 있는 속성이다.
async 속성은 DOM을 읽는 동시에 백그라운드에서 스크립트를 불러온다.
<script> 로 여러 파일을 불러올 경우,
각 파일마다 스크립트의 해석이 얼마나 오래 걸릴지는 모르기 때문에 스크립트의 실행 순서가 보장되지 않는다.
아래에 있는 파일이 먼저 실행될 수 있다.
서로의 의존성이 없다면 상관없지만 만약 있다고 하면 문제가 될 수 있으니
사용하지 않는 걸 추천한다고 한다.
TIL 에 대해
TIL ( Today I leamned )
오늘 배운 것
특강 듣는데 누군가 채팅으로 To I Love 라고 했던게 생각났다
- 써야하는 이유
- 기록 : 내가 무엇을 배웠는지 기록
- 성장 : 학습한 것을 정리하며 이해도를 높이고, 복습도 가능
- 활용 : 비슷한 문제 발생 시 활용 가능
- 신입이 가장 빠르게 경험과 실력을 증명하는 법 ( + 성실성 )
- TIL 작성 방법 ( 완벽 X, 정답 X )
- 하루에 한 번 일단 작성하기
- 처음에는 쉽고 간단하게 습관 들이고 적응했을 때 꼼꼼히, 제대로
- TIL 주제 정하기
- 강의 내용 정리 ( 배운 것, 개념 정리, 필요한 이유, 사용법) => 초기 추천
- 개발 단계 정리 ( 설치, 초기 세팅 등 )
- 하루 회고 ( 오늘 있었던 일 정리 => 문제 발생, 느낀 점, 해결 or 개선방안 )
- 문제 해결 과정 ( 발생한 에러 및 버그에 대한 분석, 해결 방법, 느낀 점, 개선 방안 ) => 권장
프로젝트 회고에 정성을 들여보기
'개발 일지 > TIL' 카테고리의 다른 글
| [ #6 ] TIL (0) | 2024.04.22 |
|---|---|
| [ #5 ] TIL (0) | 2024.04.20 |
| [ #4 ] TIL (0) | 2024.04.20 |
| [ #3 ] TIL (0) | 2024.04.20 |
| [ #1 ] TIL (0) | 2024.04.19 |
