본문 바로가기

전체 글104

[자바스크립트 14일 완전정복] 14일차 - 미니 프로젝트 (할 일 목록 앱 만들기) 자바스크립트를 배우면서 가장 중요한 것은 배운 개념을 실전에서 활용하는 것이에요.오늘은 할 일 목록(Todo List) 앱을 만들어 보면서 지금까지 배운 개념을 적용해 보겠습니다.또한, 프로젝트를 GitHub Pages에 배포하는 방법도 알아볼 거예요. 🚀  미리보기See the Pen Untitled by 해련 (@iuqtnifm-the-reactor) on CodePen.   1. 프로젝트 개요📌 기능 요구사항사용자가 할 일을 추가, 삭제할 수 있음할 일을 완료 처리할 수 있음데이터를 localStorage에 저장하여 새로고침해도 유지됨✔ HTML, CSS, 자바스크립트의 DOM 조작, 이벤트 핸들링, localStorage 활용  2. 프로젝트 폴더 구조todo-app/│── index.htm.. 2025. 3. 16.
AI 저작권 문제, 해결 가능할까? 생성형 AI의 법적 이슈 분석 인공지능(AI)이 발전하면서 우리가 접하는 콘텐츠의 상당 부분이 AI에 의해 생성되고 있다. 그림, 음악, 글, 영상까지도 AI가 창작할 수 있는 시대가 도래했다. 하지만 이에 따라 AI 저작권 문제도 뜨거운 논란이 되고 있다. 과연 AI가 만든 콘텐츠의 저작권은 누구에게 있을까? 법적으로 보호받을 수 있을까? 그리고 기업과 창작자들은 어떤 대비를 해야 할까? 이번 글에서는 AI 저작권 문제의 주요 쟁점과 해결 방안을 살펴본다.AI 생성 콘텐츠, 저작권 보호를 받을 수 있을까?현재 전 세계적으로 AI가 생성한 콘텐츠에 대한 저작권 보호 여부는 명확하지 않다. 대부분의 국가에서는 인간이 아닌 존재가 만든 창작물은 저작권 보호를 받을 수 없다는 입장을 취하고 있다. 예를 들어, 미국 저작권청(USCO)은 “.. 2025. 3. 15.
[자바스크립트 14일 완전정복] 13일차 - 테스트와 디버깅 자바스크립트를 사용하다 보면 버그(Bug)를 찾고 수정하는 과정(디버깅)이 꼭 필요해요.또한, 테스트(Test)를 통해 코드의 정확성을 검증하면 유지보수가 훨씬 쉬워집니다.오늘은 브라우저 개발자 도구 활용법, console.log()와 debugger, 그리고 Jest와 같은 테스팅 도구를 소개하겠습니다.  1. 브라우저 개발자 도구(DevTools) 활용웹 개발자에게 브라우저의 개발자 도구(DevTools)는 필수적인 도구예요.✔ F12 또는 Ctrl + Shift + I (Cmd + Opt + I on Mac)로 실행 가능 1.1 콘솔(Console) 패널 활용콘솔 패널은 자바스크립트 오류 확인 및 디버깅에 유용해요. (1) console.log()로 값 출력let name = "이예나";consol.. 2025. 3. 15.
[자바스크립트 14일 완전정복] 12일차 - 객체 지향 프로그래밍(OOP) 기초 자바스크립트는 객체 기반 프로그래밍 언어로, 객체 지향 프로그래밍(Object-Oriented Programming, OOP) 개념을 활용하면 더 구조적인 코드 작성이 가능해요.오늘은 클래스와 생성자, 프로토타입 기반 객체 지향 개념, 상속과 super 키워드, 캡슐화와 다형성에 대해 배워보겠습니다.  1. 객체 지향 프로그래밍(OOP)이란?객체 지향 프로그래밍(OOP)은 데이터(속성)와 해당 데이터를 다루는 함수(메서드)를 하나의 객체로 묶어 관리하는 방식입니다.✔ 코드의 재사용성이 높아지고 유지보수가 쉬워짐✔ 코드가 구조적으로 정리되어 가독성이 좋아짐OOP의 주요 개념클래스(Class)와 생성자(Constructor): 객체를 생성하는 틀프로토타입(Prototype): 자바스크립트의 객체 상속 메커니.. 2025. 3. 14.
[자바스크립트 14일 완전정복] 11일차 - 모듈과 웹팩(Webpack) 기초 자바스크립트가 발전하면서 코드를 효율적으로 관리하고 재사용할 수 있는 방법이 필요해졌어요.그 해결책 중 하나가 모듈 시스템(Module System)이며, 이를 효과적으로 번들링해주는 도구가 웹팩(Webpack)이에요.오늘은 모듈 개념, 웹팩(Webpack)과 바벨(Babel)의 기초 개념, 그리고 간단한 프로젝트에 적용하는 방법을 배워보겠습니다!     1. 모듈(Module)이란?1.1 모듈의 개념모듈(module)은 코드를 여러 파일로 나누어 관리할 수 있도록 하는 기능이에요.✔ 코드 재사용성이 높아짐✔ 파일 단위로 분리하여 유지보수 용이✔ 전역 변수 오염 방지 1.2 export와 import 기본 사용법(1) 모듈 파일에서 export 사용하기// math.js (모듈 파일)export func.. 2025. 3. 13.
[자바스크립트 14일 완전정복] 10일차 - 브라우저 API 및 로컬 스토리지 자바스크립트는 단순히 웹 페이지의 요소를 조작하는 것뿐만 아니라, 브라우저의 다양한 기능을 활용할 수도 있어요.오늘은 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage), JSON 데이터 처리, Fetch API를 이용한 HTTP 요청, 그리고 에러 처리 방법을 배워보겠습니다.  1. 로컬 스토리지(LocalStorage)와 세션 스토리지(SessionStorage)1.1 스토리지 개념브라우저는 데이터를 저장할 수 있는 웹 스토리지(Web Storage) 기능을 제공합니다.localStorage: 데이터를 영구적으로 저장 (브라우저를 닫아도 유지됨)sessionStorage: 데이터를 세션 동안만 유지 (브라우저를 닫으면 삭제됨)✔ 쿠키보다 사용이 간편하고 저장할 수 있는.. 2025. 3. 12.

티스토리툴바