군만두의 IT 개발 일지

목차 🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일 ⭐요약 JavaScript에서 배열과 객체에 대해서 정리함. 더보기 🚀 배열 1) 배열 배열은 [ ]를 사용하여 선언하며, 각 요소는 쉼표로 구분됨. .length 속성으로 배열의 길이를 알 수 있음. .push(), .unshift() 메소드로 배열에 요소를 추가할 수 있고, .pop(), .shift() 메소드로 요소를 삭제할 수 있음. .slice(), .concat(), .join() 메소드는 배열을 조작하는 데 사용되며, 원본 배열을 변경하지 않음. .indexOf(), .includes() 메소드로 특정 요소를 찾을 수 있음. 2) 객체 객체는 { }를 사용하여 선언하며, 키-값 쌍으로 구성됨. Dot notation과 Br..

목차 🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일 ⭐요약 이번 과제에서는 목업이 아닌 실제로 작동하는 계산기를 만들고, Github를 사용해 PR를 하는 과정까지 진행함. 1) 버튼이 잘 눌렸는지 확인 계산기의 숫자버튼을 클릭했을 때의 변화를 개발자 도구의 Console 탭을 이용하여 확인함. 2) 기본 계산 기능 구현 두 숫자의 사칙연산을 할 수 있는 계산기를 구현함. 3) 학습 목표 계산기 Github repository에 작성된 HTML, CSS를 이해할 수 있음. 두 숫자의 사칙연산을 구현할 수 있음. ⭐과제 원본 저장소를 fork 하고, 위 내용 진행하여 코드 수정 후 pull requests를 하는 과제임. ⭐과정 1. 원본 저장소 Fork 원본 저장소(레포지토리) 오른쪽 ..

목차 🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일 ⭐요약 Javascript의 반복문(for, while, do...while)과 함수의 사용법을 정리함. 더보기 🚀5. 반복문 1) for문 for문은 초기화, 조건식, 증감식을 포함하여 반복적인 작업을 수행할 때 사용됨. 2) while문 while문은 주어진 조건이 참인 동안 코드 블록을 반복 실행함. 조건식만 있으며, 초기화와 증감식은 코드 블록 안에서 처리해야 함. 3) do...while문 do...while문은 최소 한 번은 코드 블록을 실행한 후 조건을 검사함. 이는 조건이 처음부터 거짓이라도 코드 블록을 최소 한 번은 실행하고자 할 때 유용함. 🚀6. 함수 1) 함수의 선언과 호출 함수는 function 키워드를 사용하여..

목차 🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일 ⭐요약 JavaScript 프로그래밍 언어에서 변수의 선언과 할당, 조건문(if, else)의 사용법을 정리함. 더보기 🚀3. 변수의 선언과 할당 1) 변수 선언 let과 const 키워드를 사용해 변수를 선언함. var는 오래된 키워드로, 현대적인 JavaScript 코드에서는 사용을 지양함. 2) 값의 할당 할당 연산자 =를 사용하여 변수에 값을 할당함. 3) 데이터 타입 JavaScript에서는 숫자, 문자열, 불리언, 배열, 객체 등 다양한 데이터 타입을 변수에 할당할 수 있음. 4) 재할당과 상수 let으로 선언된 변수는 재할당이 가능하지만, const로 선언된 변수는 재할당이 불가능함. 🚀4. 조건문 1) if문 주어진 조건..

목차 🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일 ⭐요약 JavaScript 프로그래밍 언어의 기본적인 개념과 실행 방법, 주요 데이터 타입(Number, String, Boolean)에 대해 정리함. 더보기 🚀 JavaScript 기초 1) JavaScript 기초 JavaScript는 HTML 파일 내에서 브라우저를 통해 실행되거나, Node.js 환경에서 실행됨. REPL 환경을 통해 간단한 JavaScript 코드를 실행하고 결과를 바로 확인할 수 있음. 2) console.log() 메서드 console.log() 메서드를 사용하여 개발자 도구의 콘솔이나 터미널에 원하는 값을 출력함. 3) 주석 코드 설명을 위해 주석을 사용할 수 있으며, JavaScript에서는 //로 단일..

목차 🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일 ⭐요약 HTML과 CSS를 활용하여 Flexbox를 이용한 레이아웃 구성 방법과 각 속성의 적용에 대해 정리함. 더보기 🚀 HTML 구성과 Flexbox 활용 1) HTML 구성 웹 페이지의 콘텐츠 흐름은 기본적으로 좌에서 우, 그리고 위에서 아래로 진행됨. 효율적 관리를 위해 Flexbox 레이아웃을 활용하여 수직 및 수평 분할을 적용할 수 있음. 2) Flexbox 레이아웃의 기본 Flexbox를 사용함으로써, 개발자는 컨테이너 내의 항목들을 유연하게 정렬하고, 각 요소가 차지하는 공간을 쉽게 조절할 수 있음. display: flex 속성은 요소들을 가로로 정렬하며, Flexbox 속성을 통해 세밀한 레이아웃 조정이 가능함. 3)..

목차 🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일 ⭐요약 웹 개발 프로젝트의 초기 단계에서 와이어프레임과 목업을 활용에 대해 정리함. 더보기 🚀 HTML/CSS 활용 1) 와이어프레임(Wireframe) 웹 페이지의 기본 구조를 설계하는 과정으로, 핵심 요소와 기능을 배치하여 전체적인 페이지 레이아웃을 계획함. 프로젝트의 목적과 요구 사항을 명확히 하고, 초기 단계에서 디자인과 기능에 대한 이해도를 높임. 2) 목업(Mock-up) 와이어프레임을 기반으로 한 단계 더 발전된 디자인 단계로, 실제 제품과 유사한 방식으로 HTML 문서에 구현됨. 목업을 통해 실제 콘텐츠와 디자인 요소를 사용하여, 최종 제품의 모습을 시각적으로 예측할 수 있음. ⭐HTML/CSS 활용 1. 와이어프레임(W..

목차 🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일 ⭐요약 웹 페이지의 스타일과 레이아웃을 결정하는 데 필수적인 CSS의 기초적인 내용을 정리함. 더보기 🚀 CSS 기초 1) CSS(Cascading Style Sheets) 웹 페이지의 스타일과 레이아웃을 결정하는 스타일시트 언어. CSS는 색상, 글꼴, 크기, 간격 등 웹 페이지의 시각적 요소를 제어할 수 있음. 2) 박스 모델 웹 페이지를 구성하는 모든 요소는 박스 모델로 표현됨. 요소의 콘텐츠, 패딩(padding), 테두리(border), 마진(margin)으로 구성됨. 3) 선택자 CSS에서는 다양한 선택자를 사용하여 특정 요소에 스타일을 적용할 수 있음. id 선택자, class 선택자, 태그 선택자, 속성 선택자 등이 포함..