주저리주저리..
tistory.. velog.. 개인도메인페이지... 깃허브페이지.. 등 예전에 여기저기 왔다갔다하면서 글을 썼었는데 이제는 깃허브홈페이지로 정착을 해야겠다.
개발을 놓은 세월동안 깃허브페이지를 관리하는 파일이나 컴포넌트들 구조방식이 많이 바뀐탓일지 이전에 했던 것들이 더 이상 동작되지않아 많은 파일들을 가감히 버렸다. (삭제한건아니다!)
이틀 뒤 캠프가 본격적으로 시작하기 전, 베이스캠프라는 곳을 왔는데.. 시간이 얼마 없지만 조금이나마 기초의 기초라도 익혀서 본 캠프 시작을 해야겠다.
개인 개발자 계정으로 생성하시려면 '개인' 으로 시작하기를 눌러주세요.
해당 글에서는 개인 개발자 생성 기준으로 글이 작성됩니다.
개인개발자 계정으로 생성하는 것이 아니라면 D-U-N-S 번호가 필요합니다.
D-U-N-S 번호는 아래의 링크에서 발급받는 방법이 자세히 나와있습니다.
https://support.cafe24.com/hc/ko/articles/26939754488345-D-U-N-S번호는-어떻게-만드나요
Vue3, Quasar framework를 이용하여 웹(모바일 웹 포함), 앱(aos, ios) 크로스 플랫폼을 만들어보겠습니다.
시간은 다소 걸리겠지만 디자인부터 코드, 배포, 실제 출시까지 모두 진행해보려 합니다.
Quasar framework는 어디에서든 하나의 코드를 사용하여 웹이나 앱 모두 사용 가능하게 합니다.
앱은 Capacitor를 이용한 Webview기반의 하이브리드 앱입니다.
서비스 이름은 Memorit으로 하겠습니다.
Memorit은 기록을 저장하여 언제 어디서든지 확인이 가능한 서비스입니다. 주요 기능은 기록 저장과 열람이고 이외 기능으로는 소셜로그인만 지원, 다국어(en,ko,ja) 지원, 다크모드 정도가 있습니다.
module.exports = {
rules: {
"@typescript-eslint/no-explicit-any": "off", // 추가
},
};코드 전체입니다.
exportData로 엑셀 다운로드를 할 수 있습니다.
타입이 지저분하고 any가 많은데..
// functions.ts
const wrapCsvValue = (
val: string,
formatFn?: (arg0: string, arg1: RowData | undefined) => string | undefined,
row?: RowData,
) => {
let formatted = formatFn ? formatFn(val, row) : val;
formatted =
formatted === undefined || formatted === null ? "" : String(formatted);
formatted = formatted.split('"').join('""');
return `"${formatted}"`;
};
export const exportData = (columns: any, rows: any) => {
const content = [
columns.map((col: { label: string }) => wrapCsvValue(col.label)),
]
.concat(
rows.map((row: { [x: string]: any }) =>
columns
.map((col: any) => {
const value =
typeof col.field === "function"
? col.field(row)
: row[col.field === void 0 ? col.name : col.field];
if (value instanceof Date || dayjs.isDayjs(value)) {
return wrapCsvValue(
dayjs(value).format("YYYY.MM.DD HH:mm"),
col.format,
row,
);
}
return wrapCsvValue(value, col.format, row);
})
.join(","),
),
)
.join("\r\n");
const bom = "\uFEFF";
const status = exportFile("table-export.csv", bom + content, "text/csv");
if (status !== true) {
commonNotify(
{
message: "Browser denied file download...",
},
"negative",
);
}
};SPA를 S3 - Cloudfront 로 배포하였을때 path가 / 가 아닌 페이지에서 새로고침을 하면 404에러가 반환되는데 이를 해결하기 위한 방법이다.
Cloudfront -> 배포 선택 -> 오류 페이지 에서 사용자 정의 오류 응답 생성 을 눌러서 400, 403, 404 에러코드에 대한 응답 페이지 경로는 / 로 설정, HTTP 응답 코드는 200으로 설정해두면 된다.
해당 이슈는 에러라고 하긴 뭐하지만, 스토어에 앱을 출시할 때 개인정보처리방침, 이용약관 등을 확인시켜주어야 하는데 봇들은 404에러코드가 반환되면 페이지가 없다고 판단하여 리젝 처리를 해버리기때문이다.
모든 과정에서 다운로드 버튼이 있다면 다운로드를 해주세요.
사용자 이메일 주소를 입력해주고, 요청 항목에 디스크에 저장됨, 본인이 키 쌍 정보 지정 을 선택해주고 완료해줍니다.
애플 개발자 페이지로 들어가서 Certificates, Identifiers & Profiles 를 들어가주세요.
Certificates 에서 IOS Distribution (App Store Connect And Ad Hoc)을 체크하고 Continue를 해주세요.
스토어에서 Xcode 설치
cocoapods 설치
$ brew install cocoapods
# or
$ sudo gem install cocoapods현 날짜 기준으로 프로젝트 생성시, vite, vue, pinia 기타 등등 세팅을 할때 모두 가장 최신버전으로 세팅을 해두었을때를 가정
// en.json
{
"word.person": "{person} person"
}우선 카카오 개발자 센터를 들어가서 앱 등록을 해주세요.
플랫폼에 들어가 사용할 플랫폼을 등록해줍니다.
앱키에서 Javascript 키를 복사하여 다음 코드에 넣어서 index.html에 넣어주세요.
<!-- index.html -->
<head>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey={Javascript Key}&libraries=services"
></script>
</head>