Multi Developer SuHo

안녕하세요~  이번에는 자바스크립트와 관련된 용어들을 나열하겠습니다. 편안하게 보세요 😇😇😇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 구성 ..

안녕하세요~   요즘 날씨가 쌀쌀하죠?🥶🥶  저도 역시 추위를 많이 타서 그런지 춥게 느껴집니다. 여러분들도 따뜻하게 입으시고 감기 조심하세요!!  그럼 이번시간에는 JSX가 무엇인지, JSX의 역할, 사용하는 이유, 장점과 단점, 간단한 사용방법에 대해 간략하게 이해하기 쉽도록  예시를  들어서 설명해드리겠습니다. JSX JSX는 JavaScript  +  XML의 약자로, React에서 UI를 더 직관적이고 간편하게 작성할 수 있게 해주는 확장한 문법 입니다. 쉽게 말해서  "HTML과 자바스크립트를 하나의 문법으로 섞어서 사용할 수 있게 해주는 것" 이렇게 생각하시면 더 쉽게 이해하실 수 있습니다. JSX의 역할은? ✍️다음은 JSX의 대표적인 역할 4가지입니다.그럼 이 JSX라는 문법을 왜 사..