[REACT/TODOAPP]typescript error

2023. 4. 13. 19:40IT/ClientSide

728x90
반응형

semi-colon expectedts-styled-plugin(9999)

 

 

오늘도 에러를 처리하는 나.

어디든 에러 처리하느라 시간 다 쓰는 건 변함이 없구나 하하

 

출처: https://velog.io/@heumheum2/vscode%EC%97%90-styled-component-%EB%AC%B8%EB%B2%95-%ED%95%98%EC%9D%B4%EB%9D%BC%EC%9D%B4%ED%8C%85-%ED%95%98%EA%B8%B0

 

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
반응형