[스나이퍼팩토리] 카카오클라우드 - 클라우드 개발자 교육 1주차

1일차-OT🙇🏻‍♀️

교육에 필요한 노트북 배부와 교재 배부 및 전체 커리큘럼에 대한 OT를 진행했다. 
스나이퍼팩토리측에서 첫날이라 어색할 수 있으니 점심 메이트도 구성해주시고, 근처 맛집 빙고리스트도 만들어 주셨다!

그치만 너무 어색해서 팀원끼리 밥먹는 내내 묵언수행..ㅎㅎ
점심 후에는 아이스브레이킹겸 강사님께서 모든 학생들에게 스타벅스도 사주시면서 자기소개도 하고, 다른 부트캠프보다 분위기가 화목한 것 같은 느낌이 들어서 다른 친구들과 좀 더 빨리 친해졌으면 하는 생각도 들었다:)
1일차는 자기소개하고 앞으로 개발일지 쓸 블로그랑 참고할 블로그 레퍼런스 제출하고 마무리~

---

2일차-HTML

2일차부터 frontend 학습 시작!
오전에는 HTML기본 문법과 오후에는 배운 문법들과 개념을 바탕으로 사용자 등록 양식 폼 만들기를 수행했다.

📌실습시 자주 쓴 태그 및 속성 정리

<label>	각 입력 요소는 반드시 <label>태그로 연결되어야 함. HTML에서 사용자 입력 필드에 대한 설명을 제공하는데 사용된다. 사용자가 양식을 작성할 때 입력 필드의 의미를 명확히 전달하는 역할을 하며, 접근성을 향상 시키는데 중요한 요소이다. 이때 for 는 <label> 태그를 특정 입력 필드와 연결하는데 사용되고, 이 속성의 값은 입력 필드의 id 속성 값과 일치해야 한다. 이 방식으로 연결된 <label>을 클릭하면, 해당 입력 필드로 포커스가 이동한다.
<input>	HTML에서 사용자로부터 데이터를 입력받기 위한 다양한 입력 필드를 정의하는 데 사용된다. 다양한 유형의 데이터를 입력받을 수 있고, 일반적으로 <form>태그 안에서 사용되며, 여러가지 속성과 함께 사용되어 다양한 기능 구현이 가능하다.
<input type> 속성	text, password, email, number, checkbox, radio, file, submit, reset, button, date
<select>	HTML에서 드롭다운 목록을 생성하는데 사용됨.  - multiple: 여러 옵션을 선택할 수 있는지 여부를 설정 - option: <select> 태그 안에서 개별 선택 항못을 정의. - optgroup: 옵션을 그룹화하여 드롭다운 목록을 더 잘 조직할 수 있도록 돕는 태그
<progress>	진행 상황을 시작적으로 나타내는데 사용. 파일 업로드, 다운로드, 폼 제출, 또는 페이지 로딩과 같은 작업의 진행도를 표시하는데 유리함.

 

📚오늘의 실습!

<실습 코드>
http://github.com/heyroha/Frontend/blob/main/HTML/hw1.html

이후 과제는 홈페이지 클론 코딩이고, 나는 파시티 홈페이지를 할 예정이다.
이유는.. 그냥 얼마전에 다녀왔기 때문..(?)

 

+ ✍🏻오늘의 선택 과제!

1. 웹 표준과 웹 접근성 조사하기

✅웹 표준이란?

- 웹 표준이란 웹사이트를 구성할 때 사용하는 HTML, CSS, JavaScript 와 같은 웹 기술을 국제 표준화 단체 (주로 W3C, World Wide Web Consortium)에서 권고한 기준에 맞춰 작성하는 것을 뜻한다. 운영체제나 브라우저 종류에 상관없이 누구나 동일하게 웹 컨텐츠를 보고, 사용할 수 있도록 하는 것이며 다양한 기기, 브라우저에서 호환성 보장, 웹 개발 유지보수 효율 증대, SEO 용이, 웹 접근성 준수 기반 제공에서 중요성을 가진다.

✅웹 접근성이란?

- 웹 접근성이란 장애인, 고령자, 임시적 신체적 제약 등 다양한 사용자가 신체적/환경적 제약 없이 웹사이트의 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 보장하는 정도를 의미한다.

2. 검색 엔진 최적화(SEO) 조사하기

- 검색엔진 최적화(SEO, Search Engine Optimization)는 웹사이트를 구글, 네이버 등 검색엔진에서 상위에 노출되도록 웹사이트의 구조와 컨텐츠를 최적화하는 전략이자 기술이다. 광고가 아닌 자연 검색 결과(Organic Search Result)를 통해 더 많은 방문자(트래픽)를 유입시키는 디지털 마켓팅 방식이다.

