키워드와 실습으로 읽는 웹 프론트엔드 기초개념 총정리

웹 개발 입문자를 위한 나침반, 당신이 웹 프론트엔드에 대해 모르는 것을 발견하고 체계적으로 나아가기 위한 가이드 강의입니다.

16명 이 수강하고 있어요.

어메이징론

입문자를 위해 준비한
[네트워크, 프론트엔드] 강의입니다.

이런 걸 배울 수 있어요

웹의 기본 구조와 개념을 통한 웹, 웹사이트, 웹페이지, 웹 브라우저 간의 관계 이해
전통적인 웹사이트로부터 현대 웹 애플리케이션까지의 변화와 그 중요성 파악
현대 웹 애플리케이션의 핵심인 컴포넌트 기반 개발 방식 체험
웹 개발 도구와 기술의 통합으로 웹 애플리케이션 개발 전반 흐름 이해

ChatGPT와 함께 공부하는
크롬 개발자 도구 ⚒️

이런 고민 해보셨나요?

🥲 웹과 관련된 기초적인 개념들이 잘 정리되지 않아 혼란스러워요.

🥲 웹페이지와 웹 애플리케이션의 차이와 동작 원리를 명확히 이해하고 싶어요.

🥲 네트워크와 웹브라우저가 어떻게 함께 작동하는지 알고 싶어요.

이론부터 실습까지 단 1시간! 📌

Chrome 개발자 도구는 웹 개발자들이 웹 페이지를 디버깅하고 분석하는 데 유용한 도구입니다. 이 강의에서는 웹의 전반적인 개념과 웹 페이지의 제작, 그리고 웹 애플리케이션의 동작 원리를 학습할 수 있습니다. 웹, 웹페이지, 네트워크, 웹브라우저, 웹 애플리케이션과 같은 기초 개념들을 체계적으로 학습합니다.

이 개발자 도구 강의는 조금 다른 방식으로 진행됩니다. 키워드 기반으로 ChatGPT와 함께할 거거든요. 이론으로 배운 게 실제로 어떻게 작동하는지 확인하면서 웹의 세계에 성공적으로 발을 딛어 보세요.

고민 해결 방법 🛠️

웹의 기본 개념부터 체계적으로 설명해 드립니다.
실제 웹페이지와 웹 애플리케이션 예제를 통해 그 차이와 동작 원리를 직접 경험하도록 도와드릴게요.
간단한 네트워크 테스트와 웹브라우저 동작 원리를 통해 각각의 역할을 명확히 이해하도록 도와드려요.

강의 수강 후 여러분은 🌱

웹과 관련된 다양한 개념들에 대한 깊은 이해를 갖게 됩니다.
웹페이지와 웹 애플리케이션의 동작 원리를 명확히 알게 되어, 실제 개발 시 효과적인 문제 해결 능력을 키울 수 있어요.
네트워크와 웹브라우저의 상호작용을 이해함으로써, 웹 기반의 서비스나 애플리케이션을 구축할 때 필요한 기술적 지식을 얻게 돼요.

학습 내용 📚

웹의 개념: 웹이란 무엇인가, 웹의 역사와 발전
웹페이지: 웹페이지의 구조와 동작 원리
네트워크: 웹페이지가 사용자에게 어떻게 전달되는지, 기본적인 네트워크 원리
웹브라우저: 웹페이지를 어떻게 해석하고 표시하는지에 대한 웹브라우저의 역할
웹 애플리케이션: 서버와 클라이언트 간의 상호작용과 웹 애플리케이션의 동작 원리

이런 분들께 추천해요 🙆‍♀️

웹에 관한 다양한 개념을 배우고 싶은 초보자

프론트엔드 기본 지식을 갖고 싶은 백엔드 개발자

개발팀과 소통해야 하는 디자이너 또는 기획자

예상 질문 🧐

Q. 왜 웹의 기본 원리와 동작을 배워야 하나요?

웹의 기본 원리와 동작을 이해하면 웹사이트나 웹앱의 구조를 이해하는 데 큰 도움이 됩니다. 이를 통해 웹 개발에 필요한 기술적 배경지식을 갖출 수 있습니다.

Q. 웹의 기본 원리와 동작을 배우면 어떤 일을 할 수 있나요?

웹사이트와 웹 애플리케이션의 기본 구조를 이해하고, 네트워크와 웹브라우저의 상호작용을 파악하여 효과적인 웹 서비스 구축에 기본적인 지식을 갖게 됩니다.

Q. 비전공자도 들을 수 있는 강의인가요?

