AI 탐구노트

생성된 html (with css, javascript)의 내용 확인을 브라우저가 아닌 VSCode 개발툴에서 하고 싶을 때 사용하는 것이 Live Preview라는 확장기능(Extention)입니다. 그런데 이것을 이용해 바뀐 코드의 내용을 확인하는 작업 중에 이상한 증상이 발생해서 한동안 시행착오를 겪었습니다. 원인을 제대로 파악하지 못해서였죠. 이번 글에서는 이상 현상 하나와 그 과정에서 배운 팁 하나를 정리해 봤습니다. 🚧 오류 증상 바이브 코딩으로 개발을 하면서 시행착오를 거치는 단계였습니다. AI가 생성해 준 코드가 제대로 작동하지 않았습니다. 그런 경우야 워낙 많기 때문에 하나씩 풀어나가야지 하며 추가요청과 제안하는 방안을 적용하고 다시 피드백을 주고를 계속하고 있었습니다. 그런데, ..

VSCode를 사용할 때 작성한 html, javascript의 동작 결과를 보고 싶을 때가 있습니다. 즉, 파일의 미리 보기를 하고 싶은건데요, 이럴 때 시도할 수 있는 방법이 몇 가지 있습니다. 다 언급할 것은 아니고 그 중 몇가지 시도를 해 보고 제일 나았던 것에 대한 아주 짧은 결론을 기록해 둡니다. 결론.VSCode Extension 'Live Preview' 설치 다른 것들도 많이 있지만 VSCode 제조인 Microsoft에서 만든 것이고 가장 많이 사용되고 있습니다. Live Preview 사용 방법 미리 보기를 하고자 하는 파일을 연 후 화면 우측 상단에 있는 'Show Preview' 버튼을 클릭합니다. 그러면 아래 화면과 같이 별도 Preview 창이 열립니다. 아주 잘 동작..