[TIL] 내일배움캠프 React 과정 2022.12.04

Today I Learned

JavaScript 입문과 웹 UI 개발 강의 수강

JavaScript 입문과 웹 UI개발

jQuery

$('.hello').html('안녕');

javascript의 innerHTML과 동일한 코드. 코드가 짧고 간결하다.

$('.hello').css('color', 'red');

jQuery로 css 변경하기

$('.hello').addClass('클래스명');
$('.hello').removeClass('클래스명');
$('.hello').toggleClass('클래스명');

jQuery로 class 명 추가 및 제거하기

<p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>

<script>
  $('.hello').html('바보');
</script>

javascript의 quertSelectorAll과 다르게 인덱싱 필요 없이 해당 클래스 명을 가진 모든 요소에 접근한다.

$('.navbar-toggler').on('click', function(){
   $('.list-group').toggleClass('on');
})

jQuery 이벤트 리스너 사용 예시

$('.test-btn').on('click', function(){
    $('.hello').fadeOut();
});

jQuery로 간단하게 UI 애니메이션 주기

.hide() .fadeOut() .slideUp() .fadeToggle() 등의 효과가 있다.

모달창 띄울 때 주의할 점

로그인 버튼을 눌렀을 때 모달창이 뜨도록 하고 싶었다.

document.querySelector('.loginBtn').addEventListener('click', function(){
   document.querySelector('.black-bg').classList.add('show-modal');
});

기존에는 모달창(.black-bg)에 display: none 설정을 해 놓고 버튼을 클릭했을 때 여기에 'show-modal이라는 클래스를 추가해서 display: block로 변경하는 방법이었다.

그런데 버튼을 눌렀을 때 show-modal이라는 클래스 명이 추가되기는 하는데 display: block이 작동하지 않아서 모달창이 나타나지 않았다. 코딩애플 질문 게시판에 검색해 본 결과 해결 방법을 알게 되었다!

내가 추가하려는 클래스인 show-modal을 모달창(black-bg)보다 아래로 가도록 css의 위치를 수정해 주니까 모달창이 정상적으로 작동되었다. 정확한 이유는 모르겠지만 아마 css 파일을 위에서부터 읽어 내려오는데 뭔가 충돌이 있지 않았을까 싶다.

간단한 one-way 애니메이션 만들기

1. css로 시작 스타일 만들고

2. css로 최종 스타일 만들고

3. 원할 때 최종 스타일로 변하라고 JS 코드를 짠다.

4. 시작 스타일에 transition 추가

모달창 fade-in 애니메이션 효과 주기

.black-bg {
  (생략)
  visibility : hidden;
  opacity : 0;
  transition : all 1s;
}

.show-modal {
  visibility : visible;
  opacity : 1;
}

nav-bar 천천히 펼쳐지는 효과 주기

.list-group {
     visibility: hidden;
     overflow: hidden;
     height: 0;
     transition: all 1s;
}

.show {
     visibility: visible;
     height: 200px;
}

form 태그 기본 구조

<form action="success.html">
  <div class="my-3">
    <input type="text" class="form-control">
   </div>
   <div class="my-3">
     <input type="password" class="form-control">
   </div>
   <button type="submit" class="btn btn-primary">전송</button>
   <button type="button" class="btn btn-danger" id="close">닫기</button>
</form>

form 태그의 action 속성에는 데이터를 전송했을 시 이동할 페이지를 입력한다.버튼을 눌렀을 때 데이터를 전송하고 싶으면 type="submit"그냥 일단 버튼일 경우에는 type="button"

event.preventDefault( )

document.querySelector('.btn-primary').addEventListener('click', function(event){
   if(document.querySelector('.form-control').value == ''){
        event.preventDefault();
        alert('정보를 입력하세요');
   } 
});

if문을 이용해서 input창에 입력된 값이 없을 때는 alert을 띄우도록 설정했다. 그런데 입력한 값이 없더라도 form 태그에 action으로 입력해 둔 링크로 이동한다. 입력한 값이 없을 때는 데이터가 전송되지도 않고 페이지가 이동하지도 않도록 하기 위해서 addEventListenr의 콜백 함수의 인자에 event를 넣고 if문 안에 event.preventDefault( ) 코드를 추가했다.

event.preventDefault( )란?

