본문 바로가기
728x90

Frontend52

[JavaScript] splice()와 slice() 메서드 정리 이번 글에서는 자바스크립트에서 배열을 변경할 수 있는 메서드들인 splice()와 slice()에 대해서 알려드리겠습니다. 우선, splice() 메서드는 배열에 요소를 추가, 교체, 또는 기존의 요소를 삭제할 수 있게 합니다. 메서드의 구문은 다음과 같습니다. exArr.splice(startIndex) exArr.splice(startIndex, deleteCount) exArr.splice(startIndex, deleteCount, item0, item1, ..., itemN) ▶ startIndex (필수) 첫 번째 매개변수는 배열의 변경이 시작되는 위치를 지정합니다. 다른 선택적인 매개변수와는 달리 필수이기 때문에, 만약 생략된다면 배열은 그대로 유지됩니다. - startIndex >= exA.. 2023. 8. 17.
[JavaScript] 난수 생성하기 - Math.random() Math.random() 메서드는 0 이상 1미만의 부동소수점의 난수를 생성합니다. 난수 생성에 사용되는 시드 값은 난수 생성 알고리즘에 의해 결정되기 때문에, 특정 값으로 지정하거나 변경이 불가능합니다. ※ 주의 : Math.random() 메서드는 보안 상 안전한 난수를 제공하지는 않습니다. 보안/암호와 관련되어서는 사용하지 않는 것이 권장됩니다. Math.random() 메서드의 사용 방법 자체는 간단합니다. Math.random() // 0.5834082844933923 Math.random() // 0.4934202120749698 메서드를 활용하면 다양한 유형의 랜덤 숫자를 구할 수 있습니다. 1) 두 값 사이의 랜덤 숫자 추출 아래 예시의 코드는 min 이상 max 미만의 구간에서 랜덤한 숫.. 2023. 8. 9.
[JavaScript] 프로미스(Promise) 자바스크립트에서 프로미스(Promise)란, 비동기식으로 처리되는 코드의 결과를 담게 되는 객체입니다. 실행되는 코드의 결과 값에 따라서 어떠한 동작을 실행할지 정할 수 있기 때문에 코드 로직을 더 섬세하게 작성하는 것이 가능해집니다. 보통 네트워크 통신이나 파일을 읽을 때 사용되는데, 데이터를 읽지 못한 상황에서도 데이터를 표시하려고 하면 발생하는 오류를 프로미스를 통해 예방할 수 있기 때문입니다. 프로미스는 세 가지 상태를 가질 수 있습니다. 1) 대기(Pending) : 프로미스가 선언되면 가지게 되는 초기 값으로, 비동기 처리 연산이 완료되기까지 대기하고 있는 상태입니다. 2) 이행(Fulfilled) : 비동기 처리 연산이 성공적으로 완료된 상태입니다. 3) 거절(Rejected) : 비동기 처.. 2023. 8. 8.
[JavaScript] 템플릿 리터럴(Template Literal) 템플릿 리터럴(Template Literal)은 내장된 표현식을 허용하는 문자열 리터럴입니다. ES6부터 새로 도입되었으며, 따옴표가 아닌 백틱(`)을 사용합니다. 이번 글에서는 템플릿 리터럴의 특징과 기능에 대해서 설명하겠습니다. ① 여러 줄 문자열 일반 문자열과 직관적으로 다르게 느껴지는 특징 중 하나는 여러 줄인 문자열을 작성할 때의 편리함입니다. 일반적인 문자열에서 여러 줄인 문자열을 작성한다면, 백슬래쉬를 통해 줄 바꿈을 뜻하는 \n을 사용해야 합니다. console.log("Line number 1\n" + "Line number 2"); // Without template literal 하지만 템플릿 리터럴을 사용한다면, 작성된 코드에서의 줄바꿈이 그대로 결과로 표시됩니다. 앞서 나온 코드는.. 2023. 8. 7.
[HTML, CSS] CSS 방법론 - BEM 방식 웹페이지를 개발할 때, 일관성 있고 구조화된 네이밍 방식은 다른 사람들과의 협업이나 유지 보수를 용이하게 만듭니다. 이번 글에서는 대표적으로 사용되는 네이밍 방식 중 하나인 BEM 방식에 대해서 소개하겠습니다.  블럭, 엘리먼트, 모디파이어(Block, Element, Modifier)의 축약어인 BEM은 세 가지 부분을 각각 더블 언더바(__)와 더블 하이픈(--)으로 구분합니다. 사용 예시는 다음과 같습니다..block__element--modifier { ...}  * BEM 방식은 아이디보다는 클래스의 명칭을 사용합니다.** 만약 여러 단어를 사용해야 될 때는 싱글 하이픈(-)으로 연결합니다.  ① 블럭 블럭은 독립적으로 기능할 수 있어서 분리가 가능한 부분을 의미합니다. 보통 웹페이지 안.. 2023. 8. 6.
[HTML, CSS] 그리드와 플렉스에서의 정렬 (justify & align) 이번 글에서는 블로그 내에서 간단하게 언급된 적이 있는 그리드/플렉스에서의 정렬과 관련된 속성을 정리하겠습니다. 가장 먼저 확인해야 할 것은 메인 축이 설정되어 있는 방향입니다. 메인 축(ex: flex-direction) 속성은 가로축(row)가 디폴트 값이지만 세로축(column)으로도 설정할 수 있습니다.  메인 축이 설정되면 ① 메인 축과 평행한 방향에서의 정렬과 ② 메인축과 수직인 방향에서의 정렬로 나뉘어집니다. 전자는 justify-_______ 속성에 해당하고, 후자는 align-_______ 속성에 해당하게 됩니다. (빈칸에는 content, items, self가 들어갈 수 있습니다.)* 플렉스 구조에서는 justify-items와 justify-self는 작동하지 않습니다. 1) jus.. 2023. 7. 24.
반응형