xu의 성장일지

자바스크립트 강의를 마무리 하면서, 계산기를 만들어 보았습니다.기능 구현뿐만 아니라 보기 좋은 코드에 대한 고민을 가지고 코드를 작성했으며, 실제로 리팩토링도 여러 번 진행하였기에 기록하기 위해 블로그를 작성합니다. 0 C ± % / 7 8 ..

SOLID 원칙이 뭔데?SOLID 원칙이란 소프트웨어 설계에서 유지보수성과 확장성을 높이기 위한 다섯 가지 객체 지향 설계 원칙이다.말 그대로, 좋은 코드를 만들기 위한 원칙! 이 원칙들은 잘 구조화된 소프트웨어를 작성하는 데 중점을 두며, 코드의 가독성, 유연성, 테스트 가능성 등을 향상시키는 데 기여한다! 객체 지향 설계 원칙...?자바스크립트는 완전한 객체 지향 언어가 아닌데? 그렇다.JavaScript는 전통적인 객체 지향 언어인 Java, C++과는 다르게 프로토타입 기반 객체 지향 언어이다. 그럼 프로토타입 기반 OOP와 클래스 기반 OOP는 뭐가 다를까?특징클래스 기반 OOP프로토타입 기반 OOP객체 생성 방식클래스를 정의하고, 클래스를 통해 객체 생성기존 객체를 복사하거나, object.c..

현재 JavaScript의 기초 부분을 학습 중이다.document.createElement() 메소드를 활용하여 몬스터 잡기 게임을 만들어 보았다. 우선 HTML 코드는 이렇게 작성해 보았다. container 의 style은 추후에 작성하겠지만 monster의 움직임을 구현하기 위해 작성하였다.const container = document.getElementById("container");// 몬스터 모양 만들기const monster = document.createElement("div");monster.textContent = "*_*";monster.style.width = "50px";monster.style.height = "50px";monster.style.backgroun..

JavaScript란?JavaScript는 웹 개발을 중심으로 사용되는 스크립트 언어이다.주로 웹 페이지의 동적 콘텐츠를 구현하는 데 사용된다.웹 브라우저에서 기본적으로 실행되며, 사용자가 웹 페이지와 상호작용할 수 있는 기능을 추가하는 데 중요한 역할을 한다.JavaScript는 ECMAScript(ECMA-262 표준) 기반으로 발전해 왔으며, 현재는 웹뿐만 아니라 다양한 환경에서 사용될 수 있는 범용 프로그래밍 언어로 발전했다.   JavaScript의 주요 특징1. 인터프리터 언어: 컴파일 과정을 거치지 않고 바로 실행! 덕분에 빠른 개발과 테스트가 가능2. 동적 타이핑: 변수 선언 시 타입 명시가 필요하지 않다! 유연성을 제공하지만 그만큼 오류를 발생시키기도 함. 변수 사용은 최소화하자.3. 프..

자바스크립트에서 var, let, const는 변수 선언을 위해 사용된다.그렇다면 이 셋의 차이점은 무엇일까?크게 스코프(Scope), 호이스팅(Hoisting), 중복 선언 이렇게 3가지 차이가 있다.하나씩 뭔지 알아보자. 스코프- 어떤 변수가 선언된 공간 또는 환경- 어떤 변수의 스코프는 해당 변수가 접근될 수 있는 범위1. 글로벌 스코프- 함수나 블록 바깥에서 선언된 변수- 어디에서든지 접근 가능2. 함수 스코프 (= 지역 스코프)- 함수 안쪽에서만 접근이 가능한 변수- 블록 스코프를 무시3. 블록 스코프 (ES6)- 블록({}) 안에서만 접근 가능 (함수 포함)- let, const에만 적용 호이스팅 자바스크립트 스코프 안에서 변수를 최상단에서 선언하는 것.- var, let, const 변수는 ..

시맨틱 태그의미를 부여한 태그( 태그에 의미를 부여했다!)예시로는 , 등이 있다. 이름만 봐도 상단과 하단이라는 것을 알 수 있다!이러한 시맨틱 태그의 등장으로 태그만 보고서 의미를 이해할 수 있게 되었다. 시맨틱 태그를 사용해야 하는 이유 태그를 사용해도 똑같이 만들 수 있는데, 굳이 시맨틱 태그를 왜 사용해야 할까?1. HTML 문서의 가독성과 유지보수가 쉬워짐2. 웹 브라우저가 HTML만으로 상단, 하단, 본문 어느 영역인지 쉽게 확인이 가능함3. 검색 엔진이 검색을 수행할 때, HTML 내 태그를 분석할 수 있음 -> 검색 엔진 최적화(SEO)에 도움이 됨!! 검색 엔진 최적화(SEO)구글에 어떤 것을 검색을 하면이렇게 여러 페이지가 노출되는데, 대부분의 사람들은 상위 노출된 페이지를 먼저 열람..

과제를 수행 중, label 태그에 상하 여백을 넣으려는데 margin이 적용되지 않았다.머리 싸매다 질문 드리니 label 태그가 인라인 요소라서 상하 마진을 넣을 수 없다고 답변해 주셨다.HTML에서 요소는 두 가지 유형으로 분류된다.바로 인라인 요소(Inline Elements)와 블록 요소(Block Elements) 인라인 요소- 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들- 인라인 요소는 컨텐츠의 폭과 높이에만 영향을 미치며, 전체 줄의 폭을 차지하지 않음.- 다른 인라인 요소나 텍스트가 함께 한 줄에 배치됨- 상하 마진(margin) 적용 불가 (좌우 마진, 패딩 및 상하 패딩은 가능)- 크기 조절(width, height) ..