a 태그나 submit 태그는 누르게 되면 href를 통해 이동하거나 , 창이 새로고침하여 실행되는데 preventDefault 를 통해 이러한 동작을 막아줄 수 있다.

주로 사용되는 경우는

1. a 태그를 눌렀을 때도 href 링크로 이동하지 않게 할 경우

2. form 안에 submit 역할을 하는 버튼을 눌렀어도 페이지가 이동하지 않게 하고 싶을 경우

출처 https://programming119.tistory.com/100

<input> 태그에서 발생하는 이벤트

input 이벤트

document.getElementById('email').addEventListener('input', function(){
  console.log('안녕')
});

<input>에 입력된 값이 변경될 때 input 이벤트가 발생함

활용법: 비밀번호는 6자 이상 입력하세요. 알림 띄우기

change 이벤트

document.getElementById('email').addEventListener('change', function(){
  console.log('안녕')
});

<input>에 입력된 값이 변경되고 커서를 다른 곳에 찍으면(포커스를 잃으면) change 이벤트가 발생함.

if문 문제 풀기

문제 1) 9의 배수에서는 박수 두 번, 9의 배수가 아닌 3의 배수에서는 박수 한 번, 나머지는 통과하기

function 삼육구게임(num){
  if (num % 3 == 0) {
    console.log("박수");
  } else {
    console.log('통과');
  }
}

처음에 3의 배수일 때만 작성했다가 여기서 9의 배수일 때만 어떻게 박수를 두 번 칠 수 있을까 고민을 했다. 왜냐면 처음에 if문에서 3의 배수를 구할 때 9의 배수도 포함되기 때문에 else문으로 넘어가지 못할 거 같았기 때문이다. 그래서 사실 이 문제는 풀지 못했다!

function three(num) {
     if (num % 9 == 0){
          console.log('박수 박수')
     } else if (num % 3 == 0) {
          console.log('박수');
     } else {
          console.log('통과');
     }
}

근데 답을 보니까 아 9의 배수를 먼저 if문으로 걸러주면 되는 거였구나!를 깨달았다. if문으로 9의 배수인지부터 확인하고 9의 배수가 아닌 수 중에서 다시 else if문으로 3의 배수인 숫자를 걸러주면 문제가 해결된다.

문제2) 시험 과목은 2개, 2개 과목의 점수 합이 120점 이상이면 통과. 하지만 한 과목이 40점 미만일 경우에는 불합격한다.

function success (score1, score2) {
     if (score1 + score2 >= 120 && score1 > 40 && score2 > 40) {
          console.log('합격')
     } else {
          console.log('불합격')
     }
}

내가 작성했던 코드. if문에 모든 조건을 다 걸어버렸다ㅋㅋ

function success2 (a, b) {
     if (a < 40 || b < 40) {
          console.log('불합격');
     } else if (a + b >= 120) {
          console.log('합격');
     } else {
          console.log('불합격');
     }
}

답변 보며 수정한 코드. 이걸 이렇게 else if문까지 사용하며 나누는 방법도 있다는 점을 깨달았다.

버튼 누를 때마다 버튼 안에 텍스트 바꾸기

let count = 0;
document.querySelector('.badge').addEventListener('click', function() {
   count++;
   if(count % 2 == 1) {
        document.querySelector('.badge').innerText = 'Light🔄'
   } else {
        document.querySelector('.badge').innerText = 'Dark🔄'
   }
});

count라는 변수를 지정해서 버튼을 한 번 누를 때마다 count를 1씩 더한다. count가 홀수일 때는 innerText를 'Light'로, count가 짝수일 때는 'Dark'로 보여주도록 한다.

var, let, const의 차이점

var	Function-scoped	재선언O	재할당O
let	{Block-scoped}	재선언X	재할당O
const	{Block-scoped}	재선언X	재할당X

const는 초기값이 없으면 선언 불가능

회고

주말 동안 코딩애플 레벨1 강의를 다 들었다. 간단한 것이긴 하지만 나 혼자서 자바스크립트 코드를 작성하는 데 익숙해졌다. 내일부터는 리액트 강의를 듣고 남은 자바스크립트 강의는 틈틈이 들으려고 한다. 그리고 내일은 다크 모드도 정말 간단한 구조에서 한번 시도해보려고 한다! 마지막으로 WIL만 작성하고 자야지. TIL에 너무 많은 내용을 작성해서 그런지 WIL은 항상 뭘 써야 될지 모르겠다..

저작자표시