본문 바로가기

전체 글117

[개인 사이드 프로젝트] - emotional (YOUTUBE API KEY를 발급받자) 스포티파이 API를 사용하려고 했지만, 음악 추천을 생각하자마자 원래는 당연하게 스포티파이부터 떠올렸다. 하지만 스포티파이 API 호출을 하려면 스포티파이 로그인이 필수인걸... 만약에 내가 사용자다? 귀찮아서 페이지 이탈 해버릴거 같았다. 그러면 스포티파이를 대체할만한게 뭐가있나? 일단 검색을 해서 얻어낸 결과로는 아이튠즈와 Mania DB, youtube이렇게 좁혀졌다. 일단 아이튠즈의 결격 사유는 무료로 사용하면 분당 호출이 20개로 제한적이라는 점 (분당 20번이나 사용이 될려나...) Mania DB는 별도의 API KEY를 요구하지 않고, 한국어로 되어있다는 점에서 채택할 뻔.. 하지만 안 했던 이유는 youtube api의 mostPopular 쿼리가 맘에 들어버려서이다. 이 쿼리를 사용하게.. 2024. 4. 20.
[개인 사이드 프로젝트] - emotional (GPT API KEY를 발급받자) 빠르게 발전해나가는 AI에게 인간이 쓴 일기에 담긴 감정 분석을 맡긴다. (스카이넷?) OpeanAI의 GPT를 사용해서 일기를 분석시켜야하니 API KEY를 가져와야한다. 우선 구글에 openai api를 검색하니 친절하게 https://openai.com/blog/openai-api 이렇게 주소를 알려준다. 위의 이미지에서 API를 클릭하면 API KEY를 발급하는 페이지로 바로 이동시켜주는게 아니라 DOCS페이지로 이동을 하게 되는데 이미지의 자물쇠 모양을 클릭하면 API KEY발급 페이지로 이동하게 된다. Create new secret key 버튼을 누르고 절차대로 발급을 받으면 끝 도텐브를 사용해서 환경변수로 처리해버렸다. (해치웠나?) key는 발급 받고 나서 다시 볼 수 없을지도? 잘 간수.. 2024. 4. 20.
[개인 사이드 프로젝트] - emotional (프로젝트 구성) 취업은 안되고...시간은 가고... 답답한 마음에 머리를 부여잡고 아이디어를 떠올려봤다. 사용자가 일기를 쓰면 그 일기를 분석해서 주요한 키워드를 추출한 후에 키워드와 연관된 노래를 추천해주는 어플리케이션을 만들어보자. 일단 필요한건 전체적인 틀... input창 또는 textarea에 입력하고, 분석 버튼을 만들고 아래에는 추천 노래를 띄워준다. 흠...분석은 어떻게 해야하나? AI가 대세이니 gpt모델을 사용해보자. 그럼 추천 노래는 어떻게 해야하나? 스포티파이 API? 유튜브 API? 일단 처음 생각은 스포티파이 였으나 스포티파이 API를 호출하려면 사용자의 스포티파이 access token이 필요했다. 번거롭게 다른 뎁스를 거치지 않고 가볍게 사용하는게 목표였어서 유튜브 API를 사용하기로 하였다.. 2024. 4. 20.
[Side Project] 포케허브 포케허브라는 사이드 프로젝트는 이미 배포를 한 상태이다. 리팩토링 및 피드백 받은 사항들을 개선 중에 있는 중.. 뭐 이것저것 정리하다가 생각이든 @react-icons/all-files 사용이유 react-icons의 번들 사이즈가 너무 커서 번들 사이즈를 줄이기 위해 찾다가 해결책?으로 react-icons/all-files를 사용한다고 하였다. 물론 react-icons를 사용하면 편하기야 하겠으나, chunk크기가 무지막지..별의별 icon을 다 데리고 와버린다.. (빌드 시에 엄청난 크기의 chunk 파일 사이즈..) 그래서 찾아보았다! react-icons에서는 @react-icons/all-files 라는 별도의 라이브러리를 제공한다. @react-icons/all-files 라이브러리는 아.. 2024. 3. 23.
[React Native] ScrollView와 FlatList ScrollView는 데이터가 화면을 벗어났을 때 스크롤을 생성해서 스와이프를 통해서 벗어난 부분을 볼 수 있다. (데이터량이 많지않고 고정적일 때 사용) FlatList는 한번에 모든 데이터가 아닌 화면에 보여지는 부분만을 렌더링 (성능 향상!) windowing이랑 비슷한거 같은데. 2024. 3. 19.
[React Native] Layout system RN에서는 Flexbox를 사용한다. 주의 Flexbox는 웹의 CSS에서와 같은 방식으로 리액트 네이티브에서 몇 가지 예외를 제외하고 작동합니다. 기본값은 다릅니다. flexDirection이 행 대신 열로 기본 설정되어 있고, alignContent가 stretch 대신 flex-start로 기본 설정되어 있고, flexShrink가 1 대신 0으로 기본 설정되어 있으며, flex parameter는 단일 숫자만 지원합니다. 참조 : https://reactnative.dev/docs/flexbox Layout with Flexbox · React Native A component can specify the layout of its children using the Flexbox algorithm... 2024. 3. 15.
"자바스크립트에서 '이벤트 버블링(Event Bubbling)'과 '이벤트 캡처링(Event Capturing)'에 대해 설명해주세요." 이벤트 버블링 특정 요소에서 발생하는 이벤트가 발생한 자식 요소에 부터 DOM트리를 따라 부모 요소로 전파되는 현상이다. 이벤트 버블링을 활용하면, 여러 요소에 대해 하나씩 이벤트 리스너를 구축하지 않아도 부모요소에서 자식 요소의 이벤트를 감질 할 수 있다. (이벤트 위임) 이벤트 캡처링 이벤트 버블링과 반대의 개념으로 생각하면 된다. (부모 요소에서 자식 요소로) 이벤트 캡처링은 이벤트 처리의 초기 단계에서 주로 사용되며, 특정 이벤트를 자식 요소에 도착하기 전에 캡처하고 싶을 때 유용하다. 이벤트 리스너를 사용할 때 3번 째 요소로 true를 지정하면 이벤트 캡처링 단계에서 이벤트 리스너가 호출된다. 음..대부분 상위 요소를 클릭하니까 캡처링부터 시작되어 버블링이 되지 싶다. 2024. 3. 14.
"자바스크립트의 '스코프(Scope)'와 '스코프 체인(Scope Chain)'에 대해 설명해주세요." 스코프는 함수나 변수에 대한 접근 권한과 유효 범위를 말한다. 각 함수가 생성 될 때 스코프가 생성되고 함수의 내부에 생성된 변수는 해당 스코프에 속한다. 스코프는 중첩 가능하고, 내부 스코프는 외부 스코프를 참조 가능하며, 외부 스코프는 내부 스코프를 직접적으로 참조할 수 없다. 스코프 체인은 이러한 스코프에서 변수를 찾는데 사용되고, 현재 스코프에서 찾지 못 하면 이보다 상위 스코프에서 찾는데, 이러한 과정은 전역 스코프까지 진행된다. 스코프의 유형에는 글로벌 스코프와 지역 스코프(로컬 또는 함수 스코프), ES6 이후에는 let과 const 키워드를 사용하여 블록 레벨 스코프를 생성할 수 있다.\ 글로벌 스코프 1. 코드의 최상위 레벨에서 선언된 변수는 어디서든지 접근 가능한 글로벌 스코프를 가진다.. 2024. 3. 14.

티스토리툴바