금요일에는 HTML에 이어 JS를 공부했다.
기존에 알던 개념 + 복습의 개념이 강했고,
JS의 필요성 그리고 바닐라 JS를 이용하기 위해 다양한 실습이 준비되어 있었다.
🚩개념 정리하기
ES6부터 사용가능한 '템플릿 리터럴'
템플릿 리터럴(Template Literal) 구조분해 할당
생애 첫 프로젝트를 들어가면서 props를 전달하는게 너무 어려웠다🤦♀️ 로그인과 회원가입에 쓰이는 버튼과 상품 상세 페이지에 버튼 스타일은 똑같아서 Component 하고 width 값만 props로 받으
velog.io
객체 비구조화 할당
객체 비구조화 할당은 ES6에서 추가되었다.
1. 객체 비구조화 할당은 객체구조분해 라고도 한다.
2. 객체 비구조화 할당은 짧고 보기좋게 코드 작성이 가능하다.
3. 객체 안에 함수를 넣을 때, 화살표 함수로 선언이 안된다! (화살표 x)
[JavaScript] 비구조화 할당/구조분해할당
워후 리액트 한창 배우고 있지만 정말 어렵다 어려워~! 자바스크립트를 너무 대충 배우고 리액트로 넘어간 탓일까.. 기본이 부족하니까 정말 시간이 지날수록 고통만 커지는 느낌.. 아 그리고 난
velog.io
이벤트 핸들러 (addEventListener)
[이벤트 다루기: addEventListener] - JavaScript
우리가.이벤트를 한번.이렇게.슬쩍.걸어보자구
velog.io
addEventListener() - 생활코딩
addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다. var t = document.getElementById('target'); t.addEventListener('click', function(event){ ale
opentutorials.org
실습 5번 (갤러리)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.slider {
position: relative;
}
.slides {
display: flex;
overflow: hidden;
}
.slides img {
width: 100%;
height: auto;
}
.prev-btn,
.next-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.prev-btn {
left: 10px;
}
.next-btn {
right: 10px;
}
</style>
</head>
<body>
<div class="slider">
<button class="prev-btn">Previous</button>
<div class="slides">
<img src="./img/note1.jpg" alt="Image 1" />
<img src="./img/note2.jpg" alt="Image 2" />
<img src="./img/note3.jpg" alt="Image 3" />
<!-- Add more images as needed -->
</div>
<button class="next-btn">Next</button>
</div>
<script>
// Get the necessary elements
const slidesContainer = document.querySelector(".slides");
const prevButton = document.querySelector(".prev-btn");
const nextButton = document.querySelector(".next-btn");
const slides = document.querySelectorAll(".slides img");
let currentIndex = 0;
// Hide all slides except the first one
slides.forEach((slide, index) => {
if (index !== currentIndex) {
//0이랑 다르면 안보여줄거야
slide.style.display = "none"; //style = " display : none"
}
});
// Function to show the current slide
function showSlide(index) {
// Hide all slides
slides.forEach((slide) => {
slide.style.display = "none";
});
// Show the slide at the given index
slides[index].style.display = "block";
}
// Event listener for the previous button
prevButton.addEventListener("click", () => {
currentIndex =
currentIndex === 0 ? slides.length - 1 : currentIndex - 1;
showSlide(currentIndex);
});
// Event listener for the next button
nextButton.addEventListener("click", () => {
currentIndex =
currentIndex === slides.length - 1 ? 0 : currentIndex + 1;
showSlide(currentIndex);
});
</script>
</body>
</html>
+ 삼항연산자
조건 (삼항) 연산자 - JavaScript | MDN
조건 (삼항) 연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자입니다. 앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy)일 경우
developer.mozilla.org
✍️TIL 후기
JS를 사용해야 하는 이유와 개념은 여러 번 들어도 중요하다고 생각한다. 특히나 함수를 하나하나 알고 되짚어보니 그때 모르고 썼던 함수들의 동작원리를 좀 더 알게 되었다.
———————————————————————————————————————————————————————
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
'[부트캠프] IT 코딩 부트캠프 후기 > [웅진씽크빅X유데미] 스나이퍼 팩토리 🤹' 카테고리의 다른 글
| [유데미x스나이퍼팩토리] Vanilla JS를 이용한 서비스 만들기 (1) (0) | 2023.06.23 |
|---|---|
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : React 기초 & 간단한 실습 (0) | 2023.06.23 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : HTML 기초 & 과제 (0) | 2023.06.14 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : 아이디어 스케치 (0) | 2023.06.11 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : Git & GitHub (0) | 2023.06.09 |
