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);를 ..

웹 개발에서 레이아웃 설계는 핵심적인 부분이라 생각한다. Flex와 Grid는 각각 강력한 레이아웃 시스템으로, 어떤 상황에서 어떻게 사용되어야 하는지에 대한 이해는 웹 프론트엔드 개발자에게 특히나 중요하다고 생각한다. Flex와 Grid를 비교하여 어떤 상황에서 어떤 것을 선택해야 하는지에 대해 알아보았다. 1. Flex: 유연한 레이아웃 설계 Flex는 주로 한 축(행 또는 열)을 기준으로 요소들을 정렬하고 분배하는 데 사용된다. 주로 다양한 크기의 아이템들을 가로 또는 세로로 정렬할 때 유용하다. .container { display: flex; justify-content: space-between; /* 아이템을 컨테이너 양 끝에 분배 */ align-items: center; /* 아이템을 세..

웹 개발에서 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..

1. 미디어쿼리 최소화 이유 미디어쿼리는 웹 페이지를 다양한 디바이스와 화면 크기에 맞춰 스타일을 조절하는 데에 사용된다. 그러나 미디어쿼리가 많아지면 CSS 파일의 크기가 증가하고, 다운로드 시간이 길어질 수 있습니다. 이를 최소화하여 성능을 향상시키는 것이 중요하다. 2. Rem 단위 활용 이유 Rem(루트 em) 단위는 폰트 크기를 상대적으로 설정하는 단위로, 루트 요소의 크기에 따라 상대적으로 크기가 조절된다. Rem을 사용하면 화면 크기가 변할 때 유연하게 대응할 수 있으며, 미디어쿼리에서도 효과적으로 활용될 수 있다. 3. 미디어쿼리 최소화 방법 3.1 최소한의 미디어쿼리 정의 필요한 경우에만 미디어쿼리를 사용하여 스타일을 변경하도록 합니다. 불필요한 미디어쿼리를 제거하여 파일 크기를 최소화한..

1. Transform의 3D 활용 이유 애니메이션을 개발할 때, transform 속성은 중요한 역할을 한다. 특히, 3D 변환을 사용하는 이유는 성능 최적화와 부드러운 애니메이션 효과를 얻기 위함인데, 3D 변환을 사용하면 GPU 가속을 활용할 수 있어, 더 효율적으로 렌더링되며 부드럽고 자연스러운 애니메이션을 제공할 수 있다. .element { transform: translate3d(0, 0, 0); } 이렇게 3D 변환을 추가하면, 브라우저는 해당 엘리먼트를 GPU에서 처리하게 되어 성능 향상을 이끌어낸다. 2. CSS로 Animation 최적화 애니메이션을 구현할 때는 성능 측면에서 주의가 필요한데, 특히 부드러운 애니메이션을 만들기 위해 CSS 속성을 최적화하는 것이 중요하다. 2.1 하드..