갤러리 웹페이지 만들기 - 활용하기 좋은 Best3 사이트

이 블로그에 직접 그린 그림들을 추가로 보여지도록 ‘갤러리’ 형태의 하위 메뉴를 추가하려고 한다.
아무것도 없는 백지에서 갤러리를 만들려니 쉽지않았다 ㅠ.ㅠ
코딩의 기본도 제대로 공부해보지 않았다보니 처음부터 하나하나의 코드를 직접 짜는 것은 아예 불가능에 가깝고,
다른 사람들의 코드에서 내가 필요한 부분만 짜집기 정도로 만들어가면서 조금씩 코드를 익히고 배워가고 있다.
이 과정에서 너무나 좋은 선생님들을 만났기에 소개해보는 나의 Best 3 선생님들!

1. 코드팬

이 사이트에는 다른사람들이 짜둔 html, css, js 각각의 코드들과 이로인해 구현되는 웹페이지를 한 눈에 바로 볼 수있다. 검색을 통하여 제법 내 생각에 가깝게 만들어진 코드들을 찾아낼 수 있고 이것을 Folk 하여 내 코드팬으로 불러와 맘에 맞게 수정할 수도 있어서 정말 유용하다.
갤러리로 검색해본 화면!
갤러리 검색 캡쳐

2. ChatGPT

최근에 모두들의 화제인 ChatGPT 나 역시 관련 책도 사고 유튜브도 찾아보며 활용해보려고 노력 중인데 사실상 딱히 활용처가 없다고 느끼던 부분이었는데 이번 기회에 제대로 활용했다.
내가 원하는 것을 설명하고 코드를 짜달라고 하거나, 얻어낸 코드들의 원하는 부분들을 편집하기 위해서 챗 GPT 에게 부탁을 해보았다.
하지만…. 사실 써보신 본이면 느낄 것 같은데 챗GPT 가 똑똑하게 척척 해달라는대로 해주는 건 맞지만,
내가 챗 GPT의 프롬프트를 제대로 써본 경험이 부족해서인지 생각보다 맘에 드는 답변을 받아내는 것이 사실 쉽지 않다.
그러던 중 발견한 기능이 있으니 바로 !!!!!!

3. AI Code Helper

바로바로 Visual studio code 내에 있는 “AI Code Helper” 추가기능이다. AI Codehelper

chatGPT 에서 발급된 API만 넣으면 ChatGPT 를 내 코드 속으로 직접 불러올 수 있다는 것!
(***단 챗 GPT의 API를 활용하려면 유료로 결제가 필요하긴 합니다.. )
코드에 대해 설명하는 주석 달아줘, 코드 리뷰해줘, 리팩토링해줘 이런 게 가능했다.
아직 제대로 써보진 못했지만 실제 채팅방에서 말하듯 원하는 프롬프트를 작성하면 바로 작성도 해준다고 하다.
물론 각 Token발생량에 따라서 유료결제가 필요할 테지만 좋은 선생님 모시는거니 제법 쓸만하다고 생각했다.
확실한 것은 챗 GPT 의 채팅창에서 대화를 통해 요청하는 것보다 훨씬 효율적이었다는 것이다.
사실 아직 유료에 대해서는 아직 결제까지는 이뤄지지 않아서, 나중에 사용량이 증가되면 이 부분도 포스팅 해볼 예정이다.

참고:코드리뷰 캡쳐화면 - 초록색글씨들이 추가된부분. html 파일 캡쳐