[REACT/TODOAPP]typescript error
2023. 4. 13. 19:40ㆍIT/ClientSide
728x90
반응형
semi-colon expectedts-styled-plugin(9999)
오늘도 에러를 처리하는 나.
어디든 에러 처리하느라 시간 다 쓰는 건 변함이 없구나 하하
vscode에 styled-component 문법 하이라이팅 하기
vscode에서 Styled Component를 사용하면 하이라이팅이 적용이 안되고 그냥 문자열 형태로만 입력된다.또한 스타일을 정의할 때에도 하나씩 적어야하는 불편함이 있었다. 찾아보니 생각보다 가까운
velog.io
% npm install --save-dev typescript-styled-plugin
> npm ERR!
> npm ERR!
의 반복이라 ㅂㄷㅂㄷ222
강의 보고 그대로 따라하는 중에도 에러가 생기니, 정말 즐거운 세계가 아닐 수 없다. 하하하
구글링 해보니 별로 중요한 문제도 아닌 것 같은데, 정작 TodoItem에서 사용할 때 margin 적용이 안된다는 결정적인 문제가 발생하고 있기 때문에, 이게 해결되어야 그 문제도 해결될 것이란 예감이 드는 것이다..
import styled from 'styled-components';
export default styled.div<{
marginTop?: string;
marginBottom?: string;
marginLeft?: string;
marginRight?: string;
}>`
margin-top: ${props => props.marginTop || '0'}
margin-bottom: ${props => props.marginBottom || '0'}
margin-left: ${props => props.marginLeft || '0'}
margin-right: ${props => props.marginRight || '0'}
`;
이게 강의에서 작성한 코드고, <상단의 에러 코드 발생>
import styled from 'styled-components';
export default styled.div<{
marginTop?: string;
marginBottom?: string;
marginLeft?: string;
marginRight?: string;
}>`
margin-top: ${props => props.marginTop || '0'};
margin-bottom: ${props => props.marginBottom || '0'};
margin-left: ${props => props.marginLeft || '0'};
margin-right: ${props => props.marginRight || '0'};
`;
에러 코드 내용 대로 수정한 결과다.
프론트 엔드 언어는 아예 낯설어서 이게 맞는 결과물인지 모르겠다..
일단 block의 margin은 드디어 제대로 적용되는 걸 확인했으므로 그대로 진행.
강의 댓글도 별 내용이 없고..
이거 도움이 되고 있는 건지 뭔지 잘 모르겠다.
-class101 kidevelop
728x90
반응형
'IT > ClientSide' 카테고리의 다른 글
[REACT/TODOAPP] tsconfig.json include 설정 (0) | 2023.04.17 |
---|---|
[REACT/TODOAPP] react, typescript error (0) | 2023.04.13 |
[FrontEnd] 스파르타 코딩 네컷사진 (0) | 2023.04.12 |
[React/TodoApp] rb-cra-template 사용해보기 (0) | 2023.04.11 |
[React/TodoApp] Install homebrew, git, node.js, yarn, rb-cra-template (0) | 2023.04.07 |