ABC(Always Be Coding)

RESTful API를 학습하며 해당 프로토콜의 정의와 사용하는 이유에 대해서 작성 및 적용 방법 등에 대해서 작성 해 보았다. 소개 RESTful API(Representational State Transfer API)는 웹 서비스의 설계 및 통신을 위한 아키텍처 스타일 중 하나이다. REST는 웹 상의 자원을 표현하고 상태를 전송하기 위한 형식으로, 네트워크 아키텍처의 규칙 집합으로 이루어져 있다. 이 아키텍처 스타일은 간결하고 확장 가능한 API를 구축하는 데 매우 효과적이며, HTTP 프로토콜을 기반으로 동작한다. REST의 구성 요소 1. 자원 (Resource) REST는 자원을 기반으로 동작한다. 자원은 어플리케이션에서 관리하고자 하는 모든 엔터티를 나타낸다. 예를 들어, 블로그 서비스의 자..

JavaScript에서 반복문을 수행하는 데 사용되는 여러 가지 고차 함수들이 있다. 이러한 함수들은 배열에 대해 반복하거나 조작할 때 특히 유용한데 아래에는 주요한 고차 함수들과 간단한 설명이 포함되어 있다. 1. forEach 함수 배열의 각 요소에 대해 주어진 함수를 실행한다. const numbers = [1, 2, 3, 4, 5]; numbers.forEach((num) => console.log(num)); 2. map 함수 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 새로운 배열로 반환한다. const numbers = [1, 2, 3, 4, 5]; const squaredNumbers = numbers.map((num) => num * num); 3. filter 함수 주어진..

slice와 substring은 둘 다 JavaScript에서 문자열을 자르기 위한 메서드이지만, 두 메서드의 공통점도 있지만 차이점도 존재하여, 헷갈리지 않도록 정리해 보았다. 공통점 1. 문자열 자르기 slice와 substring은 둘 다 문자열을 특정 범위로 자르는데 사용된다. 2. 매개변수 두 메서드는 시작 인덱스와 종료 인덱스를 받아 범위를 지정한다. 3. 음수 인덱스 양수 또는 음수 모두를 사용하여 문자열의 뒤에서부터 인덱스를 지정할 수 있다. 차이점 1. 처리 방식 가장 큰 차이점 중 하나는 음수 인덱스를 다루는 방식이다. slice: 음수 인덱스는 문자열의 끝에서부터의 상대적인 위치를 나타낸다. substring: 음수 인덱스를 0으로 처리한다. 2.매개변수 처리 slice는 시작 인덱스..

JavaScript에서 void 연산자는 주어진 표현식을 평가한 후에 undefined를 반환하는 특수한 연산자이다. 이로써 함께 사용되는 코드는 JavaScript 엔진에서 실행 가능한 형태로 해석되는데 특히, 링크 클릭 시 페이지가 새로고침되지 않도록 하거나 클릭 이벤트의 기본 동작을 막는 데에 주로 활용되며, 이를 위해 void(0) 표현식이 주로 쓰이고 있다. void 연산자 void는 JavaScript의 연산자 중 하나로, 특정 표현식을 평가하고 undefined를 반환하며, 보통은 void(0) 형태로 사용된다. 1. 링크 클릭 시 페이지 새로고침 방지 Click me 위 예제에서 링크를 클릭하면 doSomething 함수가 호출되지만, href 속성에 javascript:void(0);를 ..

웹 개발에서 noreferrer, noopener, nofollow 등의 속성은 보안 및 검색 엔진 최적화 (SEO) 측면에서 중요한 역할을 한다. 이러한 속성을 사용하는 이유와 보안 이슈에 대처하는 방법, 그리고 SEO 관련된 고려 사항에 대해 알아보았다. 1. noreferrer rel="noreferrer"은 하이퍼링크를 통해 다른 웹 페이지로 이동할 때, Referer 헤더를 제거하는 역할을 한다. Referer 헤더는 사용자가 어떤 웹페이지에서 링크를 클릭했는지를 알려주는데, 이를 통해 사용자의 개인 정보가 노출될 수 있는 보안 문제를 방지하므로, 개인 정보 보호를 강화하기 위해 외부 링크에 대해 항상 noreferrer를 주로 사용한다. 외부 링크 2. noopener rel="noopener..

