Front-end/javaScript

과제 개요HTML5, CSS3, JavaScript 등을 활용하여 본인을 소개하는 페이지를 만든다.개발자 웹 포트폴리오의 예시를 많이 참조해보고 본인의 웹 포트폴리오를 만든다면? 이라고 가정하고 페이지를 만든다.채워지는 컨텐츠는 사실에 입각해서 작성해도 되고 또는 앞으로 목표하는 바를 가정하여 작성해도 된다.Figma를 통한 사전 프로토타이핑 작업 후 동일한 화면을 구현하는 것을 목표로 한다. 기획 및 Figma🪄컨셉 : 코드치는 외계인코드가 외계어처럼 느껴지지만, 언젠가는 잘 해낼거라는 자신감을 담아서 나를 외계인으로 설정했다. 아이디어 스케치  Figmahttps://www.figma.com/design/54nGyVGVVY0evaBwKyG3bi/Untitled?node-id=0-1&node-type..

JavaScript ES6는 코드의 간결성과 효율성을 높이기 위해 다양한 새로운 기능을 도입하였다. 그중 화살표 함수, 스프레드 문법, 그리고 구조 분해 할당은 개발자의 생산성을 높이는 중요한 요소들로, 함수 정의를 간소화하고 데이터를 다루기 쉽게 만들어준다. 1. 화살표 함수 (Arrow Function) 화살표 함수는 ES6에서 도입된 함수 표현식의 새로운 방식으로, 기존 함수 정의보다 간결하게 작성할 수 있다. 특히 함수가 한 줄일 경우 문법을 대폭 줄일 수 있다는 장점이 있다. 1.1 화살표 함수 기본 문법화살표 함수는 항상 익명 함수로 정의된다. function 키워드를 생략하고, =>를 사용해 함수의 몸체를 표현한다.// 기존 함수 정의 방식let message = function () { ..

avaScript의 ES6(ECMAScript 2015) 이후의 버전에서는 새로운 변수 선언 방식과 템플릿 리터럴 기능이 추가되어, 코드의 가독성과 개발 효율성이 크게 향상되었다. 1. 변수 선언 (let과 const) JavaScript에서는 var 외에도 let과 const를 사용하여 변수를 선언할 수 있다. 이 두 가지는 var와는 다른 특징을 가지며, 보다 안전하고 예측 가능한 코드를 작성할 수 있게 돕는다. 1.1 let블록 스코프: let은 블록 스코프(block scope)를 가지며, 이는 중괄호({}) 내에서만 접근 가능하다는 의미이다. 이를 통해 변수의 범위를 제한하고, 예상치 못한 변수 재할당 문제를 방지할 수 있다.let x = 10;if (true) { let x = 20; /..

JavaScript 비동기 처리와 BOM JavaScript는 싱글 스레드 언어로 동기적인 코드 처리가 기본이다. 하지만 웹 애플리케이션에서는 사용자 경험을 높이기 위해 비동기적으로 작업을 처리하는 것이 중요하다. 또한, JavaScript는 브라우저 환경에서 BOM(Browser Object Model)을 통해 브라우저 창과 관련된 다양한 기능을 제공한다.  1. 비동기 처리JavaScript에서 비동기 처리는 웹 애플리케이션의 사용자 경험을 개선하는 데 핵심적인 역할을 한다. 비동기적인 작업 처리는 코드의 실행 흐름을 막지 않고 다음 작업으로 넘어갈 수 있도록 하여 더 매끄럽고 반응성 있는 웹 애플리케이션을 만드는 데 기여한다. JavaScript에서 비동기 처리를 구현하는 여러 방법들이 있으며, 대..

이벤트 처리란 브라우저에서 사용자의 상호작용(클릭, 입력 등)을 감지하여 그에 따라 특정 동작을 수행하는 것이다. JavaScript는 다양한 방식으로 이러한 이벤트를 처리할 수 있으며, 이벤트 처리의 핵심 개념으로는 이벤트 핸들러, 이벤트 객체, 이벤트 전파, 이벤트 기본 동작 등이 있다. 1. 이벤트 핸들러 등록 방식이벤트가 발생했을 때 호출될 함수인 이벤트 핸들러(Event Handler*를 등록하는 방법에는 세 가지가 있다​. 1.1 이벤트 핸들러 어트리뷰트 방식HTML 요소에 on 접두사를 사용한 이벤트 핸들러 어트리뷰트를 직접 지정하여 함수를 호출하는 방식이다.이 방식은 HTML과 JavaScript 코드가 섞여 있어 유지보수가 어렵다는 단점이 있다클릭해보세요   1.2 이벤트 핸들러 프로퍼티..

1. 노드 수정innerHTML: innerHTML 프로퍼티를 사용하면 요소 노드의 HTML 마크업을 취득하거나 변경할 수 있다. HTML을 추가하거나 변경하는 것이 간단하지만, XSS 취약성이 있다는 단점이 있다.const area = document.getElementById('area');area.innerHTML = '변경된 HTML 내용';insertAdjacentHTML(): 특정 위치에 HTML을 삽입하는 메서드로, 기존 요소를 제거하지 않고 효율적으로 새로운 요소를 추가할 수 있다.area.insertAdjacentHTML('beforebegin', '추가된 HTML');createElement() / appendChild(): 새로운 요소 노드를 생성하고, 특정 위치에 자식 노드로 추가한..

JavaScript DOM 개요DOM(Document Object Model)은 브라우저가 HTML 문서를 파싱하여 생성한 문서의 구조와 데이터를 객체로 표현한 트리 자료 구조다. 이를 통해 JavaScript를 사용하여 HTML 요소의 구조와 내용을 동적으로 조작할 수 있다. 1. DOM 트리와 노드DOM은 HTML 문서의 요소를 객체화하여 트리 형태로 구성한다. 이 구조는 DOM 트리라고 하며, 각 객체를 노드(node)라고 한다. HTML 요소는 요소 노드(Element Node)로 변환되며, 각 요소의 속성은 어트리뷰트 노드(Attribute Node), 텍스트는 텍스트 노드(Text Node)로 표현된다​. 2. 노드 취득JavaScript에서는 다양한 방법으로 DOM 요소 노드를 선택하고 조작..

1. 문자열(String)JavaScript에서 문자열(String)은 변경 불가능한 원시 타입이며, 문자열을 다루기 위해 표준 빌트인 객체인 String이 다양한 메서드를 제공한다 1.1 문자열 생성String 객체 생성: new 연산자와 함께 String을 호출하여 문자열 객체를 생성할 수 있다.const str = new String('JavaScript');console.log(str.length); // 문자열 길이 출력  1.2 주요 String 메서드indexOf(): 전달한 값과 일치하는 첫 번째 인덱스를 반환.const str = 'JavaScript';console.log(str.indexOf('a')); // 1includes(): 문자열이 다른 문자열을 포함하고 있는지 여부를 반환...