유튜브관련 (78) 썸네일형 리스트형 [React강좌] 4강 컴포넌트 만들어보기 - 오쌤의 니가스터디 1. 컴포넌트 제작을 위한 이해 - 지난 강좌 때 이야기 했던 가상돔(Virtual Dom)을 이용한 페이지 구현 설명 그림입니다. - 이것을 이용해서 컴포넌트들을 만들어보도록 하겠습니다. - 지난 강좌를 확인해 보세요. https://ossam5.tistory.com/402 2. 컴포넌트란? 1) 컴포넌트의 정의 ## 정의 - 재사용 가능한 UI - 단순한 템플릿 이상의 구현체 ## 기능 - 부모에게서 값을 받아와서 보여주거나 사용 => props - 컴포넌트 자신이 사용할 값을 정의하고 필요할 때 업데이트 => state - UI에서 보여줘야 하는 값이 바뀌면 DOM에 변화를 줌 ## 자손 컴포넌트를 부모가 사용할 때 # 불러오기 import 컴포넌트명 from '파일경로'; # JSX로 자손데이터 .. [React강좌] 3강 Virtual DOM을 이용한 리액트 - 오쌤의 니가스터디 1. DOM 1) DOM의 정의 - 문서객체 모델(Document Object Model)의 약자입니다. - 객체로 문서구조는 표현하는 방법으로 XML이나 HTML로 작성합니다. ## 간단한 HTML코드 로고 리스트 리스트 리스트 메인네비게이션 ## DOM트리 ## DOM의 단점 - 동적 UI에 최적화되어 있지 않다는 단점이 있습니다. - HTML자체적으로는 정적이어서 이것을 Javascript로 동적으로 만듭니다. - 리액트를 제작한 페이스북의 페이지는 스크롤바를 내릴수록 수많은 데이터가 로딩되는데 데이터를 표현하는 요소가 너무 많아 직접적으로 접근하여 변화를 주다 보면 성능 이슈가 발생해서 조금씩 느려지기 시작합니다. - DOM을 조작할 때마다 엔진이 웹페이지를 새로 그리기 때문에 업데이트가 너무 잦.. [React강좌] 2강 VS Code를 이용한 프로젝트 생성 - 오쌤의 니가스터디 1. 새 터미널 생성하기 - 원하는 폴더를 선택한 후 [터미널]의 [새 터미널]을 눌러줍니다. - [Git]을 지난 강좌에서 설치했으므로 굳이 [cmd]를 열지 않아도 [BASH] 시뮬레이터로 사용 가능합니다. - 혹시 Git이 설치되어 있지 않은 분은 하단 주소를 클릭해서 Git을 설치해 주세요. git-scm.com/download/win Git - Downloading Package Download for Windows Click here to download the latest (2.39.1) 32-bit version of Git for Windows. This is the most recent maintained build. It was released 12 days ago, on 2023-0.. [React강좌] 1강 리액트작업을 위한 환경설정하기 - 오쌤의 니가스터디 1. 리액트(React)란? 1) 프런트엔드 라이브러리 / 프레임워크 ** 단순한 정적페이지 자바스크립트 없이 HTML과 CSS만을 사용한 정적페이지를 제작하는 것이라면 프런트엔드 라이브러리를 사용할 필요는 없습니다. ** 현재 트렌드 단순한 웹페이지가 아닌 웹어플리케이션, 유저의 행동에 따라 동적인 화면을 보여줘야 하고, 동적으로 유저인터페이스를 관리하기 위해서는 수많은 상태를 관리해야 해야 한다. 그래서 기존 자바스크립트나 제이쿼리로는 부족한 상황입니다. ** 프런트엔드 라이브러리의 등장 수많은 DOM, 상태값, 업데이트값에 대한 관리를 최소한으로 줄이고, 오직 기능개발과 사용자 유저 인터페이스(UI)를 구현하는데 집중할 수 있도록 새로운 형태의 JS들이 등장했습니다. 2) 프론트엔드 라이브러리 3 .. [유튜브] 2023년 New 웹디자인기능사 실기 강좌 소스(완결) 보호되어 있는 글입니다. [유튜브] 오쌤의 니가스터디 - JS중급+ES6강좌 보호되어 있는 글입니다. [유튜브] 오쌤의 니가스터디 - 피그마포트폴리오 소스 보호되어 있는 글입니다. [유튜브] 오쌤의 니가스터디 - 피그마기초강좌 안녕하세요. 오쌤입니다. 공부의 효과적인 전달을 위해 유튜브를 개설해보았습니다. 블로그와 함께 사용할 예정입니다. 웹프론트엔드의 모든 것을 담아볼 유튜브 계정입니다. 주소 : https://www.youtube.com/channel/UCAi3huK5H9VOtB_J5tYk4qg?view_as=subscriber 오쌤의 니가스터디 웹퍼블리셔와 웹프론트엔드, 그리고 웹디자인기능사까지 강의합니다. 웹 프론트엔드 개발을 쉽게 배우고 습득하세요. www.youtube.com ★ 오쌤의 니가스터디 - 피그마강좌 목차 Chapter 00. 인트로 : https://www.youtube.com/watch?v=LsCsGL7X8aE Chapter 01. 설치 및 인터페이스 : https://www.youtube.com/wa.. 이전 1 ··· 6 7 8 9 10 다음
