본문 바로가기

Portfolio6

썸네일 생성기 (Thumbnail Generator) 블로그 등 썸네일이 필요할 때 웹에서 간단하게 썸네일을 만들 수 있도록 도와주는 웹서비스입니다. 크기, 텍스트, 배경 설정 3가지 기본적인 기능을 제공합니다. 빌드업을 통해 추가기능 업데이트 예정입니다. 기술스택 : React 17.0.x 상태관리 : Context API - 썸네일 생성기 바로가기 https://thumbnail-generator-bay.vercel.app/ Awesome Thumbnail Generator - Blog Post, Etc. thumbnail-generator-bay.vercel.app 크기 설정 텍스트 설정 크기 / 자간 / 굵기 / 색상 / 글꼴을 설정할 수 있습니다 배경 설정 단색, 그라디언트, 이미지업로드를 통해 배경을 설정할 수 있습니다 드래그 앤 드랍 텍스트 항.. 2022. 2. 8.
[React] 리액트로 만드는 파일업로더 사내에서 그동안 FTP에 직접 붙어 이미지를 업로드한 후 파일서버 URL을 직접 적어서 채용공고 등 외부공유가 필요한 이미지파일을 사용해왔다. 이미지 하나 올리고 공유하는 절차가 너무 번거로웠다. (= 이제 이미지 파일을 사내채팅방에 돌림빵하지 않아도 된다) 예전부터 이 프로세스를 간소화 할 수 있는 웹을 만들어야겠다 생각 하던중 팀내 백엔드 개발자분과 소통하여 개발하기로 결정했다. 모습은 위와 같이 이미지 선택 -> 업로드 -> 이미지 URL 응답 -> 클립보드 API 가 전부라고 할 수 있겠다. 비록 작은 프로젝트지만 사내에서 유용하게 쓰였으면 하는 바램이다. 이번에 픽한 컬러는 #766EDA , #98D8F3 Custom Components 기능적인것 보다도 UX 관점에서 조금 더 신경쓴 프로젝트였.. 2022. 1. 6.
Toy Project) FSH - Deploy 0.2 2021.12.21 - [Portfolio] - Toy Project) FSH - Deploy 0.1 Toy Project) FSH - Deploy 0.1 Find Specific Hospital 경기도 특수 수술/시술 가능한 병원 찾기 사내 프로젝트가 어느정도 마무리 되어가는 시점에 경기데이터드림 공공API를 활용하여 사이드프로젝트를 진행해보고자 시작하 sihus.tistory.com 지난번 포스팅에서는 0.1 최초 배포된 FSH 프로젝트를 소개했습니다. Update 0.2 버전 배포에서는 즐겨찾기 기능을 추가하였습니다. 병원 목록에서 '별' 아이콘을 클릭하여 하단 네비게이션 바에 별 메뉴로 진입하면 즐겨찾기에 추가한 병원을 따로 볼 수 있습니다. 구글 플레이스토어 준비 차기 0.3 버전에서는 현재 웹.. 2021. 12. 30.
Toy Project) FSH - Deploy 0.1 Find Specific Hospital 경기도 특수 수술/시술 가능한 병원 찾기 사내 프로젝트가 어느정도 마무리 되어가는 시점에 경기데이터드림 공공API를 활용하여 사이드프로젝트를 진행해보고자 시작하게 되었습니다. 수 많은 데이터 목록 중, 특수 수술 및 시술이 가능한 병원들을 한눈에 볼수 있으면 좋겠다는 생각이 들어 경기도 내 특수수술 / 시술이 가능한 병원 데이터를 선택하였습니다. 혈액투석, 체외충격파쇄석술, 사시수술, 인공와우이식술, 측두하악관절 자극요법, 인공심박동기이식술, 부정맥고주파 절제술, 심율동전환제세동기 거치술, 손/발가락 접합술, 망막수술, 화상치료, 제왕절개 후 자연분만병원, 정맥류 수술, 구순구개열, 안와골절정볼술 이렇게 15항목에 병원데이터를 제공합니다. (이름이 너무 어렵..).. 2021. 12. 21.
라이브러리 없이 VanilaJS로 만드는 To-Do Application 과제로 전달받은 라이브러리 도움 없이 To-Do 리스트를 만들어달라는 요구사항을 토대로 기본 자바스크립트에 충실하여 To-Do 리스트를 만들어 보았다. 1. 진입 (Intro) : 과제 요구사항에는 없던 내용이었는데 아이폰을 처음 부팅했을때 사용자경험 느낌이 좋아 (네! 여기 앱등이 손..) 비슷하게나마 만들어보고 싶었습니다. 2. 할일목록 추가 (Modal) : 할일 목록을 추가할때 모달을 만들어 입력창을 표출했고 백그라운드를 클릭할때에는 모달창이 닫히도록 하였습니다. 3. 할일목록 : 미완료를 상단에, 완료목록을 하단에 정렬하였습니다. 4. 할일들은 언제든 미완료 완료로 전환 5. 완료된 항목에 대해서만 삭제버튼이 활성화 6. 데이터들은 브라우저 로컬스토리지(LocalStorage)에 저장 7. 라이.. 2020. 11. 6.
AIS Analytics & AIS Analytics Web DashBoard AIS Analytics : AIS 수신메세지 데이터를 분석하고 대량의 데이터를 DB로 Insert하기 위한 목적 구축환경 - NodeJS v12.16.1 라이브러리 - Ais Parser : v0.0.13 - Async : v3.2.0 - Cli-progress : v3.8.2 - Moment : v2.26.0 - Pg(PostgreSQL) : v8.2.1 - Prompt-confirm: v2.0.4 AIS 수신메세지 전체 건수 1. 약 100억 건 기능 1. AIS 수신 원문데이터 Header, Sentence 분리 2. Sentence Parsing 3. Message Type 1~24 분류 및 Message Type Count 4. 년별, 월별, 일별 수신채널(A or B)에 따른 Message .. 2020. 7. 2.

티스토리툴바