J.BF Story

JSON.stringify 함수를 사용하여 Json 데이터를 예쁘게 출력할 수 있다. const jsonData = { "test_int": 12, "test_float": 1.23, "test_str": "asdf", "test_array": [1, 2, 3, 4], "test_object": { "sub_test": 123, "sub_test2": "qwer", }, }; console.log(JSON.stringify(jsonData)); // not pretty print console.log(JSON.stringify(jsonData, null, 2)); // pretty print (space:2)

다음과 같이 각 탭과 박스를 'id'를 통해 연결시켜준 후, 탭의 'selected' 클래스와 박스의 'hide' 클래스을 이용해 스타일을 나타내준다. 선택한 탭만 'selected' 클래스를 가지도록 하고, 선택한 탭과 관련된 박스를 제외하고는 'hide' 클래스를 가지도록 한다. tab1 tab2 tab3 test box 11111 ... test box 22222 ... test box 33333 ...

onclick vs addEventListener("click") onclick addEventListener("click") 공통점 - 이벤트 수신 - 콜백 함수 실행 가능 차이점 - 요소의 속성임 - 속성값은 덮어쓰기가 되므로 둘 이상의 이벤트를 동시에 핸들링 할 수 없음 - 요소에 이벤트 헨들러 추가 - "on" 접두사 없이 사용 - 요소에 이벤트 헨들러를 덮어쓰지 않고 제한 없이 추가 가능 사용법 - html: - js: testBtn.onclick = testFunc1; js: testBtn.addEventListener("click", testFunc1); 예시 onclick CLICK ME!! addEventListener("click") CLICK ME!! 참고 https://www.gee..

X축, Y축 스크롤에 대하여 처음과 끝을 탐지하는 코드는 다음과 같다. // // X축 scroll function isScrollXStart(ele) { return (ele.scrollLeft = ele.scrollWidth) } // // Y축 scroll function isScrollYStart(ele) { return (ele.scrollTop = ele.scrollHeight) } ** ceil: Window환경의 브라우저에서 특정 해상도에서 1미만의 차이로 탐지를 못하는 경우가 있었다. 이를 방지하기위해 값을 올림(ceil) 처리를 하였다.

프로젝트를 진행하다보니 다른 언어에서 쓰던 값 체크 함수를 Javascript에서도 편하게 쓰고 싶다는 생각이들어 다른 언어 함수의 컨샙을 가져와 Javascript 버전으로 함수를 만들었다. 변수 설정 여부 체크 isset(targetVar) return: bool PHP의 isset 함수 참고 변수 설정 체크 + null과 다른 값인지 체크 /* targetVar=1; TRUE targetVar=""; FALSE targetVar="0"; TRUE targetVar=0; TRUE targetVar=NULL; FALSE targetVar="null"; FALSE targetVar; FALSE targetVar=[];TRUE targetVar=[1];TRUE */ function isset(targetV..

LocalStorage 브라우저에서 데이터를 저장할 수 있도록 해줌 '개발자도구 > Application > Local Storage' 에서 데이터 확인 가능 'clear all' 버튼을 통해 데이터 지울 수 있음 로컬 컴퓨터의 동일한 브라우저 한에서 로컬 스토리지를 공유함 (새 탭/창을 띄워도 로컬 스토리지 공유) 창을 종류해도 데이터가 사라지지 않음 세션이 끝나도 데이터가 사라지지 않음 (세션 데이터는 세션 스토리지에 저장) 문자형 데이터만 저장하기 때문에 로컬 스토리지 데이터를 사용할 경우 디코딩이 필요함

Factory Pattern (팩토리 패턴) Constructor Function (생성자 함수) Class (클래스) Javascript에서 Object를 만들 때 이용하는 방법들이다 Javascript에서 Class는 ES6 이후에 생긴 개념이므로 그 전에는 Factory Pattern과 Constructor Function을 사용했었다. 대부분 동일한 기능을 가지고있으나 각기 다른 특징을 가지고 있다. Factory Pattern (팩토리 패턴) function User(id, pw, position) { return { id: id, pw: pw, position: position, isAdmin() { return (this.position == "admin" || this.position ==..

Random Math.random() 0이상 1미만의 부동소숫점 의사 난수 반환 암호학적으로 안전한 난수를 제공하지 않아 보안에 관련된 것에 사용 불가능 의사 난수 난수는 아니나 난수로 취급이 가능한 수열 컴퓨터에서는 특수한 하드웨어 없이 완전한 난수를 생성할 수 없기 떄문에 의사 난수 사용 어림을 조합해서 원하는 값 사이의 랜덤 값을 구할수 있음 // 0

포멧 문자열 `string ${var}` const name = "JBF"; "Hello " + name; // Hello JBF `Hello ${name}`; // Hello JBF ` (backtick)으로 묶어 줄 것 변수는 ${}로 묶어줄 것 문자열 앞에 다른 문자열 채우기 str.padStart(targetLength [, padString]) "1".padStart(2, "0") // "01" "test".padStart(6, "12345") // "12test" "test".padStart(8) // " test" "test".padStart(2) // "test" 주어진 길이를 만족하는 문자열 반환 숫자 앞에 0 채워넣을 때 많이 사용 문자열 뒤에 다른 문자열 채우기 str.padEnd(t..

event.PreventDefault() HTML JS const loginForm = document.querySelector("#login-form"); function onLoginSubmit(event) { event.preventDefault(); console.log(event); } loginForm.addEventListener("submit", onLoginSubmit); Result preventDefault: 이벤트에 대해 브라우저가 기본적으로 수행하는 작업 취소 ex1) submit (submitEvent): form을 submit하면 브라우저는 기본적으로 페이지를 새로고침하지만, preventDefault를 추가하면 새로고침하지 않음 ex2) link (mouseEvent): 링크..