Front_End [JS기반] 27

[ 3D Web : Front_React.js ] React.JS : React를 구성하는 요소, React 컴포넌트란?

[ 3D Web : Front_React.js ] React.JS :  React를 구성하는 요소, React 컴포넌트란?    ∇ React.JS :: React란 무엇일까??목 차1. 리액트의 컴포넌트 [ Component ] 란?2. 컴포넌트 만들기3. 컴포넌트의 이름.  Ⅰ. React의 컴포넌트 [ Component ] 란?     🩻 컴포넌트 [ Component ] 란???                ∇ React는 화면에서 UI 요소를 구성할 때  '컴포넌트'라는 단위를 사용합니다.                         - 입력(props)을 받아 출력(Element)하는 역할                                   - React COmponent를 만들고자..

[ 3D Web : Front & Back_Next.JS ] Next.JS의 렌더링이 동작하는 원리.

[ 3D Web : Front & Back_Next.JS ] Next.JS의 렌더링이 동작하는 원리.  ∇ Front & Back _ Next.JS : Next.JS는 어떻게 렌더링이 이루어질까목 차1. NextJS?2. Next.JS란 React 기반의 프레임워크3. Pre-Rendering4. SSR & CSR5. SSG6. ISR7. 서버 컴포넌트 & Hydration8. Next.JS의 웹 서버는??9. 정리.  Ⅰ. NextJS란? ◎ Next.JS는  CSR 방식의 JS라이브러리인 React.js를    SSR(Server-side-Rendering) 방식으로 구현할 수 있도록 도와주는 프레임워크입니다.   Ⅱ. NextJS란 React 기반의 프레임워크.    § React.js는 기본적으..

[ 3D Web : Front&Back_Type Script ] 타입스크립트 : 타입스크립트 함수 타입 공부하기.

[ 3D Web : Front&Back_Type Script ] 타입스크립트 : 타입스크립트 함수 타입 공부하기.  ∇ Front & Back _ TypeScript : 타입스크립트 함수 타입 공부하기.목 차1. TS의 함수 표현 1-1 일반적인 함수 정의 1-2 Call Signature(함수 타입)2. TS의 매개변수 표현 2-1 선택적 매개변수 2-2 매개변수 초기화 2-3 나머지(rest) 매개변수 2-4 네임드 파라미터3. TS의 콜백/ 중첩 / 고차 함수 3-1 콜백 함수 3-2 중첩 함수 3-3 고차 함수4. TS의 this 표현 4-1 명시적 this5. TS의 함수-오버로딩  Ⅰ. TS의 함수 표현.    ※ TS에서 함수를 표..

[ 3D Web : Front_React.js ] React.JS : React란?

[ 3D Web : Front_React.js ] React.JS : React란? ∇ React.JS :: React란 무엇일까??목 차1. 리액트의 이해.2. 리액트 특징.3. React로 SPA 개발 시 장점.  Ⅰ. 리액트의 이해.      ∇ 리액트는 자바스크립트 라이브러리로, UI를 만드는데 사용합니다.               -구조가 MVC, MVVM 인 다른 프레임워크와 달리,  오직 View만 신경쓰는 라이브러리입니다.       ∇ 리액트에서는 특정부분이 어떻게 생길지 정하는 '선언체'가 있는데 이를 '컴포넌트'라고 합니다.              - '컴포넌트' 는 다른 프레임워크에서 UI를 다룰 때 사용하는 템플릿과는 다른 개념.                        -> 템..

[ 3D Web : Front & Back_Next.JS ] Next.JS란 무엇이고, 왜 사용하는걸까

[ 3D Web : Front & Back_Next.JS ]  Next.JS란 무엇이고, 왜 사용하는걸까   ∇ Front & Back _ Next.JS : Next.JS란 무엇이고, 왜 사용하는걸까?목 차1. OverView2. Next.JS 탄생배경3. Next.JS가 제공하는 주요 기능.4. Next.js 사용의 단점. Ⅰ. ☆ Overview.      ※ Next.js 는 React.js를 위해 만들어낸  '오픈소스 자바스크립트 웹 프레임워크 ' 로서,        React.js에는 없는        [ 서버 사이드 렌더링(SSR) & 정적 사이트 생성(SSG) & 증분 정적 재생성(ISR) ] 등 과 같은        다양하고 풍부한 기능을 제공합니다.  ◎ 서버사이드 렌더링(SSR)을 함..

