리엑트 부트스트랩은 빠르고 간결하게 스타일을 적용할 수 있도록 다양한 유틸리티 클래스를 제공한다. 하지만 막상 프로젝트에 사용하려고 하니 외우고 있는 게 아니라면 단축 클래스를 찾아봐야 하고 헷갈릴 때가 있어서, 정리해 두면 좋을 것 같아서 각각 어떻게 사용되는지 어떤 기능을 하는지 정리하려고 한다. 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/React
프로젝트를 하면서 클릭 시 클릭한 글자의 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는 순수 함수로 작성되는 것이 권장된다. 순수 함수의 정의순수 함수는 아래의 두가지 속성을 포함한 함수이다.부수 효과가 없다 - 외부의 상태를 변경하지 않는다. 함수 내부에서 전역 변수를 변경하거나, 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..
리액트를 기준으로 폴더, 컴포넌트등 여러 명명규칙을 잘 지켜야한다. react hooks 사용 시 소문자로 사용하시면 규칙 에러 표시된다고 한다. 폴더명 직접적으로 컴포넌트들이 들어있지 않은 디렉토리 폴더명의 첫시작은 소문자로 한다. (camelCase) 직접적으로 컴포넌트들이 들어있는 디렉토리 폴더명은 대문자로 시작하고 후속단어의 시작을 대문자로 한다. (PascalCase) 컴포넌트 명 (styled component 포함) PascalCase를 사용 컴포넌트 명과 파일명을 일치시킨다. 컴포넌트를 제외한 모든 태그들은 소문자로 한다. js 함수, 변수, hook camelCase를 사용 asset 파일 소문자 사용
