JavaScript
[JS] 알면 유용한 자바스크립트 최신 문법
[JS] 알면 유용한 자바스크립트 최신 문법
2024.04.25Numeric Separators숫자를 입력할 때 언더스코어 _를 이용해 숫자를 구분해서 가독성을 높일 수 있다. KRW 화폐처럼 자리수가 많은 숫자를 작성할 때 유용const cost = 100_000_000;console.log(cost); // 100000000 _ 언더바 한개만 사용 가능 ex) 100__000 ❌숫자 마지막엔 사용 불가 ex) 100_; ❌가장 앞 숫자가 0일땐 사용 불가 ex) 0_1; ❌ replaceAllreplaceAll(substr, newSubstr)replaceAll(substr, replacerFunction) 문자열에서 원하는 부분을 "모두" 지정한 문자로 변경할 수 있다. 정규식도 사용 가능.const sayHello = 'Hello, John';sayHello..
[JS] 자바스크립트 옵셔널 체이닝
[JS] 자바스크립트 옵셔널 체이닝
2024.04.25옵셔널 체이닝 등장 배경비교적 새로 추가된 자바스크립트 문법으로 프로퍼티가 없는 중첩 객체를 에러없이 접근할 때 사용한다. 유저 정보를 담아두는 user 객체에 아무런 정보가 없는 상태에서 address 속성에 접근하려고 하면 아래처럼 타입 에러가 발생한다.const user = {};console.log(user.address.street);// TypeError: Cannot read property 'street' of undefined React나 Vue의 상태관리 라이브러리를 쓸 때 아직 스토어에 있는 정보를 다 불러오지 않은 시점에서 객체의 속성에 접근할 때도 비슷한 타입에러가 발생한다.// selectedMall은 스토어에서 불러올 정보// 아직 스토어에서 selectedMall 정보를 조회..
[JS] console.log 콘솔 로그 더 잘 사용하기
[JS] console.log 콘솔 로그 더 잘 사용하기
2024.04.25console.log는 브라우저에서 제공하는 console API중 하나. console 객체에는 log 외에도 다양한 메소드들이 존재한다. log 레벨 종류정말 필요한 정보가 아니면 log와 info는 제품 배포 단계에선 출력되지 않도록 한다. 배포할 때 log나 info는 출력하지 않도록 하거나 네트워크 요청이 발생하지 않도록 하는 등의 설정을 할 수 있기 때문에 중요도 레벨에 맞는 console 메소드를 사용하는 것이 중요하다. console.logconst dog = { type: "🐶", name: "츄츄", owner: { name: "John" } };console.log("logging", dog); 가장 자주 사용하는 console 메소드로 개발 도중 필요한 데이터를 출력하고 싶을 때 ..
[JS] 자바스크립트 배열 중복 요소 제거 방법 모음
[JS] 자바스크립트 배열 중복 요소 제거 방법 모음
2024.04.25방법 1 — Set 이용 ⭐️Set을 이용해 중복 요소를 제거하는 방식의 성능이 가장 좋다 Set은 유니크한 값만 저장할 수 있기 때문에 new Set() 인자에 들어온 배열의 중복 요소는 자동으로 제거된다. Array.from은 ➊유사 배열 객체나 ➋반복 가능한 객체를 얕게 복사해 새로운 배열을 반환한다. 전개문법을 사용해도 결과는 동일.const arr = ["A", "B", "A", "D", "B", "F"];const deDuplicated = [...new Set(arr)];// const deDuplicated = Array.from(new Set(arr))console.log(deDuplicated); // [ 'A', 'B', 'D', 'F' ] Set, Map 관련 더 자세한 내용은 Ma..
[JS] 자바스크립트 경과 시간 표시 / UTC / ISO 8601
[JS] 자바스크립트 경과 시간 표시 / UTC / ISO 8601
2024.04.25Date 객체 톺아보기유닉스 타임스탬프자바스크립트에서 Date 객체는 유닉스 타임스탬프를 사용한다. SNS을 보면 “1분 전 게시", “방금 전 게시" 같은 경과일로 포스팅 날짜를 표시하는 것을 자주볼 수 있다. 경과일은 Date 객체의 getTime() 메서드를 이용해 변환한 밀리초와 현재 시간의 밀리초 차이를 계산하는 방법으로 구현할 수 있다. getTime() 메서드는 1970년 1월 1일 0시 0 분 0초(UTC)부터 현재까지의 시간을 밀리초 단위로 환산한 값을 반환한다. 이를 유닉스 시간(유닉스 타임스탬프)으로 부른다. 1000밀리초(millisecond)는 1초(second)다.const date = new Date();console.log(date); // Tue Jun 15 2021 15:..
[JS] 자바스크립트 랜덤 숫자, 데이터 생성 예시
[JS] 자바스크립트 랜덤 숫자, 데이터 생성 예시
2024.04.25랜덤 게시글(혹은 댓글)을 구현한다고 가정, 기본적으로 여러개의 유저 이름, 메시지 텍스트가 필요하다. 유저 이름이나 랜덤 텍스트는 영문 Lorem처럼 자동 생성해주는 사이트를 활용하면 된다. 10개 정도 더미 데이터를 생성한 후 자바스크립트의 Math.random을 활용하면 유저별로 다른 메시지 텍스트를 생성할 수 있다. 필요한 데이터 리스트유저 이름 : 한글 랜덤 이름 생성기 이용const randomUser = ['예세희', '허선숙', '제갈지훈', '심성태', ...]메시지 텍스트 : 한글 Lorem 사이트인 간세네 혹은 한글입숨 이용const randomMessage = ['광야에서 무엇을 보내는...', '...', '...', ...]생성일 : new Date() 이용 랜덤 숫자 생성 함수..
[JS] 캔버스 Canvas 도형 확대 축소 후 원점 조정하기
[JS] 캔버스 Canvas 도형 확대 축소 후 원점 조정하기
2024.04.24도형 사이즈 조정 메서드ctx.scale(x, y) : 도형 크기 확대/축소. 캔버스에서 1 단위는 1픽셀. scale(2, 2)는 하나의 단위를 2픽셀로 확대(좌표 사이의 간격 증가) ctx.translate(x, y) : 캔버스의 원점 이동. 기본값은 왼쪽 좌상단 (0, 0) ctx.rotate(angle) : 도형을 라디안(angle) 단위 만큼 시계 방향으로 회전. 항상 캔버스 원점이 회전의 중심 ctx.transform(scaleX, skewX, skewY, scaleY, translateX, translateY)scale(), rotate(), translate() 일괄 적용하는 메서드이전 변형 결과 값에 이어서 수행초기 상태에서 transform(1.2, 0, 0, 1.2, -30, -30)..