본문 바로가기
728x90

Front-End Develop10

[자바스크립트] 호이스팅이란 무엇일까? 호이스팅이란 무엇일까요?호이스팅이란 자바스크립트 엔진에서 변수나 함수를 최상단으로 끌어올려서 인식하는 것을 말합니다.따라서 var로 변수를 할당하고 cosole.log를 상단과 하단에 찍어보면 상단에 것은 undefined가 출력되고, 하단에는 1이 출력 됩니다.console.log(a);var a = 1;console.log(a); undefined1 따라서 호이스팅은 변수에 영향을 끼칩니다. 예로들어 변수 var에 영향을 미칩니다.선언은 최상단으로 호이스트이 되지만 할당은 그 자리에 그대로 남아 있습니다.console.log(x); // undefinedvar x = 5;console.log(x); // 5예로 들어 위와 같이 메모리 공간을 var x에 대해 만들지만 할당은 그대로 남아있습니다. 반면.. 2024. 5. 26.
[프로그래머스 자바스크립트] 중복된 숫자갯수, 머쓱이보다 키큰 사람, 두수의 합, 빼기, 나눗셉, 곱셈, 몫 구하기, 분수의 덧셈, 배열 두배 만들기 [중복된 숫자 갯수] 이 코드는 array 배열에서 n의 숫자 가 일치하는 갯수 만큼의 숫자를 반환하는 것이었습니다.따라서 저는 먼저 반복문을 쓰고, if문을 통해서 일치하면 숫자를 더하여 반환하게 코드를 짰습니다.for(initialization, condition, final-expression){} for문의 기본 구조는 위와 같습니다. for와 괄호를 꼭 붙입니다. 이후 중괄호를 엽니다. python과 헛 갈려서 이부분도 잘못 썼던것 같습니다. if문도 다음과 같습니다. if(condition1){} elseif(condition2){} else{}if 문도 조건을 괄호로 꼭 감싸야합니다.저같은 경우 아래와 같이 코드를 쳤기 때문에 실수를 했습니다.function solution(array, n).. 2024. 5. 19.
[프론트엔드] 자바스크립트의 세계: 조건문과 반복문, DOM, 객체지향, Promise,async, await 오늘은 자바스크립트의 다양한 주제를 다루려고 합니다. 자바스크립트는 웹 개발의 중심 언어로, 그 역할은 매우 다양하고 중요합니다. 이 글을 통해 자바스크립트의 기본 구조와 웹 페이지를 동적으로 만드는 방법, 그리고 비동기 프로그래밍에 대한 이해를 높이고자 합니다.  첫 번째로 다룰 주제는 조건문과 반복문입니다. if, if-else, switch 등의 조건문을 사용하여 특정 조건에 따라 다른 코드를 실행할 수 있습니다. 또한, for, while, do-while 등의 반복문을 사용하여 코드를 효율적으로 반복 실행할 수 있습니다. 이러한 기본적인 제어 구조는 프로그래밍의 기초이며, 웹 개발 뿐만 아니라 다양한 프로그래밍 언어에서 공통적으로 사용됩니다.1. 조건문if, if-else, if-else if-.. 2023. 9. 2.
[프론트엔드] Javascript 함수 및 객체 [프론트엔드] Javascript 함수 및 객체JavaScript는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 이 언어의 핵심적인 구성 요소 중에는 함수, 객체, 배열이 있습니다. 이러한 구성 요소들은 개발자가 효율적이고 유연한 코드를 작성하는 데 있어 필수적입니다. 이 글에서는 JavaScript의 주요 구성 요소인 함수, 객체, 배열에 대해 간략히 살펴보고 그 중요성에 대해 논의하겠습니다. 함수: 코드의 재사용성을 높이는 도구함수는 프로그래밍에서 중요한 개념 중 하나입니다. 그 이유는 함수를 통해 반복되는 코드를 줄이고, 코드의 가독성을 높이며, 유지보수를 용이하게 만들 수 있기 때문입니다. 이 글에서는 함수의 기본 구조부터 다양한 선언 방법까지 알아보겠습니다. 함수의 기본함수는.. 2023. 9. 1.
[프론트엔드] JavaScript 기초: 웹을 동적으로 만드는 프로그래밍 언어 오늘은 웹 개발의 중심에 있는 프로그래밍 언어, JavaScript에 대해 알아보겠습니다. HTML과 CSS가 웹의 뼈대와 스타일을 담당한다면, JavaScript는 웹을 생동감 있게 만듭니다. JavaScript란?JavaScript는 1995년에 넷스케이프사에서 처음 개발되었습니다. 원래 명칭은 ‘모카’였으나, 이후 ‘라이브 스크립트’를 거쳐 현재의 ‘자바스크립트’로 명명되었습니다. 표준명칭은 ECMAScript입니다.웹페이지에서 동작하는 프로그램을 만들 때 사용HTML, CSS를 프로그래밍적으로 제어 가능웹브라우저 외의 환경에서도 사용 가능 (예: 서버프로그래밍)정적 웹 vs 동적 웹HTML과 CSS는 정적인 웹 페이지를 만들기 위한 언어입니다. 즉, 사용자의 상호작용에 따라 변경되지 않습니다. 반.. 2023. 8. 31.
[프론트엔드] CSS 개발 공부 : 사용자와 직접적으로 상호작용하는 인터페이스 CSS 개발 공부 : 사용자와 직접적으로 상호작용하는 인터페이스CSS는 사용자와 직접적으로 상호작용하는 인터페이스를 구현하는 중요한 작업입니다. HTML과 CSS를 이용한 실제 게시판 디자인 작업을 통해, 개발자가 어떤 일을 하는지 체험하고 이해할 수 있었습니다.  프론트엔드 개발은 웹 애플리케이션의 사용자 경험을 결정하는 핵심적인 부분 중 하나입니다. 특히 CSS는 사용자와의 직접적 상호작용을 구현하는 데 중요한 역할을 합니다. 이번에는 HTML과 CSS를 사용하여 실제 게시판 디자인을 해보면서 프론트엔드 개발자가 하는 일을 직접 경험하고 이해해 보았습니다.Float vs. FlexFloat정의: 요소가 보통 흐름에서 벗어나 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌 우측에 배치되게 합니.. 2023. 8. 30.
[프론트엔드] CSS: 웹 디자인과 레이아웃을 위한 필수 기술 CSS (Cascading Style Sheets)는 웹 개발에서 사용되는 스타일 시트 언어로, HTML이나 XML과 같은 마크업 언어로 작성된 문서의 표현 방법을 정의합니다. 이를 통해 웹 페이지의 디자인, 레이아웃, 그리고 보여지는 방식을 조절할 수 있습니다. CSS는 웹 디자인 및 개발에서 중요한 부분을 차지하며, 그 중요성은 계속해서 증가하고 있습니다.Cascading이란, 여러 스타일 규칙 중 어떤 것을 우선적으로 적용할지 결정하는 규칙을 말합니다. 이것은 스타일 우선순위에 관한 개념으로, 같은 요소에 여러 가지 스타일 규칙이 적용될 때 적용 우선순위를 결정하기 위해 사용됩니다. 이는 HTML 문서의 스타일을 보다 유연하게 제어할 수 있도록 해줍니다.  CSS의 장점에는 다음과 같은 것들이 있습.. 2023. 8. 28.
[프론트엔드] 자바스크립트 이벤트 처리: 웹 페이지의 상호작용을 향상시키는 방법 자바스크립트 이벤트 처리: 웹 페이지의 상호작용을 향상시키는 방법 자바스크립트를 활용하는 법자바스크립트를 활용하여 웹 페이지를 보다 동적이고 사용자 친화적으로 만들 수 있습니다. 이를 위해 자바스크립트의 핵심인 이벤트 처리를 다루는 방법에 대해 알아보겠습니다. 이 글에서는 버튼 클릭, 입력 필드 변화 등 다양한 이벤트에 대한 처리 방법과 예시 코드를 제공할 것입니다. 첫째로, 버튼 클릭에 반응하는 예시 코드를 살펴보겠습니다. WEB   위 코드는 두 개의 버튼을 생성하고, 각 버튼을 클릭할 때마다 웹 페이지의 배경색과 텍스트 색상을 변경하는 기능을 구현한 예시입니다.둘째로, 입력 필드 변화에 반응하는 예시 코드를 살펴보겠습니다.  Javascript Javascript is dyna.. 2023. 8. 14.
[프론트엔드] HTML과 CSS를 통해 웹 페이지 디자인과 구조를 제어하는 방법 HTML과 CSS는 웹 개발에서 핵심적인 기술로, 웹 페이지의 구조와 디자인을 담당합니다. HTML은 웹 페이지의 구조를 정의하고, CSS는 이를 스타일링하여 사용자에게 보기 좋은 형태로 표현합니다.HTML 태그를 사용하여 웹 페이지의 요소를 정의하고, CSS를 이용하여 이를 꾸밈으로써 사용자 경험을 향상시킬 수 있습니다. 예를 들어, 태그를 사용하여 CSS 코드를 삽입하면, 웹 페이지의 특정 요소에 스타일을 적용할 수 있습니다. 또한 클래스 선택자를 사용하여 여러 요소에 동일한 스타일을 적용할 수 있습니다.CSS의 우선순위는 구체적인 것이 포괄적인 것보다 높으며, ID 선택자는 일반적인 선택자보다 우선순위가 높습니다. 이를 활용하여 웹 페이지의 특정 요소에 우선적으로 스타일을 적용할 수 있습니다. 또.. 2023. 8. 14.
[프론트엔드] 코드할때 잘 쓰이는 Html 태그 정리 HTML 태그들을 활용하여 웹 페이지를 구성하는 것은 매우 중요합니다. 이러한 태그들은 웹 페이지의 구조를 정의하고 콘텐츠를 구성하는 데에 필수적입니다. 그렇기에 각 태그의 기능과 사용법을 잘 이해하는 것이 중요합니다.예를 들어,  태그 안에는 웹 페이지의 메타 정보를 포함시킬 수 있습니다. 이는 검색 엔진 최적화(SEO)를 위한 정보나 문자 인코딩 방식을 설정하는 등의 역할을 합니다. 또한  태그를 사용하여 웹 브라우저의 제목 표시줄에 나타날 제목을 정의할 수 있습니다. 이는 사용자가 웹 페이지를 식별하고 이용하는 데에 도움이 됩니다. 태그 안에는 실제로 사용자에게 보여지는 콘텐츠를 포함시킬 수 있습니다.  태그를 사용하여 구역을 나누고 CSS를 통해 스타일을 적용할 수 있습니다. 또한  태그를 사용하.. 2023. 8. 11.
728x90
반응형