네, 비전공자도 이해하기 쉽게 기초부터 체계적으로 설명하므로, 웹에 대한 사전 지식이 없는 분들도 수강할 수 있습니다.

Q. 강의를 듣기 전 준비해야 할 것이 있나요?

특별한 준비는 필요하지 않습니다. 단, 간단한 웹 서핑 경험이 있다면 강의 내용을 더 쉽게 이해할 수 있을 것입니다.

Q. 수업 내용을 어느 수준까지 다루나요?

웹의 기본 개념부터 웹페이지와 웹 애플리케이션의 동작 원리, 네트워크와 웹브라우저의 상호작용까지 기본적인 웹 동작 원리에 대해 전반적으로 다룹니다.

Q. 수강 관련 참고 사항(갖춰야 할 환경, 기타 유의사항 등)이 있나요?

강의는 온라인 플랫폼에서 진행되므로 안정적인 인터넷 환경이 필요합니다. 특별한 소프트웨어나 도구는 필요하지 않으나, 실습을 위해 웹 브라우저 설치가 필요할 수 있습니다.

수강 전 참고 사항 📢

실습 환경

운영 체제 및 버전(OS): Windows 혹은 macOS
사용 도구: 크롬 브라우저 개발자도구 및 Chat-GPT

선수 지식 및 유의사항

웹을 공부하고 싶은 모두를 위해 어떤 걸 더 깊게 공부해야 할지를 찾기 위한 강의이므로 선수 지식은 없습니다.
- 다만 모르는 키워드가 나오면 그냥 지나치시기보다는 스스로 찾아보시기를 바랍니다.
개발 초심자가 기초지식을 채우는 도구로 Chat-GPT만 한 게 없다고 생각합니다.
- 다만 Chat-GPT는 부정확한 내용이 있을 수 있으니 공식 문서와 크로스체크하는 것이 좋습니다.

지식공유자 소개 ✒️

현재 8년 차 웹 풀스택 개발자로 일하고 있어요.

동료 개발자들이 효율적이고 안정적인 서비스를 만들 수 있는 환경을 구축합니다.
Typescript, Javascript, React, Next.js, Node.js, GraphQL, ESLint 등 광범위한 범위를 다루고 있습니다.

프론트엔드 개발자 멘토로 여러 번 활동했어요.

👨‍👩‍👧‍👦 프로그래머스 FE 데브코스 1기
⛳ 카우치코딩 6주 포트폴리오 완성 9기~12기
⛺ 네이버 커넥트재단 부스트캠프 7기

또한 프론트엔드 개발자를 위한 강의도 만들었습니다.

🪄 코드스테이츠 교육 콘텐츠 제작
- 중급 개발자를 위한 UI 라이브러리 개발 (React Library Cloning)

그리고 실무에서 배운 지식들을 계속 공유하고 있습니다.

인스타그램 : https://www.instagram.com/ronpark.dev
Velog : https://velog.io/@ron

이런 분들께
추천드려요!

학습 대상은
누구일까요?

웹과 관련된 다양한 개념에 대해 배우고 싶은 초보자
백엔드 개발을 주로 해왔으나 프론트엔드에 대한 기본 지식을 갖고 싶은 개발자
디자이너나 기획자로 일하면서 개발 팀과의 소통을 위해 기초적인 프론트엔드 지식을 필요로 하는 사람들

안녕하세요
어메이징론입니다.

개발 실무에 있어서 자신이 모르는 것을 인지하고, 그것을 스스로 찾아 공부하는 능력이 중요하다고 생각합니다.

그래서 제가 생각하는 이상적인 교육은 단순히 지식을 전달하는 것이 아닙니다.

오히려, '어떻게 학습해야 하는지', '모르는 것을 어떻게 인식하고 찾아나가는지'에 대한 방향성을 제시하는 것이 중요하다고 생각합니다. 제가 준비하는 강의는 바로 이 목적으로 시작하게 되었습니다.

인스타그램 : https://www.instagram.com/ronpark.dev
Velog : https://velog.io/@ron

커리큘럼

전체

7개 ∙ (1시간 3분)

섹션 1. 기초개념 총정리

7개 ∙ (1시간 3분)

프롤로그
01:32
웹?
05:59
웹 페이지?
06:21
웹 페이지와 네트워크
08:37
웹 페이지의 종류
09:13
웹 브라우저?
18:22
웹 어플리케이션?
13:30

강의 게시일: 2023. 09. 13.

마지막 업데이트일: 2023. 09. 14.

수강평

아직 충분한 평가를 받지 못한 강의입니다.

모두에게 도움이 되는 수강평의 주인공이 되어주세요!