본문 바로가기

분류 전체보기

(33)
[스나이퍼팩토리] 카카오클라우드 AIaaS 마스터 클래스 8주차 - 리액트 1 (React 1) 지난 글까지 HTML과 JavaScript, CSS를 공부하며 실습을 함께 진행해보았다. HTML과 CSS를 이용해 토스 페이지를 클론 코딩하는 실습을 진행하고 있으며, JavaScript를 이용해 애니메이션 등의 기능을 구현하는 것도 함께 학습하고 있다. 하지만 HTML과 CSS로 구성된 페이지를 그대로 사용하지 않고 React로 변환하는 과정을 가지려 한다. 그 이유는 React로 변환하여 사용하면 컴포넌트 구조를 가지기에 재사용이 가능하다는 장점을 살릴 수 있고, 상태(state)를 기반으로 동적으로 UI를 바꿀 수 있다는 장점도 사용할 수 있으며, Virtual DOM이라는 가상의 DOM 구조를 사용해서 변경된 부분만 빠르게 업데이트 하는 장점도 살리며 사용자 경험(UX)도 향상시킬 수 있기 ..
[스나이퍼팩토리] 카카오클라우드 AIaaS 마스터 클래스 7주차 - JavaScript Advanced 2 (자바스크립트 심화 2) 지난 글에서 JavaScript 심화 내용을 일부분 다루며 학습해보았다. 이번 글에서는 그 내용에 이어서 계속해서 JavaScript 심화라고 할 수 있는 내용을 더욱 다뤄보려 한다. Symbol이라는 개념부터 시작해볼 것이다. 🔷 11. Symbol (심볼)✅ Symbol이란?"고유하고 충돌되지 않는 값"을 만들기 위한 데이터 타입 이 고유한 값은 객체의 프로퍼티 키로 사용할 수 있다. const sym = Symbol("설명");설명(description)은 디버깅용 텍스트일 뿐 실제 Symbol 값에는 아무런 영향 없음Symbol 값은 절대 중복되지 않음. 동일한 설명을 넣어도 서로 다른 Symbol이 만들어짐✅ 왜 Symbol이 필요할까?JS 객체의 속성 키는 보통 문자열:const user =..
[스나이퍼팩토리] 카카오클라우드 AIaaS 마스터 클래스 7주차 - JavaScript Advanced 1 (자바스크립트 심화 1) 지난번 시간에 HTML과 CSS까지 학습을 진행했다. HTML로 웹 컨텐츠의 구조를 만들고, CSS를 이용해 스타일과 디자인을 만들었다. 이제는 JavaScript를 이용해 웹 컨텐츠에 동적인 요소들을 부여해줄 순서이다. 이를 위해 JavaScript 내용을 정리하며 학습해보려 한다. 📘 자바스크립트(JavaScript) 📌 자바스크립트(JavaScript)란?웹 브라우저에서 실행되는 프로그래밍 언어HTML 요소 조작, 이벤트 처리, 서버 통신, 로직 제어 등 웹 페이지에 동적인 기능을 추가함현재는 브라우저뿐 아니라 Node.js를 통해 서버 사이드 개발에도 사용됨📌 특징인터프리터 언어: 실행 전에 컴파일하지 않고 즉시 실행동적 타이핑(Dynamic Typing): 변수에 다양한 타입을 자유롭게..
[스나이퍼팩토리] 카카오클라우드 AIaaS 마스터 클래스 7주차 - JavaScript Basic 2 (자바스크립트 기초 2) 이 전글에 이어 자바스크립트(JavaScript)의 기본적인 내용을 학습했고, 그 내용에 이어서 기초적인 내용을 학습해볼 것이다. 4️⃣ 조건문 (Conditionals)✅ 1. if / else 기본 구조📌 JavaScript 문법let age = 20;if (age >= 18) { console.log("성인입니다.");} else { console.log("미성년자입니다.");} 📌 Python 문법age = 20if age >= 18: print("성인입니다.")else: print("미성년자입니다.") → JavaScript와 Python 모두 조건이 true이면 실행되고, false이면 else 블록이 실행되고, → JavaScript는 중괄호 {}, Python은 들여쓰기..
[스나이퍼팩토리] 카카오클라우드 AIaaS 마스터 클래스 7주차 - JavaScript Basic 1 (자바스크립트 기초 1) 지난번 시간에 HTML과 CSS까지 학습을 진행했다. HTML로 웹 컨텐츠의 구조를 만들고, CSS를 이용해 스타일과 디자인을 만들었다. 이제는 JavaScript를 이용해 웹 컨텐츠에 동적인 요소들을 부여해 줄 순서이다. 이를 위해 JavaScript 내용을 정리하며 학습해보려 한다. 📘 자바스크립트(JavaScript) 📌 자바스크립트(JavaScript)란?웹 브라우저에서 실행되는 프로그래밍 언어HTML 요소 조작, 이벤트 처리, 서버 통신, 로직 제어 등 웹 페이지에 동적인 기능을 추가함현재는 브라우저뿐 아니라 Node.js를 통해 서버 사이드 개발에도 사용됨📌 특징인터프리터 언어: 실행 전에 컴파일하지 않고 즉시 실행동적 타이핑(Dynamic Typing): 변수에 다양한 타입을 자유롭게..
[스나이퍼팩토리] 카카오클라우드 AIaaS 마스터 클래스 6주차 - HTML & CSS와 웹 접근성 및 웹 표준 지난 글에서 HTML과 CSS에 대한 개념들을 비롯해 간단하게 정리하며 공부해보았다. 오늘은 더 잘 이해하기 위한 웹 접근성과 웹 표준, 그리고 검색 엔진 최적화(SEO)에 대해 알아보고, HTML과 CSS를 공부하고 실습을 진행하며 생긴 의문들을 해결해볼 것이다. 먼저 웹 접근성에 대해 알아보자. 1️⃣ 웹 접근성(Web Accessibility)이란?장애 유무, 나이, 환경 등에 관계없이 모든 사람이 웹 콘텐츠에 동등하게 접근하고 이용할 수 있도록 보장하는 것✅ 예시시각장애인: 화면 읽기 프로그램(Screen Reader)을 사용함청각장애인: 자막이나 텍스트 대체가 필요함색약 사용자: 색상만으로 의미를 전달하면 안 됨노인, 저사양 기기 사용자: 글씨가 크고 명확해야 함즉, 누구나 웹을 사용할 수..
[스나이퍼팩토리] 카카오클라우드 AIaaS 마스터 클래스 5주차 - HTML(HyperText Markup Language) 앞에서 클라우드와 리눅스에 대한 내용들을 학습했다. 이제는 직접 서비스를 만들어보고 앞에서 배운 내용을 토대로 배포까지 해보는 과정으로 진행할 것이다. 그렇기에 기본적인 HTML과 CSS를 학습해 우리가 보는 화면을 먼저 구성해보려한다. CSS를 학습하기 전에 HTML을 먼저 학습해 구조를 먼저 익힐 것이다. 📘 HTML (HyperText Markup Language)✅ HTML이란?1️⃣ HTML의 정의HTML(HyperText Markup Language)는 웹 페이지의 구조(뼈대)를 만들기 위한 마크업 언어(Markup Language)이다. HyperText: 다른 문서나 웹 페이지로 이동(링크)할 수 있는 텍스트Markup Language: 내용을 감싸고 구조와 의미를 표현하는 언어(예:..
[스나이퍼팩토리] 카카오클라우드 AIaaS 마스터 클래스 - NFS(Network File System)와 3FS(Fire-Flyer File System) 오늘은 얼마전 Deepseek AI가 개발 및 공개한 3FS에 대한 이야기를 해보려한다. 클라우드 교육을 듣던 도중 강사님께서 3FS에 대해 NFS와 비교해보는 과제를 주셨는데, 자료를 찾아보다 보니 흥미가 더 생겨 글로 정리해보게 되었다. 3FS가 무엇인지, 왜 만들게 되었는지 등에 대한 나의 생각을 정리할 것이다. 발표된지 얼마 되지 않은 시스템이기에 자료가 많이 없어서 대부분 스스로 생각하고 추론한 내용이라는 점을 고려하면 좋을 것 같다. ✅ NFS와 3FS 현대 사회는 초거대 데이터를 중심으로 움직이고 있다. 매일 생성되는 데이터는 기하급수적으로 증가하고 있고, 이를 기반으로 인공지능(AI)을 학습시키려는 수요도 폭발적으로 늘어나고 있는 추세이다. GPT-4와 같은 대형 AI 모델은 수천억 개..