티스토리

FEDev Story

검색하기

블로그 홈

FEDev Story

fedev.tistory.com/m

지구별72 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

객체의 아이템의 값에 따라 v-if로 제어하기 export default { data() { return { currentId: null, lastFocusedElement: [], isModalOpen: { popup1: false, popup2: false, popup3: false, popup4: false, }, } }, }isModalOpen 객체의 아이템중 하나라도 true가 되면 isDimOpen을 true로, isModalOpen 객체의 아이템이 전부 false가 되면 isDimOpen을 false로 설정을 하려면 어떻게 해야할까?isModalOpen은 배열이 아니라 객체지만, Object.v.. 공감수 0 댓글수 0 2025. 4. 23.
배열을 역순으로 순회하고 싶다면? forEach 메서드는 배열의 처음부터 끝까지 순서대로만 동작하도록 설계되어 있어서, 뒤에서부터 순회하는 기능은 지원하지 않아요.하지만 대신, for 루프를 사용해서 **역순(forEach처럼 동작)**할 수 있어요.✅ 역순으로 배열 순회하는 방법const arr = [1, 23, 4];for (let i = arr.length - 1; i >= 0; i--) { const num = arr[i]; console.log(num); // 4, 23, 1 순서로 출력}❗️forEach처럼 콜백을 쓰고 싶다면?const arr = [1, 23, 4];arr.slice().reverse().forEach((num) => { console.log(num); // 4, 23, 1});설명:slice()는 원본.. 공감수 0 댓글수 0 2025. 4. 23.
자바스크립트 문자열에서 숫자만 추출하는 방법 자바스크립트에서 문자열에서 숫자만 추출하려면 정규식을 사용하는 방법이 가장 일반적입니다. 예를 들어 'popup1'에서 숫자 1만 추출하려면 아래와 같이 할 수 있어요:✅ 숫자만 추출하는 방법const str = 'popup1';const num = str.match(/\d+/); // 숫자에 해당하는 부분 추출console.log(num ? num[0] : null); // "1"설명:\d+는 하나 이상의 숫자를 의미합니다.match()는 정규식과 일치하는 문자열을 배열로 반환합니다.숫자가 없을 경우 null을 반환할 수 있으니 ?로 체크해줍니다.👉 숫자를 숫자형(Number)으로 바꾸고 싶다면?const str = 'popup1';const num = str.match(/\d+/);const num.. 공감수 1 댓글수 0 2025. 4. 23.
챗GPT 300% 활용법 이도혜 강사 강연후기 우연히 유투브를 통해 알게되어 신청하게 된 '이도혜 챗GPT 300% 활용법' 강연을 듣고 왔다.일시: 4/19(토) 오후 3시~6시장소: 안산 한양대 에리카컨벤션 3층 컨벤션 홀웹사이트 제작 관련 일을 하다 보니 코딩과 관련하여 근래 챗GPT의 도움을 많이 받고 있고 이전에도 책을 사서 보기는 했지만 왠지 내가 알고 있는 지식은 아주 아주 일부에 불과하다고 생각되어 강연에 대한 기대와 함께 설레임을 안고 강연장으로 향했다.오전에 바람도 많이 불고 비도 오고 날씨도 안좋아 사람이 별루 없으면 어떡하나 잠깐의 걱정도 했으나 왠걸 강연장은 200여명으로 가득차 있었고 연령도 20대에서 50대까지 다양하여 오기를 잘 했다는 생각이 들었다.1부~3부로 나누어 진행된 강연은 2부 후원사 홍보시간을 포함하여 세시간.. 공감수 0 댓글수 0 2025. 4. 20.
그라디오(Gradio) - 컴포넌트 ◆ 데이터데이터 컴포넌트는 'str', 'number', 'bool', 'date', 'markdown' 등을 사용할 수 있다. 판다스의 데이터 프레임을 기본으로 사용한다. 출력 데이터 타입은 numpy array 타입이나 파이썬의 array로 출력할 수 있다.import gradio as grdef display(data): return datagr.Interface(fn=display, inputs=gr.Dataframe(), outputs="dataframe").launch()◆ 미디어그라디오에서는 image, video, audio, file 등의 파일을 media 컴포넌트를 통해 사용할 수 있다.○ 이미지 컴포넌트 - gr.Image()다음은 이미지를 입력하는 예제이다.import grad.. 공감수 0 댓글수 0 2025. 3. 25.
그라디오(Gradio) - 블록 레이아웃 ◆ RowRow는 앱 안에서 컴포넌트를 수평으로 배치할 때 사용한다.with gr.Blocks() as app: with gr.Row(): 컴포넌트1 컴포넌트2import gradio as grwith gr.Blocks() as app: with gr.Row(): btn1 = gr.Button("A") btn2 = gr.Button("B") btn3 = gr.Button("C")app.launch()import gradio as grwith gr.Blocks() as app: with gr.Row(equal_height=True): text = gr.Textbox() btn2 = gr.Button('입력')app.launch()두 개의 컴포넌트 높이가 .. 공감수 0 댓글수 0 2025. 3. 24.
그라디오(Gradio) 그라디오는 사용자가 UI 를 빠르게 제작하여 ML이나 API 등을 사용할 수 있도록 해 주는 파이썬 오픈소스 패키지이다.https://www.gradio.app/ GradioBuild & Share Delightful Machine Learning Appswww.gradio.app 1. 설치하기!pip install gradio2. 그라디오 실행하기import gradio as grdef user_greeting(name): return "안녕하세요! " + name + "고객님 헤이마트에 오신 걸 환영합니다."app = gr.Interface(fn=user_greeting, inputs="text", outputs="text")app.launch()실행화면:3. 인터페이스(Interface)인터페이스.. 공감수 0 댓글수 0 2025. 3. 19.
챗 GPT API 사용해보기 1. openai 패키지 설치하기!pip install openai2. 코랩의 환경변수에 API 키 등록import osfrom getpass import getpassos.environ['OPENAI_API_KEY'] = getpass()OS는 운영체제 인터페이스를 다룰 수 있는 모듈이다. OS에는 환경 변수를 불러오는 os.environ 코드가 있고 이는 dict 타입의 구조처럼 key와 value 쌍으로 이루어져 있으므로 dict 처럼 key와 value 값을 지정하고 삭제할 수 있다.getpass는 입력한 값을 감추는 모듈이다. getpass() 함수는 실행 시 input() 함수처럼 사용자의 입력을 받을 때까지 기다렸다가 사용자의 입력이 완료되면 그 값을 변수에 대입하는 기능을 가졌다. 하지만 .. 공감수 0 댓글수 0 2025. 3. 18.
[GSAP] ScrollTrigger 속성 GSAP의 ScrollTrigger는 스크롤에 반응하는 애니메이션을 쉽게 만들 수 있도록 도와주는 플러그인입니다. 주요 속성을 정리하면 다음과 같습니다.1. 기본 속성1️⃣ trigger설명: 애니메이션을 트리거할 요소 지정예시:gsap.to(".box", { x: 500, scrollTrigger: { trigger: ".box" }});2️⃣ start & end설명: 애니메이션이 시작(start)하고 끝나는(end) 스크롤 지점 설정형식: "트리거 위치 트리거 대상" ("startPosition startTrigger")기본값: "top bottom" (뷰포트의 아래쪽에서 트리거 요소의 위쪽이 보일 때 시작)예시:scrollTrigger: { start: "top 80%", // 요.. 공감수 0 댓글수 0 2025. 3. 17.
누구나 한 번쯤은 띄워본 JavaScript 에러 Top 10 https://blog.meeta.io/m/10 누구나 한 번쯤은 띄워본 JavaScript 에러 TOP 10. 안녕하세요 Meeta 매니저 아몬드🤴입니다. 오늘은 해외의 서비스 기술블로그에서 JavaScript와 관련된 재밌는 글이 있어서 직접 번역해봤습니다. JavaScript 개발자라면 흥미롭게 읽어보실 수 있을 blog.meeta.io 공감수 0 댓글수 0 2022. 5. 9.
객체의 참조와 재할당 참조에 의한 전달이 일어나는 3가지의 데이터 타입으로는 Array, Function, Object가 있다. 사실 이 3가지는 크게 보자면 전부 객체(Objects)로 볼 수 있다. 원시타입이 아닌 값이 할당된 변수들은 그 값으로 향하는 참조를 갖게 된다. 참조는 메모리에서의 객체의 위치를 가리키고 있다. 변수는 실제로 값을 가지고 있지 않다. 참조로 할당하기 객체와 같은 참조 타입의 값이 =과 같은 키워드를 이용하여 다른 변수로 복사될 때, 그 값의 주소는 실제로 복사된다. 객체는 값 대신 참조로 복사된다. var reference = [1]; var refCopy = reference; 각각의 변수는 이제 같은 배열로 향하는 레퍼런스를 갖는다. 이 말은 우리가 reference나 refCopy를 수정하.. 공감수 0 댓글수 0 2022. 5. 4.
깔끔한 console.log 출력 방법 https://ttum.tistory.com/24?category=754442 JavaScript 코드 꿀팁들 얼마 전 유튜브에서 'JavaScript Pro Tips - Code This, NOT That' 영상을 보다가 새로 알게된 신기한 것들이 있어 정리하게 되었다. 1. console.log 출력하는 방법 console.log를 이용해 여러 가지 것들을 출력하.. ttum.tistory.com 공감수 0 댓글수 0 2022. 2. 8.
Element.matches https://goodmemory.tistory.com/117 [Javascript] CSS Selector를 통해 엘리먼트 구분하기 Element.matches() [자바스크립트 / Javascript] CSS Selector를 통해 엘리먼트 구분하기 Element.matches() 기본 형태 //CSS Selector를 통해 엘리먼트 구분하기 //해당 엘리먼트와 셀렉터가 같다면 true | 다르다면 false 반환 el.. goodmemory.tistory.com https://developer.mozilla.org/en-US/docs/Web/API/Element/matches Element.matches() - Web APIs | MDN The matches() method checks to see.. 공감수 0 댓글수 0 2022. 2. 3.
How to play audio? https://stackoverflow.com/questions/9419263/how-to-play-audio How to play audio? I am making a game with HTML5 and JavaScript. How could I play game audio via JavaScript? stackoverflow.com https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement HTMLAudioElement - Web APIs | MDN The HTMLAudioElement interface provides access to the properties of elements, as well as methods to manipulat.. 공감수 0 댓글수 0 2022. 2. 1.
<번역>자바스크립트 성능 향상 방법 https://junwoo45.github.io/2020-01-29-javascript_performance/ 자바스크립트 성능 향상 방법 이 글은 Isha Jauhari의 How to improve JavaScript Performance를 번역한 글입니다. junwoo45.github.io 공감수 0 댓글수 0 2022. 1. 26.
<번역>시니어 프론트엔드 개발자처럼 크롬 개발자도구 사용하기 https://junwoo45.github.io/2020-07-28-chrome_devtools/ 시니어 프론트엔드 개발자처럼 크롬 개발자도구 사용하기 이 글은 bitfish의 Use Chrome DevTools Like a Senior Frontend Developer을 번역한 글입니다. junwoo45.github.io 공감수 0 댓글수 0 2022. 1. 26.
<번역>시니어 개발자처럼 VSCode 사용하기 https://junwoo45.github.io/2020-09-02-use_vscode_like_a_senior_developer/ 시니어 개발자처럼 VSCode 사용하기 이 글을 bitfish의 Use VSCode Like a Senior Developer을 번역한 글입니다. junwoo45.github.io 공감수 0 댓글수 0 2022. 1. 26.
[JavaScript] Class https://jae04099.tistory.com/41 [JavaScript] Class 자바스크립트의 class개념은 ECMA6에서 새로 도입된 개념이다. 그러나 마냥 새로운 개념은 아니다. Class로 커피를 만들어보자. Class란? class CoffeeMachine { constructor(coffee){ this.coffee = coffee; } }.. jae04099.tistory.com https://junwoo45.github.io/2019-08-14-class/ 자바스크립트 class 자바스크립트 클래스를 학습해봅니다. junwoo45.github.io 공감수 0 댓글수 0 2022. 1. 26.
Lazy Loading Images – The Complete Guide https://imagekit.io/blog/lazy-loading-images-complete-guide/ Lazy Loading Images – The Complete Guide Lazy loading images that are not in the viewport improves initial page load performance and user experience. This is an in-depth guide to everything about lazy loading of images including native lazy loading methods. imagekit.io 공감수 0 댓글수 0 2022. 1. 19.
Date 날짜 형식 https://7942yongdae.tistory.com/41 Javascript - Date 날짜 형식 [yyyy-MM-dd] 이번에는 Javascript의 Date 객체가 가진 format 형식 지정과 toString에 대해 이야기해보려고 합니다. Javascript의 Date 객체는 날짜의 형식과 관련해 편리함 없이 불편한 기능들을 제공합니다. 기본적으로 7942yongdae.tistory.com 공감수 0 댓글수 0 2022. 1. 17.
비동기 작업을 순차대로 실행시키기 https://velog.io/@suld2495/%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%9E%91%EC%97%85%EC%9D%84-%EC%88%9C%EC%B0%A8%EB%8C%80%EB%A1%9C-%EC%8B%A4%ED%96%89%EC%8B%9C%ED%82%A4%EA%B8%B0 비동기 작업을 순차대로 실행시키기 비동기 작업을 동기적으로 순차대로 실행을 시켜야 할 때가 존재합니다.Promise.all 을 이용하면 배열에 담긴 비동기 작업을 배열의 순서대로 실행은 시켜주지만, 실행의 완료를 기다려 주지는 않 velog.io 공감수 0 댓글수 0 2022. 1. 14.
Visual Studio 필수 익스텐션 1. Material Theme - 테마 정하기 2. Marterial Icon Theme - 아이콘 테마, 아이콘이 조금 더 생동감 있게 바뀜 3. Prettier - Code formatter - 코드 포멧팅 - ctrl + 눌러서 setting 창으로 이동 4. Bracket Pari Colorizer - 괄호마다 코드에 색깔을 다르게 줌 5. Indent-rainbow - 들여쓰기 된 부분을 레인보우컬로로 하이라이트 표시 - 코드 읽을 때 도와줌 6. Auto Rename Tag - 앞에 태그를 바꾸면 뒤에 태그를 자동으로 바꿔줌 7. CSS Peek - html에서 css를 금방 찾게해줌 - html에서 커맨드나 컨트롤키를 누른 상태로 클릭하면 정의된 css파일로 이동하게 해줌. 8. HTML .. 공감수 0 댓글수 0 2022. 1. 5.
Good Site https://material.io/resources/color/#!/?view.left=0&view.right=0 Color Tool - Material Design Create and share color palettes for your UI, and measure the accessibility of any color combination. material.io 공감수 0 댓글수 0 2022. 1. 5.
Array 배열 개념 https://blog.naver.com/lsj5170/222608951573 [Javascript][드림코딩 by 엘리] Array 배열 개념 (선언, 검색, 추가, 삭제) / APIs Array 배열 자료구조란? 비슷한 타입의 object를 모아놓은 것. Array란? 비슷한 종류의 데이터를 정해진 ... blog.naver.com 공감수 0 댓글수 0 2022. 1. 4.
video 넣는 방법 https://m.blog.naver.com/skydoor2014/221667330746 [ video 태그 ] HTML5로 동영상 넣는 방법. 이 글 하나면 모든 고민 끝! 이 글을 보시고 계시는 분들은 동영상을 촬영할 때 어떤 기기로 촬영을 많이 하세요? 그렇죠! 대부분의 분... blog.naver.com 공감수 0 댓글수 0 2021. 12. 23.
playsinline - iOS비디오정책 https://ossam5.tistory.com/155 [HTML5] 20강 playsinline - iOS비디오정책 - PC나 안드로이드에서 비디오태그를 볼때는 자동재생처리시 인라인으로 볼수 있지만, IOS인 아이폰이나 아이패드에서 보면 전체화면으로 처리됩니다. - 이번 강좌에서는 그것을 막는 속성인 [pla ossam5.tistory.com 공감수 0 댓글수 0 2021. 12. 23.
How to detect browser in JavaScript [Chrome, Firefox, Safari, Opera, Edge , MS IE]? https://codepedia.info/detect-browser-in-javascript How to detect browser in JavaScript [Chrome, Firefox, Safari, Opera, Edge ,IE] ? How to detect browser name in javascript, using navigator.userAgent detect firebox browser in javascript, detect chrome browser , detect IE browser, detect safari browser, detect opera browser, detect edge browser codepedia.info Approach 1: JavaScript code to detec.. 공감수 0 댓글수 0 2021. 12. 19.
How to hide HTML5 video controls completely https://meetrix.io/blog/general/hide-video-controls-completely.html How to hide HTML5 video controls completely A simple CSS trick to completely hide html5 video controls meetrix.io 공감수 0 댓글수 0 2021. 12. 16.
hashchange를 이용한 router 만들어보기 https://velog.io/@cothis/hashchange%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-router-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0 hashchange를 이용한 router 만들어보기 브라우저에서 hashchange 이벤트를 이용해 아주 간단한 수준의 라우터를 만들어봤습니다. velog.io 공감수 0 댓글수 0 2021. 11. 24.
마우스 휠 이벤트 https://velog.io/@codeamor/TIL-no.13-jQuery-%EB%A7%88%EC%9A%B0%EC%8A%A4-%ED%9C%A0-%EC%9D%B4%EB%B2%A4%ED%8A%B8 TIL no.13 - jQuery - 마우스 휠 이벤트 마우스 휠 이벤트 velog.io 공감수 0 댓글수 0 2021. 11. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.