Study note 45

mbti 짭 궁합 말고 진짜 공식

mbti 궁합 검색하면 파국, 환상의 궁합 등 그래프 같은 게 뜬다 근데 그게 다 다르다 뭐가 맞는 건지 모르겠는데 mbti는 상호 관계가 존재한다 이원 관계, 거울 관계.. 이런 말 들어봤다면 mbti 고인물! 근데 그거 하나 하나 찾아가면서 맞춰보기가 너무 빡쎘다 그럼 또 내가 불편하기 때문에 내가 해결했다 바로바로 mbti 궁합 앱 “너랑나랑은” 짜잔- 일단 예쁘게 만들고 싶은 욕구가 있었으나 그 전엔 축구 관련 앱이다보니🙄 예쁘게 만들고 싶은 욕구를 자제했었다 내가 좋아하는 색으로 그라데이션도 넣고 🤭 인스타 스타일로 공유도 할 수 있게 만들었다 mbti 궁합 검사를 하면 내 친구 목록에 히스토리로 관리할 수 있어서 좋다 마치 포켓몬 도감 같은 거지.. 🤗 내 친구들 분포 통계 🧐 이렇게 모아보니..

Study note/WebApp 2024.09.11

오늘 내일 뭐입지? 고민을 해결해줄 옷 차림 추천 앱 Dress Forecast

기술 블로그인 만큼 단순히 앱 광고가 아닌 앱을 만들 때 했던 고민 등을 적어보겠다. 구현할 때 고려했던 것들일단 내가 앱을 만들 때 내 신조가 1) 불필요한 depth 없이 간편하게 사용 가능해야하고 2) 자원을 효율적으로 사용해야하고 3) 개인화가 되면 좋겠다 정도 있는데 1) 앱을 켜자마자 아무것도 안해도 자동으로 현 위치 잡아 바로 옷 추천을 볼 수 있도록 구현했다. 2) 날씨 api와 위치 api는 완전한 무료가 아니다. 그래서 불필요한 api 호출을 막아야했다. 같은 결과를 받는 경우에는 저장되어있는 결과값을 사용하도록 구현했다. 3) 개인화는 아직 구현을 못했는데 추후에 업데이트 해볼까한다. 기타) 검색 결과를 3개 정도는 저장되도록 해놨는데, 요청이 있으면 여러 개로 늘려볼까한다. 디자인기..

Study note/WebApp 2024.07.24

App store connect에 스크린샷 preview 올릴 때 에러 해결방법

심사 절차를 시작하려면 아래의 항목이 필요합니다. 아직 스크린샷 업로드가 진행 중입니다.There are still screenshot uploads in progress. 이걸로 시간 엄청 버렸다.포럼에 2020년에 올라온 글에 보면 댓글이.. 8페이지다. 애플 너네 핑거가 몇 갠데 아직도 못 고치고 있냐고 말하는 사람도 봤다. 나도 도무지 이해가 안되지만 이것 저것 다 시도해본 것 같다.해본 거는크롬 브라우저 사용 / delete all 하지 않고 하나하나 지우기 / carefully 올리기 ㅋㅋㅋ 겨우 해결한 방법은모든 스크린샷을 jpg로 바꿨다. 그랬더니 겨우 된듯..

Study note/WebApp 2024.05.30

React 모바일 모드에서 클릭 시 파란색 배경 효과 제거하기

