분류 전체보기
-
커맨드 명령어(Command Line Interface, CLI)공부 2023. 5. 22. 15:31
커맨드 명령어 사용법 1. 커맨드 명령어란? 커맨드 명령어(Command Line Interface, CLI)는 컴퓨터와 상호작용하기 위해 사용되는 텍스트 기반 인터페이스입니다. CLI를 통해 운영체제나 프로그램에 명령을 내리고 작업을 수행할 수 있습니다. 2. 기본적인 커맨드 명령어 CLI에서 자주 사용되는 몇 가지 기본적인 커맨드 명령어를 알아보겠습니다. 2.1. 디렉토리 관련 명령어 $ ls $ cd $ mkdir $ rmdir ls: 현재 디렉토리의 파일과 폴더 목록을 보여줍니다. cd: 디렉토리를 변경합니다. mkdir: 새로운 디렉토리를 생성합니다. rmdir: 디렉토리를 삭제합니다. 2.2. 파일 관련 명령어 $ touch $ cp $ mv $ rm touch: 새로운 파일을 생성하거나 파일..
-
JavaScript DOM에 대한 이해Front-end/Javascript 2023. 5. 21. 22:19
개요 JavaScript는 Document Object Model (DOM)을 통해 HTML 문서의 요소들을 조작할 수 있습니다. DOM은 웹 페이지의 구조를 트리 형태로 표현하고, 각 요소에 대한 접근과 수정을 가능하게 합니다. 이번 글에서는 DOM의 다양한 기능과 주요 메소드에 대해 알아보겠습니다. 1. getElementById getElementById 메소드는 주어진 id 속성 값에 해당하는 요소를 가져옵니다. const element = document.getElementById('myElement'); 위의 코드에서 getElementById를 사용하여 'myElement'라는 id를 가진 요소를 가져옵니다. 2. getElementsByTagName getElementsByTagName 메..
-
자바스크립트 반복문Front-end/Javascript 2023. 5. 18. 21:10
1. for문 for문은 초기화, 조건식, 증감식으로 구성되며, 초기화는 반복을 시작하기 전에 한 번만 실행되고, 조건식이 true인 동안 반복되고, 증감식은 각 반복이 끝난 후 실행됩니다. for문은 일반적으로 특정 횟수만큼 반복하거나 배열의 요소를 순회할 때 사용됩니다. 예를 들어, 0부터 4까지의 숫자를 출력하는 for문을 작성해보겠습니다. for (let i = 0; i < 5; i++) { console.log(i); } 위의 예제에서는 i라는 변수를 0으로 초기화하고, i가 5보다 작을 때까지 반복하며, 반복할 때마다 i를 1씩 증가시킵니다. 결과적으로 0부터 4까지의 숫자가 출력됩니다. 2. while문 while문은 조건식이 true인 동안 반복됩니다. while문은 주어진 조건이 참일 때..
-
뉴스와 날씨 정보를 가져오는 세 가지 방법Front-end/Javascript 2023. 5. 17. 19:57
이 글에서는 뉴스와 날씨 정보를 가져오는 세 가지 방법에 대해 알아보겠습니다. 첫 번째 방법은 fetch와 then을 사용한 비동기 처리입니다. 두 번째 방법은 Promise.all을 사용한 병렬 처리이고, 세 번째 방법은 async/await를 사용한 비동기 처리입니다. 1. fetch와 then을 사용한 비동기 처리 첫 번째 방법은 fetch와 then을 사용하여 비동기적으로 데이터를 가져오고 처리하는 방법입니다. // 최신 뉴스 데이터를 가져오기 위한 URL const newsURL = 'http://localhost:4999/data/latestNews'; // 날씨 정보를 가져오기 위한 URL const weatherURL = 'http://localhost:4999/data/weather'; ..
-
MacOS Visual Studio Code 단축키카테고리 없음 2023. 5. 15. 23:19
1. 개요 Visual Studio Code(이하 VS Code)는 많은 개발자들이 사용하는 텍스트 편집기입니다. VS Code는 풍부한 기능과 확장성을 제공하여 개발 작업을 더욱 효율적으로 수행할 수 있도록 도와줍니다. 이번 글에서는 MacOS 환경에서 사용하는 VS Code의 주요 단축키를 알아보겠습니다. 2. 에디터 관련 단축키 2.1 파일 관련 단축키 // 파일 열기 Command + O // 파일 저장 Command + S // 파일 닫기 Command + W // 새 파일 생성 Command + N 위의 코드 예제는 파일을 열고, 저장하고, 닫고, 새로운 파일을 생성하는 단축키입니다. Command 키와 해당 알파벳 키를 함께 누르면 해당 기능이 실행됩니다. 2.2 편집 관련 단축키 // 복사..
-
JavaScript의 split() 메서드Front-end/Javascript 2023. 5. 15. 18:01
split() 메서드란? JavaScript에서 split() 메서드는 문자열을 특정 구분자를 기준으로 분리하여 배열로 반환하는 메서드입니다. split() 메서드는 매우 유용하며, 문자열을 분석하고 처리하는 데에 많이 활용됩니다. split() 메서드의 구문 str.split([separator[, limit]]) split() 메서드는 다음과 같은 매개변수를 가질 수 있습니다. separator (선택 사항): 문자열을 분리할 기준이 되는 구분자입니다. 이 매개변수를 생략하면 기본값인 공백(space)이 사용됩니다. separator 매개변수는 문자열, 정규식 패턴 등을 입력할 수 있습니다. limit (선택 사항): 반환할 배열의 최대 길이입니다. 이 매개변수를 생략하면 모든 분리된 요소를 포함하는..
-
프로토타입과 프로토타입 체인Front-end/Javascript 2023. 5. 11. 21:26
JavaScript에서 프로토타입과 프로토타입 체인 자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍 언어입니다. 프로토타입은 객체 생성자 함수를 통해 생성된 모든 객체에 공유되는 속성과 메서드의 집합입니다. 이러한 프로토타입 체인은 객체 간에 상속을 구현하고 코드 재사용을 촉진합니다. 1. 프로토타입 프로토타입은 JavaScript 객체의 기본 템플릿입니다. 모든 JavaScript 객체는 프로토타입을 가지며, 객체 생성자 함수를 통해 프로토타입을 정의할 수 있습니다. 예를 들어, 다음은 Person 객체의 프로토타입을 정의하는 코드입니다. function Person(name) { this.name = name; } Person.prototype.sayHello = function() { cons..
-
객체 지향 프로그래밍(OOP)에 대한 이해Front-end/Javascript 2023. 5. 11. 16:33
객체 지향 프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로, 현실 세계의 객체를 모델링하여 소프트웨어를 개발하는 방법입니다. 이번에는 OOP에 대해 이해한 내용을 나만의 언어로 기록하고, OOP의 기본 개념인 캡슐화, 추상화, 상속, 다형성 등에 대해 자세히 알아보겠습니다. OOP의 기본 개념 캡슐화 (Encapsulation) 캡슐화는 객체의 속성과 행위를 하나로 묶고, 외부에서의 접근을 제한하는 것입니다. 이를 통해 객체의 내부 구현을 숨기고, 객체 간의 상호작용을 안전하게 유지할 수 있습니다. 추상화 (Abstraction) 추상화는 객체의 복잡한 내부 구조를 감추고, 중요한 부분만 강조하여 간단하게 만드는 것입니다. 이를 통해 사용자는 객체의 기능에만 집중할 수 있으며, 객체의 내부 구조를 알 ..
-
클래스와 인스턴스 이해하기Front-end/Javascript 2023. 5. 11. 14:15
이번 글에서는 클래스와 인스턴스에 대해 이해한 내용을 나만의 언어로 자유 형식으로 기록해보겠습니다. ES5와 ES6의 클래스 작성 문법, 생성자 함수, 그리고 new 키워드도 함께 알아보도록 하겠습니다. 1. 클래스와 인스턴스란? 클래스는 객체를 만들기 위한 템플릿이라고 생각할 수 있습니다. 객체는 클래스에서 정의된 속성과 메서드를 상속받아 생성됩니다. 이렇게 생성된 객체를 인스턴스라고 부릅니다. 2. ES5 클래스 작성 문법 ES5에서는 클래스를 생성자 함수로 작성할 수 있습니다. 생성자 함수는 일반 함수와 동일한 문법을 가지고 있습니다. 예를 들어, 아래와 같은 형태의 생성자 함수를 작성할 수 있습니다. function Person(name, age) { this.name = name; this.ag..
-
HTML 태그: 웹페이지를 만드는 핵심 요소Front-end/HTML & CSS 2023. 5. 9. 19:11
이번 글에서는 HTML의 태그와 주요 요소들을 살펴보겠다. HTML 태그는 웹페이지에서 사용되는 구성 요소로, 태그를 사용하여 각 요소의 역할을 정의한다. HTML 태그는 다양한 종류가 있으며, 모든 태그는 '' 기호로 감싸져 있다. 예를 들어, 태그는 웹페이지에서 제목을 정의하는 역할을 한다. HTML 태그는 크게 블록 태그와 인라인 태그로 나눌 수 있다. 블록 태그는 웹페이지에서 블록을 형성하는 요소들을 정의하며, 인라인 태그는 텍스트 내에서 사용되는 요소들을 정의한다. 1. 블록 태그 : 문서에서 논리적인 영역을 지정 ~: 제목을 표시 : 문장을 표시 , : 리스트를 표시 : 표를 표시 2. 인라인 태그 : 하이퍼링크를 지정 : 이미지를 표시 : 문장에서 작은 논리적인 영역을 지정 HTML 태그는 ..