본문 바로가기

Programming64

[OpenAI] 음악 추천 서비스 만들어보기 (React) 2부 오늘은 저번에 이어서 OpenAI 를 사용한 서비스를 만들어보겠습니다. 1부 포스팅은 여기에서 볼 수 있습니다. 1부: https://bolob.tistory.com/entry/OpenAI-%EC%9D%8C%EC%95%85-%EC%B6%94%EC%B2%9C-%EC%84%9C%EB%B9%84%EC%8A%A4-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0-React-1%EB%B6%80 [OpenAI] 음악 추천 서비스 만들어보기 (React) 1부 오늘은 ChatGPT에 사용된 OpenAI를 사용해서 음악 추천 서비스를 만들어보려고 합니다! 어떻게 만들면 되는지 과정을 기록해보고 공유해보겠습니다. OpenAI 가이드를 따라서 하면 어렵지 않게 서비스 bolob.tistor.. 2023. 2. 22.
[OpenAI] 음악 추천 서비스 만들어보기 (React) 1부 오늘은 ChatGPT에 사용된 OpenAI를 사용해서 음악 추천 서비스를 만들어보려고 합니다! 어떻게 만들면 되는지 과정을 기록해보고 공유해보겠습니다. OpenAI 가이드를 따라서 하면 어렵지 않게 서비스를 만들 수 있습니다. 아래 OpenAI 링크에서 가이드를 확인할 수 있어요. OpenAI 링크: https://platform.openai.com 0. 먼저 Api Key를 발급받아 저장해둡니다. 첫 번째 발급받을 때에는 영구히 유지할 수 있는데, 두 번째 발급부터는 기간이 있다고 하니 나중에 만료일자 신경쓰지 않아도 되도록 잘 저장해두어야겠어요. 저는 메모장과 노션에 따로 저장해두었습니다. 1. 먼저 저는 빠른 세팅을 위해서 CRA로 React 프로젝트를 생성해주었습니다. 음악 추천 서비스이니 이름은.. 2023. 2. 18.
[Tools] 백준 / 프로그래머스를 Github에 연동하기 - 백준허브 플러그인 백준허브 (BaekJoonHub) 의 역할 백준이나 프로그래머스 알고리즘 사이트에서 푼 문제를 자동으로 깃허브에 올려줍니다. 문제풀이를 한 기록을 직접 하지 않고, 깃허브에 자동으로 남겨둘 수 있습니다. LeetHub로 LeetCode를 Github에 연동하고 난 뒤, 찾아보니 백준허브 플러그인도 있어서 세팅해두려고 합니다. LeetCode와 Github를 연동하는 방법은 요 링크에서 확인 가능합니다! https://bolob.tistory.com/entry/Tools-LeetCode%EB%A5%BC-Github%EC%97%90-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0-LeetHub-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8 백준 / 프로그래머스를 Gith.. 2023. 1. 27.
[Tools] LeetCode를 Github에 연동하기 - LeetHub 플러그인 LeetHub의 역할 LeetCode 알고리즘 사이트에서 푼 문제를 자동으로 깃허브에 올려줍니다. 문제풀이를 한 기록을 직접 하지 않고, 깃허브에 자동으로 남겨둘 수 있다는 장점이 있어서 추천하기 위해 포스트를 작성합니다. LeetCode를 Github에 연동하는 방법 1. LeetHub 플러그인 설치 크롬 웹 스토어에서 LeetHub 확장 프로그램을 추가해줍니다. 아래 링크로 들어가서 'Chrome에 추가'를 하고 설치가 완료되면 https://chrome.google.com/webstore/detail/leethub/aciombdipochlnkbpcbgdpjffcfdbggi?ref=producthunt 이렇게 LeetHub가 Chrome에 추가되었다는 팝업이 나타납니다. 2. LeetHub 플러그인에.. 2023. 1. 27.
[JavaScript] e.preventDefault()와 e.stopPropagation()의 차이점 e.preventDefault() VS e.stopPropagation() 자바스크립트 이벤트 리스너에서 e.preventDefault()와 e.stopPropagation() 둘 다 이벤트를 중단하는 메서드이다. 이 둘의 차이점과 어떤 상황에서 사용해야 하는지 정리해 보자. 먼저 이벤트 중단 시에 e.preventDefault()와 e.stopPropagation()가 어떤 역할을 하는지 간단하게 정리해 보았다. e.preventDefault(): 현재 이벤트의 기본 동작을 중단한다. e.stopPropagation(): 이벤트가 상위 DOM으로 전파되지 않도록 막는다. 이 외에도 e.stopImmediatePropagation()과 return false로 이벤트를 중단할 수 있다. e.stopImm.. 2023. 1. 5.
Typescript에서 useState를 props로 넘기는 법 useState로 선언한 setValue를 컴포넌트에 props로 넘기고 싶은데 아래처럼 코드를 짜면 Typescript에서는 타입 경고가 뜬다! // ParentComponent.tsx const [value, setValue] = useState(true); // ... return ( ); // SomeComponent.tsx interface SomeComponentProps { setValue: () => void; } // ... 이 때 저 ParentComponent.tsx의 setValue에 마우스를 올리면 이런 친절한 가이드가 나오는데, 이대로 인터페이스 타입 세팅을 수정해주면 된다. // SomeComponent.tsx import { Dispatch, SetStateAction } f.. 2022. 11. 9.
[TIL] iOS 16 개발자 모드가 필요함 설정 방법 프로젝트: react + cordova 프로젝트 기기: iOS 16으로 업데이트 이슈: App distribution에 올려놓은 앱이 실행되지 않고 ‘개발자 모드가 필요함’ 팝업 노출됨 (00 앱을 실행하려면 개발자 모드가 필요합니다. 개발자 모드가 활성화되기 전까지는 이 앱을 사용할 수 없습니다. 문구) 해결 방법: iOS16 설정 > 개인정보 보호 및 보안 > Developer Mode(개발자 모드) 활성화 > 재시동 2022. 10. 14.
[CSS] Flexbox의 여러 활용법 정리 Flexbox란? 뷰포트의 요소의 크기가 불명확하거나 동적으로 변할 때에도 유연하고 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃으로, 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다. Flexbox의 구성 Flex container(부모 요소)와 Flex item(자식 요소)로 구성된다. Flex container(부모 요소) 속성: flex-direction, flex-wrap, justify-content, align-items, align-content Flex item(자식 요소) 속성: flex, flex-grow, flex-shrink, flex-basis, order .flex-container { display.. 2021. 8. 31.
[HTML] <table>의 row index와 cell index 구하는 법 백오피스 웹페이지 등에서 태그를 써서 테이블 / 표 UI를 구현하였을 때, 특정 항목의 row가 몇 번째인지 값을 가져와야 할 때가 있다. 그런데 어떻게 가져오면 될까? 테이블에서 방금 클릭한 row가 몇 번째인지 구해보자 tr rowIndex const clickTableItem = (e) => { const rowIndex = e.target.closest("tr").rowIndex; ... } ... onClick={(e) => clickTableItem(e)} ... 방금 클릭한 항목의 row Index를 구해보았다. 잘 나오는 것을 확인해보자. 테이블에는 row도 있지만, column도 있다. 그렇다면 특정 항목의 column이 몇 번째인지는 어떻게 알 수 있을까? 테이블에서 방금 클릭한 cel.. 2021. 7. 23.
React에서 <input> 태그를 사용할 때 주의할 점 리액트에서 input을 사용하다 보면 가끔 원하는 대로 동작하지 않을 때가 있는데, 이 때 props나 state 값을 잘 연결했는지 확인해보아야 한다. 주의할 점은 다음과 같다. 1. (중요) input에 value 속성을 지정하면 인풋값이 변경되지 않는다. 항상 변경되는 상태값(this.state.inputValue)을 연결해주어야 한다. 2. React의 onChange 이벤트는 값이 입력되어 변경이 생기면 발생한다. 참고 및 출처 https://velog.io/@towozy/React를-쓰면서-착각할-수-있는-몇가지-요소-3kjukr898l 2021. 7. 23.
[CSS] 크로스 브라우징 시 필요한 css 접두어 webkit, moz, ms, o 의 의미 크로스 브라우징을 위해 필요한 CSS 접두어 정리 -webkit-: 구글, 사파리 -moz-: 파이어폭스 -ms-: 익스플로러 -o-: 오페라 2021. 7. 23.
[React] React onClick에 여러 함수를 넣고 싶다면 (+주의사항) React onClick할 때 여러 동작을 붙이고 싶은 경우가 많다. 처음에 많이 당황스러웠던 에러는 onClick에 함수 두 개 넣었을 때 예상치도 못했는데 에러가 무한으로 발생했을 때. 이런 간단한 코드에서 에러가 발생하다니 난 바보야.. 같은 생각 들면서 당황스러웠더랬지.. 그럼 이럴 때는 어떻게 하면 되는지 침착하게 알아보자. 함수 하나일 때와 여러 개일 때의 차이점은? 단순하게 설명하자면 함수 하나일 때와 여러 개일 때의 차이는 바로 () => {} 유무이다. 당연하게도 onClick에 여러 함수를 넣었을 때, 그냥 무작정 코드 추가만 하게 되면 에러가 발생한다. 실수로 놓칠 때도 있었고 알고 나서도 꽤 많은 에러가 여기서 났었다. 이 정도 실수는 다신 안해 싶을 때 또 찾아오는 에러.. 방심은.. 2021. 7. 23.

티스토리툴바