강의

멘토링

커뮤니티

보안 · 네트워크

/

네트워크

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

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

17명 이 수강하고 있어요.

    3시간 만에 완강할 수 있는 강의 ⏰
    네트워크기초
    프론트엔드
    크롬개발자도구
    개발자도구
    네트워크Google ChromeChrome DevTools웹앱

    수강 후 이런걸 얻을 수 있어요

    • 웹의 기본 구조와 개념을 통한 웹, 웹사이트, 웹페이지, 웹 브라우저 간의 관계 이해

    • 전통적인 웹사이트로부터 현대 웹 애플리케이션까지의 변화와 그 중요성 파악

    • 현대 웹 애플리케이션의 핵심인 컴포넌트 기반 개발 방식 체험

    • 웹 개발 도구와 기술의 통합으로 웹 애플리케이션 개발 전반 흐름 이해

    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)

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


    이런 분들께
    추천드려요

    학습 대상은
    누구일까요?

    • 웹과 관련된 다양한 개념에 대해 배우고 싶은 초보자

    • 백엔드 개발을 주로 해왔으나 프론트엔드에 대한 기본 지식을 갖고 싶은 개발자

    • 디자이너나 기획자로 일하면서 개발 팀과의 소통을 위해 기초적인 프론트엔드 지식을 필요로 하는 사람들

    커리큘럼

    전체

    7개 ∙ (1시간 3분)

    강의 게시일: 
    마지막 업데이트일: 

    수강평

    아직 충분한 평가를 받지 못한 강의입니다.
    모두에게 도움이 되는 수강평의 주인공이 되어주세요!

    ₩22,000

    비슷한 강의

    같은 분야의 다른 강의를 만나보세요!