Javascript
[TS] 기본 문법 타입 정리
TypeScript 문법을 정리하려고 합니다! TypeScript란? 자바스크립트에 타입을 부여한 언어 자바스크립트의 단점을 보완해 만든 언어 정적타입언어 TypeScript 기본 타입 일반 변수, 매개변수, 객체 속성 등에 :TYPE과 같은 형태로 타입을 지정할 수 있습니다. 1. Number //js let num = 1; //ts let num:number = 1; num = 2; num = '2'; //error 2. String let car:string = 'bmw'; 3. Boolean let isDone:boolean = false; 4. Array //일반적인 배열 let numList:number[] = [1,2,3]; let numList:Array = [1,2,3]; let stri..
[JS] 진수 변환하기(10진수 -> n진수, n진수 -> 10진수)
오늘은 진수 변환에 대해서 정리하려고 합니다 코딩테스트를 보다보면 진수 변환하는 문제가 나오는데 그때 유용하게 사용할 수 있습니다. 10진수 -> N진수로 변환 let num = 10; //2진수 num.toString(2); //8진수 num.toString(8); //16진수 num.toString(16); //3진수 num.toString(3); toString( ) 문자열을 반환하는 object의 대표적인 방법 선택적으로 기수(radix)를 매개변수로 취함 *기수는 최소 2 ~ 36까지 기수를 이용하여 10진수를 다른 진수로 변환할 수 있음 N진수 -> 10 진수로 변환 //2진수 -> 10진수 let num = "10"; parseInt(num,2); // 8진수 -> 10진수 parseInt(..
[JS] classList 메소드
element.classList.add(String) 클래스 값 추가 추가하려는 클래스가 이미 존재한다면 무시 테스트 const el = documnet.querySelector('div'); el.classList.add('orange'); 테스트 element.classList.remove(String) 클래스 값 제거 존재하지 않는 클래스를 제거하더라도 에러 발생 안함 테스트 const el = documnet.querySelector('div'); el.classList.remove('orange'); 테스트 element.classList.toggle(String) 클래스 값 토글 클래스가 존재하면 제거하고 false 반환 클래스가 존재하지 않으면 추가하고 true반환 두번째 인수가 있을 때 -..
[Node.js] 정적 파일 경로 설정
그림판 업그레이드를 위해 작업을 하던중 백엔드 쪽을 node를 사용해 개발을 하고 있는데 url이 변경 되었을때 html 파일에 연결 해놨던 css,js 파일을 찾지못해 에러가 났습니다. app.use(express.static('public')); 위의 코드로 해결할수 있다고 되어있지만 이상하게 저는 계속 에러메세지가 나오더라구요. 왜안되지 하며 구글링만 20분 정도 한것 같네요..! 정답은.. 공식문서에 있었습니다. 공식문서 맨 밑에를 보면 그러나 express.static 함수에 제공되는 경로는 node 프로세스가 실행되는 디렉토리에 대해 상대적입니다. Express 앱을 다른 디렉토리에서 실행하는 경우에는 다음과 같이 제공하기 원하는 디렉토리의 절대 경로를 사용하는 것이 더 안전합니다. 라고 친절..
랜덤 색상 만들기
요즘 nodeJs를 배우면서 그림판을 업그레이드 하고싶은 욕구가 뿜뿜 하고있어서 리팩토링을 하고있는데 그전부터 오류가 있던 랜덤 색상을 고쳐보려고합니다. 이전 랜덤 색상 코드는 다음과 같았는데 brushColor = '#' + Math.round(Math.random() * 0xffffff).toString(16) 헥사코드로 바뀌면서 자릿수가 모자라 검은색 색상과, 경고메세지가 콘솔에 찍히곤 했었습니다. 저만 그런건가 싶긴 하지만 대부분의 블로그가 위와 같이 설명을 해주고있기에 저는 다른 방법으로 해결한것을 정리하려 합니다. * 랜덤 색상을 계속 누르게되면 위와같이 6자리가 아닌 헥사코드가 나오곤 했습니다. 그래서 처음엔 맨뒤에 0을 추가해줄까 했지만 근본적인 해결이 아닌것같아 다른 방법으로 해결해 줬습..
html class 추가, 삭제하기
가끔 class를 추가해줬다가 사라지게하는 기능을 어렵게 구현하곤 하였는데 간단하게 처리할 수 있어서 잊어버리지 않기위해 작성 하려고합니다! const test = document.querySelector(.hear h1); //그전 방법 function changeClass(){ const clickedClass = 'active'; if(test.classList.contains(clickedClass)){ test.classList.remove(clickedClass) }else{ test.classList.add(clickedClass) } } //유용한 방법 function toggleClass(){ test.classList.toggle(clickedClass) } document.classL..
제곱, 세제곱 관련 자바스크립트 내장 함수
자바 스크립트 내장 함수에는 너무 좋은 것이 많이 있는 것 같습니다. 이번에는 제곱, 세제곱 관련한 내장 메서드를 정리해 보려고 합니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math Math - JavaScript | MDN Math is a built-in object that has properties and methods for mathematical constants and functions. It's not a function object. developer.mozilla.org Math.cbrt(x) : 숫자의 세제곱근 반환 Math.sqrt(x) : 숫자의 제곱근 반환 Math.pow..
소수점 처리 방법에 따른 내장 함수
그 전 글에서는 Number() 함수와 parseInt() 함수를 정리했었는데 숫자임에도 정수를 얻고 싶을 때 parseInt() 함수를 사용하게 된다고 했지만 용도에 맞는 사용을 하고 싶어서 정수를 얻는 방법에 대해서 정리하려고 합니다. 자바 스크립트에는 내장되어 있는 아주 유용한 함수들이 많이 있습니다. 그중 숫자를 컨트롤할 때 사용하는 Math 함수 중에서 소수점을 처리할 때 사용하는 함수들을 정리해 보려고 합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math Math - JavaScript | MDN **Math**는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 함수 객체..