Front/javascript5

• Header synchronous integration (헤더 동기 통합) 프로젝트를 진행 중 초반에는 복잡하고 오래 걸릴 작업이라 생각하여 미뤄두었던 header 통합을 실시하였다. 여러 방법이 있었다. 1. include : django 프론트에서는 쓸 수 있었는데 프론트를 분할했기 때문에 쓰지 않았다. 2. JavaScript // JavaScript로 nav 요소 생성 var nav = document.createElement('nav'); // nav 요소에 필요한 내용 추가 nav.innerHTML = '메뉴1메뉴2'; // 생성된 nav 요소를 적용할 곳의 요소 선택 (예: 요소) var header = document.querySelector('header'); // nav 요소를 적용할 요소에 추가 header.appendChild(nav); nav를 생성하여 .. Front/javascript 2023. 6. 23.

• timeago() 상대적인 시간 표현해주는 함수 https://zetawiki.com/wiki/%ED%95%A8%EC%88%98_timeago() 함수 timeago() - 제타위키 다음 문자열 포함... zetawiki.com function timeago(date) { var t = new Date(date); var seconds = Math.floor((new Date() - t.getTime()) / 1000); if (seconds > 86400) return t.toISOString().substring(0, 10); if (seconds > 3600) return Math.floor(seconds / 3600) + "시간 전"; if (seconds > 60) return Math.floor(seconds / 60) + "분 전"; re.. Front/javascript 2023. 6. 17.

• TIL230526 const , let, var 블록 스코프 재할당 가능 호스팅 const O X X let O O X var 함수 스코프 O O 블록 범위: 변수가 정의된 블록 내에서만 유효합니다. 재할당 가능: 변수에 다른 값을 할당할 수 있는지 여부를 나타냅니다. 호스팅: 변수 선언이 스코프의 최상단으로 끌어올려지는 현상입니다. const 상수를 선언할 때 사용 한 번 할당된 값은 변경 X 블록 스코프 재할당 불가능 let 변수를 선언할 때 사용 동일한 스코프 내 중복된 변수 선언을 허용 X 블록 스코프 재할당 가능 var 변수를 선언할 때 사용 호스팅이 발생하여 선언 전에도 사용 가능 함수 스코프 재할당 가능 변수 값 여러 번 변경 가능 나는 자바스크립트 처음이라 const를 많이 썼지만 차차 선언을 잘 쓰도록 해보겠다. Front/javascript 2023. 5. 28.

• TIL230525 바인딩된 이벤트 핸들러를 제거, 다시 바인딩 // 기존 코드 $('#image-input, #model-select').click(function () { $('#image-input').change(function () { ... }) $('#model-select').change(async function () { ... }) }); 이런 코드를 썼는데 셀렉트를 선택하면 두 번이 실행되는 오류가 발생하였다. 원인을 찾아 구글링을 찾던 도중 알 수 있었다. 원인은 $('#image-input, #model-select').click() 이벤트 핸들러에서 $('#model-select').change() 이벤트 핸들러를 바인딩했기 때문이였다. 이로 인해 모델 선택 이벤트가 발생할 때마다 두 개의 이벤트 핸들러가 모두 실행되는 것이다. 해결책으로는 .. Front/javascript 2023. 5. 26.

• 값이 없을 때 값을 변경 (Null 병합 할당 연산자) 기존 코드 test = {min: 30} if (test.min === null || test.min === underfined) { test.min = 40; }; if (test.max === null || test.min === underfined) { test.max = 100; }; test; ▶{min: 30, max: 100} Null 병합 할당 연산자 사용 (??=) test = {min:30}; test.min ??= 40; test.max ??= 100; test; ▶{min: 30, max: 100} Front/javascript 2023. 5. 17.