React로 webapp 만드는 중, 모바일 화면에서는 div나 button을 클릭할 때 하늘색 배경의 사각형이 나타나는 것을 볼 수 있다. 이게 딱 맞아떨어지는 사이즈가 아닐 때 거슬려서 지우고 싶을 때가 있다.이러한 highlight 효과는 브라우저의 기본 동작으로, 포커스된 요소를 나타내기 위한 것이고, CSS를 재정의해서 없앨 수 있다.내 경우엔 사이트 전체에서 이 효과를 없애기 위해 index.css에 추가했다.```css * {     -webkit-tap-highlight-color: transparent;     -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 일부 안드로이드 브라우저를 위한 설정 */     -webkit-focus-ring-col..

Study note/WebApp 2024.05.15

iOS 앱 심사: 3수 만에 accepted

항상 하던 대로 iOS 앱 심사를 올렸는데 문제가 있어서 다시 제출하라고 메일이 왔다.Please correct the following issues and upload a new binary to App Store Connect. ITMS-90683: Missing purpose string in Info.plist - Your app’s code references one or more APIs that access sensitive user data, or the app has one or more entitlements that permit such access. The Info.plist file for the “App.app” bundle should contain a NSPhotoLibrar..

Study note/WebApp 2024.05.15

티빙에서 명탐정코난 정주행 중요한 편만 보기 + 히스토리까지

명탐정코난 시리즈 정주행은 솔직히 엄청 어렵다. 1기만 해도 78편이다. 그런데 꼭 봐야하는 편만 보는 방법이 있다. 그럼 한 시리즈에 열 몇 편으로 줄어든다. 그치만 정주행 가이드나 위키 하나하나 찾아가면서 찾기가 너무 힘들고 내가 어디까지 봤는지도 알기 어렵다. 명탐정코난 정주행 기록명탐정코난 정주행watch-conan.netlify.app 그래서 결국 하나하나 찾아가며 보다가 내가 너무 불편해서 만든 프로그램이다. 내가 불편해서 만든 거지만 다른 코난 정주행러들도 사용할 수 있도록 공개 배포하였다. 참고로 나는 티빙에서 정주행 중이라 tving으로 바로 연결되도록 만들었다. 기본적으로 전체 시리즈 목록을 볼 수 있다. 우측 상단에 중요한 편만을 누르면 중요한 편만 필터해서 볼 수 있다. 원하는 기수..

Study note/React 2024.05.07

풋살할 때 밸런스 있게 팀 짜주는 앱 출시: 팀짜요

동아리, 동호회에서 풋살할 때마다 팀을 짜야하는데 밸런스가 맞지 않으면 항상 재미가 확 떨어졌었다. 팀 짠 사람이 욕을 먹기도 한다 허허 그러다가 동호회 회장이 나보고 짜보라고 했을 때 나름 내 머릿속 알고리즘으로 짜본 적이 있다. 그 날 모두가 너무나 만족했었던 기억이 난다. 그 나만의 알고리즘으로 어플을 만들어봤다. 팀짜요 iOS ‎팀짜요‎팀짜요와 함께 밸런스 있게 팀을 짜보세요!apps.apple.com팀짜요 Android 팀짜요 - Google Play 앱축구 풋살 농구 운동할 때 알아서 팀 짜주는 어플리케이션play.google.com 밸런스 맞춰서 팀 짜는 기능도 있고 실력 상관 없이 랜덤으로도 가능하다. 공유할 땐 실력 점수 가리고 공유도 가능하니 프라이버시 문제도 해결된다. '감독님이 나 ..

Study note/WebApp 2024.05.07

다국어지원 간단한 방법

user의 기본 언어로 설정된 언어로 간단히 다국어 지원하도록 설정해보았다. navigator.language일단 웹에서 지원하는 navigator.language을 사용한다. import React, { createContext, useContext, useState, useEffect } from 'react'; import { texts } from './texts'; export type Language = 'en' | 'ko'; interface LanguageContextType { language: Language; texts: { [key: string]: string }; t: (key: string) => string; } const LanguageContext = createConte..

Study note/React 2024.05.07

Save 버튼에 loading, done 효과 주기

사용자에게 버튼 클릭이 작업을 수행하고 있음을 시각적으로 알려주는 것이 중요한 경우가 많다. 스켈레톤이나 전체를 덮는 로딩도 많이 사용하지만 필요에 따라서 이렇게 버튼 위에서 로딩을 보여주는 것도 필요했다. 내 경우엔 react-icons 을 사용했다. 다음 명령을 사용하여 설치할 수 있다. npm install react-icons 아래는 사용 예시이다. 실제로 api 호출 등 시간 걸리는 걸로 교체하면 된다. import React, { useState } from 'react'; import { FaSave, FaSpinner, FaCheck } from 'react-icons/fa'; const SaveButton = () => { const [loading, setLoading] = useSta..

Study note/React 2024.04.17

[Ionic] localForage-cordovaSQLiteDriver으로 Native storage 사용하기

최근 Ionic 앱을 개발하면서 데이터를 저장하고자 하는 경우가 많다. 그 중 localForage-cordovaSQLiteDriver를 사용하여 네이티브 스토리지를 활용하는 방법에 대해 알아보겠다.우선, Ionic 프로젝트에 필요한 패키지를 설치해야 한다. 다음 명령어를 사용하여 설치할 수 있다.npm install @ionic/storage cordova-sqlite-storage localforage-cordovasqlitedriver 그런 다음, useStorage.ts 라는 파일을 만들었다. import { useEffect, useState } from "react";import { Storage, Drivers } from "@ionic/storage";import CordovaSQLiteD..

Study note/WebApp 2024.04.17