자바스크립트 핵심 리뷰 #2에서는 CSS 변경, 이벤트 연결, DOM 조작 등에 대해 다루었습니다.
Highlights 🎨 CSS 변경: 메뉴 안의 li 요소들의 색상을 파란색으로 변경하는 방법을 배웠습니다. 🖱️ 이벤트 연결: 선택한 요소에 이벤트를 연결하여 원하는 동작을 수행할 수 있습니다. 🧱 DOM 조작: DOM 요소를 선택하고 조작하여 화면을 동적으로 변경할 수 있습니다.
Bullet Points 🔍 선택자와 반복문을 이용하여 메뉴 안의 li 요소들의 색상을 파란색으로 변경할 수 있습니다. 📝 객체의 속성을 활용하여 선택한 요소의 색상을 변경할 수 있습니다. 🚀 반복문을 활용하여 여러 개의 요소에 동일한 작업을 반복적으로 수행할 수 있습니다. 🕹️ 이벤트를 연결하여 요소에 클릭, 마우스 오버 등의 동작을 추가할 수 있습니다. ⚡ 코드를 최적화하여 사이트의 속도를 높일 수 있습니다. 🌈 배열과 객체를 효율적으로 활용하여 코드를 작성할 수 있습니다. 💡 메뉴를 동적으로 변경하거나 화면을 업데이트할 때 DOM 조작을 활용할 수 있습니다.
Highlights 🎯 선택자는 자바스크립트에서 가장 중요한 요소입니다. 📝 선택한 요소의 CSS를 수정하거나 이벤트를 연결할 수 있어야 합니다. 🔂 반복문은 선택한 요소들을 배열에서 처리하기 위해 필요합니다. 🍏 프로트 엔드 개발에서 자주 사용되는 반복문은 for문입니다. 🍒 선택한 요소를 리스트 형식으로 출력하는 예제를 실습합니다. 📜 선택자와 반복문을 통해 요소들을 동적으로 조작할 수 있습니다.
최근 하루가 멀다하고 다양한 tool이 소개되고 있고, AI를 활용하여 웹앱이나 앱등을 빠르게 구현할 수 있는 다양한 방법들이 소개되고 있습니다. 마음만 비우고 지갑만 채우면 얼마든지 코딩없이도 그럴싸한 웹사이트를 구현할 수 있는 시대입니다. 이럴 때 일수록 더욱더 정신을 가다듬고 우리의 살길을 찾아야 할 것 같습니다.
이제는 단순 무식한, 시간이 많이 소요되는 작업들은 AI에 시키고, 인간만이 할 수 있는 창의적인 기획력을 바탕으로 서비스를 기획하고 웹앱이든 앱이든 어플리케이션을 구현하는 전 과정에서 AI 툴들을 적절히 활용하고, AI 툴들에게 정확한 명령어로 원하는 답이 도출되도록 하는 노하우가 필요한 시대입니다.
우리의 자세 -
제가 생각하는 우리의 바람직한 자세는 튼튼한 기초를 가지고 AI툴에 휘둘리지 않고 정확하게 오더를 내리고, 결과물에서 미비한 부분을 올바르게 수정할 수 있는 탄탄한 기본기를 가지는 것이라고 생각합니다. 이에 제 채널을 통해 공부하고 계시는 많은 분들께 채널의 사용법에 대해 안내 드립니다.
- 웹앱의 동작원리 - 웹 표준과 브라우저 - VS Code 설치 및 실행 - HTML 개요 - CSS 개요 - CSS 속성 - HTML/CSS 기초 문법 - Figma 툴 활용 - 레이아웃 구현 기초 - 플렉서블 레이아웃 구현 - Git을 활용한 버전관리
2
웹 프로그래밍의 꽃! (JavaScript를 활용한 다양한 효과 적용)
88
- javascipt 기본 개념, 동작 원리, 개발 환경, 실행 방법 - 변수, 데이터 타입, 배열, 연산자, 객체, 함수 - 제어문 - 프로퍼티 정의생성자 함수에 의한 객체 생성, 프로토타입 - 전역 객체, this, 실행 컨텍스트, 클로저 - 클래스, 모듈, 웹팩 - ES6 함수 추가 기능 - String/Number/Date/Math/정규표현식 - 스프레드 문법 - 디스트럭처링 할당 - 문서 객체 모델(Document Object Model) - 동기식 처리 모델 vs 비동기식 처리 모델 - 이벤트 - Ajax- REST API - 자바스크립트 DOM 조작 - Form Input Validation Test
3
웹앱에생명을! (웹 상에 배포하기 위한 네트워크 기초 학습)
16
- 클라이언트, 서버 아키텍처의 이해 - 브라우저의 작동원리 학습 - 네트워크의 기초 지식 기반 REST API 이해 및 활용
4
웹앱에생명을! (데이터베이스를 이용해 살아있는 웹 앱 구현)
32
- 데이터베이스 개요 - 데이터베이스 모델링 - SELECT GROUP BY - INSERT, UPDATE, JOIN - Sub-Query, Index, View, Replication - BackUp, MongoDB
5
웹앱에생명을! (SQL함수를 활용한 정교한 웹 앱 구현)
40
- 날짜형 함수 , 문자형 함수, 숫자형 함수 - CASE, JOIN - COUNT, SUM, AVG, MIN, MAX
6
Web Project-static Web App (개인 프로젝트)
32
- 훈련생 관심분야 웹사이트 선정 리뉴얼 프로젝트 - 순수 자바스크립트 기반 웹사이트 구현
7
웹앱을정석대로! (다양한 유저가 사용할 수 있는 웹 앱 구현)
32
- 웹표준과 웹접근성을 준수하는 웹 앱 구현 - 크로스 브라우징 및 접속 환경 차이 학습
8
웹앱을보다 화려하게! (UI/UX를 이용한인터랙티브한웹 앱 학습)
64
- UX 기반 화면 구성의 효과와 방법 - 사용성 높은 UI 이해와 적용 - 사용성 높은 UX 이해와 적용 - Search Engine Optimized 웹앱
피그마활용 웹디자인 & 웹퍼블리싱 강의를 그린컴퓨터아트학원(종로점)에서 재직자 수업(일반도 신청가능)으로 진행합니다.
하루 3시간, 총 13일간 피그마를 활용한 웹디자인 기초와, 완성된 피그마 파일을 참조로 HTML, CSS, jQuery(javascript)등을 활용하여 웹페이지를 구현, 반응형 구현의 강의를 진행합니다. 또한 모바일 디자인을 참조하여 웹과는 다른 모바일의 환경에 최적화된 쇼핑몰을 구현합니다.
전반 5일은 디자인 파트는 디자인 초보자도 가능하지만, 7일간 코딩 파트의 강의내용은 html, css, script를 한번이라도 학습한 분을 대상으로 하기 때문에 기초가 부족한 분은 수업이 어려울 수 있습니다.
기초는 있지만 종합적으로 적용이 어려운 분,반응형이 힘든 분,모바일 전용 쇼핑몰 구현이 궁금한 분
