본문 바로가기

반응형

분류 전체보기

(399)
[next.js] 클라이언트 측에서 POST 로 정보 받을 때 서버에서 읽는 코드 보호되어 있는 글입니다.
[CSS] & | SCSS 를 쓰지 않고도 CSS 도 중첩 사용이 가능하게 해줌 원래 SCSS 에서만 사용 가능했던 중첩(nesting) 이 CSS 에서도 사용이 가능해졌다. (이 사실을 모르고 사용하지 않는 경우가 많은 것 같다. ) 예를 들어, SCSS 에서는 다음과 같이 중첩이 가능했다. .section { h2 { color: #008080; } p { font-size: 16px; } } 하지만 이제는 CSS 에서도 다음과 같이 중첩 사용이 가능해졌다. .parent-rule { /* parent rule properties */ .child-rule { /* child rule properties */ } } 그러나, 현재 까지는 제한 사항이 존재한다. 바로 유형선택기에서는 사용이 지원하지 않는다는 점이다. 여기서 유형선택기(type selectors)란 아래와 같이 흔히..
[HTML] <pickture> | 브라우저 크기에 대한 최적화 용도로 사용하는 이미지 태그 보통 웹 사이트에서 이미지를 화면 상에 그리기 위해서 태그를 단일로 사용한다. 그리고 브라우저의 크기에 대응하기 위해 퍼센트(%) 나 vw 를 사용하거나 미디어 쿼리를 사용하기도 한다. 하지만 이런 경우에는 이미지의 종횡비가 깨지거나 화질이 깨지는 등의 문제가 발생할 수 있고, 이는 결국 사용자 경험에 부정적일 수 밖에 없다. 이 때, 이를 개선하고 방지하기 위한 기능을 제공하는 태그를 감싸고, source 태그와 함께 사용할 수 있다. 용도 예시1) 다양한 해상도에 대응하는 이미지 제공 pickture 태그를 사용하면, 다양한 해상도 및 뷰포트 크기에 대응하여 다른 이미지를 제공할 수 있다. 브라우저 크기에 따라서 사용자에게 최적화된 이미지를 제공할 수 있기 때문에, 결과적으로 로딩 시간을 단축하고 대..
[React lib] 리액트에서 유효성 검사 라이브러리 4가지 간략 소개 및 링크 정리 보통 회윈가입 form 을 제출하기 전에 사용자가 입력한 데이터가 사이트에서 요구하는 조건을 만족하는지(유효성) 검사를 실시한다. 요구되는 사항 자체가 단순한 경우에는 바닐라 자바스크립트나 HTML form 을 구성하는 요소가 내부적으로 가지는 속성으로 간단하게 처리할 수 있지만, 요구되는 사항이 복잡한 경우에는 이 모든 것을 일일이 다루기에는 코드가 너무 길어져서 가독성이나 재사용성 등에 있어서 그리 좋은 처리는 아닐 수 있다. 따라서 언제든지 사항에 따라 활용할 수 있도록 오늘은 강력하면서도 단순하게 유효성을 체크할 수 있는 유효성 검사 라이브러리에 대한 간략한 소개와 사이트 링크에 대한 정보를 정리해두고자 한다. React Hook Form React Hook Form은 React Hook을 사용하..
[단순용어] 가용성 | 시스템이 정상적으로 작동 가능한 비율 가용성이란? 가용성은 시스템이 정상적으로 작동할 수 있는 비율을 의미한다. 예를 들어, 웹사이트의 가용성이 99.99%라면, 1년 동안 26.3일 동안만 장애가 발생한다는 의미이다(가용성 구하기는 하단에서 구하고 있음). 쉽게 설명하자면, 가용성은 시스템이 멈추지 않고 돌아가는 비율이라고 할 수 있다. 현실적으로 100% 가용성은 불가능하지만, 가용성을 높이기 위해 노력하면 시스템의 안정성과 신뢰성을 높일 수 있다. 흔히, 대기업 채용에서 대용량 트래픽을 안정적으로 처리한 경험 등을 고려하는 것도 결국 대규모 서비스가 365일 내내 정상적으로 운영되도록 하기 위한 즉, 가용성을 높이기 위한 노력을 해왔는지 알아보기 위해서라고 할 수 있다. 그리고 우리가 애플리케이션을 개발 할 때 예외처리를 잘해야 하는 ..
[tailwindcss] 사용자가 정의한 값으로 스타일을 지정하려면 옵션-[사용자 지정 값 ] 아래와 같이 [ ] 대괄호 사이에 사용자가 지정하고자 하는 값을 직접 명시하면 된다. 아래 예시에 따르면 height 가 80vh 로 지정된다. {children} 참고 https://stackoverflow.com/questions/68725366/in-tailwind-how-to-set-height-of-a-div-to-80-of-the-screen
[javascript] with | 타겟을 지정한 값으로 수정한 새로운 배열을 반환하는 메소드 Array.prototype.with(index, value ) with 메소드는 우리가 배열에서 특정 요소의 값을 다른 값(value)으로 수정할 때, 대괄호 표기법(ex. arr[ 0 ] ) 을 사용하는 것에 대한 복사버전이다. 즉, 대괄호 표기법의 경우에는 원본 배열을 파괴하지만, with의 경우에는 원본 배열을 파괴하지 않고, 원본배열을 복사한 배열의 값을 변경한 새로운 배열을 반환한다. 아래 예시를 보면 알 수 있듯이, 원본 배열은 변형되지 않은 상태 그대로 출력되었고, with 메소드를 사용한 경우 새로운 배열이 newArray 에 할당되어 출력된 것을 볼 수 있다. const originArray = ["안","녕","하","쇼"]; const newArray = originArray.wit..
[javascript] copyWithin(target, start, [end]) | 같은 배열에서 특정 요소들을 복사하여 배열의 일부에 덮어씌운 새로운 배열을 반환하는 메소드 Array.Prototype.copyWithin(target, start, [end]) 이 메소드는 start 인덱스 부터 end 인덱스-1 까지의 요소를 복사하여 target 인덱스 지점을 기준으로 순차적으로 복사한 값을 덮어 씌운 후 새로운 배열을 반환한다. - end 는 생략이 가능하며, 생략하는 순간 start 인덱스 부터 배열의 마지막 요소 까지 복사한다. - 빈 슬릇이 존재(희소) 하는 경우, 빈 슬릇을 그대로 복사하여 target 인덱스 지점 부터 덮어씌운다. 즉, 희소를 보존한다. 이렇게 보면 바로 이해가 되지 않기 때문에 예시 코드를 살펴보자 const originArray = [1,2,3,4,5] const newArray = originArray.copyWithin(0,1,2); co..

반응형