Multi Developer SuHo

목차1. HTML 개념2. HTML 구조3. 안녕하세요~ HTML의 구조와 문법, 자주 사용되는 태그 및 종류를 알아보겠습니다. HTML 이 어떤 것인지? 알고 계신가요? 아시는 분들도 있으실거고, 모르시는 분들도 있으실겁니다. 소개할 내용에서는 자주 사용되는 태그들과  태그들이 웹 브라우저에서 어떤 기능과 효과를 나타내는지 알아보겠습니다.  HTML이란? HTML을  들어보신 적 있으신가요? 전공자 분들은 들어보셨을지도 모르겠지만, 비전공자 분들은  처음듣는 키워드일 수 있습니다.  HTML은 hyperText Markup Language  하이퍼 링크  쉽게 말해서 하이퍼 링크가 포함된 문서 라고 생각하시면 편합니다. 하이퍼 링크란?하이퍼 링크는 원하는 텍스트에  하이퍼 링크를 추가하면 텍스트를 클릭..

안녕하세요~  HTML로만 사용하여 간단한 로그인 페이지와 회원가입 페이지 , 링크를 눌렀을 때 해당하는 페이지로 이동하는 실습을 만들어보았습니다. 주로 로그인 페이지나 회원가입 페이지는 게임 , 음악, 등 다양한 곳에서 활용됩니다. 로그인 페이지를 생각하면 무엇이 떠오르시나요?🤔🤔🤔저는 아이디와 비밀번호를 입력해야 한다는 생각이 먼저 떠오릅니다.  아이디와 비밀번호는 로그인 하기전 회원가입 페이지에서 등록할 수 있고, 등록된 정보를 로그인 페이지에서 입력하면 로그인 할 수 있게 됩니다. 그럼 로그인 페이지 만들기 전 회원가입이 먼저겠죠? 회원가입 부터 먼저 보겠습니다.  회원가입 페이지에는 다양한 개인정보가 저장됩니다. 아이디, 비밀번호, 주소, 전화번호 등 중요한 정보들이 저장되는데요. 이러한 ..

안녕하세요~  이번에는 자바스크립트와 관련된 용어들을 나열하겠습니다. 편안하게 보세요 😇😇😇Web Animation API(WAAPI) : 웹 페이지에서 애니메이션을 만들고 제어하는 데 사용되는 강력한 자바스크립트 API Web API :  웹 개발에서 서버와 클라이언트 간의 데이터 교환을 가능하게 하는 응용 프로그램 인터페이스  (setTimeout , fetch , DOM)  값(value) : 키에 해당하는 데이터 객체지향 언어 : 객체지향 프로그래밍을 지원하는 프로그래밍 언어 (EX 자바, C++, 파이썬, 자바스크립트)객체지향 프로그래밍(OOP)  : 캡슐화, 추상화, 상속, 다형성 네 가지 개념을 토대로 객체를 만들고 조작하여 복잡한 문제를 해결하는 것동기(synchronous) : 코드..

안녕하세요 최근 눈이 내려서  더 추워진 것 같습니다. 여러분들도 빙판길 조심하시고 다가오는 크리스마스 까지 몸 건강하게 챙기세요!! 그럼 이번 시간에 학습할 내용 소개해드리겠습니다. Babel(바벨)에 대해 들어본 적 있으신가요? 저도 들어본 적은 있지만 자세한 내용은 잘 모르기 때문에 바벨에 대해 알아보겠습니다.바벨 공식 문서  사이트 입니다~https://babeljs.io/ Babel · BabelThe compiler for next generation JavaScriptbabeljs.ioBabel(바벨)은 자바스크립트 컴파일러이다. 이전에 컴파일러란? 컴파일러는 "우리가 작성한 프로그램 코드를 컴퓨터가 이해할 수 있는 기계어로 변환해준다" 라고 생각하면 됩니다.쉽게 설명하자면 바벨은 마치 자바..

안녕하세요~  이번에는 웹 개발에 관련된 용어들을 학습해보는 시간을 가져보겠습니다.SPA라고 하면 모르실 수도 있지만, "싱글 페이지" 라고 들어보셧던 적 있으신가요? SPA(Singale Page Application) 이란?  single을 번역하면  "하나의 , 한 개의" 이렇게 번역됩니다. 말 그대로 "한 개의 HTML 페이지로 구성된 웹 애플리케이션" 이라고 생각하시면 편합니다. 기존 웹 페이지와 SPA 차이점을 간단하게 소개하자면 기존 웹 페이지는 다른 페이지로 이동할 때마다 전체 페이지가 새로 로딩되는 방식이지만, SPA는 한 페이지 안에서 필요한 부분만 바꿔서 보여주기 때문에 렌더링 되는 속도가 빠르게 느껴질 수 있습니다. 싱글페이지의 대표적인 예시가 될 수 있는 Gmail , Facebo..

안녕하세요~ 날씨가 점점 추워지는 것 같죠? 여러분들도 몸살 감기 조심하세요. 😷😷 그럼 시작하겠습니다.이번에는 리액트에서 중요한 State에 대해 알아보겠습니다. 리액트에서 State란?컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용하는 것을 말합니다. 쉽게 말해, 컴포넌트가 어떤 모습을 보여줄지 결정하는 데이터라고 생각하면 됩니다. 그럼 왜 ❓❓ State를 사용해는지 궁금증이 있으실 겁니다.이런 궁금증을 해결하기 위해 제가 생각해본 결과일반적으로 변수에 할당된 값이 변경되면  렌더링시 html에 자동으로 반영이 되지않아, 직접 코드를 작업해서 해야하지만, state는 html 이 자동으로 재렌더링 되기 때문에 동적인 화면을 구현할 수 있기 때문에 사용합니다. 이러한  이유로 ..

안녕하세요~ 이번에는 리액트에서  웹 페이지를 구성하는 가장 기본적인 단위인 컴포넌트(Component)에 대해 살펴보겠습니다.크게 5가지로 1. 컴포넌트 개념  2.컴포넌트 활용   3. 컴포넌트 만드는법 , 4.컴포넌트 장단점 5. 함수형 컴포넌트 VS 클래스형 컴포넌트 차이점에 대해설명해보겠습니다.먼저, 컴포넌트의 개념입니다. 컴포넌트? , 처음 들었을 때는 어? 어디서 들어봤는데? 라고 생각하신 분들도 계실겁니다. 컴포넌트는 리액트 앱을 구성하는 가장 작고 독립적인 단위입니다. HTML, CSS, 그리고 JavaScript를 하나로 묶어 특정 기능이나 UI를 담당하는 요소라고 생각하면 됩니다.그럼 이 컴포넌트를 어디에다 활용할까요? 다음과 같은 곳에서 활용됩니다.컴포넌트 활용📓1.  UI 구성 ..