JavaScript에서 객체를 복사하는 방법은 크게 얕은 복사와 깊은 복사로 나뉜다. 얕은 복사는 객체의 프로퍼티를 복사하지만, 중첩된 객체는 참조로 복사된다. 깊은 복사는 객체와 그 하위의 모든 객체를 새로운 객체로 복사한다. 얕은 복사 (Shallow Copy) 1. Spread 문법 ({...}) const originalObject = { key1: 'value1', key2: 'value2' }; const shallowCopy = { ...originalObject }; console.log(shallowCopy); // { key1: 'value1', key2: 'value2' } 2. Object.assign() const originalObject = { key1: 'value1', ke..

자바스크립트에서 몫의 정수부분을 구하는 방법은 정말 다양하다. 그 중 Double Tilde(~~)에 대해서 처음 알게되었고, 지금까지 알게 된 방법들을 정리 해 보았다. ​ 1. Math.floor() 함수 사용하기 Math.floor() 함수는 주어진 숫자보다 작거나 같은 가장 큰 정수를 반환한다. 따라서 몫의 정수부분을 구하는 데에 사용할 수 있다. let a = 10; let b = 3; let quotient = Math.floor(a / b); // 3 2. Double Tilde(~~) 연산자 사용하기 Double Tilde(~~) 연산자를 사용해서 몫의 정수부분을 구할 수도 있다. let a = 10; let b = 3; let quotient = ~~(a / b); // 3 3. pars..

알고리즘 문제 풀이 중 원본 배열의 요소를 수정이나 삭제하기 위해서 자바스크립트 Built-in 메서드를 활용하던 중 유사 기능을 하는 splice와 slice를 알게 되었고, 뭔 차이(이름에 p가 있고 없고...)가 있길래 따로 구분되어 있는 건지 알아보았고, 자료의 파괴적 처리(Destructive)와 비파괴적 처리(Non-destructive)라는 내용을 학습하게 되어 정리 해 보았다. 파괴적 처리(Destructive)와 비파괴적 처리(Non-destructive) 자바스크립트는 자료 처리를 위해서 다양한 연산자, 함수, 메소드를 제공하는데 자료 처리 연산자, 함수, 메서드는 크게 파괴적 처리와 비파괴적 처리로 구분할 수 있다. 처리 후 원본 데이터의 상태 변화에 따라 아래와 같은 Depth로 정..

배열과 객체 구조 분해 할당 구조 분해 할당은 JavaScript의 표현식으로, 배열과 객체의 요소 및 프로퍼티를 분해하여 그 값을 개별 변수에 할당하는 기능이다. 이를 통해 배열과 객체 내부의 값을 간편하게 추출할 수 있다. 배열의 구조 분해 할당 기본 변수 할당 아래 코드는 각 변수에 해당 값을 할당하고 출력하는 간단한 일반적인 방법이다. let colors = ["red", "green", "blue"]; let color1 = colors[0]; let color2 = colors[1]; let color3 = colors[2]; console.log(color1); // "red" console.log(color2); // "green" console.log(color3); // "blue" 구..

JavaScript에서 배열과 문자열에서 중복값을 제거하는 여러 가지 방법이 있는데, 아래는 알고리즘 풀이를 하면서 알게된 내용을 정리해보았다. 배열에서 중복값 제거하기 1. Set 사용 const array = [1, 2, 3, 4, 3, 2, 1]; const uniqueArray = [...new Set(array)]; console.log(uniqueArray); 2. filter 및 indexOf 사용 const array = [1, 2, 3, 4, 3, 2, 1]; const uniqueArray = array.filter((value, index, self) => self.indexOf(value) === index); console.log(uniqueArray); 3. reduce 사용 c..