Web

· Web/React
개요reactstrap에서 className 속성을 통해 Bootstrap의 다양한 스타일을 적용할 수 있는데, 기존 템플릿 코드롤 보면서 이게 뭘까 하는게 많았는데 깔끔하게 속성들을 정리해보고 가자.1. 레이아웃이름설명container고정 폭 컨테이너container-fluid전체 너비를 차지하는 컨테이너rowFlexbox 행 생성col자동 크기 조정 열col-{size}-n특정 크기(sm, md, lg, xl, xxl)에서 n만큼 너비를 차지d-flexFlexbox 컨테이너 활성화d-inline-flex인라인 Flexbox 컨테이너d-block블록 요소 표시d-inline인라인 요소로 표시d-none숨김 처리 2, Flexbox 관련이름설명flex-row주축을 가로 방향(기본값)으로 설정flex-co..
· Web/React
개요프로젝트 코드를 분석하는데 Router에서부터 머리가 띵해졌다. 화면을 변경하는 건 알겠는데 도대체 어떤 원리로? 어떻게? 정리해야겠지. 1. React Router란?React Router는 React 애플리케이션에서 클라이언트 측 라우팅(Client-Side Routing)을 쉽게 구현할 수 있도록 도와주는 라이브러리이다. React는 기본적으로 단일 페이지 애플리케이션(SPA, Single Page Application)이고, URL이 변경되더라도 페이지 전체를 새로고침하지 않고도 컴포넌트만 변경할 수 있도록 설계되어 있다. 여기서 React Router를 사용한다면 사용자가 특정 URL로 이동할 때 해당 URL에 맞는 컴포넌트를 렌더링한다. 1-1. React Router 필요성-> React..
· Web/React
개요React 프로젝트를 진행하면서 사용할 수 있는 템플릿 코드를 사용하고 있는데, reactstrap이라는게 코드에 나오면서 엥? 이게 뭐지 bootstrap은 아는데 이건 또 처음 보네. 뭔지는 알아야 쓸 수 있으니까 정리해보자  1. reactstrap이란?Bootstrap의 경우 반응형 레이아웃이나 다양한 UI 컴포넌트를 제공해 빠르고 효율적인 웹 개발을 가능하게 하는 CSS 프레임워크의 하나이다. 그 중 reactstrap은 React에서 Bootstrap을 쉽게 활용할 수 있도록 도와주는 라이브러리이다. Bootstrap의 다양한 컴포넌트를 React 방시긍로 제공하고, 스타일을 손쉽게 적용할 수 있도록 설계되어있다. 특징1) Bootstrap 기반-> Bootstrap의 UI 컴포넌틀르 Re..
· Web/React
개요React Hook이란? React Hook에 이어 오늘은 조건부 렌더링과 인라인 조건에 대해 정리해보겠다. 1. 조건부 렌더링(Conditional Rendering)이란?간단하게 말하자면, 특정 조건에 따라 화면에 표시되는 UI를 변경하는 기법이다. 1-1. truthy & falsy방법들을 알아보기 전에 자바스크립트의 truthy(참 같은 값)와 falsy(거짓 같은 값)에 어떤 것들이 있는지 알고 가는게 좋겠다. truthy와 falsy는 괄호안에 적어 놓은 것처럼, true와 같은 값, false와 같은 값들을 의미한다. truthy-> "hi" (문자열)-> 42 (숫자)-> [ ] (빈 배열)-> { } (빈 객체)-> function() { } (함수)-> true falsy-> 0 (..
알파카임
'Web' 카테고리의 글 목록