[ 3D Web : Front_React.js ] React의 JSX & 컴포넌트 & prop & state

[ 3D Web : Front_React.js ] React 개념공부 1 : JSX & 컴포넌트 & prop & state   ∇ React 개념 공부 1 : JSX & 컴포넌트 & prop & state목 차1. React의 컨셉개념 정리.2. JSX란3. 컴포넌트란4. prop & state   Ⅰ. React의 컨셉 개념 정리.㉠. 리엑트의 특징.㉡. CSR vs SSR㉢. 리엑트가 하는 일.       ◎ React Concept         ※ React는 현재 현업에서 인기 있는 웹/앱(RN)의 View(UI)를 개발할 수 있도록 하는 JS-라이브러리입니다.                 § 보통 프로덕트(웹, 앱 혹은 테스크톱용 소프트웨어)을 만들기 위해서는                  ..

[ 3D Web : Front_React.js ] React의 동작원리 정리.

[ 3D Web : Front_React.js ]  React의  동작원리 정리.   ∇ Front_React : React의 동작원리.목 차1. React란?2. 돔(DOM)이란?3. 가상돔(Virtual DOM)이란?3. React의 생명주기.  Ⅰ. React란?        ☆ React는 사용자 인터페이스를 구축하기 위한, 선언적이고 효율적이며 유연한 JS라이브러리입니다.             "컴포넌트"라고 불리는 코드블록*파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.                ◇ React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리.              ◇ UI를 구성하는 컴포넌트 기반의 개발을 지원합니다.              ◇ Rea..

[ 3D Web : Front_React.js ] React란 무엇인가?

[ 3D Web : Front_React.js ] React란 무엇인가? ∇ FrontEnd_React : React.js란 무엇인가??목 차1. React란.2. React의 특징.  Ⅰ . React란?  ☆ React란  :  UI [사용자 인터페이스]를 구축하기 위한 선언적*효율적이며 유연한 JavaScript 라이브러리.           ==>> ◎ "컴포넌트"라고 불리는 코드블록을 활용해, 복잡한 UI를 구성하도록 돕습니다.         ◆  React를 사용하는 이유는 무엇일까?              √ 순수 JS만을 사용하여 화면을 구현하려면 관리가 힘들고,                    프로덕트의 규모가 커질수록 성능 저하의 원인이 될 수 있습니다.               √..

[ 3D Web : Front&Back_Type Script ] 타입스크립트 : 타입 선언의 종류 총정리.

[ 3D Web : Front&Back_Type Script ] 타입스크립트 : 타입 선언의 종류들 정리하기.  ∇ 타입스크립트 : '타입 선언' 정리하기.목 차1. 타입 : Boolean2. 타입 : Number3. 타입 : String4. 타입 : Array5. 타입 : Tuple6. 타입 : Enum7. 타입 : Object8. 타입 : Any9. 타입 : Unknown10. 타입 : Null // Undefined11. 타입 : Never12. 타입 : Void13. 타입 : Literal14. 타입 : Union15. 타입 : Intersection16. 타입 : Type Alias17. 타입 : Interface18. 타입 : Generic19. 타입간 대입 가능한 표.    Ⅰ. 타입 : ..

[ 3D Web : Front&Back_Type Script ] 타입스크립트의 타입 선언

[ 3D Web : Front&Back_Type Script ] 타입스크립트의 타입 선언    ∇ 타입스크립트 : 타입 선언.목 차1. 타입의 기본2. 타입 선언법.  Ⅰ. 타입의 기본.       Ⅰ - 1. 타입 지정.              : "타입스크립트"는 일반 변수, 매개변수, 객체 속성 등에    "   : TYPE   "  과 같은 형태로 타입 지정 가능합니다.let a: string = 'text'; // 문자열let b: number = 0; // 숫자형let c: boolean = true; // 논리형let d: any = true; // 어떤 타입이 올지 모를 때let e: string | number = '0'; // 문자열이나 숫자가 올 때        Ⅰ - 2. 타입 에..