초보 개발자의 성장 일기

위치 허용을 하게 되면 내 위치의 위도와 경도를 불러오는 자바스크립트 내장 함수가 존재한다. navigator.geolocation.getCurrentPosition() 2개의 콜백함수를 인자를 받는데 첫번째는 위치를 성공적으로 불러왔을 때, 두번째는 실패했을 때 실행시킬 각각의 함수를 불러온다. function onGeoOk(position) { const lat = position.coords.latitude; const lng = position.coords.longitude; console.log('You live in', lat, lng); } function onGeoError() { alert("can't find you"); } 위치를 불러왔을 때 위도, 경도를 상수로 저장하고, 실패했을 ..

시계를 만드는 도중 10초 미만의 한자리 숫자일때는 1, 2, 3 ... 이렇게 나오는데, 모두 두자리로 01, 02, 03으로 맞추고 싶었다. 처음 생각해낸 방법은 if문을 이용해서 길이가 2미만일 경우 앞에 0을 붙이도록 하려고 했으나, 원하는 길이를 지정하고 그 길이에 부족한만큼 채울수 있는 메소드가 있지 않을까 해서 찾아봤다. padStart를 사용하면 긴 if문을 사용하지 않아도 된다. '2'.padStart(2, '0'); // '02' 2라는 문자에 padStart를 사용해서 길이를 2로 만들고 길이가 부족한 만큼 앞에서부터 0문자를 채우는 것이다. 반대로 padEnd를 사용하면 뒤에서부터 부족한 만큼 채워준다. 주의할 점은 문자만 가능하다는 점이다. 숫자를 사용할 경우 문자로 변환해서 사용..

input 태그를 만들 때 입력이 안되어있을 때, 즉 빈칸일 때는 if문을 사용해서 체크했다. if (username === '') 하지만 이렇게 하지 않아도 한 단어를 html에 적용하면 간단하게 유효성 체크가 가능하다. 바로 input 태그 안의 속성으로 required를 넣는 것이다. 또한 글자수 길이에 제한을 둘 때 length를 이용해서 유효성 검사를 했지만, if (username.length > 15) 이것 또한 html에서 maxlength를 사용하여 확인이 가능하다. 대신 input의 유효성 검사를 작동시키기 위해서는 input이 form안에 있어야 한다. input안 button을 누르거나 type이 submit인 input을 클릭하면 form이 자동적으로 submit이 되고, 새로고침..

리액트만 사용하다가 순수 자바스크립트가 기억이 잘 안나 공부하는 도중, class를 이용하여 추가하고 교체하는 방법이 헷갈려서 다시 공부를 시작했다. 기초를 중요하게 생각해서 deep dive책을 다시 읽고 있고, 노마드 코더의 바닐라 자바스크립트 강의를 참고했다. // HTML Click Button // JS h1.className = "clicked"; 자바스크립트를 사용하여 직접적으로 CSS를 바꾸지 않고, 클래스명만 변경하여 클래스명에 따른 CSS를 적용하려고 하는데 className을 사용하면 기존에 존재하던 클래스명이 사라지고 새로운 클래스명으로 교체 된다. 기존에 있던 클래스명을 살리고, 자바스크립트로 이벤트 활성시 새로운 클래스명을 추가하는 방법은 무엇일까? classList를 사용하는 ..

바닐라 자바스크립트를 복습하면서 투두리스트를 구현중이다. 할일을 input value로 불러와서 추가를 해야하는데, 새로운 tag요소를 만들어 부모의 태그에 자식태그로 넣으려고 하는 중 append, appendChild 두개의 차이가 궁금해졌다. append, appendChild의 공통점 두 메소드는 부모 노드에서 자식 노드를 추가하는 것이다. append 노드 객체를 사용할 수 있다. text를 사용할 수 있다. 한번에 여러 자식들을 추가할 수 있다. return 값을 반환하지 않는다. const parent = document.getElementsByTagName("body")[0]; const child1 = document.createElement("p"); const child2 = docu..

비 구조화 할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담는것이다. 배열의 비 구조화 할당 const fruitList = ['apple', 'banana', 'orange']; 배열이 있을때 이 배열을 각각 호출하려고 한다. const apple = fruitList[0]; const banana = fruitList[1]; const orange = fruitList[2]; 먼저 각각의 변수에 배열의 인덱스를 넣어서 호출했다. 하지만 이 방법은 같은 배열을 불필요하게 반복하게 된다. let [apple, banana, orange] = fruitList; 배열안에 변수를 선언하고 배열을 할당하게 되면 각각 인덱스에 맞게 데이터가 할당이 된다. let [apple, banana, oran..

디스트럭처링 디스트럭처링(Destructuring)은 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다. 디스트럭처링 구문은 함수 매개변수 목록에서도 사용할 수 있다. 함수가 객체를 포함하는 매개변수를 수락하는 경우, 객체 프로퍼티를 “꺼내어’” 로컬 범위 변수(즉, 함수 본문 내에서만 사용할 수 있는 변수)로 사용할 수 있도록 함수를 디스트럭처링할 수 있다. function storeOrder(order) { localStorage.setItem('id', order.id); localStorage.setItem('currency', order.currency..

매개변수 목록 괄호 생략하기 화살표 함수가정확히 하나의 매개변수만 사용하는 경우, 묶는 괄호를 생략할 수 있다. userName => { ... } 함수에 매개변수가 없는 경우에는, 괄호를 생략해서는 안된다. (userName, userAge) => { ... } 함수 본문 중괄호 생략하기 화살표 함수에 반환문 외에 다른 로직이 없는 경우, return키워드와 중괄호를 생략할 수 있다. number => number * 3; 특수한 경우: 객체만 반환하는 경우 자바스크립트는 중괄호를 JS 객체를 생성하는 코드가 아닌 함수 본문 래퍼로 취급한다. number => ({ age: number }); 객체와 중괄호를 추가 괄호로 감싸면, 자바스크립트는 중괄호가 함수 본문을 정의하는 것이 아니라 객체를 생성하..