[C#, React]Expected a pseudo-class or pseudo-element 오류

해결법이 급하신 분들은 3.결론 만 보세요!

 

0.개요

평소와 같이 개발을 완료하고, 이제 개발서버에 배포를 위해서 게시작업을 진행했다.

(visualStudio에서는 ASP.NET, .NET Core 및 Python 앱의 경우 게시를 통해 앱을 배포할 수 있다.)

 그런데 게시가 완료되지 않고 오류를 뱉는 것이었다. 최초의 오류메시지는 아래 그림과 같았다.

(ps.이와 별개로 typeScript의 오류도 밷어서 타입스크립트에 오류가 발생한 줄 알고 엄청난 삽질을 했다.)

미래의 나와 그리고 나와 같은 오류를 겪을 사람들을 위해서 기록을 남긴다.

(사실 귀찮다)

게시를 진행하자 뱉은 오류 메시지

 

1. 오류 해결을 위한 뻘짓

처음에는 위 그림의 오류와 동시에 타입스크립트 오류가 많이 발생해서,

"타입스크립트 버전호환 문제인가?"

하고 다른 이슈들을 검색했었다.

(결과적으로 뻘짓)

 

아무래도 전에 잘 돌아갔던 코드가 지금와서 문제가 발생했다고 오류 메시지를 뱉으니

(typeScript 코드는 이전에 배포했었을 때는 문제없이 게시가 되었고 배포도 완료.)

좀 이상해서 좀 더 오류로그를 살펴보니 제목과 같은 오류를 발견했다.

(이것도 딱 한 줄 오류였고, EXEC 오류라 잘 보이지도 않았다)

 

나는 이놈이다 라고 타겟팅을 하고 구글링을 시작했다.

(역시 오류는 거짓말을 하지 않아)

(그리고 chatGPT 한테도 질문했는데 대답이 시원치 않았다.)

 

구글에 검색하니 대부분 답변에서 css관련 문제이니 수정하라는 답변이 많았다.

(하지만 나는 css를 건든적이 없는데 이런 문제가 발생했다는 것이 납득이 안가요 납득이~)

 

이제 난 어떻게 하지?

(솔직히 이 때 스트레스 이빠이 받음)

 

2. 개발환경

프론트

react 18.2/ node 20, ts 4.9.5 

 

백엔드

.net core 6.0

 

db

mssql

 

버전관리 도구

svn

(git 쓰고 싶다.....)

 

3. 결론

결론적으로 말하자면 css 오류가 맞았다.

우리팀 퍼블리셔가 블로그에서 css 코드를 가져오는 과정에서

css 밑에 출처와 하이퍼링크가 박혀서

"css 파일인데 이상한게 들어있네? 이거 좀 확인해봐"

라고 오류를 뱉은 것이었다.

 

같은 오류 발생하신 분들은 최근에 수정한 css 부터 살펴보세요!

그럼 문제가 해결됩니다.

 

근데 이 오류발생 때 아쉬웠던 것은

1. 퍼블리셔가 확인하지 않고 css 코드를 올림 - 1번째 체크

2. 개발자가 css 코드를 추가 - 2번째 체크

(design 폴더에 있는 걸 가져와서 붙여야만 해서 개발자도 확인가능)

2번의 체크하고 걸러낼 가능성이 있었지만 2번 다 찾아내지 못하고 그냥 commit해서 반영해버렸다는거...

 

그리고 추가적으로 svn을 이용하고 있어서 commit 해버리면

그냥 main에 commit 되어 버려서 배포가 이루어 질 때쯤이면 서로의 commit으로 뒤엉켜 있어서

누구의 commit 때문에 오류가 발생했는지 식별이 어려웠다는 것....

 

그외에도 배포과정에서 너무나 불편한 것이 많다..

빨리 git과 ci/cd를 붙이고 싶다... 

github action 개 편하던데 ㅠㅠ

(물론 스크립트 개귀찮)