typescript
-
[SvelteKit] 스벨트킷 과 mdsvex를 이용한 마크다운(Markdown) 기반 사이트 개발 구현하기Javascript & TypeScript 2023. 12. 10. 13:35
Sveltekit 과 mdsvex를 활용하여 마크다운(markdown)을 컨텐츠로 사용하는 나만의 문서기반 사이트를 개발할 때 좋은 프로젝트 구성 순서를 정리한다. 1. 프로젝트 생성 seveltkit 프로젝트 생성명령어를 통해 프로젝트를 생성한다. 본 예제에선 typescript 를 선택했는데, javascript 방식으로 선택해도 별 상관없다. npm create svelte@latest $ProjectName 2. mdsvex 설치 및 적용 svelte 에서 markdown 을 인식시키기 위해 mdsvex 라이브러리를 설치한다. npm i --save-dev mdsvex 설치 후 svelte.cofnig.js 파일을 열어 예시와 같이 수정한다. 주석으로 "추가 영역"이라 명시된 부분이다. impor..
-
[Typescript] swagger로 httpClient code를 자동 생성해주는 도구 swagger-typescript-api 소개Javascript & TypeScript 2023. 1. 29. 11:53
Swagger? 스웨거(Swagger)는 개발자가 REST 웹 서비스를 설계, 빌드, 문서화, 소비하는 일을 도와주는 대형 도구 생태계의 지원을 받는 오픈 소스 소프트웨어 프레임워크이다. 대부분의 사용자들은 스웨거 UI 도구를 통해 스웨거를 식별하며 스웨거 툴셋에는 자동화된 문서화, 코드 생성, 테스트 케이스 생성 지원이 포함된다. 스웨거 (소프트웨어) - 위키백과, 우리 모두의 백과사전 (wikipedia.org) swagger-typescript-api swagger-typescript-api는 별다른 추가 설정 없이 현재 구현중인 typescript 프로젝트 내 적절한 위치에 추가시킬 수 있는 CLI 명령어 도구이다. acacode/swagger-typescript-api: TypeScript AP..
-
[9일차] nailed it! 구현 마무리 및 해결되지 않은 문제프로젝트 개발/뮤직플레이어 웹앱 2021. 2. 14. 12:16
nailed it! 9일차를 끝으로 미완성된 재생 Progress bar 기능과 함께 프로젝트를 마무리 지었다. 실제 서비스하기엔 여러모로 부족하지만 애당초 실제 서비스 목표가 아니라 "iPhone과 mp3는 있지만, 맥북도, 앱스토어에 게시된 앱들도 믿지 못해서 직접 만든 웹 기반 음악 플레이어"에 상당 부분 충족했기 때문이다. 완성된 UI는 아래와 같다. 음악 커버 부분은 재생중인 음악별로 커버를 만들어 넣기 귀찮아서(!?) React 기본 이미지를 넣었다. 테스트 중에 Web Title에 현재 재생중인 음악 제목이 표시되었으면 좋겠다 싶어 수정했다. 프로그래스 바는 material-ui 에서 제공하는 LinearProgress 컴포넌트를 이용했으며 아래와 같이 간단하게 구현했다. 해결되지 않은 문제..
-
[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)을 내부함수로 정의할 경우 유의사항 이 소스 자체가 올바르다고 보긴 어렵겠지만 나중에 또 뻘짓할수도 있는점을 대비해 정리한 글..
-
[5~6일차] 주요 오류 발생사항 수정프로젝트 개발/뮤직플레이어 웹앱 2021. 2. 12. 00:10
소스코드를 대량으로 수정했다. 하드웨어상에서 재생/일시정지 지원을 위해 이벤트리스너를 설정하면서 겪게된 생각지도 못한 문제, 로그인 이후 재생상태에서 로그아웃했을때도 계속 재생되는 문제등을 수정했다. audio 태그에 이벤트리스너를 설정한뒤 다음 음악재생처리 과정에서 Hook에 대한 값이 제대로 변경되어있지 문제를 겪었고 원인과 해결방법에 대해선 별도의 포스트로 정리하였다. https://ddochea.tistory.com/93 [React Hook] 컴포넌트 내 Effect Hook(useEffect) 사용 개념정리 함수형 컴포넌트는 내부에 선언된 상태 훅(State Hook)의 변화나 렌더링 상황에 따라 함수형 컴포넌트 자체가 재 호출된다. 그래서 함수형 컴포넌트내에 단순히 변수를 선언하거나, 함수를..
-
[3~4일차] firebase Authentication를 이용한 OAuth 방식 로그인/로그아웃 구현 진행프로젝트 개발/뮤직플레이어 웹앱 2021. 2. 9. 22:59
지난시간에는 대략 적인 재생화면 뼈대만 만들어봤었다. 이번에는 firebase에서 제공하는 인증(Authentication) 기능을 사용해 로그인/로그아웃 구현을 진행했다. firebase에는 OAuth 를 제공하는 업체의 로그인 기능을 손쉽게 사용할 수 있도록 구현해 두었다. (물론 네이버, 다음 같은 서비스는 제공되지 않는다) 인증을 구현한 이유는 확인되지 않은 사람이 URL을 알아내 접근하여 음악을 받을 수 있는 문제를 사전에 차단하기 위함이다. 로그인/로그아웃 구현에 참조한 소스는 아래와 같다. https://fireship.io/lessons/react-firebase-chat-app-tutorial/ React Firebase Chat App Learn the basics of React & ..
-
[1~2일차] 기술스택 선정 및 Material-UI 로 대략적인 화면 구성프로젝트 개발/뮤직플레이어 웹앱 2021. 2. 7. 22:16
iPhone을 사용하는데 맥북은 없고, 앱스토어에서 앱을 받아쓰자니 믿음이 안가 웹앱 방식으로 개발해서 음악 재생 서비스를 만들겠다는 지극히 개인적인 목적으로 시작했다. 그런데 글을 쓰면서 개발을 진행해보니 귀차니즘이 어느정도 누그러지는 듯하다. 그래서 본격적인 개발 프로젝트에 대한 진척과 뻘짓을 기록하고자 카테고리를 따로 생성했다. 프로젝트 가능여부를 확인하기위해 react + firebase 서비스를 이용해 indexed DB를 활용한 테스트용 음악 재생 웹앱을 만들어 보았었다. 테스트 과정은 아래 포스트를 참조해주기 바란다. https://ddochea.tistory.com/86 [javascript] 브라우저의 indexedDB 및 WebSQL을 손쉽게 사용할 수 있는 localForage 라이브..