KBW's cosmos

우선 기존에 사용되던 defaultProps는 더 이상 사용되지 않는다. (참고↓) RFC: createElement changes and surrounding deprecations by sebmarkbage · Pull Request #107 · reactjs/rfcs This proposal simplifies how React.createElement works and ultimately lets us remove the need for forwardRef. Deprecate "module pattern" components. Deprecate defaultProps on function components. ... github.com 가장 쉽게 사용할 수 있는 방법은 optional argume..

프로젝트 폴더 구조가 겹겹으로 되어있는 경우, 상대경로의 문제점은 위와같이 코드가 길어지고 지저분해진다는 것이다. 때문에 대부분 절대경로를 사용한다고 한다. 그리고 이미지 경로에도 마찬가지로 위와 같이 불편하고 지저분한 감이 있었다. (img태그의 src 속성에 require("경로").default를하면 엑박이 뜨지 않는다.) 이때 발견한 괜찮은 방법은 Craco라는 모듈과 craco-alias라는 플러그인을 사용해 tsconfig 옵션을 적용하는 것이다. Craco Create React App Configuration Override Create-React-App(CRA)를 쉽게 설정하기 위해 만들어졌다. craco 모듈을 설치하고 root 폴더에 craco.config.js 파일을 만들고 그곳에 ..

interface MemberInfoTextProps { isBold: boolean; fontSize: string; fontColor: string; textAlign: string; } export const InfoText = styled.p` font-weight: ${props => props.isBold ? "bold" : "normal"}; font-size: ${props => props.fontSize}; color: ${props => props.fontColor}; text-align: ${props => props.textAlign}; ` 위와 같이 interface로 props의 속성들을 정의해주고 괄호 안에 이 interface를 넣습니다. 그리고 ${}로 props를 받은 뒤..

1단계 : 구글 폰트 웹 사이트 접속하기 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위 사이트에 접속해 원하는 폰트를 선택한다. 2단계 : 폰트 검색해서 찾기 맘에 드는 폰트를 찾아서 들어간다. 그리고 스크롤을 내려 Styles 탭에서 px을 조절하며 맘에드는 스타일을 고른다. 그리고 오른쪽에 있는 Select this style을 클릭한다. 3단계 : 폰트 스타일 복사하기 그럼 옆에 나오는 창에서 @import를 클릭한 후 아래 두 코드를 복사해둔다. 4단계 : HTML, CSS 파일에 붙여넣기 먼저 App.css 파일에..

우선 위와 같이 public 폴더안에 폴더를 만들고 이미지 파일을 넣어준다. 그리고 위와 같이 경로를 설정해주면 아주 쉽게 불러올 수 있다!

useHistory를 이용해서 페이지를 이동할 때 아래와 같이 작성할 수 있다. history.push("/main"); 하지만 만약 이미 main페이지에 있다면 이미 main페이지기 때문에 이동하지 않는다. 이때, 새로고침을 하게 해주고 싶다면 아래 코드를 사용하면 된다. window.location.replace("/main")

매개변수가 들어갈 필요가 없는 경우에는 버튼 이렇게 함수 이름만 넣으면 된다. 근데 매개변수가 들어가야 할 경우에는 버튼 이렇게 바로 괄호치고 넣으면 안된다. 화살표 함수를 사용해 넣어줘야한다. exampleFunc("parameter")}>버튼

버튼 위와 같이 태그가 있다고 할 때, 기존의 React라면 아래와 같이 style을 inline으로 넣을 수 있다. 버튼 하지만 Styled Component를 이용하는 경우 이렇게 넣으면 아래와 같이 오류가 난다. Styled Component를 사용하는 경우 아래와 같이 중괄호를 두번 쳐주고 사용해줘야한다. 버튼 속성 이름은 그냥 써주고 속성 값은 ' '으로 감싸준다. (;) 세미콜론은 붙이지 않는다. 만약 스타일을 여러 개 넣는다면 아래와 같이 (,)로 구분해주면 된다. 버튼 추가로 margin-top이나 background-color의 경우 속성 이름에 (-)하이픈이 들어가기 때문에 오류가 난다. 이 경우 아래와 같이 카멜표기법으로 적어주면 된다. 버튼