IT/ClientSide
[REACT/TODOAPP]typescript error
안선생 Dr.Ahn
2023. 4. 13. 19:40
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
반응형