[팀 프로젝트 1-2] 이 오류 뭐야?!

안녕하세요

어제에 이어 오늘도 코딩을 하러 카페에 왔습니다~

 

아메리카노 한잔 시켜놓고 카페인 충전하며 코딩 시작!

오늘은 제가 마주한 문제와 문제 해결에 대해 알려드리도록 하겠습니다!

 

1. 카카오 공유하기 API 이용 문제

어제 제가 맡은 카카오 공유하기 기능 API가 요청 오류(ERROR 4019)가 났어요

찾아보니 카카오 개발자 API 홈페이지에서 내 어플리케이션>앱 설정>플랫폼에서 사이트 도메인 설정을 제대로 해주지 않아 난 오류였습니다.

저와 같은 오류를 겪고 계신 분들이라면 참고하세욧!

 

자신이 사용할 도메인 주소 입력!

 

그리고 저는 사용할 앱key는 자신이 사용하는 플랫폼 별로 선택해주어야 잘 돌아갑니다

메시지 템플릿 설정하는 것도 잊지 마시고요!

 

2. MUI 라이브러리의 Textfield 사용 방법

CSS를 간단하고 쉽게 갖다쓸 수 있는(?) 아주 편한 리액트 라이브러리 중 하나가 바로 MUI입니다.

저는 Styled-components와 MUI 방식을 혼용하여 CSS를 제작하고 있는데요 

https://mui.com/material-ui/react-text-field/ 

React Text Field component - Material UI

MUI를 이용해 Textfield를 꾸밀 수가 있는데 여러 줄을 입력받을 거면 multiline 속성을 넣고 그 줄을 얼만큼 줄것인가에 대한 것은 rows = {몇 줄 입력하게 할 것인지 입력}로 주면 됩니다!

그러나 양 옆을 조절하는 것이 cols인가 해서 속성을 줘봤는데 안되더라고요?

그래서 알아보니 TextField 자체에서 cols로 하는 것이 아니라 Box 사이즈에서 width 값으로 조절해주는 거였더라고요?

혹시 가로 TextField 값 조절이 안되서 답답하셨던 분들은 참고하세요!

<Box
      sx={{
        width: 500,
        maxWidth: '100%',
      }}
    >
      <TextField fullWidth label="fullWidth" id="fullWidth" />
    </Box>
  );

그리고 TextField의 placeholder이기도 한 label 값의 폰트 조절은 직접적으로 fontSize로 속성을 줘서 적용하면 적용이 안됩니다!

 <Box
      sx={{
        width: 500,
        maxWidth: '100%',
      }}
    >
      <TextField fullWidth 
      label="fullWidth" 
      id="fullWidth" 
      inputProps={{ style: { fontSize: 40 } }}
        InputLabelProps={{ style: { fontSize: 40 } }}/>
 </Box>
  );

 이런식으로 inputProps로 접근해야 합니다!

 

우선 오늘은 여기까지 포스팅 하고 내일 또 오겠습니다