개발자의 공부방/Frontend 33

JS] console.log JSON Depth 표기 하는 방법.

보통 로그를 작성할 때 JSON.stringify를 사용하면 아래와 같이 사용한다. // 콘솔 로그 작성 console.log('==> log : ', JSON.stringify(events)); 출력 결과물은 아래와 같이 정신없이 나온다... ==> events_2, [{"blockNumber":12326143,"blockHash":"0x31aed0d4af44d396f6b33c86e363278496bbdacb2c0ac7a73f77044778d880c5","transactionIndex":8,"removed":false,"address":"0x229B066b8b9D198802C82b6B68397E1Da138c6F0","data":"0x","topics":["0x342827c97908e5e2f71151c0..

node] npm 배포를 해보자.

1. npm 공식홈페이지에서 회원가입을 한다. https://www.npmjs.com npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java www.npmjs.com 2. npm 배포 명령어를 기억하자. npm publish : 내가 만든 패키지를 배포 npm unpublish --force : 내가..

JS] 자바스크립트 소수점 문제

백앤드에서 내려주는 데이터 중 BigDecimal 형태의 데이터를 클라이언트쪽으로 보내주고 있었다. 해당 부분을 간략한 데이터와 JS 콘솔로그로 확인해보겠다. Database : MySql 필드 : decimal(36,18) 컬럼명 : tp_point 컬럼값: 1000.123456789012345679 현재 tp_point 안에는 1000이라는 정수 뒤에 총 18자리의 소수점이 있다. 이 부분을 클라이언트에서 받게 되면 결과가 1000.1234567890124 으로 받게 된다. 처음 의아했던 것은 1234567890123 다음에 4인데 왜 반올림이 된 상태로 1234567890124.. 으로 진행될까? 였다 뒷단에서 올림처리나 자릿수 절삭 로직이 있을거라고 예상했으나 큰 착각이었다 바로 결과와 원인을 설..

javascript] getter setter

Getter와 Setter에 대해서 알아보자. 1. get 함수 const numbers = { a: 1, b: 2, get sum() { console.log('sum 함수 실행!') return this.a + this.b; } }; console.log(numbers.a) numbers.b = 5; console.log(numbers.sum) get 함수는 특정 함수를 조회하려고 할 때 특정 코드를 실행시키고 연산된 값을 받아서 사용할 수 있다. numbers() 이런 식으로 사용하지 않아도 된다. const dog = { _name: '멍멍이', set name(value) { //params를 무조건 설정해야한다. console.log('이름이 바뀐다' + value) this._name = v..

javascript] 코드와 함께

우아한형제들의 기술블로그에서 나온 내용을 조금이나마 참고해서 작성한다. 1. 확장하기 좋은 코드 before const colors = { gray1: '#22222', gray2: '#44444', gray3: '#55555', gray4: '#66666', gray5: '#77777', gray6: '#88888', gray7: '#99999', } 프론트엔드에서 이런 형태의 컬러값을 지정 혹은 지속적으로 넣어야하는 값을 설정할 때 보통은 순차적으로 지정해서 사용한다. 이때 gray1과 gray2 사이에 '#33333' 이라는 색상이 들어와야한다면? 어떻게 할 것인가? after const colors = { gray_100: '#22222', gray_200: '#44444', gray_300: '..

javascript] 함수 파라미터에서의 spread 연산자와 rest연산자.

함수에서 사용되는 스프레드 연산자와 rest연산자를 학습해본다. function sum(a, b, c, d, e, f, g) { return a + b + c + d + e + f + g; } console.log(sum(1,2,3,4,5,6)) 위의 코드는 예를 들어서 sum이라는 함수에 파라미터가 총 7개가 있는데 만약에 sum함수에 파라미터를 6개만 담는다면? 과연 콘솔 결과에는 어떻게 표시가 될까? NaN 이라고 뜬다. 이유는 하나가 undifiend기 때문이다. sum함수의 파라미터 갯수와 다른 갯수를 넣었을 때, NaN이라고 안뜨게 하려면 어떻게 해야할까? 많은 방법이 있겠지만 if를 사용해서 하나하나 처리하는 방법이 있을 것이다. function sum(a, b, c ,d , e, f ,g)..

javascript] spread와 rest 연산자

자바스크립트의 스프레드 연산자와 rest연산자를 알아본다. 이런 객체가 있다고 가정해본다. const slime = { name: '슬라임' } const cuteSlime = { name: '슬라임', attr: 'cute' } const pinkCuteSlime = { name : '슬라임', attr: 'cute', color: 'purple' } console.log(slime); console.log(cuteSlime); console.log(pinkCuteSlime); 각각 다른 슬라임이지만 공통적인 부분이 보인다. 이 부분을 ... Spread 연산자를 사용해서 중복되는 부분을 사용해본다. const slime = { name: '슬라임' } const cuteSlime = { ...slim..

javascript] 비구조화 할당

비구조화 할당에 대해서 알아보겠다. 비구조화할당에서 기본 값을 지정하는 방법. const object = { a: 1, b: 2} const {a, b} = object; console.log(a); console.log(b); console.log("==============================") function print({a, b}) { console.log(a) console.log(b) } print(object) 객체를 비구조화할당하는 방법이다. name을 꺼내와서 사용해도되지만 {name : nickname} 같이 nickname이라는 명칭으로 사용이 가능하다. const animal = { name : '멍멍이', type : '개' } //const nickname = anim..