20대의 자산

개발자 도구를 누르고 기록 버튼을 누르자~버튼, 메뉴, 하나 하나 다 눌러보고 페이지 잘 넘어가는지 확인하고 기록 중지 누르고 기다리면 아래와 같은 화면이 뜬다. 여기까지 만들어본 내 웹사이트의 성능이 어떤지 이것저것 눌러보고 이동도 해본 결과 다행히 빨간색은 안 뜬다!!!성능이 안 좋으면 빨간색이 막 뜬다고 나왔는데 내꺼는 다행히 안 뜬다.

WEB-Front end/*웹사이트 만들기 & 토이 프로젝트 2024. 2. 18. 15:57

바닐라 자바스크립트로 좌표값을 찍어서 효과를 주려고 할 때마다 효과를 주려는 높이를 콘솔로 찍어서 높이를 재는게 너무 불편해서 Intersection Observer API를 활용하여 편하게 구현하였다. 아래 코드를 보면 효과를 주고싶은 높이와 윈도우의 자표를 찍어 번거롭게 구현을 하였는데 Intersection Observer API를 쓰면 더 쉽게 효과를 줄 수 있다. const header = document.querySelector('.header'); const headerHeight = header.getBoundingClientRect().height;// getBoundingClientRect 높이를 반환해주는 함수임 document.addEventListener('scroll', () =..

WEB-Front end/*JAVASCRIPT 2024. 2. 15. 17:15

국비 프론트 수업 중 API를 불러와서 웹사이트를 만드는 과제를 주셨는데 한번도 해본 적이 없어서 많이 어려웠다. 이 이미지 API의 장점은 url을 불러오지 않아도 검색만으로 불러올 수 있고 용량을 확 줄일 수 있다는 장점이다. $(document).ready(() => { $("#search-form").submit((e) => { const perPage =20; // 예: 20개의 항목을 가져옴 let searchText = $("#photo").val(); let responseContainer = $("#img-thumbnail");// 결과창을 저장하기 위한 컨테이너 let userApi = `Ypo4TFbTd4iHDksg9sNx7CyyPNF7f4fly2xQ_orZb7o` let url = ..

WEB-Front end/*웹사이트 만들기 & 토이 프로젝트 2024. 2. 13. 23:58

서버사이트 렌더링(thymleaf) 클라이언트사이드 렌더링(react) *오늘의 중요 포인트* 비구조화 할당 computed property names 리액트 배울때 중요하다 고함 { let i = 0; const obj = { [`지우${++i}`]:i, [`지우${++i}`]:i, [`지우${++i}`]:i, }; console.log(obj); } 폼에 있는 데이타들을 일괄적으로 받아올 때 쓴다고 함 spread 와 rest 이것도 많이 쓴다고 함 spread 리액트 하는 내내 중요하다고 함 리액트 데이타가 변경 됬다는 기준 이전 객체와 다른가 호이스팅 - 면접에서 많이 나옴 오늘 진도 나간 내용을 기록하자 /* 자바스크립트의 Scope : 변수 가 유효한 범위 JS 의 Scope 는 총 3가지 G..

WEB-Front end/*JAVASCRIPT 2024. 1. 20. 23:35

제이쿼리로 유효성 검사하는 수업 때 잘한 사람들 코드를 가져와서 올려보았다. 여러 방식이 있어서 참고하면 좋을 거 같다. 상진 // Js009_DOM5_practice1.html 과 같은 동작을 jQuery 로 작성해보세요. // 아래의 HTML 은 수정하지 마세요 // 아래 HTML 안에 inline JS 코드 없이 동작할수 있도록 아래에 작성해보세요 $(document).ready(function(){ changeBOX(), onSubmit(), datainput() }); function datainput(){ $("[type='text'],[type='number']").focusin(function(){ $(this).css("background-color","yellow"); }), $("[t..

WEB-Front end/*JAVASCRIPT 2023. 10. 27. 09:28

// 위의 HTML 은 수정하지 마세요 // 위의 HTML 안에 inline JS 코드 없이 동작할수 있도록 아래에 작성해보세요 document.getElementById('btn').addEventListener('click', function () { let e; for (x of document.getElementsByName('option')) { if (x.checked) { e = x.value; break; } } switch (e) { case '구매자명+금액': { const frm = document.forms['frm1']; if (!frm['name'].value.trim().length) { alert('구매자명을 입력하세요'); } else if (Number(frm['price..

WEB-Front end/*JAVASCRIPT 2023. 10. 25. 09:43

checkAgree 함수는 웹 페이지의 특정 폼(form) 내부에 있는 동의 체크박스(checkbox)들이 모두 체크되어 있는지 확인하고, 그 결과에 따라 다른 작업을 수행하는 기능을 제공합니다. 아래에서 코드의 각 부분을 상세히 설명하겠습니다: 폼 참조 가져오기:document.forms는 문서 내의 모든 폼 요소들을 나타냅니다. 'regist'라는 이름을 가진 폼을 frm 변수에 저장합니다. javascriptCopy code const frm = document.forms['regist']; 체크 상태 초기화:ch 변수는 모든 체크박스가 체크되어 있는지 확인하는 데 사용됩니다. 초기값으로 true를 가집니다. javascriptCopy code let ch = true; 동의 항목 검사: frm['..

WEB-Front end/*JAVASCRIPT 2023. 10. 24. 13:00

이름 아이디 홍길동 Mr.Hong 첫번째 함수 이벤트 리스너 //현 전체문서 css선택자 #기호는 ID를 나타내고 #table1은 ID가 "table"인 요소를 참조하며 그 요소의 내부에서 'div'태그를 모두 선택하려는 것을 의미합니다. for(e of document.querySelectorAll("#table1 div")) { //for...of루프를 사용하여, 위의 div요소에 반복문 수행 대해변수 'e'에다가 넣고 이벤트 주기 e.addEventListener("click", function() { // 이 코드는 각 'div'요소에 클릭 이벤트 리스너를 추가합니다 'div'를 클릭하면 인라인 함수가 호출됩니다. let text = this.innerHTML.trim(); // this는 이벤트..

WEB-Front end/*JAVASCRIPT 2023. 10. 24. 01:47