분류 전체보기
-
[8일차] React Prop를 이용해 음악 재생 리스트 하위 컴포넌트 구현프로젝트 개발/뮤직플레이어 웹앱 2021. 2. 13. 21:09
어제 기능적인 부분은 다 구현했다고 생각했는데 재생리스트를 놓치고 있었다. 그래서 8일차인 오늘은 아직 구현하지 않은 음악 재생 리스트 화면을 구현하는데 치중했다. 음악 리스트 화면은 음악 재생화면의 하위 컴포넌트 형태로 구성했으며, 음악 재생 버튼을 누를때 표시된다. 표시된 음악리스트는 indexedDB 순서에 따라 정렬되어 표시된다. 만약 셔플을 했다면, 셔플된 랜덤한 순서로 정렬되어 표시된다. 리스트에 표시된 음악 제목을 선택하면 해당 음악으로 바로 재생하며 하단의 X 버튼을 누르면 리스트가 닫힌다. 아래는 구현한 음악리스트 화면 컴포넌트에 대한 전체 소스이다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 걸 React에선 Prop 라고 불리는데, 컴포넌트간에 종속적인 부분이 생기는 것 같아..
-
[7일차] 셔플(Suffle) 기능 구현 및 길어진 Promise 코드를 async/await 로 정리프로젝트 개발/뮤직플레이어 웹앱 2021. 2. 12. 20:41
어제 작성한 소스코드로 반복재생, 다음 음악 재생, 음악 파일이 저장되어있지 않은 경우 storage에서 내려받는 기능 구현까지 주요 기능은 어느정도 갖춰지게 되었다. 남은건 셔플(Suffle) 기능과 재생목록화면, 메인 재생화면에 대한 UI 디자인 등이 남은 듯 하다. 오늘은 두 가지를 처리했다. 하난 셔플, 다른 하나는 길어진 소스코드에 대한 정리이다. 셔플 셔플 기능은 간단하게 구현 가능했다. 물론 이부분도 약간의 뻘짓이 들어 갔었기 때문에 별도의 포스트로 정리하였다. https://ddochea.tistory.com/97 [React Hook] 상태 훅(State Hook)을 내부함수로 정의할 경우 유의사항 이 소스 자체가 올바르다고 보긴 어렵겠지만 나중에 또 뻘짓할수도 있는점을 대비해 정리한 글..
-
[React Hook] 상태 훅(State Hook)을 내부함수로 정의할 경우 유의사항Javascript & TypeScript 2021. 2. 12. 19:53
이 소스 자체가 올바르다고 보긴 어렵겠지만 나중에 또 뻘짓할수도 있는점을 대비해 정리한 글 useEffect(() => { console.log(`playIndexes : ${playIndexes}`); }, [playIndexes]); useEffect(() => { if(isSuffle) { setPlayIndexes(p => { const rndTargets = [...p.slice(0, currentPlayIdx), ...p.slice(currentPlayIdx + 1, p.length)].sort(p => Math.random() - Math.random()); const result = [...rndTargets.slice(0, currentPlayIdx), p[currentPlayIdx], ..
-
[.NET] List 배열을 Random 정렬하는 간단한 소스코드 예시.NET/개념 및 유용한 팁 2021. 2. 12. 11:47
개인프로젝트 진행하다가 .NET에서 코드 1줄로 랜덤 정렬 구현하는 방법을 정리할 겸 작성. using System; using System.Collections.Generic; using System.Diagnostics.CodeAnalysis; namespace RandomArrayTest { class Program { static void Main(string[] args) { Console.WriteLine("Hello World!"); List list = new List() { 1,2,3,4,5,6,7,8,9,10 }; // 랜덤으로 정렬시킬 List (어떤 유형이건 상관없음) list.Sort((a, b) => new Random().NextDouble() >= 0.5? 1 : -1); /..
-
[5~6일차] 주요 오류 발생사항 수정프로젝트 개발/뮤직플레이어 웹앱 2021. 2. 12. 00:10
소스코드를 대량으로 수정했다. 하드웨어상에서 재생/일시정지 지원을 위해 이벤트리스너를 설정하면서 겪게된 생각지도 못한 문제, 로그인 이후 재생상태에서 로그아웃했을때도 계속 재생되는 문제등을 수정했다. audio 태그에 이벤트리스너를 설정한뒤 다음 음악재생처리 과정에서 Hook에 대한 값이 제대로 변경되어있지 문제를 겪었고 원인과 해결방법에 대해선 별도의 포스트로 정리하였다. https://ddochea.tistory.com/93 [React Hook] 컴포넌트 내 Effect Hook(useEffect) 사용 개념정리 함수형 컴포넌트는 내부에 선언된 상태 훅(State Hook)의 변화나 렌더링 상황에 따라 함수형 컴포넌트 자체가 재 호출된다. 그래서 함수형 컴포넌트내에 단순히 변수를 선언하거나, 함수를..
-
[React Hook] 상태 훅(State Hook)을 EventListener에 사용시 유의사항Javascript & TypeScript 2021. 2. 11. 16:06
개인프로젝트에서 HTMLAudioElement 를 선언하여 해당 객체에 이벤트 리스너를 심어 음악재생을 관리하는 기능을 구현하던 중 겪은 현상을 정리하고자 이 글을 작성하였다. 초기 소스는 아래와 같이 작성했다. function MusicPlayer() { const [totalTime, setTotalTime] = useState(1); // 초기값을 0으로 주면 바로 다음 음악재생 const [currentTime, setCurrentTime] = useState(0); const [audio] = useState(new Audio()); function init() { console.log(`init ${MusicPlayer.name}`); audio.addEventListener('timeupda..
-
[React Hook] 컴포넌트 내 Effect Hook(useEffect) 사용 개념정리Javascript & TypeScript 2021. 2. 11. 14:12
함수형 컴포넌트는 내부에 선언된 상태 훅(State Hook)의 변화나 렌더링 상황에 따라 함수형 컴포넌트 자체가 재 호출된다. 그래서 함수형 컴포넌트내에 단순히 변수를 선언하거나, 함수를 호출하면 의도한 결과가 제대로 수행되지 않을 수 있다. 아래 소스는 개인개발 프로젝트를 하면서 겪은 뻘짓 코드이다. audio 객체 및 init 함수의 동작이 원하는대로 수행되지 않아 고생했다. function MusicPlayer() { const audio = new Audio(); // 이렇게 선언할 경우 MusicPlayer 내 다른 state hook이 변경될때마다 매번 객체가 새로 생성됨. const [totalTime, setTotalTime] = useState(1); const [currentTime,..
-
[VSCode] Launch Chrome 설정으로 React 디버그시 OAuth 테스트가 가능하도록 설정.ETC 2021. 2. 10. 18:23
Firebase 인증기능 적용 후 디버그시 "로그인할 수 없음" 화면과 함께 제대로된 디버깅작업을 수행할 수 없는 문제가 생겼다. 이를 해결하려면 launch.json의 config값에 userDataDir 속성을 추가하고 값을 false로 설정해야한다. { "name": "Launch Chrome", "request": "launch", "type": "pwa-chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}", "userDataDir": false } 출처는 아래와 같다. visual studio code - Debugging a firebase auth app from vscode and chrome not working..