목차 Components란? 컴포넌트는 재사용할 수 있는 단위를 말한다. 레고로 자동차를 만들 때, 다양한 크기의 블럭을 조립하여 만들 듯이 공통되는 UI를 조각내고 다양한 곳에서 조립하듯이 앱을 만들 수 있도록 나누는 것이 컴포넌트이다! //리액트 컴포넌트 예시 //클래스형 class App extends React.Component { render() { return Hello world! } } ▶ 컴포넌트 //함수형 function Head(){ return ( 제목1 제목2 ); } ▶ 컴포넌트 우리는 이미 리액트 컴포넌트를 사용해봤다. 리액트 컴포넌트는 HTML에 정의된 태그가 아닌 , 와 같이 사용자 정의 태그를 만드는 것이라 생각해도 될 것 같다. 클래스형 컴포넌트 React.Compone..

목차 Element const element = Hello, world; 리액트의 가장 작은 단위이다. Component와는 다르다! Element는 Component의 구성요소이며 화면에 렌더링할 DOM 정보를 React에 알려주는 객체이다. Element가 있기 때문에 값이 변경된 부분만 다시 렌더링 할 수 있다. 어떻게 가능할까? JS의 경우 변경점은 시간 뿐임에도 불구하고 root부터 모든 태그가 전체적으로 다 변경된다. React의 경우 //root 아이디를 가진 태그를 찾아서 루트로 선언한다 const root = ReactDOM.createRoot( document.getElementById('root') ); //현재 시간을 보여주도록 jsx 작성 function tick() { //ele..

목차 순수 HTML 파일에서 React를 사용해보자 일단은 순수 HTML에서 React를 사용하는 방법을 알아보자. CDN으로 불러오는 라이브러리들은 무슨역할을 하고있는걸까? React - 가장 기본적으로 필요한 라이브러리이다. Babel - 리액트는 JSX라는 문법을 사용하는데, 이 Babel이 JSX를 JS로 변환해준다. - JSX는 다음에 자세히 알아볼 예정. 예제에서 return Hello world! 부분이 JSX가 사용된 부분이다. React-DOM - 최종적으로 Babel을 통해 JS로 변환된 코드를 HTML DOM으로 변환해준다. - 이런 태그는 HTML에 존재하지 않는다. 이런 특이한 태그들을 HTML DOM으로 변환해준다. Script 설명 render() : DOM 노드 렌더링 시 필..

저는 JS와 부트스트랩으로 웹사이트를 만들어본 경험이 있는데 쌩 HTML, CSS, JS로 프론트를 관리하다보면... 만든사람만 알게되는 구조가 되고 심지어 만든사람조차 이게 어디서 호출되는 함수인지 알수없는 현상이 발생하더라구요 그래서.. 프론트엔드 개발자가 사용하는 가장 유명한 라이브러리, React를 배워보려합니다! React가 뭘까?! 간단하게 말해서 웹사이트를 만들 수 있는 자바스크립트 라이브러리. 동적으로 웹사이트를 변화시키려면 수많은 작업이 필요한데, 이 수많은 작업을 쌩 Javascript로만 관리하기엔 복잡하고 어려워서 나오게 된것이 리액트입니다. React 프로젝트 셋팅하기 1. Node.Js 설치 https://nodejs.org/en/ 해당 사이트에 접속해서 LTS 버전 설치 (20..

이전 게시글 [Swiper] 스와이퍼 오류 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'E 다음 게시글 [Swiper] 스와이퍼 한 페이지에 여러개 사용하기. Multiple Swiper 이전 게시글 호출부분 fragment 지정부분 //⭐ID명 동적으로 가져옴 최상급 10000원 //⭐ID명 동적으로 가져옴 //⭐ID명 동적으 lotuus.tistory.com 호출부분 fragment 지정부분 //⭐ID명 동적으로 가져옴 최상급 10000원 //⭐ID명 동적으로 가져옴 //⭐ID명 동적으로 가져옴 swiper-button-next-custom은 버튼을 외부로 빼기위해 css..

다음 게시글 [Swiper] 스와이퍼 한 페이지에 여러개 사용하기. Multiple Swiper 이전 게시글 호출부분 fragment 지정부분 //⭐ID명 동적으로 가져옴 최상급 10000원 //⭐ID명 동적으로 가져옴 //⭐ID명 동적으로 가져옴 swiper-button-next-custom은 버튼을 외부로 빼기위해 css 적용한 것이 lotuus.tistory.com //fragment호출부분 //fragment지정부분 최상급 10000원 나는 swiper를 fragment로 사용하기위해 타임리프로 swiperName을 받아서 클래스를 추가하게끔했고, 사진처럼 버튼을 외부로 꺼내기 위해 swiper-cover라는 div로 한번 더 감싸주었다 그리고 한 페이지에 여러 슬라이드가 들어간 상태이다 (swi..

th:each : 타임리프의 반복문 객체List 중에서 객체 하나씩 꺼내기 Onions 2.41 yes #numbers 숫자 유틸리티 개체 .sequence(from, to) : from부터 to까지 1씩 증가 .sequence(from, to, step) : from부터 to까지 step씩 증가 each문의 상태변수 index 상태변수를 사용하고자한다면 "반복변수명+Stat+.index" 이렇게 조합해서 사용한다 - index : 0부터 시작하는 인덱스 - count : 1부터 시작하는 인덱스 - size : 리스트에 저장된 요소의 개수 - even : 현재 반복이 짝수인지 확인. true/false 반환 - odd : 현재 반복이 홀수인지 확인. true/false 반환 - first : 현재 반복이..

https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io CSS 선택자를 연습할 수 있는 사이트이다. 페이지에 접속하면 아래와 같이 화면이 뜨는데, 상단의 문제에 맞게 Editor에 작성하면된다. 태그명이 plate인 태그를 선택하는 것이니, css editor에 plate라고 쓰면 성공이다 ㅎㅎ 오른쪽 html코드를 참고하면서 문제를 하나씩 풀어가면된다! 아래는 1번~32번의 정답이다. 1 plate 태그 선택하기 2 bento 태그 선택하기 3 #fancy id선택하기 4 plate apple 태그(plate) 안의 태그(apple) 모두 선택하기 5 #f..