링크드인에서 어떤 외국인 개발자가 올린 자바스크립트 코드스니펫 20가지를 가져와봤다. 자주쓴다니까 마냥 가져다 쓰기에는 고려해야할 사항이 몇가지 있는것 같아서 자바스크립트 공부도 할겸 짧은 코멘트와 함께 포스팅 해보려 한다. 1. 현재 시간값 구하기 const now = new Date(); 2. 배열인지 체크하기 Array.isArray(data); // true , false 3. 배열 합치기 const arr1 = [1,2]; const arr2 = [3,4]; const newArray = arr1.concat(arr2); // [1,2,3,4] 4. 배열에서 중복값 제거하기 const array = [1,1,2,3,3,3,4]; const uniqueArray = [...new Set(arra..
Scope란? (유효범위) 변수의 접근성과 생존 기간을 제어한다. 맛보기 코드 예제 let func1 = function(){ var a = 1; var b = 2; console.log(a + b); return a + b }; let a = 20; // a가 1로 적용될까 20으로 적용될까? ------------------------------------------------------ func1(); // 3 -> a = 1 로 적용되었다. // 함수 밖에서 a가 선언되어도 함수 안에서 다시 a = 1로 할당됨 스코프는 이름이 충돌하는 문제를 덜어주고, 자동으로 메모리를 관리한다. 🟢 자바스크립트의 유효 범위(scope) 전역 스코프 함수 스코프 블록 스코프(es6) 🔴 전역 스코프 스크립트 어디..
호이스팅에 대해 알아보자 console.log(score); // undefined var score; // 변수 선언문 위 코드블럭을 보면 선언하기 전에 변수를 console.log에 담았으니 ReferenceError(참조에러) 가 발생할 것처럼 보인다. 하지만 에러 없이 "undefined"가 출력된다. 그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임(runtime)이 아니라 그 이전 단계에서 먼저 실행되기 때문이다. 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기 앞서(runtime 이전) 먼저 소스코드의 평가과정을 거치면서 소스코드를 실행하기 위한 준비를 한다. 이때 소스코드 실행을 위한 준비 단계인 소스코드의 평가 과정에서 자바스크립트 엔진은 변수 선..
프로젝트를 하면서 상단에 네비게이션바 를 만들어야 할 수요가 생겼다. 그래서 실제 다른 웹페이지들처럼 누르면 누른 버튼 상태가 바뀌고 또 그 상태에서 다른 버튼을 누르면 이전에 눌려있던 버튼의 생김새는 원상태로 돌아오는 기능을 구현하고 싶었다. 가장 먼저 눌린 버튼의 상태를 변화시키기 위해 useState를 활용하고 onClick을 넣었다. click한 버튼을 찾고 새로운 상태를 적용시키기 위해 id 값을 버튼마다 부여하였고(case1, case2, case3) javascript 함수인 getElementById 를 써서 id 값으로 눌린 버튼을 찾고 스타일을 바로 적용해주었다. const Navigator = () => { const [currentClick, setCurrentClick] = Rea..
눈누 라는 굉장히 이쁜 무료 폰트가 많은 사이트를 찾았다. 리액트로 외부 폰트 적용하는 법은 처음이라 구글링을 통해 알아냈고 하고 나면 정말 쉬운데 딱 입맛에 맞는 정보를 주는 블로그가 없는 것 같아 직접 포스팅하려 한다. 우선 아래 사진은 눈누 페이지에 들어가면 바로 보이는 폰트들이다. 대충 봐도 무료가 맞나 싶은 퀄리티다. 여하튼 이중에 맘에 드는 폰트를 하나 골라서 클릭하고 상세페이지로 이동하면 아래의 화면이 보일 것이다. @font-face { font-family: 'twaysky'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_tway@1.0/twaysky.woff') format('woff'); font-weight: norm..