온페이지, 오프페이지, 테크니컬 SEO 3가지 SEO 유형이 있다. 온페이지 SEO는 키워드 최적화, 고품질 콘텐츠 작성 등 사이트 내부 요소를 최적화 시키는 방식, 오프페이지는 외부링크(백링크)구축, 브랜드 언급 등 외부 사이트의 신뢰도를 높이는 활동, 테크니컬은 사이트맵, robots.txt, HTTPS 보안 프로토콜 등 기술적 요소를 정비해 검색엔진이 사이트를 더 잘 이해하도록 하는 것이다.

 

+ ✨참고할 요소
🕶️코드 검사: https://validator.w3.org/nu/

Ready to check - Nu Html Checker

(이 사이트에서 HTML, CSS, SVG에서 의도하지 않은 실수, 다른 방식으로 놓쳤던 실수들을 체크해 볼 수 있다!)

---

3일차-CSS

오늘은 CSS 개념과 기본 문법들을 다뤘다.
아래는 과제 및 실습을 하면서 헷갈리는 개념, 궁금했던 부분에 대해서 정리해 보았다.

🧱 main 태그 vs div 태그 차이 정리

- main은 문서 페이지에서 핵심 콘텐츠 영역을 의미한다. 흔히 웹사이트에서 메뉴, 사이드바, 푸터, 광고 등을 제외하고, 실제 본문 내용, 주요 기능 등 가장 중요한 부분만 감싼다. 문서 안에 딱 하나만 존재해야하며 시맨틱 기반 태그이다.
- div는 영역을 나누는 컨테이너로 특별한 의미가 없는 블록 요소이기 때문에, 용도가 모호한 부분이나 단순 그룹핑에 사용한다.

	main	div
의미	문서의 주요 내용(본문)	단순한 영역 구분
용도	웹페이지의 핵심 콘텐츠 감싸기	레이아웃 나누기, 스타일링 목적
사용 가능 개수	한 문서에 하나만 사용	여러 개 사용 가능
시맨틱 의미	있음 (검색엔진이 인식함)	없음
예시	본문, 주요 기능 영역	박스, 카드, 레이아웃 묶음 등

(📌main 태그는 문서 안에 한번만 등장해야 함! 실제 메인 컨텐츠를 담는 부분에만 사용해야 한다.)

---

🎨 CSS 속성

min-height: 100vh	브라우저 높이의 100%만큼 요소 높이를 최소한으로 설정. 1vh는 전체 화면 높이의 1%.
flex-direction: column	Flex 컨테이너 안의 요소를 위에서 아래 방향(세로)으로 배치.
border-radius: 10px	요소의 모서리를 둥글게 만듦. 숫자가 클수록 더 둥글게 작성된다.
margin: 0 auto;	위아래 여백은 0, 좌우는 자동으로 설정돼서 수평 중앙 정렬.
animation: pulse 0.5s;	0.5초 동안 pulse라는 애니메이션을 실행. 주로 버튼에 사용됨.

---

📍 pulse 애니메이션 예시

- 이렇게 설정시 마우스를 버튼 위에 올리면 0.5초 동안 부드럽게 켜졌다가 다시 원래대로 돌아오는 효과를 보임

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.button:hover {
  animation: pulse 0.5s;
}

---

📚 오늘의 실습 과제!

-회원가입 페이지를 HTML로 구성한 뒤 CSS로 전체 레이아웃을 구성해 보았다. 헤더 사이즈에 맞는 이미지가 없어서 찾다가 레고랜드 느낌으로다가 디자인해 보았다!

---

+ ✨참고할 요소
📌 CSS 에서 웹 페이지 디자인시 사용할 수 있는 사진 웹사이트들!

- Pinterest: https://kr.pinterest.com/

Pinterest

- Unsplash: https://unsplash.com/ko

📌CSS한글 폰트 사용시 적용할 수 있는 사이트

-눈누: https://noonnu.cc/font_page/1621

(이 부분을 복사해서 CSS파일에 붙여놓고 해당 웹폰트를 적용할 곳의 font-family에 작성해주면 끗!)

---

4일차-JavaScript 기초

자바스크립트 실습 중 헷갈렸던 개념들과 새롭게 알게 된 내용을 중심으로 정리해 보았다. 그중에서도 변수 선언 방식, 문자열 출력, 타입 체크, 비교 연산자, null과 undefined, 객체의 특성 등에서 여러 개념들을 새롭게 익히거나 헷갈렸던 부분을 정리하였다.

실습 환경

• ✅크롬 브라우저 개발자 도구 콘솔창(수업시 사용환경)
  
• Online JavaScript Compiler (Programiz)
• myCompiler (Node.js)

