본문 바로가기
반응형

분류 전체보기276

[JavaScript 문법] 18일차: 객체 지향 프로그래밍 객체 지향 프로그래밍이란?객체 지향 프로그래밍(Object-Oriented Programming, OOP)은 데이터를 객체라는 단위로 묶어 프로그래밍하는 패러다임입니다. OOP의 핵심 개념은 캡슐화, 상속, 다형성, 추상화입니다. 객체 지향 프로그래밍을 사용하면 코드의 재사용성, 유지보수성, 가독성을 높일 수 있습니다.캡슐화캡슐화(Encapsulation)는 객체의 데이터를 외부로부터 보호하고, 객체의 내부 상태를 외부에서 직접 접근하지 못하도록 하는 것입니다. 이를 통해 데이터의 무결성을 유지하고, 객체의 내부 구현을 숨길 수 있습니다.예제class Person { constructor(name, age) { this._name = name; // _를 붙여서 프라이빗 속성임을 나타냄 th.. 2024. 8. 18.
[웹 디자인] 18일차: 그리드 레이아웃을 이용한 반응형 디자인 그리드 레이아웃이란?그리드 레이아웃(Grid Layout)은 CSS의 강력한 2차원 레이아웃 시스템으로, 행과 열을 사용하여 웹 페이지의 요소들을 배치할 수 있게 해줍니다. 그리드 레이아웃을 사용하면 복잡한 레이아웃을 쉽게 구현할 수 있으며, 반응형 디자인에도 매우 유용합니다.그리드 컨테이너와 아이템그리드 컨테이너: display: grid를 설정한 요소입니다.그리드 아이템: 그리드 컨테이너 안에 있는 모든 직계 자식 요소입니다.예제: Item 1 Item 2 Item 3 Item 4.container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;}반응형 그리드 레이아웃 예제기본 2열 레이아웃화면 크기가 작아질 때 한 .. 2024. 8. 18.
[JavaScript 문법] 17일차: 함수형 프로그래밍 함수형 프로그래밍이란?함수형 프로그래밍(Function Programming)은 프로그램의 구성 요소를 순수 함수로 작성하고, 상태와 가변 데이터를 최소화하며, 데이터를 변환하는 방식을 강조하는 프로그래밍 패러다임입니다. 이는 코드의 가독성을 높이고, 오류를 줄이며, 테스트와 유지보수를 용이하게 만듭니다.순수 함수순수 함수(Pure Function)는 동일한 입력에 대해 항상 동일한 출력을 반환하며, 외부 상태를 변경하지 않는 함수입니다. 예제function add(a, b) { return a + b;}console.log(add(2, 3)); // 5불변성불변성(Immutability)은 데이터가 변경되지 않음을 의미합니다. 함수형 프로그래밍에서는 데이터의 불변성을 유지하는 것이 중요합니다. 예제c.. 2024. 8. 17.
[웹 디자인] 17일차: 플렉스박스를 이용한 반응형 레이아웃 플렉스박스란?플렉스박스(Flexbox)는 CSS의 레이아웃 모델로, 컨테이너 안의 아이템을 쉽게 정렬하고 배치할 수 있게 해줍니다. 플렉스박스는 반응형 디자인을 구현하는 데 매우 유용하며, 다양한 화면 크기와 기기에 맞게 레이아웃을 조정할 수 있습니다.플렉스 컨테이너와 아이템플렉스 컨테이너: display: flex를 설정한 요소입니다.플렉스 아이템: 플렉스 컨테이너 안에 있는 모든 직계 자식 요소입니다.예제: Item 1 Item 2 Item 3.container { display: flex;}플렉스박스를 이용한 기본 레이아웃주축 방향 설정 (flex-direction)플렉스 컨테이너의 주축 방향을 설정합니다.row: 기본값, 가로 방향column: 세로 방향예제:.container { dis.. 2024. 8. 17.
[JavaScript 문법] 16일차: 고차 함수 고차 함수란?고차 함수(Higher-Order Function)는 다음 중 하나를 만족하는 함수입니다:함수를 인수로 받을 수 있는 함수.함수를 반환할 수 있는 함수.고차 함수는 함수형 프로그래밍에서 중요한 역할을 하며, 코드의 재사용성을 높이고 가독성을 개선하는 데 유용합니다.콜백 함수콜백 함수는 다른 함수의 인수로 전달되어 실행되는 함수입니다.예제function greet(name) { console.log('Hello, ' + name);}function processUserInput(callback) { let name = 'Alice'; callback(name);}processUserInput(greet); // 'Hello, Alice'배열 고차 함수JavaScript의 배열 메서드는 고.. 2024. 8. 16.
[웹 디자인] 16일차: 미디어 쿼리 사용법 미디어 쿼리란?미디어 쿼리는 특정 조건(예: 화면 크기, 해상도, 방향)에 따라 다른 CSS 스타일을 적용할 수 있게 해주는 CSS 기술입니다. 미디어 쿼리를 사용하면 다양한 기기와 화면 크기에 맞춰 웹 페이지의 레이아웃과 스타일을 조정할 수 있습니다.미디어 쿼리 기본 문법미디어 쿼리는 @media 규칙을 사용하여 정의합니다.@media (조건) { /* 조건이 참일 때 적용할 CSS 스타일 */}예제:/* 기본 스타일 */.container { background-color: blue;}/* 화면 크기가 600px 이하일 때 적용 */@media (max-width: 600px) { .container { background-color: red; }}미디어 쿼리 조건미디어 쿼리는 다양한 조.. 2024. 8. 16.
[JavaScript 문법] 15일차: this 키워드 이해하기 this 키워드란?this 키워드는 함수가 호출될 때, 해당 함수가 속한 객체를 참조합니다. this의 값은 함수가 어떻게 호출되었는지에 따라 달라집니다.전역 문맥에서의 this전역 문맥에서는 this는 전역 객체를 참조합니다. 브라우저 환경에서는 전역 객체가 window입니다.예제console.log(this); // window 객체함수 문맥에서의 this일반 함수에서는 this가 전역 객체를 참조합니다. 엄격 모드에서는 undefined를 참조합니다.예제function showThis() { console.log(this);}showThis(); // window 객체 (엄격 모드에서는 undefined)메서드 문맥에서의 this메서드 내부에서는 this가 해당 메서드를 호출한 객체를 참조합니다... 2024. 8. 15.
[웹 디자인] 15일차: 반응형 디자인 소개 반응형 디자인이란?반응형 디자인(Responsive Design)은 다양한 기기와 화면 크기에 맞게 웹 페이지의 레이아웃을 조정하는 웹 디자인 접근 방식입니다. 반응형 디자인을 사용하면 데스크탑, 태블릿, 모바일 기기 등 모든 기기에서 최적의 사용자 경험을 제공할 수 있습니다.반응형 디자인의 중요성사용자 경험 향상: 다양한 기기에서 일관된 사용자 경험을 제공합니다.SEO 개선: 검색 엔진에서 모바일 친화적인 사이트로 인식되어 순위가 올라갈 수 있습니다.유지 보수 용이: 하나의 코드베이스로 여러 기기를 지원하므로 유지 보수가 쉽습니다.반응형 디자인의 핵심 요소뷰포트 설정뷰포트는 사용자가 웹 페이지를 볼 때의 가상 창입니다. 뷰포트를 설정하여 다양한 기기에서 웹 페이지가 올바르게 표시되도록 할 수 있습니다... 2024. 8. 15.
[JavaScript 문법] 14일차: 모듈 모듈이란?모듈은 코드의 일부를 독립적으로 분리하여 재사용 가능하게 만드는 방법입니다. 모듈을 사용하면 코드의 유지보수와 관리가 용이해집니다. ES6에서는 import와 export 키워드를 사용하여 모듈을 정의하고 사용할 수 있습니다.모듈 정의모듈은 파일 단위로 정의되며, export 키워드를 사용하여 모듈 외부로 내보낼 수 있습니다.기본 내보내기 (default export)기본 내보내기는 모듈 당 하나만 가질 수 있으며, export default 키워드를 사용합니다.예제: math.js// math.jsexport default function add(a, b) { return a + b;}예제: main.js// main.jsimport add from './math.js';console.log.. 2024. 8. 14.
[웹 디자인] 14일차: 그리드 레이아웃(Grid Layout) 그리드 레이아웃(Grid Layout)이란?CSS 그리드 레이아웃은 2차원 레이아웃 시스템으로, 행과 열을 사용하여 웹 페이지의 요소들을 배치합니다. 그리드 레이아웃은 복잡한 레이아웃을 더 쉽게 구현할 수 있게 해주며, 유연하고 강력한 레이아웃 제어 기능을 제공합니다.그리드 컨테이너 설정display: grid: 요소를 그리드 컨테이너로 설정합니다.display: inline-grid: 인라인 그리드 컨테이너로 설정합니다.예제:.container { display: grid;} 아이템 1 아이템 2 아이템 3그리드 컨테이너 속성grid-template-columns와 grid-template-rows그리드의 열과 행의 크기를 설정합니다.예제:.container { display: grid; g.. 2024. 8. 14.
반응형

티스토리툴바