Web Frontend(21)
-
iframe(cross domain)에서 동적으로 높이 얻기, CORS 에러 해결책
그것은 바로 iframeResizer.js를 사용하는 것이다. iframe 쪽과 현재 사용하는 쪽 모두 관련 코드를 삽입함으로써, iframe의 높이를 동적으로 받아올 수 있다. iframe 내에 관련 코드를 삽입. 부모 사이트에는 iframeResizer.js 삽입 후 iFrameResize({}, '#myIframe') 호출하면 끝... 예상컨대, massge 메서드를 통해서 관련 정보를 전달하고 전달 받는 구조로 보인다. 이렇게하면, 따로 서버에서 설정하지 않아도 간편하게 url 다른 iframe의 높이 값을 자동으로 셋팅 된다. iframe { width: 1px; min-width: 100%; display: block; }
2023.08.19 -
openAI API를 사용하면서... (비용, 방식 등)
fine tuning 모델(구모델)을 사용할 경우와 gpt-turbo 3.5 이상(최신 모델)을 사용할 경우로 나눌 수 있음. 최신 모델의 경우 fine tuning을 할 수 없지만 프롬프트 디자인을 통해서 제어할 수 있음. system 속성에 가스라이팅 오지게 하면 거의 원하는 답변 통제가 가능함. 필자는 fine tuning을 통해서 많은 공수를 들여 튜닝하는 것보다 최신 모델을 활용하여 프롬프트 디자인을 통해서 답변 통제하는 것이 가성비 좋다고 생각됨. 이유는 fine tuning 된 모델 사용료가 더 비싸고 답변 통제를 위한 관련 질문과 답변을 상당히 많이 준비해야 하지만, 최신 모델을 활용하면 원하는 정보만 제공하고 약간의 가스라이팅을 통해 역할을 정립해 줘도 충분히 좋은 챗봇 역할을 할 수 있..
2023.06.09 -
aws codewhisper 사용 후기
javascript 기준으로 1시간 정도 상해 보았는데... 갠적으로는 phind.com 만큼 임팩트 있지는 않았지만 파인드/ChatGPT/Bing 채팅 등을 통해서 전체적인 코드 윤곽을 그리고 보완할 때 활용하면 효율성이 괜찮을듯 것 같긴한데... 썩 내키지는 않음. 차라리, 보완하거나 수정할 때, 리팩토링, 성능보완, 웹 접근성 보완 등등을 할 때도 위에 소개한 AI Search engine이 너무 사기적인 발군이라... codewhisper여... 시대를 잘 못 타고났나? (코파일럿 X는 유료라서 논외...)
2023.04.18 -
막강한 웹개발자의 조력자. phind.com
얼마전 까지만 해도, 영어로 검색해야 그나마 나쁘지 않은 답변을 얻을 수 있어서, ChatGPT와 Bing 채팅만 사용 했는데 하지만, 최근에 아래 이미지 토글 메뉴에 있는 'Expert'를 켜면 GPT-4 모델을 활성화되어 상호작용 할 수 있게 되었습니다. 무료로... 마치, Bing 채팅 + ChatGPT3.5 + 개발자를 위한 편의성을 합쳐 놓은 느낌이 드네요. 예를들면, 검색되는 사이트를 추가하여 가중치까지 직접 설정할 수 있어 보다 양질의 답변을 얻을 수 있어요. 당분간은 ChatGPT나 Bing 채팅 보다는 이곳을 더 애용할 것? 같습니다. 암튼, 즐코딩 하십쇼! 상세 이용 튜토리얼 : https://www.phind.com/tutorial 아래는 심심풀이 테스트...
2023.04.14 -
모바일 크롬 최초 진입시 window.innerHeight 등등이 이상하게 나오는 현상
결론은, https:// 가 아닌 모든 사이트에서 발생함.
2023.04.02 -
개발자의 삶을 획기적으로 변화시킨 ChatGPT와 Bing 채팅
혹자는 14년 전 아이폰의 등장 이상으로 이 지구에서 센세이션을 일으킬 거라고 한다. 필자도 감히 그렇다고 생각이 드는 게, 4주간 GPT 3.5를 써보면서 오랫동안 우리를 지배해 오던 구글링/네이버링의 한계를 아득히 뛰어넘었으며, 마치 내가 오랜 사고 끝에 도달할 수 있는 결과물을 단 몇 초 만에 내 능력보다 품질 좋게 내놓는다. GPT와 Bing의 최대 수혜자는 개발자가 아닐까 싶다. 이 AI들은 웹의 정보를 기반으로 학습하였고 모든 코드와 API 문서가 웹에 존재하며 상상할 수 없을 만큼의 DB를 분석하고 정재 해서 우리에게 전달해 준다. 웹 개발자에겐 천군만마를 얻은 느낌일 것이다. 마치, 어쩌면, 30년 베테랑 프로그래머 20명을 항상 옆에 두고 자문을 구하고 해결 방법을 물어볼 수 있다는 든든..
2023.03.22 -
시안이 PC와 Mobile 2개 뿐이고 모든 해상도를 고려해야 할 때
콘텐츠가 많고 일반적으로 px이나 rem 등으로 고정해야 되는 레이아웃은 논외이다. 이 레이아웃들은 모든 간격이 고정되어 있고 해상도를 줄였을 때 자연스럽게 글자나 콘텐츠들이 아래로 내려오게 grid, flex 등을 활용하면 그만이다. 이미지와 적은 글자들이 어우러져 있는 레이아웃은.... 특히, 4k 해상도까지 고려해야 된다면, 아래 방법 밖에 답이 없는 것 같다. 오늘 내내 고민을 해봐도, 하나의 세션 안에 width와 padding-bottom을 설정하여 영역을 설정한 후 자식 요소들은 position absolute를 기본으로 사용하여 위치를 잡고 그 외 간격들은 %로 처리하며 글자 크기는 vw로 설정한다. line-height는 1.6 등과 같이 단위 없는 비율로 설정하고 em을 활용하여 폰트 ..
2023.01.28