분류 전체보기
-
[EntityFramework Core] 간단히 알아본 Insert & Update 퍼포먼스 성능비교.NET/개념 및 유용한 팁 2021. 5. 30. 21:48
EntityFramework Core는 Microsoft에서 관리하는 오픈소스 ORM 라이브러리이다. ORM이 없기 전, 과거(라곤 하지만 현재도 유지되고 있다.)에는 쿼리 문자열을 작성하여 조회한 뒤, DataTable로 결과를 받아 처리하는 방식을 사용했었다. 모든 결과를 DataTable로 받기 때문에, 로직이 조금만 복잡해져도, 해당 DataTable이 가리키는 테이블이 무엇이고 어떤 필드가 어떤 유형(type)인지 제대로 파악하기 어려웠었다. EntityFramework 는 시스템이 사용할 테이블을 클래스(Class) 모델로 생성하고, 모델 객체를 통해 데이터를 조작하기 때문에 소스로직이 복잡해지더라도 클래스유형을 통해 분석이 용이하다는 장점이 있다. 근데 써본사람들은 알겠지만, SQL쿼리보다 ..
-
[4일차] CI/CD 뻘짓 2차전 및 meta 태그적용프로젝트 개발/MP3 Tools 웹앱 (Drop) 2021. 5. 22. 21:24
4일차에는 검색엔진 활성화를 위한 메타 태그를 적용하려다 package 의존성이 또 잘못되어 뻘짓을 진행하게 되었다. 1. CI/CD 뻘짓 2차전 지난시간에 fsevents 이슈에 의해 배포자동화가 동작하지 않는 문제가 있어 optionalDependencies 로 해결했었다. 그 뒤 디자인 적용과, 검색엔진최적화(SEO) 작업을 위해 아래 포스트를 참조하여 작업을 진행했다. https://velog.io/@byseop/SPA%EC%97%90%EC%84%9C-%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%84-%EA%B5%AC%EC%B6%95%ED%95%98%EC%A7%80-%EC%95%8A%EA%B3%A0-..
-
[3일차] Cover 추출기능 화면 임시구현 및 메뉴 변경프로젝트 개발/MP3 Tools 웹앱 (Drop) 2021. 5. 20. 22:02
이번시간엔 본 프로젝트 구현보단 ffmpeg load(), exit() 에 대한 테스트 및 예제코드를 작성하는데 좀 더 많은 시간을 보냈다. 따라서 간단한 작업만 하고 마무리지었다. 1. Cover 이미지 추출기능 mp3 커버에 저장된 이미지를 추출하는 기능과 기능 제공 화면을 구현했다. 임시구현이기 때문에 Import 화면에서 변경된 바 거의 없다. 2. 메뉴 수정 메뉴명칭이 너무 길어 몇 개 화면만 구현해도 메뉴가 못생겨질 것 같아 보였다. (이미 충분히 못생기긴했지만..) 따라서 조금 불편할지라도 depth를 1에서 2로 늘렸다. 3. FFmpegService 구조 변경방안 마련 사실 1일차 때 FFmpegService 싱글톤으로 구현하고, ffmpeg 객체를 1개만 사용하도록 한정한 이유가 ffm..
-
[WSL2] WSL Ubuntu에 실행한 Web이 host OS에서 localhost로 접속이 안되는 현상을 해결하는 간단한 방법ETC 2021. 5. 20. 21:45
이전에 WSL 기반 React 프로젝트가 npm start 명령어로 dev 서버를 실행해도 안되는 현상이 있어 해결방법을 기록해 둔적이 있었다. https://ddochea.tistory.com/140 이번엔 더 간단한 방법이 있어 기록해본다. vscode 실행전, Host OS에서 cmd에 아래 명령어를 실행한다. wsl --shutdown 그 다음 wsl vscode를 실행하면 된다. 그 뒤 localhost 접속가능여부를 확인해보도록 하자. (만약 안된다면, https://ddochea.tistory.com/140 를 시도해보도록 하자)
-
[2일차] ffmpeg.wasm 0.10.0 업데이트 및 github action npm ci 문제 해결프로젝트 개발/MP3 Tools 웹앱 (Drop) 2021. 5. 19. 17:37
1. ffmpeg.wasm 업데이트 개발 진행중 ffmpeg.wasm 이 0.10.0으로 업데이트 된 것을 확인했다. 이전에 문제가 있었던 스레드 종료이슈에 대한 기능이 구현되었다. 사용하면 원하는 상황에 바로 리소스가 해제되진 않는 듯 하지만 전혀 없었던 때에 비하면 훨씬 더 좋아졌다. setTimeout(() => { try { ffmpeg.exit(); } catch { } }, 0); ffmpeg.exit() 함수를 바로 호출하면 에러 메시지가 alert으로 표시되어 나온다. 따라서 timeout으로 감싼뒤 try catch로 처리했다. 2. 아이콘 변경 아이콘에 소소한 변경을 주었다. 지난시간에 만들었던 아이콘이 새로 디자인할 뮤직플레이어 웹앱에 어울릴듯하여 해당 아이콘은 새로운 뮤직플레이어 웹..
-
[1일차] MP3 Tools 웹앱 개발 시작프로젝트 개발/MP3 Tools 웹앱 (Drop) 2021. 5. 16. 17:13
한동안 관심을 가졌던 ffmpeg.wasm(https://ddochea.tistory.com/147) 으로 웹 서비스를 개발해보았다. 이번에는 광고를 붙이고 소소하게 수입이 들어오길 바라는 야망(?)을 품고 있기 때문에 어느정도 완성이 되면 URL을 공개할 것이다. 첫 시작으론 mp3 파일에 cover image를 추가하는 기능이다. ffmpeg.wasm 을 사용해보았기 때문에 구현자체는 어렵지 않았다. 프로젝트 구성 이번 프로젝트는 지난번 "뮤직플레이어 웹앱" 때와 마찬가지로 소스코드를 오픈해두었다. 다만 지난시간엔 App.ts 에 화면, 기능영역 구분없이 구현했었다. 이번엔 비즈니스 로직과 화면영역을 분리할 계획이다. 아이콘 및 파비콘 디자인 아이콘은 Figma를 통해 디자인하였다. 처음엔 어려웠지만..
-
[디자인] CSS, Mobile App 개발시 유용한 사이트 모음ETC 2021. 5. 9. 23:17
웹 프론트엔드영역 개발시 필요한 사이트나 도구를 링크로 보관하고자 정리한 포스트 1. 구글 폰트(Google Fonts) 웹 폰트 및 아이콘 제공 및 검색할 수 있는 사이트. 구글에서 제공한다. fonts.google.com Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. Figma 목업(Mockup) 디자인 개발에 유용한 툴. 만든 디자인을 css, svg 로 export 할 수 있다. www.figma.com/ Figma: the collaborative interface design tool. Build better products as a team. Design..
-
[React] ffmpeg.wasm 메모리 누수 문제 해결Javascript & TypeScript 2021. 5. 8. 16:11
몇칠 전 ffmpeg.wasm 패키지를 소개했던 적이 있다. (ddochea.tistory.com/147) 웹 클라이언트만으로 미디어 파일에 대한 인코딩/디코딩 기술을 사용할 수 있다는 장점과 함께, memory leak이 발생하고 있는 이슈가 있어, 실제 서비스 개발에 도입하기엔 무리가 있을 것 같다고 했었다. 그리고 나서 오늘 좀 더 확인해보는 시간을 가졌는데, thread 관련 문제가 있는건 맞지만, 메모리 부분은 내가 코딩을 잘못해서 생긴 것을 깨닫게 되었다. 이 문제는 내가 만든 예제 뿐만 아니라, 공식사이트에 소개하고 있는 React 예제도 같은 문제가 있다. 아래 코드 공식사이트 예제 코드이다. import React, { useState } from 'react'; import { crea..