hunter-hwang-dev / _hunterpedia-vue

React로 마이그레이션 하기 전 Vue.js 테스트 (2024-11-19 현재 사용하지 않음.)
1 stars 0 forks source link

민첩한 웹개발 되세요! Live Preview, CSS Peek 익스텐션 #29

Closed hunter-hwang-dev closed 2 weeks ago

hunter-hwang-dev commented 2 weeks ago

코X애플 프론트엔드 강의 패키지를 구매했다. 빠른 시간 안에 원하는 레이아웃을 만들고 싶은데, 인터넷에서 하나하나 찾아보려고 하니 너무 품이 많이 드는 것 같아서.

Node.js 강의 덕에 기술 블로그 골격을 대충 만들 수 있어서, 신뢰를 갖고 추가 구매를 했다.

가장 먼저 보고 있는 것은 html + css 강의. 반응형 웹을 만들려면 react를 써야 한다던데, 미리 디자인 규칙이 정해져서 편리한 tailwind CSS 어때 이런 말이 좋기는 하다마는, 바닐라 html + css로 기본 바탕을 작성하는 데 어려움을 겪는 상태에서 새로 무언가를 배우는 것은 부실 공사라는 생각이 들었다. 특히 폰트 적용하는데 어려움을 겪음!

그래서, 대부분 알고 있는 내용이더라도 강의를 처음부터 쭉 시청하고 있다.

hunter-hwang-dev commented 2 weeks ago

brackets 실시간 미리보기 기능이 좋다지만, 2021년에 어도비에서 팽함. 따로 개발자들이 업뎃 하고는 있다는데... 강의에서는 처음 html + css를 배우는 사람을 타겟으로 했기에, vs code의 live server를 추천한 모양이다.

하지만 기술 블로그에서는 이미 express를 사용해서 서버를 걸어두었기 때문에, live server를 사용하기 곤란. 검색해보니 brackets와 유사한 html 미리보기는 live preview 익스텐션을 쓰면 된다고 한다.

Image

아니, 2021년부터 공개했는데 아직 ⚠️ WARNING: This extension is still under development! ⚠️ 이라고? 평생 beta를 달고 있는 AO3 같네. 그래도 고마워요 마이크로 소프트하게!

Image Image 우클릭 + Show Preview 해 바로 하나의 html 파일을 확인할 수 있는 것은 간편하다. 다만 ejs 파일 미리보기는 지원하지 않는다.

hunter-hwang-dev commented 2 weeks ago

https://stackoverflow.com/questions/73835365/my-visual-code-editor-is-not-showing-the-included-css-in-the-live-preview Image

뭐라고. 원래 live preview는 안보인다고? 으앙.

hunter-hwang-dev commented 2 weeks ago

지금 강의용 테스트 html 페이지를 live server로 열어 보았는데도, class로 불러온 css 형식이 적용되지 않아 골머리를 앓고 있음.

hunter-hwang-dev commented 2 weeks ago

아! css에선 . 찍는데 html에서 class로 불러올 땐 . 안찍는구나. 좋아 다시 live preview로 돌아간다.

hunter-hwang-dev commented 2 weeks ago

스택 오버플로우 답글이라고 다 믿을 필요는 없구만.

Image 테스트해봤더니 이 ChatGPT 답변이 사실에 걸맞는다. 뭐든 직접 해보고 나서 믿자.

hunter-hwang-dev commented 2 weeks ago

brackets는 ctrl + e 누르면 바로 해당되는 class의 css 부분 띄워주네! 부럽다. vs code에서도 유사한 기능 없나?

https://codingapple.com/forums/topic/bracket%EC%97%90%EC%84%9C%EB%8A%94-ctrle-%EB%88%84%EB%A5%B4%EB%A9%B4/ https://stackoverflow.com/questions/48783127/visual-studio-code-ctrle-in-brackets-where-is-this-shortcut

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek Pranay Prakash씨가 개발한 CSS Peek 익스텐션이 비슷한 기능을 제공한다고 해서 바로 써 보러 갔다.

hunter-hwang-dev commented 2 weeks ago

Image 스택 오버플로우에서 누군가가 알려준 팁대로 단축키 f12에서 ctrl + e 로 바꿈. brackets 처럼 바로 밑에 띄워주지는 않고, css 파일로 이동 & 어느 부분인지 하이라이트 되는 정도다. 그래도 없는 것보다는 훨씬 편리.

hunter-hwang-dev commented 2 weeks ago

즉각적으로 여기 어디고 저기 어디고 하는데 필요한 익스텐션은 이제 이정도면 충분한 것 같으니 요 이슈는 닫도록 하겠다.