둥지

6. 그림자 효과의 세 가지 방법: box-shadow, text-shadow, drop-shadowCSS에서 그림자를 표현하는 방법은 크게 세 가지가 있습니다:1. box-shadow: 요소 전체에 그림자를 적용 2. text-shadow: 텍스트에만 그림자를 적용 3. filter: drop-shadow(): SVG나 PNG 이미지에 그림자를 적용 각각의 속성은 다음과 같은 형식으로 사용됩니다: - box-shadow: x축 y축 blur 색상 - text-shadow: x축 y축 blur 색상 - filter: drop-shadow(x축 y축 blur 색상) 아래의 예제에서 볼 수 있듯이, 각각의 그림자 효과는 서로 다른 용도에 최적화되어 있습니다. box-shadow는 div와 같은 블록 요소에,..

이 글은 해당 영상을 정리한 글입니다.1. 간단하게 보더에 그라디언트를 줄 수 있습니다border-image 속성을 사용하면 가상 선택자 없이도 그라디언트 테두리를 만들 수 있습니다. 이 방법의 장점은:1. 코드가 간단하고 직관적입니다 2. 가상 선택자를 사용하지 않아도 됩니다 3. 브라우저 호환성이 좋습니다 border-image와 linear-gradient를 함께 사용할 때 주의할 점은 기본적으로 모서리에만 그라디언트가 적용된다는 것입니다. 하지만 border-image-slice 속성을 활용하면 테두리 전체에 균일한 그라디언트를 적용할 수 있습니다. 아래 예제는 border-image-slice 값을 1로 설정하여 그라디언트를 테두리 전체에 균일하게 적용한 예시입니다. border-image-sl..