---

 

console.log()	자바스크립트에서 출력 역할을 하는 함수. 콘솔에 값 출력 시 사용.
typeof	데이터 타입을 확인할 수 있는 연산자. 예: typeof 10 → "number"
템플릿 문자열	${}을 사용해 변수 삽입 가능. 반드시 백틱(```)으로 감싸야 함.
=== / !==	자료형까지 동일한지 비교. === : 타입과 값 모두 같아야 true !== : 타입 또는 값 중 하나라도 다르면 true
undefined	값이 할당되지 않은 상태를 의미.
null	의도적으로 비어 있는 값을 명시.
객체 상수	const로 선언해도 객체 내부 프로퍼티는 수정 가능. 단, 객체 자체를 재할당하면 에러 발생.
주석	코드 설명 용도로 활용. 팀 협업이나 깃 정리에 매우 중요.

---

🔍 let, var, const의 차이점 

변수 선언 방식에서 헷갈린 부분이 많았기 때문에 아래에 표와 함께 자세히 정리해 보았다.

	var	let	const
중복 선언	가능	불가능	불가능
변수 변경	가능	가능	불가능
선언 전 접근	가능하지만 undefined 반환 (호이스팅)	에러 발생 (TDZ)	에러 발생 (TDZ)
스코프	함수 스코프	블록 스코프	블록 스코프
선언 방식	유연하지만 예측 어려움	권장됨	상수 선언 시 사용
선언 시 값 할당	선택	선택	필수

 

• var는 호이스팅(hoisting)이 발생함. 변수 선언 전에 접근하면 undefined가 출력됨. 중복 선언도 가능함. 다만 이로 인해 코드 흐름이 예측하기 어려워져, 실무에서는 지양.
• let은 중복 선언이 불가능하고, 변수 선언 전에 접근 시 ReferenceError가 발생함. 스코프가 블록 단위로 제한되어 코드 안정성이 높음. 따라서 가장 일반적으로 추천되는 방식.
• const는 선언 즉시 값을 할당해야 하며, 변경이 불가능함. 대문자로 작성하는 것이 일반적인 컨벤션임. 단, 객체를 상수로 선언할 경우 객체 내부의 속성은 수정할 수 있음.

🔗 참고: Javascript var let const 차이와 사용법 (Likedev 블로그)

---

💡 객체의 const 선언과 수정 가능 여부

const person = {
  name: 'Jane',
  age: 25
};
person.age = 26; // 가능
person.city = 'Seoul'; // 추가 가능

• 위 코드처럼 const로 선언된 객체라도 프로퍼티는 수정 및 추가가 가능
• 단, 아래처럼 객체 자체를 다른 객체로 바꾸는 건 불가능

person = {}; // ❌ TypeError 발생

즉, 참조하는 메모리 주소는 변경 불가능하나, 그 내부 값은 수정 가능

<오늘의 실습!>

- JavaScript 문법 정리하고 Mdn에 있는 HTML, CSS 예제와 도전 과제들을 수행해 보았다. 편지 레이아웃 구성과 바이오그래피 페이지 CSS로 디자인 수정하기!

 

---

5일차-DOM(보충)/JavaScript 심화

오늘은 DOM 기본 개념과 함께 자바스크립트의 함수 활용법, 객체 속성 정의 방식, 원시 타입 vs 참조 타입, 그리고 생성자 함수와 클래스 차이점에 대해 학습했다. 

---

🧱 DOM이란?

DOM(Document Object Model)은 웹 페이지의 HTML 문서를 객체로 표현한 계층적 구조(Tree 구조)를 의미한다.

DOM의 각 요소

DOM 구조	문서 전체가 트리 형태로 구성되어 있음 (document → html → body → p, 등)
DOM 노드	HTML의 각 요소, 텍스트, 속성 등을 노드(node)라고 부름
DOM 접근	document.getElementById, querySelector 등을 통해 특정 요소에 접근 가능
DOM 조작	.innerText, .innerHTML, .setAttribute() 등을 활용해 HTML 내용이나 속성 변경 가능
이벤트 처리	addEventListener로 사용자 상호작용 이벤트 처리 가능

DOM을 통해 자바스크립트는 웹 페이지의 요소를 선택하고, 동적으로 변경하거나 이벤트를 처리할 수 있다.

---

🎯 함수가 변수처럼 사용되는 구조

자바스크립트에서는 함수를 값처럼 변수에 할당하거나 반환할 수 있음.

예시

function greet() {
  console.log("안녕하세요!");
}

const sayHello = greet; // 함수도 변수처럼 할당 가능
sayHello(); // 안녕하세요!

또한 함수를 반환하는 함수도 작성 가능하며, 이러한 구조는 아래의 고차 함수(Higher-Order Function)개념과 이어진다.

---

🔄 고차 함수 & 콜백 함수

- 고차 함수: 함수를 인자로 받거나, 반환하는 함수
- 콜백 함수: 다른 함수에 인자로 전달되는 함수

고차 함수	확장성, 유연성을 위해 사용됨. 반복되는 로직을 함수로 빼서 재활용
콜백 함수	특정 조건이나 시점에 실행되도록 전달되는 함수

대표 예시

function createGreeting(greeting) {
  return function(name) {
    return `${greeting}, ${name}님!`;
  };
}

const hiGreeting = createGreeting("안녕하세요");
console.log(hiGreeting("현정")); // 안녕하세요, 현정님!

📌 function(name) { ... }는 익명 함수(anonymous function)로, 재사용 목적 없이 즉시 반환하려는 함수일 때 많이 사용한다.

---

🔍 중첩 함수 vs 재귀 함수

중첩 함수	함수 내부에 또 다른 함수가 정의된 형태	함수 내부 로직 분리
재귀 함수	함수가 자기 자신을 호출하는 구조	반복 또는 분할 처리에 사용됨

// 중첩 함수 예시
function outer() {
  function inner() {
    console.log("inner 호출됨");
  }
  inner();
}

// 재귀 함수 예시
function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}

---

🧩 원시 타입 vs 참조 타입

구분 원시 타입 참조 타입

	원시타입	참조타입
대표 타입	string, number, boolean, null, undefined, symbol	object, array, function
저장 방식	값 자체 저장	메모리 주소(참조값) 저장
불변성	값 변경 불가 (새로 생성됨)	변경 가능 (공유된 객체가 변경됨)
복사 방식	값을 복사	주소를 복사 → 같은 객체를 가리킴

예시

let a = 10;
let b = a;
b = 20; // a는 여전히 10

const obj1 = { name: 'Lee' };
const obj2 = obj1;
obj2.name = 'Kim'; // obj1.name도 'Kim'으로 바뀜!

---

🏗️ 객체 정적 vs 동적 정의

구분 정적 정의 동적 정의

정의 시점	객체 생성과 동시에 속성 정의	객체 생성 후 속성 추가
유연성	구조 고정적	매우 유동적
사용 예	데이터 모델 등 고정 구조	유동적 속성이 필요한 경우

// 정적 정의
const user = { name: "현정", age: 20 };

// 동적 정의
const obj = {};
const key = "age";
obj[key] = 30; // obj = { age: 30 }

⚠️ obj.key = value는 "key"라는 속성이 생기므로, 변수 값을 속성명으로 쓰고 싶다면 반드시 obj[key] 형식을 써야 함!

---

🧱 생성자 함수 vs 클래스

항목 생성자 함수 클래스 (class)

	생성자 함수(Function 정의)	클래스(Class)
선언 방식	function 사용	class 키워드 사용
초기화 방식	함수 내에 this 사용	constructor() 메서드 사용
메서드 관리	인스턴스마다 복제됨	프로토타입에 저장 (메모리 효율적)
상속	프로토타입 체인 수동 구현	extends, super 키워드로 간편하게 구현
호출 방식	new 없이도 호출됨	new 필수
호이스팅	가능	불가능

생성자 함수 예시

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`안녕하세요, ${this.name}입니다.`);
  };
}

const p1 = new Person('홍길동', 30);
p1.greet();

클래스 예시

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`안녕하세요, ${this.name}입니다.`);
  }
}

const p2 = new Person('홍길동', 30);
p2.greet();

📌 클래스는 strict mode가 기본 적용되어 오류를 줄일 수 있고, 권장되는 방식이라고 한다.

---

🧭 오늘의 요약!

• DOM은 웹 문서를 JS 객체처럼 다룰 수 있게 해주는 구조이다.
• 함수는 값처럼 할당·반환 가능하며, 익명 함수는 주로 일회성 목적에 사용된다.
• 고차 함수와 콜백 함수는 재사용성과 확장성을 높이기 위한 핵심 개념이다.
• 원시 타입은 불변, 참조 타입은 공유된 메모리를 통해 변경된다.
• 객체 속성은 정적 정의/동적 정의 방식 모두 가능하지만, 동적 정의 시에는 대괄호 표기법 사용 필수!!
• 생성자 함수와 클래스는 문법과 동작에서 차이를 가지며, 클래스 사용이 권장된다.

---

 

---

본 후기는 [카카오엔터프라이즈x스나이퍼팩토리] 카카오클라우드로 배우는 AIaaS 마스터 클래스 2기(B-log) 리뷰로 작성 되었습니다.