본문 바로가기

전체 글75

프로젝트 라이선스(License) 개념 및 비교 (MIT, GPL, BSD, Apache 2.0) 프로젝트 라이선스란? 라이선스는 소프트웨어 사용에 중요한 역할을 합니다. 특히, 오픈 소스 소프트웨어의 경우 어떤 라이선스가 사용되는지를 이해하는 것이 중요합니다. 이 글에서는 널리 사용되는 MIT, GPL, BSD, Apache 2.0 라이선스에 대해 간략히 살펴보겠습니다. MIT 라이선스: MIT 라이선스는 매우 관용적이며 유연한 라이선스입니다. 소프트웨어를 수정하고 재배포하는 데 제한이 거의 없으며, 소스 코드를 사용하는 사람이 저작권 고지를 유지하면 자유롭게 사용할 수 있습니다. GNU 일반 공중 사용 허가서 (GPL): GPL은 수정된 코드의 공개와 사용 조건이 포함된 복잡한 라이선스입니다. GPL 아래에서 개발된 소프트웨어는 동일한 라이선스 하에 배포되어야 하며, 수정된 코드를 공개해야 합니다.. 2024. 2. 5.
[CSS] Pure CSS Loader 사이트 모음 (무료, 커스터마이징) 1. 서론 CSS Loader는 웹 페이지에서 데이터를 불러오거나 처리하는 동안 사용자에게 로딩 상태를 시각적으로 알려주는 중요한 요소입니다. 웹 페이지의 사용자 경험을 향상시키는 데 도움이 되며, 특히 사용자가 대기해야 하는 경우에는 필수적입니다. 이 글에서는 CSS Loader의 필요성과 그것을 구현하는 데 사용되는 Pure CSS의 장점에 대해 알아보겠습니다. CSS Loader의 필요성 CSS Loader는 웹 페이지에서 사용자에게 로딩 상태를 시각적으로 전달하는 중요한 요소입니다. 사용자가 웹 페이지를 이용하는 동안 데이터를 불러오거나 처리하는 시간이 걸릴 수 있으며, 이때 로딩 상태를 제공함으로써 사용자는 대기하는 동안 어떤 작업이 진행 중인지 인지할 수 있습니다. 로딩 상태를 시각적으로 표현.. 2024. 2. 4.
[Dart] Dart에서 사용하는 널 인지 연산자 (Null-aware Operator) 다트는 효율적인 코딩 및 예외 처리를 위해 널 인지 연산자를 제공합니다. 이 연산자들은 코드를 간결하게 만들고 널 값으로 인한 예외를 방지하는 데 도움이 됩니다. 다트는 ?., ??, ??= 세 가지 널 인지 연산자를 제공합니다. ?. 연산자 (Null-aware Access) ?. 연산자는 객체가 널인지 여부를 확인하고 널이 아닌 경우에만 속성에 접근합니다. 이를 통해 객체가 널이면 예외를 발생시키지 않고 코드 실행을 계속할 수 있습니다. 코드 예시 void main() { const x = null; const text = 'hello world!'; print(x?.length); // null print(text?.length); // 12 } dartpad 실행 예시 ?? 연산자 (Null Co.. 2024. 2. 3.
[DNS] 서브도메인 활용과 설정 방법 서브도메인이란? 서브도메인은 메인 도메인의 하위 부분으로, 메인 도메인 이름 앞에 추가되는 부분입니다. 서브도메인을 사용하면 웹사이트를 더 세분화하고, 특정 서비스나 콘텐츠를 분리하여 제공할 수 있습니다. 예를 들어, "blog.example.com"에서 "blog"는 서브도메인입니다. 서브도메인 활용 서비스 구분: 서브도메인을 사용하여 웹사이트 내에서 다양한 서비스를 구분하여 제공할 수 있습니다. 예를 들어, "store.example.com"은 온라인 상점을 위한 페이지를 가리킬 수 있습니다. 지역별 서비스: 지역 또는 언어별로 서비스를 제공할 때 서브도메인을 활용할 수 있습니다. 예를 들어, "us.example.com"은 미국 시장을 대상으로 한 페이지를 가리킬 수 있습니다. API 구분: 서브도.. 2024. 2. 2.
[DNS] Domain의 계층적 구조 (Top-Level Domain, TLD) Domain의 계층적 구조 도메인은 인터넷에서 사용되는 주소체계로, 계층적 구조를 가지고 있습니다. 이 구조는 오른쪽에서 왼쪽으로 읽히며, 각 요소는 점으로 구분됩니다. 아래는 도메인의 계층적 구조를 가장 간단하게 나타냅니다. www.example.com 도메인의 계층 구조를 더 자세히 살펴보면, 최상위, 메인, 서브 도메인으로 나눌 수 있습니다. 최상위 도메인, 도메인, 서브 도메인은 웹 사이트 주소의 구조를 이해하는 데 중요한 요소입니다. 각각의 개념과 예시를 설명해보겠습니다. 최상위 도메인 (Top-Level Domain, TLD): 개념: 도메인 이름의 가장 높은 수준의 부분으로, 인터넷에서 사용되는 최상위 계층 도메인을 의미합니다. 예시: .com, .net, .org, .edu, .gov, ... 2024. 2. 1.
[DNS] DNS 레코드 소개 (A, CNAME, NS 등) DNS 레코드 DNS(Domain Name System) 레코드는 DNS에 저장된 정보를 나타냅니다. 이 정보에는 도메인 이름과 해당 도메인 이름에 대응하는 IP 주소가 포함됩니다. 이 정보를 통해 컴퓨터는 인터넷에서 웹사이트에 접속할 수 있습니다. DNS 레코드 유형 아래는 DNS 레코드의 몇 가지 예시와 설명입니다. A 레코드 (주소 레코드): 도메인 이름과 해당 도메인에 대응하는 IPv4 주소를 연결합니다. 예를 들어, "example.com" 도메인의 A 레코드는 "192.0.2.1"과 같은 IP 주소를 가질 수 있습니다. AAAA 레코드 (IPv6 주소 레코드): 도메인 이름과 해당 도메인에 대응하는 IPv6 주소를 연결합니다. IPv6는 IPv4와 유사하지만 보다 긴 주소 형식을 사용합니다. .. 2024. 1. 31.
[DNS] DNS의 기본 개념 DNS란 무엇일까요? DNS(Domain Name System)은 인터넷에서 사용되는 주소체계로, 사용자가 이해하기 쉬운 도메인 이름을 컴퓨터가 이해할 수 있는 IP 주소로 변환하는 역할을 합니다. 이를 통해 사용자는 웹사이트에 접속하거나 이메일을 보낼 때 IP 주소를 직접 기억할 필요 없이 도메인 이름을 사용할 수 있습니다. 쉽게 예시를 들자면, DNS(Domain Name System)는 인터넷에서 사용되는 주소록과 같습니다. 여기에는 각각의 웹사이트에 대한 주소가 기록되어 있습니다. 그래서 우리가 google.com 같은 웹사이트에 들어갈 때마다 컴퓨터는 DNS를 통해 해당 웹사이트의 주소를 알아내고 접속하게 되는 거죠. 이와 같은 DNS가 어떻게 동작하는지 간단하게 설명해 보겠습니다. 예를 들어,.. 2024. 1. 30.
PicoCSS: HTML 기반 경량 CSS 프레임워크 (with Semantic Tag) 소개 PicoCSS는 경량이고 미니멀한 CSS 프레임워크입니다. PicoCSS는 작고 빠르며, 웹 사이트나 애플리케이션에 필요한 기본적인 스타일링을 제공합니다. 이 프레임워크는 간결한 디자인과 사용자 정의가 용이하다는 특징을 갖고 있습니다. 따로 커스텀 스타일을 많이 하지 않고 빠르고 깔끔하게 프로토타입을 만들고 싶을때 사용하면 굉장히 유용한 프레임워크입니다. 그렇다고 아예 커스텀이 불가능 한 것도 아니라, class를 사용해서 스타일 커스텀이 얼마든지 가능합니다. 공식 홈페이지에서 소개하는 PicoCSS는 다음과 같은 4가지 특징이 있습니다. 적은 클래스와 시멘틱 태그 가능한 한 시멘틱 HTML 태그를 사용합니다. Pico에서는 10개 미만의 클래스만 사용됩니다. CSS로만 훌륭한 스타일 제공 의존성,.. 2024. 1. 29.
임시 샘플 이미지, 대체 이미지(Placeholder Image) URL 모음 임시 샘플 이미지란? 임시 샘플 이미지는 웹 개발이나 디자인 작업 중에 사용되는 가상 이미지로, 실제 이미지 대신 사용되어 디자인을 완성하거나 레이아웃을 확인하는 데 도움을 줍니다. 이러한 이미지는 주로 디자인 작업 중에 빈 공간을 채우거나 이미지가 로드되지 않았을 때 사용자에게 이미지의 위치를 알려주는 데 활용됩니다. 다양한 임시 샘플 이미지를 제공하는 웹 사이트들이 있으며, 이를 통해 원하는 이미지를 쉽게 얻을 수 있습니다. 다음으로 몇 가지 임시 샘플 이미지를 제공하는 웹 사이트들을 소개하고 사용 예시를 안내해드립니다. placeholder URL 리스트 1. placehold.co - 소개 가장 기본이 되는 임시 샘플 이미지 URL입니다. 사이트로 이동해보면, Documentation을 확인하여 .. 2024. 1. 28.
[Svelte] sass(scss) 적용 안될 때 설정 방법: svelte.config.js 1. 개요 Svelte 프로젝트를 생성하고 나서 페이지 및 컴포넌트의 스타일을 위해서 css 대신 sass(scss)를 사용하고 싶어서 다음과 같이 컴포넌트의 style 태그에 lang="scss" 라는 attribute를 셋팅해주고 scss 문법으로 코드를 작성 후 로컬 개발 환경에서 확인 해보려 했더니 다음과 같이 [plugin:vite-plugin-svelte]라며 에러가 나타났다. 여기서 대충 프로젝트에서 scss문법을 인식하지 못하고 있다고 예상했고 See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md를 확인 해보았다. 2. 설정 2.1 svelte.config.js에 preprocess 설정 svelte .. 2024. 1. 26.
Dart의 상수: const와 final의 차이점 (컴파일 타임, 런타임) 1. 개요 Dart에서 상수는 final 또는 const 키워드를 사용하여 선언될 수 있습니다. const와 final은 모두 값을 할당한 후 변경할 수 없는 변수를 나타냅니다. 그러나 두 키워드 간에는 중요한 차이가 있습니다. 2. 컴파일 타임 상수와 런타임 상수 const는 컴파일 타임 상수로, 컴파일 시에 값이 정해져야 합니다. 따라서 리터럴 값만 const로 선언할 수 있습니다. 리터럴 값은 코드에서 직접 표현된 고정된 값을 나타냅니다. 이 값은 프로그램 실행 중에 변경되지 않고 고정된 상태를 유지합니다. 간단하게 말하면, 코드에서 그대로 사용되는 값이 리터럴 값입니다. final은 런타임 상수로, 런타임에 값이 결정될 수 있습니다. 따라서 런타임에 결정되는 값을 final로 선언할 수 있습니다... 2024. 1. 25.
[Netlify] 무료 도메인 변경 가이드: A-Z로 살펴보기 1. 개요무료 도메인 변경은 Netlify에서 제공하는 서비스 중 하나로, 사용자가 제공하는 프로젝트의 기본 도메인을 변경할 수 있는 유용한 기능입니다. 이를 통해 사용자는 좀 더 자신만의 독특한 도메인을 사용하여 프로젝트를 공개할 수 있습니다. 예를 들면, 개인의 포트폴리오 사이트나 토이 프로젝트를 배포해서 링크를 걸어야 할 수도 있는데 무작위 토큰값으로 된 링크를 전달 하는 것 보다 의미전달을 할 수 있는 도메인명으로 셋팅을 해놓는다면 방문자들에게 더욱 신뢰감을 줄 수 있습니다. 유의사항중요한 유의사항으로는 Netlify에서 제공하는 무료 도메인인 *.netlify.app과 같은 형태로 고정된 부분은 변경할 수 없습니다. 그러나 사용자가 선택한 *에 해당하는 도메인 부분을 커스터마이징하여 프로젝트를 .. 2024. 1. 24.

티스토리툴바