티스토리

dev_or_alive

검색하기

블로그 홈

dev_or_alive

boms-house.tistory.com/m

Frontend Developer

구독자: 0

방명록 방문하기

주요 글 목록

[CSS][color] color, background-color ✅ 개요웹 스타일을 다룰 때 가장 먼저 만나게 되는 속성이 color와 background-color입니다.이번 포스트에서는 색상을 지정하는 가장 기본적인 방법을 알아보겠습니다.✅ 핵심 속성색상 관련한 핵심 속성으로는 color와 background-color가 있습니다.color 속성은 텍스트(전경색)를 나타내며, background-color는 배경색을 나타냅니다.color는 텍스트에 적용하며 “상속”되는 특징이 있습니다. (부모 요소에 적용된 color값이 자식 요소에도 자동 적용됩니다.)background-color는 배경색을 적용하며, 상속되지 않습니다.p { color: red;}.box { background-color: #f0f0f0;}🔥 색상 표기 방법색상의 값을 표기하는데에는 기본.. 공감수 0 댓글수 0 2025. 5. 4.
[CSS][선택자] 개요 및 기본 문법 이번 포스팅에서는 CSS를 작성하기 위해 필요한 선택자에 대해서 알아보겠습니다.✅ 선택자란 무엇인가?CSS 선택자는 HTML 문서 안에서 스타일을 적용할 “대상”을 찾아내는 규칙입니다.“어떤 요소에 이 스타일을 씌울 것인가”를 지정하는 식별자 역할을 합니다.선택자가 정확해야 의도한 요소에만 스타일을 붙일 수 있고, 유지보수가 용이합니다.✅ 기본 선택자🔥 전체 선택 : *DOM트리 안의 모든 요소를 한꺼번에 선택하는 CSS 선택자입니다.보통 “전체 스타일 초기화”, “공통 프로퍼티 부여”처럼 전역적인 스타일이 필요할 때 사용됩니다./* 모든 요소에 margin 100px이 적용된다. */* { margin: 100px;}🔥 태그 선택자 : p, div, header, footer 등.태그 선택자는 요.. 공감수 1 댓글수 1 2025. 5. 3.
[CSS] CSS 개요 및 기초 이해하기 ✅ CSS 개요와 필요성CSS(Cascading Style Sheets)는 HTML 문서의 시각적 영역을 담당하는 스타일 시트 언어입니다.HTML이 구조를 정의한다면 CSS는 색상·여백·폰트·레이아웃 등 디자인 요소를 지정해 화면을 완성하는 역할을 합니다.콘텐츠와 스타일 분리: HTML 구조와 스타일 규칙을 분리해 유지보수성을 높인다.재사용성과 일관성: 하나의 스타일시트가 여러 페이지에 적용될수 있기 때문에 사이트 전반의 디자인을 통일할 수 있다.접근성 향상: 미디어쿼리를 통해 다양한 기기와 사용자 요구에 대응할 수 있다.✅ CSS 작성법 및 HTML과 연결 방법CSS를 적용하는 방법은 세 가지이며, 각 방법은 적용 범위와 우선순위에 차이가 있습니다.🔥 1. 인라인 스타일HTML 요소 내부에서 styl.. 공감수 0 댓글수 0 2025. 5. 1.
[HTML] 웹접근성과 시멘틱 태그 인터넷은 누구나 사용할 수 있어야 한다는 철학 위에 만들어졌습니다.하지만 시각, 청각, 운동 능력 등 제약을 가진 사용자들이 웹을 사용하는 데 불편함을 겪는 경우가 많습니다.이런 문제를 해결하기 위한 개념이 바로 **웹 접근성(Web Accessibility)**입니다.이번 글에서는 웹 접근성이 무엇인지, 왜 고려해야 하는지,그리고 실무에서 접근성을 높이는 방법까지 자세히 알아보겠습니다.✅ 웹 접근성이란?웹 접근성(Web Accessibility)이란,장애가 있는 사람을 포함해 모든 사용자가 웹 콘텐츠에 접근하고 이용할 수 있도록 보장하는 것을 의미합니다.즉, 웹사이트를 누구나, 어떤 환경에서도, 동등하게 사용할 수 있도록 만드는 것이 바로 웹 접근성입니다.예를 들면?시각 장애가 있는 사용자가 스크린 리.. 공감수 1 댓글수 0 2025. 4. 29.
[HTML] 요소들의 속성 HTML 태그는 기본적으로 구조만을 담당합니다.하지만 속성(attribute)을 통해 태그에 의미, 스타일, 동작 등 다양한 기능을 부여할 수 있습니다.이번 글에서는 HTML의 대표적인 속성들과, 전역 속성, 이벤트 속성까지 차근차근 알아보겠습니다.✅ 속성은 어디에 들어가는가?속성은 보통 이렇게 사용됩니다.예를 들어 아래와 같이 사용됩니다. 네이버여기서 는 링크 태그,그 안에 있는 href, target, title이 바로 속성(attribute)입니다.✅ 자주 사용하는 HTML 속성들✨ id해당 요소의 고유한 식별자한 페이지 내에서 하나의 요소에만 사용해야 합니다JavaScript, CSS에서 참조할 때 많이 사용됩니다메인 제목✨ class공통 스타일을 적용하거나 그룹화된 요소를 관리할 때 사용합니다.. 공감수 2 댓글수 0 2025. 4. 14.
[HTML] Table 태그 및 구성 요소 태그 웹 페이지에서 데이터를 표 형태로 정리해서 보여주고 싶을 때 사용하는 것이 태그입니다.단순히 데이터를 나열하는 것을 넘어, 행과 열을 기준으로 정보를 구조화할 수 있어 매우 유용합니다.이번 글에서는 HTML 테이블 태그의 구성요소, 기본 사용법, 실용적인 예시까지 차근차근 정리해보겠습니다.✅ Table 태그란? 태그는 데이터를 행(Row)과 열(Column) 구조로 표현하기 위한 HTML 태그입니다.주로 다음과 같은 상황에서 사용됩니다상품 목록, 스케줄, 성적표통계 자료, 비교표관리자 페이지의 리스트 뷰✅ Table의 기본 구성 요소HTML 테이블은 다음과 같은 요소들로 구성됩니다.태그설명테이블 전체를 감싸는 태그입니다.표의 제목(머리글) 행들을 그룹으로 묶습니다.실제 데이터(본문) 행들을 그룹으로 묶.. 공감수 0 댓글수 0 2025. 4. 14.
[HTML] Form 태그와 관련 태그들 웹사이트를 만들다 보면 사용자에게 정보를 입력받아야 하는 순간이 자주 생깁니다.대표적으로 로그인, 회원가입, 검색창, 설문조사 등의 화면이 있습니다.이럴 때 사용하는 것이 바로 HTML의 태그입니다.이번 글에서는 폼 태그의 필요성, 사용 이점, 내부에서 함께 쓰이는 태그들,그리고 폼이 없는 경우와의 차이점까지 전부 정리해보겠습니다.✅ 왜 폼 태그를 사용해야 할까?폼 태그는 사용자의 입력을 서버로 전송할 수 있게 해주는 기본 구조입니다.즉, 단순히 텍스트박스, 버튼만 있다고 해서 작동하는 것이 아니라,그것들을 감싸는 이 있어야 실제 전송이 가능한 구조가 됩니다.✅ 폼 태그를 사용했을 때의 이점이점설명데이터 전송사용자가 입력한 값을 서버로 손쉽게 전송할 수 있습니다. (action, method 속성 이용.. 공감수 0 댓글수 0 2025. 4. 14.
[HTML] 시멘틱 태그 웹 페이지를 만들다 보면 가장 많이 쓰는 태그 중 하나가 바로 입니다.구조를 나누고 스타일을 입히기에 편리하지만, 문제는 의미가 없다는 점입니다.이런 문제를 해결하고자 등장한 것이 바로 시멘틱(Semantic) 태그입니다.이번 글에서는 시멘틱 태그의 종류, 사용해야 하는 이유, 그리고 로만 구성했을 때와의 차이점까지 알아보겠습니다.✨ 시멘틱 태그란?시멘틱(Semantic)은 '의미론적인'이라는 뜻을 가지고 있습니다.즉, 시멘틱 태그란 HTML 요소가 어떤 역할을 하는지 의미를 담고 있는 태그입니다.예를 들어 ✅ 간단 설명: 웹사이트나 섹션의 머리.. 공감수 2 댓글수 0 2025. 4. 13.
[HTML] 링크와 이미지 <a>, <img> 웹 페이지를 만들다 보면 다른 페이지로 연결하거나 이미지를 표시하는 기능이 꼭 필요합니다.이럴 때 사용하는 대표적인 태그가 바로 태그와 태그입니다.두 태그는 HTML에서 매우 기본적이면서도 중요한 역할을 합니다.이번 글에서는 이 두 가지 태그의 기본 사용법부터 자주 쓰이는 속성까지 정리해보겠습니다.✨ 링크를 만드는 태그HTML의 태그는 "anchor"(앵커)에서 유래한 것입니다.Anchor는 원래 "닻"이라는 뜻인데요. HTML에서는 이 "닻"을 내리는 지점처럼,웹 문서 내 특정 위치나 다른 페이지로 연결하는 지점을 만들기 위해 이 용어를 사용했습니다. 태그는 다른 페이지나 사이트, 또는 같은 페이지 안의 특정 위치로 이동할 수 있는하이퍼링크를 만들어주는 태그입니다.구글로 이동구글 새창으로 이동위.. 공감수 1 댓글수 1 2025. 4. 13.
[HTML] 리스트 관련 태그 웹 페이지를 만들다 보면 여러 항목을 나열해야 할 때가 많습니다.이럴 때 유용하게 쓸 수 있는 것이 바로 리스트(list) 태그입니다.HTML에서는 대표적으로 세 가지의 리스트 태그가 있으며, 각각의 목적과 사용법이 조금씩 다릅니다.오늘은 그 리스트 태그들에 대해 하나씩 알아보겠습니다.✨ 순서 없는 리스트: 태그는 순서가 중요하지 않은 항목들을 나열할 때 사용합니다.보통 항목 앞에 점(bullet) 모양이 붙는 것이 특징입니다. HTML CSS JavaScript위 코드를 웹 페이지에 넣으면 다음과 같이 표시됩니다 태그는 unordered list의 약자이며, 안쪽에 들어가는 태그가 각각의 항목을 나타냅니다.✨ 순서 있는 리스트: 태그는 순서가 중요한 항목들을 나열할 때 사용합니다.항목 앞에 .. 공감수 1 댓글수 0 2025. 4. 13.
[HTML] 텍스트 관련 주요 태그 HTML에서 텍스트를 표현하는 방법은 다양하며, 그 목적과 의미에 따라 여러 태그를 사용할 수 있습니다.이 글에서는 제목, 문단, 줄바꿈, 강조, 수평선 등 텍스트 표현을 위한 기본 태그들을 정리해드리며, 마지막에는 실습용 예제도 함께 소개해드리겠습니다.✨ 제목 태그: ~ 제목 태그는 문서의 구조를 잡을 때 사용합니다. 숫자가 작을수록 중요한 제목이며, 기본적으로 글씨 크기도 더 큽니다.가장 큰 제목그 다음 제목세 번째 제목네 번째 제목다섯 번째 제목가장 작은 제목 검색 엔진 최적화(SEO) 측면에서도 은 매우 중요하며, 일반적으로 문서마다 한 번만 사용합니다.✨ 문단 태그: 일반적인 문단을 표현할 때 사용합니다. 문단마다 태그로 감싸주면 됩니다.이것은 하나의 문단입니다.이것은 또 다른 문단입니다.✨.. 공감수 0 댓글수 1 2025. 3. 30.
[HTML] 기본 개념 웹 개발을 처음 시작하신 분이라면 누구나 한 번쯤 들어보았을 용어가 바로 HTML입니다. 이 글에서는 HTML의 정의부터 역할, 그리고 기본 구조까지 차근차근 설명드리겠습니다.✨ HTML의 정의HTML은 HyperText Markup Language의 약자로, 우리말로는 하이퍼텍스트 마크업 언어라고 부릅니다. 쉽게 말해, 웹페이지의 뼈대를 만드는 언어입니다.HyperText(하이퍼텍스트): 링크를 통해 다른 문서나 페이지로 이동할 수 있는 텍스트를 의미합니다.Markup Language(마크업 언어): 문서의 구조나 의미를 태그(tag)를 이용하여 표시하는 언어입니다.즉, HTML은 웹페이지에 들어갈 텍스트, 이미지, 영상 등을 어떤 구조로 보여줄지를 정해주는 언어입니다.✨ HTML의 역할HTML은 웹페.. 공감수 0 댓글수 0 2025. 3. 30.
[JS][연산자] 삼항연산자 ✅ 삼항 연산자란?삼항 연산자는 조건에 따라 두 가지 결과 중 하나를 선택할 수 있는 조건 표현식입니다.조건 ? 참일 때 값 : 거짓일 때 값마치 if문처럼 동작하지만, 한 줄로 표현할 수 있어서 코드가 훨씬 간결해 집니다.✅ 기본 예제const age = 20;const message = age >= 18 ? "성인입니다" : "미성년자입니다";console.log(message); // "성인입니다"age >= 18(조건)이 참이면 message 변수에 "성인입니다" 문자열 할당거짓이면 "미성년자입니다" 문자열 할당위 예제 코드에서는 age가 20이므로 true인 조건식이고 이에따라 “성인입니다” 문자열이 할당됩니다.✅ 삼항 연산자의 장점✨ 코드가 짧고 간결해요if문을 사용할 경우 비교적 여러줄로 .. 공감수 0 댓글수 0 2025. 3. 22.
[JS][연산자] 논리 연산자 ✅ 논리 연산자란?논리 연산자는 true/false 값을 가지고 판단하거나 여러 조건을 묶어서 하나의 결과를 만들어줄 때 사용됩니다.연산자이름 (한글)의미&&논리 AND모두 참이어야 참||논리 OR한개만 참이어도 참!논리 NOT부정 (true → false, false → true)✅ && (AND 연산자)두 조건이 모두 참(true)일 때만 결과가 참이 됩니다.두 조건중 하나라도 거짓(false)일 경우에는 거짓이 됩니다. console.log(true && false); // falseconsole.log(true && true); // true✨ 실전 예시const age = 20;const hasID = true;// 나이가 18세 이상 **그리고** 신분증이 있을 때만 입장이 가능if (age .. 공감수 0 댓글수 0 2025. 3. 22.
[JS][연산자] 비교 연산자 비교 연산자란?비교 연산자는 두 값을 비교해서 true(참)인지 false(거짓)인지 판단하는 데 사용이 됩니다.예를 들어 숫자 두 개가 같은지, 문자열이 동일한지, 어떤 값이 더 큰지 등을 비교할 때 사용합니다. 비교 연산의 결과는 항상 참(true), 거짓(false)의 boolean값이 됩니다. ✅ 자주 쓰이는 비교 연산자들1. == (느슨한 동등)두 값이 같은지 확인합니다. 자료형은 무시하고 비교합니다.느슨한 동등 비교 연산자는 다양한 타입간에 비교 연산시 ‘자동 형변환’을 시도하면서 비교합니다.이로인하여 “예상치 못한 결과”를 낼 수도 있기 때문에, “엄격한 동등 비교 연산자”를 사용하는게 더욱 좋습니다. console.log(5 == 5); // true console.log(5 == "5").. 공감수 1 댓글수 0 2025. 3. 22.
[JS][연산자] 대입 연산자 JavaScript에서 대입 연산자(Assignment Operators)는 변수에 값을 할당하거나 변경할 때 사용됩니다.이번 글에서는 JavaScript의 대입 연산자를 초보자도 쉽게 이해할 수 있도록 정리해 보겠습니다.1. 기본 대입 연산자 (=)대입 연산자의 가장 기본적인 형태는 =이며, 오른쪽 값을 왼쪽 변수에 저장하는 역할을 합니다.=변수에 값을 할당let a = 5;a에 5를 저장📌 예제let x = 10; // x에 10을 할당let y = x; // y에 x의 값(10)을 할당console.log(y); // 10 출력 2. 복합 대입 연산자복합 대입 연산자는 변수의 현재 값을 연산한 후 같은 변수에 다시 할당하는 역할을 합니다.+=더하고 할당x += 3;x = x + 3-=빼고 할당x.. 공감수 1 댓글수 0 2025. 3. 20.
[JS][연산자] 산술 연산자 JavaScript에서 산술 연산자(Arithmetic Operators)는 숫자 값을 연산할 때 사용됩니다.주요 산술 연산자는 다음과 같습니다.🔢 1. 기본 산술 연산자기본적인 덧셈,뺄셈,곱셈,나눗셈 연산이 있습니다.추가적으로 나머지 연산으로 나머지를 구할수 있고 ES6에서는 거듭제곱 연산이 추가되었습니다. +덧셈5 + 38-뺄셈10 - 46*곱셈6 * 212/나눗셈9 / 33%나머지10 % 31**거듭제곱 (ES6)2 ** 38🔄 2. 증가/감소 연산자증감 연산자는 계산이후 덧셈/뺄셈을 해주거나 또는, 덧셈/뺄셈을 해준 이후 계산에 사용할 수 있습니다. ++1 증가 (증가 연산자)let a = 5; a++;a = 6--1 감소 (감소 연산자)let b = 3; b--;b = 2📌 전위 / 후위 .. 공감수 1 댓글수 0 2025. 3. 17.
[JS] 연산자(Operators) 📌 JavaScript 연산자(Operators) 가이드 🚀JavaScript에서 연산자(Operator)는 값을 계산하거나 조작하는 데 사용되는 기호입니다.이번 글에서는 연산자의 개념과 종류, 그리고 활용법을 예제와 함께 정리해 보겠습니다.1️⃣ 연산자란 무엇인가?📌 연산자의 개념연산자(Operator)는 값을 연산(계산)하거나 비교, 논리적 조작을 수행하는 기호입니다.프로그래밍에서 변수를 다루고 조작할 때 필수적인 요소입니다. 📌 연산자의 기본 구조let result = 10 + 5;+ → 연산자 (Operator)10, 5 → 피연산자 (Operand)result → 연산 결과를 저장하는 변수2️⃣ JavaScript 연산자의 종류연산자는 크게 7가지 유형으로 분류할 수 있습니다.연산자 종류.. 공감수 1 댓글수 0 2025. 3. 17.
[JS][자료형] 객체(Object) 기본 JavaScript 객체(Object) 가이드 🚀초보자를 위한 쉬운 개념 정리!JavaScript에서 가장 중요한 개념 중 하나가 객체(Object) 입니다.이번 글에서는 객체가 무엇인지, 어떻게 사용하는지, 그리고 객체로 무엇을 할 수 있는지 차근차근 설명해보겠습니다.1️⃣ 객체(Object)란 무엇인가?📌 객체란?객체(Object)는 데이터를 구조적으로 저장하는 방식으로, 여러 개의 값을 하나로 묶을 수 있습니다.배열이 순서대로 값들을 저장하는 반면, 객체는 key: value (키-값) 형태로 데이터를 저장합니다.📌 객체의 기본 구조const person = { name: "홍길동", age: 25, job: "개발자"};name, age, job → 속성(프로퍼티, Prope.. 공감수 0 댓글수 0 2025. 3. 16.
[JS][자료형] 배열(Array) 기본 배열이란?여러 데이터를 순서대로 저장할 수 있는 객체타입의 데이터 구조입니다.⇒ 박스 여러개를 일렬로 나열해 둔 것.하나의 변수 안에 여러개의 데이터가 존재하며 각 데이터는 번호(index)로 접근 가능합니다. 기본적으로 Javascript에서의 배열은 한 배열안에 여러개의 자료형을 모두 넣을 수 있습니다. 선언 방법배열을 선언하는 방식에는 대표적으로 리터럴 방식과 생성자를 이용하는 방식이 있습니다.리터럴 방식으로 선언하기리터럴 : 그 자체로 값을 의미하는 표현식const arr = [1, 2, 3, 4, 5];가장 많이 사용하는 방법이며 직관적입니다.생성자를 이용하여 선언하기const arr = new Array(1, 2, 3, 4, 5); // 생성자 방식 선언특별한 경우에 많이 사용합니다.(예시 :.. 공감수 1 댓글수 0 2025. 3. 16.
[JS][자료형] 자료형 기본 Javascript에서 자료형이란 변수에 저장할 수 있는 값의 종류를 의미합니다.크게 원시 자료형(Primitive)과 참조 자료형(Reference) 두가지로 나눌 수 있습니다.원시 자료형원시 자료형은 값 자체가 변하지 않는 불변의 데이터입니다. 주요 원시 자료형은 다음과 같습니다Number : 숫자 타입 ( 42, 3.14, 0 , … )String : 문자 타입 ( “가나다라”, “ABC”, … )Boolean : 논리 타입 ( true, false )Null : 값 없음 (null)Symbol : 고유하고 변경 불가능한 값BigInt : 매우 큰 정수참조 자료형참조 자료형은 객체를 가리키며, 데이터 자체가 메모리 상의 다른 위치에 저장됩니다. 주요 참조 자료형은 다음과 같습니다. Object: 여.. 공감수 1 댓글수 0 2025. 3. 3.
[JS] 변수와 상수 프로그래밍에서 변수와 상수는 "데이터를 저장하는 기본 단위"입니다. 변수나 상수가 없을 경우 데이터를 저장할 수 없으니 계산이 많거나복잡한 로직은 물론이고 코드를 길게 작성하는 것도 불가능 할 것입니다. 변수에 대해 쉽게 생각하자면, 이름표를 붙인 상자에 원하는 값을 저장한다고 생각하시면 됩니다. (이름표:변수명, 원하는 값: Data) 변수(Variable) 변수를 하나의 저장 공간으로 볼 수 있으며, 프로그램 실행 중에 데이터(값)를 저장하고 필요에 따라 변경할 수 있습니다.또한 저장공간에 대해 이름을 부여하여 필요할 때 해당 이름을 호출하여 변수를 사용할 수 있습니다.키워드 변수와 상수를 선언할 때 사용하는 키워드는 var, let, const 세 가지가 있으며 각각 특성과 용도가 다릅니다.기본적.. 공감수 1 댓글수 0 2025. 3. 3.
JS 코드 실행하기 JS를 공부하기에 앞서, 일단 실행할 환경을 먼저 구성해야합니다.코드를 작성하였다고 하더라도 실제 결과물을 볼 수 없다면 코드가 정상적으로 실행되는지 알 길이 없습니다.웹 개발환경 구축이 아닌 JS코드를 실행하는 방법을 알아보는 시간이므로, 간단히 실행할 수 있는 환경부터 Node.js를 설치하여 실행 환경을 설정하는 방법도 알아보겠습니다. 각 방법별로 간단히 “Hello World”를 출력하는 실습을 해보겠습니다.1. HTML파일에서 실행하기이 방법은 HTML파일내에 JS 코드를 작성하고 index.html을 브라우저에서 열어 확인하는 방법입니다. 1. 원하는 폴더에 index.html 파일을 생성합니다.2. 아래의 코드를 입력합니다. (메모장,notepad, vscode 등 text editor를 이.. 공감수 2 댓글수 0 2025. 3. 3.
Javascript 개요 JavaScript(JS)는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어로 동적인 웹 페이지를 만들기 위해 빠져서는 안될 요소입니다.HTML로는 뼈대를 구성하고 CSS를 이용하여 외관을 꾸며주며 Javascript를 이용하여 동적인 페이지를 만들 수 있습니다.Javascript가 없었더라도 웹 페이지를 구성할 수는 있지만,사용자에 의해서 동적으로 동작하는 웹이 아닌 단지 문서나 책을 읽는다는 느낌의 웹 페이지만 구성할 수 있었을 것입니다.역사초창기에는 ‘Mocha’와 ‘LiveScript’라는 이름으로 불렸지만 얼마 후 Javascript라는 이름으로 개명 후 현재까지 이어지고 있습니다.이제 막 개발에 입문하였거나 비개발자의 경우 Java와 Javascript를 혼동하는 경우가 있는데이름만 비슷할 뿐.. 공감수 3 댓글수 2 2025. 3. 3.
개발에서 반드시 필요한 테스트에 대해 알아보자. 개발을 하다보면 테스트의 중요성에 대해서 참 많이 듣게 됩니다. 다른 선임 개발자들이나 개발 관련 서적, 블로그, 개발 관련 커뮤니티 등 여러곳에서요. 하지만 막상 실무에서 사용하려 보면 여러가지 테스트 방식에 대해서나.. 사용하려는 툴이나.. 뭐 복잡한게 많기 때문에 일단 일정에 맞춰야하니 무식하게 엉덩이 붙이고 노가다로 테스트를 진행하기 일쑤입니다. 이런식으로 테스트를 하다보니 회귀 테스트가 필요할 때는 며칠전에 했던 수백개의 테스트 케이스를 또 돌려보고.. 며칠 뒤에 또 돌려보고.. 사실 정말 불필요하게 테스트를 하는 것이라고 생각하지만 막상 일이 닥치면 가장 빠르고 무식한 방법을 택하게 되는... 😂이러한 문제점을 해결하기 위해서 늦게나마 테스트에 대해서 공부를 해보려합니다. 오늘은 간단히 테.. 공감수 2 댓글수 2 2024. 11. 24.
클라우드 컴퓨팅 [IaaS/PaaS/SaaS] 개요 개발을 하며 내가 제작한 웹 애플리케이션을 남들이 이용하게끔 배포하거나 API서버를 배포해서 테스트 해야 하는 경우가 있습니다. 로컬 컴퓨터에 웹 서버를 설치하고 포트 포워딩을 통해 로컬 웹서버에 접근이 가능하게 해 줄 수 있지만 여러 가지 설정과 로컬 컴퓨터의 웹서버를 항상 실행시키고 있어야 한다는 문제점이 있었습니다. 이를 해결하기 위해 클라우드 컴퓨팅 서비스를 이용하여 클라우드 서버에 배포를 하여 테스트하는 경우가 많았습니다. 배포 할배포할 플랫폼을 찾으며 IaaS/PaaS/SaaS 등의 용어를 접했지만 당장 최대한 편하게 배포할 수 있는 플랫폼만 찾고 해당 용어들이 무얼 뜻하는지 상관없이 사용하기만 했습니다. 그러다보니 새로운 플랫폼을 찾을 때 이 플랫폼에서 어떤 서비스를 제공하는지 직관적으.. 공감수 0 댓글수 0 2024. 4. 7.
SVG(Scalable Vector Graphics)에 대해 알아보자 개요 웹 페이지 작업을 하다 보면 svg파일을 이용하여 로고나 아이콘을 표현할 때가 있습니다. 사용을 하면서도 로고나 아이콘은 주로 svg파일을 이용한다고는 알고있지만, jpg/jepg/png등을 왜 사용하지 않는지에 대해서는 크게 생각해 보지 않았습니다. 마침 개인 프로젝트를 진행중 SVG를 이용할 일이 있어 왜 SVG를 이용하는지, 어디에 사용해야 유리할지 마지막으로 웹에서 SVG를 어떻게 적용하는지에 정리해보려 합니다. SVG란? (Scalable Vector Graphics) SVG는 XML 기반의 벡터 이미지 포맷으로 크기 조정이 자유롭다는 특징을 가지고 있습니다. 픽셀을 이용한 래스터 파일과 달리 확대하거나 축소해도 이미지의 품질이 저하되지 않습니다. 이는 SVG가 픽셀이 아닌 수학적 방정식으.. 공감수 0 댓글수 2 2024. 4. 7.
[LINUX] Shell Script - Hello World 출력하기 - 개요 - 경로 생성하기 - 파일만들기 & 에디터 들어가기 - 실행 개요 프로그래밍의 시작은 Hello World부터.. 쉘 스크립트를 이용하여 실행하면 터미널에 "Hello World"를 출력하는 스크립트를 작성해보았다. 경로 생성 쉘 스크립트를 작성할 별도의 폴더를 워크스페이스 하위에 linux라는 이름으로 만들었다. mkdir linux 파일만들기 & 에디터 들어가기 vi hello.sh 실행 chmod 775 hello.sh ./hello.sh # or sh hello.sh chmod 명령어는 파일의 읽기, 쓰기, 실행 등의 권한을 변경하는 명령어인데, ./hello.sh 와 같이 실행하려면 권한 변경이 필요하다. 권한을 변경하지 않고 실행하면 아래와 같은 경고문구가 표출된다. zsh: perm.. 공감수 0 댓글수 0 2023. 3. 17.
[LINUX] Shell Script - 개념 및 활용 가능한 사례 - 개요 - 쉘스크립트란 - 활용 사례 - 작성 시 주의점 개요 Mac을 구입하기 전 꼭 공부해보고 싶었던 것 중 하나가 Shell Script였다. Front-End 개발자로 일하면서 굳이 Linux나 Shell Script를 공부할 필요가 있을까 라는 생각을 했었는데, 연차가 쌓이다 보니 특정 업무를 자동화하거나 , 배포할 때 사용해야 하는 일이 잦아졌다. 지금까지는 선배 개발자님들의 도움을 받아 어찌어찌 넘어갔지만, 이젠 후배 개발자에서 선배 개발자가 되어가는 입장으로서 전문가처럼은 아니더라도 필요한 순간에 인터넷을 찾아가며 작성 할 수 있을 정도의 지식은 가지고 있어야 한다 생각되어 정리를 시작해보려한다. 쉘 스크립트? Unix, 리눅스와 같은 유닉스 계열 운영체제에서 사용하는 스크립트 언어이다... 공감수 0 댓글수 0 2023. 3. 16.
[LINUX] 리눅스에 대하여 알아보자 개요 최근 Mac을 구입하였다. Mac을 구매하면 해보고 싶었던 것 중 하나가 Linux에 관련하여 공부를 해보는 것이었다. 깊게 공부한다기보다는 대략적인 개념과 명령어, Shell Script 등을 실습해 보고 정리하는 위주로 알아보려 한다. 리눅스 UNIX 운영체제 기반으로 개발된 오픈소스 운영체제이다. 기존의 유닉스는 높은 성능의 하드웨어를 기반으로 설계되었지만 리눅스는 커널 및 명령어 체계를 변경하여 일반인들이 사용하기 쉽게 하였다. 여러 개의 커널, 유닐리티, 시스템도구, 라이브러리 등을 포함하고 있으며 다양한 하드웨어 플랫폼에서 동작할 수 있다. 특징 오픈소스 오픈소스 운영체제로서 누구든지 소스코드를 볼 수 있고, 수정이 가능하다. 이를 통해 누구나 개발에 참여하거나 자신의 운영체제를 만들 수.. 공감수 0 댓글수 0 2023. 3. 15.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.