CSS 중앙 정렬은 최근 들어 상당히 쉬워졌음에도 불구하고 어려운 것 중 하나입니다. web.dev에 소개된 탄력성 고리(The Resilience Ringer)라는 5가지 테스트 요소가 있습니다.1. Squished: 중앙 정렬은 너비 변경을 처리할 수 있어야 합니다.2. Squashed: 중앙 정렬은 높이 변경을 처리할 수 있어야 합니다.3. Duplicate: 중앙 정렬은 항목 수에 따라 동적이어야 합니다.4. Edit: 중앙 정렬은 콘텐츠의 길이와 언어에 따라 동적이어야 합니다.5. Flow: 중앙 정렬은 문서 방향 및 쓰기 모드에 독립적이어야 합니다.좋은 중앙 정렬은 위 요소를 모두 만족하는 경우가 탄력적이며, 안정적인 중앙 정렬이라 할 수 있다고 소개되었습니다. 1. 컨텐츠 중앙 정렬 (Con..

HTTPS란 무엇일까?보안은 매우 중요한 요소입니다.이러한 보안을 강화하기 위한 핵심 기술로 HTTPS가 사용되고 있습니다.HTTPS는 " Hypertext transfer protocol secure"의 약자로서 데이터를 암호화하여 전송하는 프로토콜입니다.HTTPS는 SSL/TLS 프로토콜을 사용해 데이터를 암호화함으로써 무결성과 기밀성을 보장하게 됩니다.이러한 특징 때문에 중간자 공격으로부터 보호되기 때문에 대부분의 웹사이트에서 필수적으로 사용되고 있습니다. 왜 로컬에서 HTTPS를 사용해야할까?대부분 로컬에서 HTTPS를 사용할 필요는 없습니다. 하지만 로컬에서 HTTPS를 사용할경우 아래와 같은 이점이 있습니다.- 실제 배포 환경과 유사한 조건에서 개발 및 테스트- 혼합 콘텐츠를 로컬에서 확인 가..

소스 맵이란?자바스크립트는 배포용으로 빌드할 경우 성능을 최적화하기 위해서 원본 파일을 압축하거나 번들링하게 됩니다.이처럼 압축되거나 번들링된 결과물과 원본 파일간의 관계를 기록한 파일을 소스 맵(Source Map)이라고 합니다.소스 맵은 어떤 구성을 가지고 있을까?소스 맵은 JSON 형식으로 작성되며 아래와 같은 요소를 포함하게 됩니다.version : 소스 맵의 기반이 되는 버전 번호file : 변환된 소스 코드의 파일명sources : 원본 소스 코드의 경로sourcesContent : 원본 소스 코드의 내용names : 변환된 소스 코드에서 사용된 식별자의 이름mappings: 원본 소스 코드와 변환된 코드 간의 매핑 정보소스 맵은 언제 필요할까?과연 소스 맵은 언제 필요할까요?소스 맵은 성능 ..

소프트웨어와 관련된 유명한 3가지 원칙이 있습니다.바로 KISS, YAGNI, DRY 입니다. 이 셋은 아래와 같이 정말 간단히 설명할 수 있습니다.1. KISS (Keep It Simple Stupid): 되도록 간단하고 단순하게 만들어라.2. YAGNI(You Ain't Gonna Need It): 불필요한 작업을 하지 말아라.3. DRY(Do not Repeat Yourself): 코드를 반복하지 말아라. KISS는 코드는 간결하고 단순해야 이해하기 쉽고, 이해하기 쉬울수록 버그가 발생할 가능성이 줄어들게 하는 원칙입니다. YAGNI는 미래 어느 시점에 사용될지도 모를 코드를 작성하는 것은 KISS와 반대로 코드가 불필요하게 장황해지기 때문에 당장 필요한 작업에 집중하고 쓸데 없는 작업은 하지 말라..

이전글: https://orashelter.tistory.com/933.  리스코프 치환 원칙 (LSP, Liskov Substitution Principle)서브 타입은 언제나 자신의 기반(부모) 타입으로 교체할 수 있어야 함을 의미합니다.이를 리액트로 설명하자면 컴포넌트를 상속할때 부모 컴포넌트의 Props를 그대로 사용할 수 있어야 함을 의미합니다.특정 컴포넌트에서 파생된 다른 컴포넌트가 부모 컴포넌트의 기능을 변경하게 되면 해당 컴포넌트를 사용할 때마다 추가적인 문서화가 필요해져서 프로젝트의 유지보수가 복잡해질 수 있습니다.반면 LSP를 준수하면 동작을 예측할 수 있어 유지보수가 더 용이해집니다.버튼 컴포넌트를 예시로 LSP를 준수하는 IconButton과 LoadingButton을 만들어보겠습니..

SOLID란?SOLID 원칙은 객체 지향 프로그래밍에서 소프트웨어 설계를 개선하기 위한 다섯 가지 원칙을 의미.주로 객체 지향 언어에 많이 사용되지만 언어에 상관 없이 적용할 수 있으며, 이러한 원칙을 적용하면 코드의 유지보수성과 확장성을 높일 수 있음. 1.  단일 책임 원칙 (SRP, Single Responsibility Principle)각 모듈은 하나의 책임만을 가져야 하며, 그 책임은 완전히 캡슐화되어야 함을 의미합니다.여기서 "책임"이란 해당 모듈이 수행해야 하는 기능이나 역할을 의미하며, 그 기능이 변경될 경우에만 해당 클래스나 모듈을 수정해야 함을 의미합니다. 책임의 예시는 다음과 같습니다.- UI 책임: 사용자 인터페이스 렌더링.- 비즈니스 로직 책임: 데이터 처리나 비즈니스 규칙을 적..

React Native란?React Native CLI는 React Native 프로젝트를 생성, 관리, 빌드하고 디버깅하는 데 사용되는 표준 도구. 장점1. 자유도가 높아 React Native의 모든 기능을 100% 활용할 수 있습니다.2. 네이티브 코드에 직접 접근할 수 있어, 복잡한 네이티브 기능이나 타사 네이티브 모듈을 쉽게 통합할 수 있습니다.3. 다양한 라이브러리를 자유롭게 사용할 수 있는 유연성이 있습니다.4. 앱의 빌드 설정, 종속성 등을 세밀하게 조정할 수 있어 커스터마이징이 용이합니다. 단점1. 프로젝트를 시작하는 데 시간이 더 오래 걸립니다. (Xcode, Android Studio 등의 설치가 필요하기 때문)2. 모든 라이브러리를 직접 설치하고 설정해야 하므로 설정이 복잡할 수 있..

React Native는 뭘까?React Native는 페이스북이 만든 React와 JavaScript를 이용해서 네이티브 앱을 개발하는 오픈 소스 모바일 애프리케이션 프레임워크. 어떻게 기업들의 비즈니스 욕구를 충족시킬까?1. iOS와 Android 플랫폼을 위한 단일 코드베이스로 개발할 수 있어 개발 및 유지보수 비용이 줄어듭니다.2. 양 플랫폼에서 동일한 코드를 사용하므로 일관된 사용자 경험을 제공할 수 있습니다. 개발자들에게 어떤 이점을 줄까?1. React와 JavaScript 지식만으로 모바일 앱 개발이 가능해 웹 개발자들의 진입 장벽이 낮아집니다.2. 대부분의 코드를 iOS와 Android 플랫폼에서 공유할 수 있어 개발 시간이 단축됩니다.3. 많은 서드파티 라이브러리와 도구를 활용할 수 있..