리엑트 부트스트랩은 빠르고 간결하게 스타일을 적용할 수 있도록 다양한 유틸리티 클래스를 제공한다. 하지만 막상 프로젝트에 사용하려고 하니 외우고 있는 게 아니라면 단축 클래스를 찾아봐야 하고 헷갈릴 때가 있어서, 정리해 두면 좋을 것 같아서 각각 어떻게 사용되는지 어떤 기능을 하는지 정리하려고 한다. Margin and Padding패딩과 마진은 외부, 내부 여백을 설정하는데 사용된다. All Sides (모든 면)m-0 / p-0: 여백 없음m-1 / p-1: 0.25remm-2 / p-2: 0.5 remm-3 / p-3: 1 remm-4 / p-4: 1.5 remm-5 / p-5: 3 remm-auto: 자동 여백 (주로 수평 정렬)Specific Sides (특정 면)mt-*, mr-*, mb-*,..
FrontEnd
프로젝트를 하면서 클릭 시 클릭한 글자의 url로 이동시켜주고 싶었다.예를 들어, 리엑트를 클릭하면 '리엑트/'로 이동 시켜주고 싶었다. 리엑트에서 특정 항목을 클릭했을때 해당 항목의 이름에 따라 URL로 이동하기 위해서는 'react-router-dom의 'useNavigate' 훅을 이용하여 처리할 수 있다. import { useNavigate } from "react-router-dom"; // useNavigate 훅 임포트function CategoryList() { ... const navigate = useNavigate(); // useNavigate 훅 사용 ... const handleClick = (categoryName) => { navigate(`/${categ..
[React] 순수 함수순수 함수란React에서 순수함수란 컴포넌트의 렌터링 과정에서 자주 언급되는 개념이다. 일반적으로 React는 순수 함수로 작성되는 것이 권장된다. 순수 함수의 정의순수 함수는 아래의 두가지jongseoung.tistory.com JavaScript에서 배열을 다룰 때 자주 사용되는 다양한 배열 메서드들이 있다. 이 매서드들은 배열의 각 요소에 대해 반복 작업을 수행하거나, 배열의 일부를 필터링하거나, 배열을 변형시키는 등의 작업을 할 때 매우 유용하다. reduce배열의 요소를 순회하면서 콜백 함수를 실행하고, 그 결과를 누적하여 단일 값을 반환한다. 이 매서드는 배열을 하나의 값으로 누적하는데 유용하다.const numbers = [1, 2, 3, 4];const sum = n..
순수 함수란React에서 순수함수란 컴포넌트의 렌터링 과정에서 자주 언급되는 개념이다. 일반적으로 React는 순수 함수로 작성되는 것이 권장된다. 순수 함수의 정의순수 함수는 아래의 두가지 속성을 포함한 함수이다.부수 효과가 없다 - 외부의 상태를 변경하지 않는다. 함수 내부에서 전역 변수를 변경하거나, DOM을 조작하거나, 네트워크 요청을 보내는 등의 동작을 하지 않는다. 즉, 주어진 입력 값만을 가지고 처리하며, 함수 외부에 영향을 미치지 않는다.같은 입력에 대해 항상 같은 출력을 반환한다. - 동일한 인풋이 주어졌을때 항상 동일한 결과를 반환한다. 외부의 상태나 입력값 이외의 어떤 것도 결과에 영항을 미치지 않는다. 순수 함수 예시// 순수 함수의 예시function add(a, b) { ret..
React 애플리케이션을 만들때, 가장 많이 사용되는 도구 중 하나가 'Create React App'이다. 이 도구는 React 개발 환경을 손쉽게 설정해주며, 여러가지 유용한 기능을 기본으로 제공한다. 하지만, Parcle 번들러를 이용하여 더 간단한 설정으로 가벼운 설정과 빠른 빌드업을 하여 프로젝트를 관리할 수 있다. Create React App으로 React 프로젝트 생성프로젝트 생성npx create-react-app myreact01-cramyreact01-cra라는 이름의 프로젝트를 생성한다. 필요한 패키지와 기본 React 파일 구조가 생성된다. 명령어npm run start위 명렁어를 사용하여 개발 서버를 실행하여, 브라우저에서 애플리케이션을 확인할 수 있게 한다. 기본적으로 'lo..
