본문 바로가기

JS14

[JS] Javascript 에서 숫자관련 처리 정리 보통 백엔드 단에서 비지니스 로직을 처리해주면 좋겠지만, 모든 것이 완벽하진 않아 간혹가다가 프론트 단에서 비지니스 로직을 처리해야할 때도 있다. 예전에 모니터링 시스템을 구축하는 업무를 맡은 적 있는데, 대시보드에 표현될 다양한 수치와 통계를 프론트 단에서 계산해서 뿌려주는 것을 보았다. 이런 경우가 비일비재하기 때문에 오늘은 javascript로 숫자 내용을 처리하는 것을 정리하고자 한다. 올림, 내림, 반올림 javascript에서는 Math 를 이용해 다양한 처리를 할 수 있다. 올림은 ceil, 내림은 floor, 반올림은 round 메서드를 이용하여 처리한다. let num1 = 1.3; let num2 = 1.8; console.log(Math.ceil(num1)); console.log(M.. 2022. 2. 13.
[JS] javascript 에서 객체 (object) 사용하기 - 객체 리터럴, 생성자 java나 c# 등 객체지향 언어를 공부해본 사람이라면 객체가 무엇인지 잘 알고 있을 것이다. javascript도 객체(Object)를 생성하여 사용할 수 있다. Object - 접근 , 추가, 삭제 아래 코드는 person이라는 Object를 생성하는 소스 코드이다. const person = { name : 'bboya', age : 10, gender : 'F', } { } 안에서 name, age, gender라는 key 에 각각 'bboya', 10, 'F' 라는 value가 들어가 있다. 마지막에 , 는 없어도 상관은 없지만, 보통 수정/삭제에 용이하게 하기위해 붙여주곤 한다. 이를 객체 리터럴 이라한다. 객체에 접근, 추가, 삭제하는 방법은 아래와 같다. Object 속성에 접근 객체 속성.. 2022. 1. 23.
[JS] javascript의 함수 선언문과 함수 표현식 오늘은 간단하게 js 에서 함수를 사용하는 두가지 방법에 대해 정리해두려고한다. 함수 선언문 어디서든 호출이 가능함, javascript 내부 알고리즘에 의해서 javascript 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해둠. sayHello(); function sayHello() { console.log('Hello!'); } 그렇기에 위 코드처럼 함수선언문보다 함수호출이 먼저나와도 정상적으로 실행되는 것임. (물론 함수선언문보다 코드가 아래에 나와도 동작한다.) 즉, 함수의 사용 가능 범위가 코드의 위치보다 위아래로 넓은데 이를 '호이스팅(hoisting)' 이라고 한다. 함수 표현식 코드를 한줄 한줄 읽으면서 코드에 도달할때 비로소 함수가 생성이 되고, 그 이후에 사용이 가.. 2022. 1. 22.
[JS] 명시적 형변환에 대하여 최근에 이직을 하면서 업무가 변경되어, 단순한 백엔드 쪽 API 개발뿐만아니라 프론트 쪽의 소스도 일부 수정하게 됐다. 특히 javascript 쪽을 건들일이 많을 것 같아서, 오래전의 기억을 살려서 하나씩 정리해보려고한다. 명시적 형변환 오늘 간단하게 정리해둘 내용은 명시적 형변환에 대한 내용이다. 얼마전에 후배한명이 자기가 구현한 소스가 뭐가 문제인지를 봐달라는 연락이 왔다. 아래 내용은 후배가 보낸 코드를 간단하게 만들어서 작성한 내용이다. const aHeight = prompt("a의 키?"); const bHeight = prompt("b의 키?"); const result = (aHeight + bHeight) / 2; alert(result); 코드는 아주 간단하다 . a의 키를 입력 받고.. 2022. 1. 22.
[JS] 자바스크립트의 비동기 처리 패턴 - 콜백(callback), 프로미스(promise) 자바스크립트에서 비동기 처리를 하는 것은 특정 코드의 로직이 끝날때까지 코드의 실행을 멈추지 않고 다음 코드를 바로 실행하는 것을 의미한다. 보통 응답과 요청 구조로 되어있는 통신에서 비동기처리를 많이하는데, 자바스크립트에서는 이러한 비동기 처리를 위해 아래 네가지 패턴을 사용했다. 1. callback 먼저 비동기 처리의 대표적인 예시는 여러분들도 다들 아시는 ajax를 이용한 코드이다. ajax 통신은 예~~전에 웹프로젝트를 할때 이미지나 데이터를 서버에서 가져와서 화면에 뿌려줄때 사용했던 통신 방식이다. 아래 예제를 먼저 보자. function getUserInfo() { var userInfo; $.get('https://localhost:8443/users/testId1', function(re.. 2021. 3. 17.