티스토리

조금씩..
검색하기

블로그 홈

조금씩..

wlrn566.tistory.com/m

wlrn566 님의 블로그입니다.

구독자
0
방명록 방문하기

주요 글 목록

  • flutter 애플 로그인 0. 준비물..1. 애플 개발자 계정2. 파이어베이스 프로젝트 1. 파이어베이스 애플 로그인 개설파이어베이스 프로젝트 내 Authentication에 들어가서 로그인 제공업체 Apple을 선택한다.  서비스 ID 부분은 비어두고 (안드로이드 설정 시 필요함) 아래 콜백 URL을 복사해둔다.   2. 애플 개발자 계정 AppID 만들기애플 개발자 계정으로 로그인 후, Certificates, Identifiers & Profiles의 Identifiers를 들어간다.AppID가 없다면 +버튼을 눌러 AppID를 만들어 준다.  AppID 생성 시 하단의 Sign In with Apple를 체크 해주고 Edit 버튼을 클릭한다.  아래 부분의 Server-to-Server Notification Endpoi.. 공감수 0 댓글수 0 2024. 5. 18.
  • flutter 구글 로그인 파이어베이스 Authentication 을 이용해서 구글 로그인 기능을 사용했다.구글 클라우드 프로젝트를 생성해서 하는 방법도 있는 듯하나, 파이어베이스를 이용하는 것이 매우 간단하고 편리하다.  1. 파이어베이스 플러터 프로젝트 생성파이어베이스 콘솔에서 플러터로 프로젝트를 생성한다. 안드로이드와 IOS 둘 다 만들어진다.  2. 파이어베이스 Authentication 세팅   3. Authentication 생성로그인 방법에서 구글을 선택하면 된다.      4. 파이어베이스 프로젝트에 SHA 인증서 지문 추가 keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass andr.. 공감수 0 댓글수 1 2024. 3. 18.
  • flutter google cloud Vision API (OCR) 이미지에서 텍스트를 추출할 수 있는 기능을 구현해보았다. 이를 위한 방법으로는 3가지 정도로 나눌 수 있다. 1. google_ml_kit 라이브러리 플러터를 사용한다면 간단히 AI 기능을 사용할 수 있다. google_ml_kit | Flutter package A Flutter plugin to use all APIs from Google's standalone ML Kit for mobile platforms. pub.dev 2. 파이어베이스 ML kit 온디바이스 AI기술을 구현하기 위해서 좋은 방법인 것 같다. Android에서 ML Kit를 사용한 이미지 속 텍스트 인식 | ML Kit for Firebase Google I/O 2023에서 Firebase의 주요 소식을 확인하세요. 자세히 알.. 공감수 1 댓글수 0 2024. 3. 18.
  • Xcode 여러 버전 설치 및 사용 ios 버전에 따라 xcode 버전도 올려줘야하는데 xcode버전을 바로바로 올려주기가 쉽지 않다. 1. 필요한 xcode 버전 다운로드 https://developer.apple.com/download/all/ Build Phases 에서 순서를 변경해주었다. 공감수 0 댓글수 0 2024. 2. 5.
  • [빌드 에러] libobjc.A.dylib is being read from process memory. IOS 빌드 중 libobjc.A.dylib is being read from process memory. 라는 문구가 뜨면 설치가 완료되어도 실행이 되지 않는다. 1. 아래 명령어 실행 rm -r ~/Library/Developer/Xcode/iOS\ DeviceSupport 2. XCode 열어서 기기 세팅하는것 기다리기 공감수 0 댓글수 0 2024. 1. 17.
  • flutter 네이버 지도 1. 플랫폼 등록 NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 1) 사용할 서비스 선택 2) 패키지명, 번들ID 추가 3) 인증 키 확인 2. 패키지 설치 flutter 3.10, dart 2.18.4 이상 android 5.1 이상, iOS 11.0 이상 flutter_naver_map | Flutter Package Naver Map plugin for Flutter, which provides map service of Korea. pub.dev (해당 패키지에 Docu.. 공감수 0 댓글수 0 2023. 11. 14.
  • flutter 커스텀 앨범 photo manager 라이브러리를 활용해 기기 앨범의 이미지를 뿌려주는 화면을 만든다. photo_manager | Flutter Package A Flutter plugin that provides assets abstraction management APIs on Android, iOS, and macOS. pub.dev 1. 앨범 접근 권한을 얻기 위한 권한 관련 함수 작성 IOS에서 선택된 사진만 허락한 경우 해당 사진만 불러와진다. 만약 사진을 더 추가하고 싶다면 PhotoManager.presentLimited()를 사용해서 추가할 수 있도록 코드를 짜면 된다. @override void initState() { checkPermission(); super.initState(); } // .. 공감수 0 댓글수 0 2023. 11. 8.
  • nestjs 프로젝트 생성 시 오류 (Failed to execute command: npm install --silent) nestjs 프로젝트를 생성하는데 오류가 발생했다. nest new nest_1 인터넷에서 찾아보니 kt회선 문제라도 해서 registry를 바꿔서 설치하라고 하는 방법이 있었다. npm config set registry https://registry.npmjs.cf/ nest new nest_1 npm config set registry https://registry.npmjs.org/ 이렇게 해도 오류가 뜬다면 sudo를 이용해서 생성하자.. sudo nest new nest_1 공감수 0 댓글수 0 2023. 11. 1.
  • flutter Dio 에러 핸들링 아래처럼 api 요청을 하는 함수에 try~catch on을 사용해서 에러를 핸들링 할 수도 있다. void _test() async { try{ await _dio.get('/test'); } on DioError catch (e) { log("에러에러: ${e.type}"); } } dio의 interceptor를 이용해 에러를 핸들링하면 편하다. class API { final Dio _dio = Get.find(); API() { _dio.interceptors.add(PrettyDioLogger( requestHeader: true, requestBody: true, responseBody: true, responseHeader: false, compact: false, )); _dio.inte.. 공감수 0 댓글수 0 2023. 10. 31.
  • flutter 안드로이드 stretch 오버스크롤 효과 오버스크롤 효과 | Android 개발자 | Android Developers 이제 Android 14 베타를 사용할 수 있습니다. 지금 사용해 보시고 의견을 알려 주세요. 오버스크롤 효과 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Android 12 developer.android.com 안드로이드 12 이상인 기기에서 오버스크롤이 된 경우 조금 늘어나는 스트레치 효과가 도입되었다. 플러터 3.10.6 을 사용하지만 아직 안드로이드 기기에서 glow효과가 나오고 있었다. glow시 나오는 파란색이 싫어서 아래 코드로 대체했었다. body: ScrollConfiguration( behavior: NoGlowScrollBehavior(), // 안드로이드 스크롤 시 푸른.. 공감수 0 댓글수 0 2023. 10. 24.
  • flutter 카카오 로그인 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1. 애플리케이션 등록 1) 안드로이드 플랫폼 등록 - 키해시 keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64 2) IOS 플랫폼 등록 (번들 ID만 넣어도 된다) 2. 카카오 로그인 활성화 권한이 필요한 동의항목은 후에 신청을 해야함. 3. 안드로이드 1) Android.. 공감수 0 댓글수 1 2023. 10. 22.
  • flutter 네이버 로그인 NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음 developers.naver.com 1. 애플리케이션 추가 2. 안드로이드 1) android/app/src/main/AndroidMenifest.xml 2) android/app/src/main/res/values/strings.xml (없으면 생성) {client_id} {client_secret} flutter_sns_login_test 3) MainActivity.kt 수정 : FlutterActivity -> FlutterFragmentActivity packa.. 공감수 0 댓글수 0 2023. 10. 22.
  • warning: a function declaration without a prototype is deprecated in all versions of C ios 빌드 중 warning: a function declaration without a prototype is deprecated in all versions of C [-Wstrict-prototypes] 이라는 오류가 나오면 해당 함수의 () 안에 void를 넣어주면 된다. 공감수 0 댓글수 0 2023. 8. 29.
  • flutter - local_auth, 지문인증, Unresolved reference: activity 1. local_auth 추가 local_auth | Flutter Package Flutter plugin for Android and iOS devices to allow local authentication via fingerprint, touch ID, face ID, passcode, pin, or pattern. pub.dev 2. AndroidManifest.xml에 권한 추가 3. MainActivity.kt 파일 수정 // class MainActivity: FlutterActivity() // FlutterFragmentActivity로 바꿔준다. class MainActivity: FlutterFragmentActivity() 4. 생채인증 관련 코드 구현 import 'dart:de.. 공감수 0 댓글수 0 2023. 8. 2.
  • flutter - flutter_staggered_grid_view, 서로 다른 높이를 가진 그리드뷰 그리드뷰를 사용하면 동일한 크기의 위젯을 열로 맞추어 만들어 낼 수 있다. 하지만 좀 더 다이나믹하게 앱을 만들기 위해 크기가 섞여있는 그리드 형식을 구현해야 한다. flutter_staggered_grid_view 패키지를 사용하면 된다. flutter_staggered_grid_view | Flutter Package Provides a collection of Flutter grids layouts (staggered, masonry, quilted, woven, etc.). pub.dev flutter pub add flutter_staggered_grid_view 1. Staggered - 적은 수의 항목을 나타낼 때 사용 - 스크롤 불가 2. Masonry - 각 열의 위젯 크기가 다양하다. .. 공감수 0 댓글수 0 2023. 7. 31.
  • nodejs - No 'Access-Control-Allow-Origin' header is present on the requested resource. 웹에서 api 호출을 하니 CORS 오류가 뜬다. 서로 다른 출처, 도메인끼리 통신을 허락하지 않는 것이다. 프론트는 3001 포트를 사용하고 서버는 3000포트를 사용하고 있어 서로간의 통신이 되지 않는다. 그래서 서로 확인하고 허용된 도메인만 통신이 가능하게 만들어 줘야 하는데, cors라는 라이브러리를 사용하면 쉽게 해결할 수 있다. 1. cors 라이브러리 설치 npm install cors 2. app.use(cors()) import express, { json, urlencoded } from 'express'; // express 모듈 import cors from 'cors'; const app = express(); const port = 3000; // 포트 app.use(cors({.. 공감수 0 댓글수 0 2023. 7. 29.
  • react - axios, 환경변수 fetch api는 따로 설치가 필요없지만 axios가 더 사용하기 쉬운 것 같아서 api 연동에 axios를 많이 사용하는 것 같다. 1. axios 설치 npm install axios 2. base url 설정하기 // urls.jsx export const BASE_URL = '...'; // api_config.jsx import axios from 'axios' import { BASE_URL } from '../../utils/urls'; const baseAxios = () => { const instance = axios.create({ baseURL: BASE_URL, }); return instance; } export const myAxios = baseAxios(); 3. bas.. 공감수 0 댓글수 0 2023. 7. 29.
  • react - 페이지 이동 - Link, NavLink Link는 페이지 이동을 시켜준다. a태그와 다르게 새로고침 없이 이동시켜준다. NavLink라는 것도 있다. Link와 같은 역할이지만 isActive라는 속성을 통해 현재 페이지 경로가 일치했을 때 스타일 변화를 줄 수 있다. import React from 'react' import { Link, NavLink } from 'react-router-dom' import styles from '../styles/Header.module.css' const activeStyle = { "color": "white", } const inactiveStyle = { "color": "black", } const Header = () => { return ( { return isActive ? activeS.. 공감수 0 댓글수 0 2023. 7. 26.
  • flutter - ios fcm 설정 ios에서 fcm 푸시 알람 기능을 구현하려면 애플 개발자 계정이 필요하다. 1. 애플 개발자 계정 로그인 2. Certificates, Identifiers & Profiles 페이지의 Keys 탭에서 Key 추가 3. Apns 체크 후 완료 및 다운로드 ** 한번 다운로드 받으면 다시 받을 수 없으니 보관 잘하기 4. Firebase 프로젝트 - 클라우드 메시징 탭 - Apple 앱 구성 - APN 인증 키 업로드 5. Xcode - Runner - Capability 추가 참고 : https://firebase.flutter.dev/docs/messaging/apple-integration/ FCM via APNs Integration | FlutterFire iOS & macOS require a.. 공감수 0 댓글수 0 2023. 7. 25.
  • react - 페이지 애니메이션 (framer-motion) 1. framer-motion 설치 npm install framer-motion 2. 애니메이션 컴포넌트 생성 props로 children 컴포넌트를 받음. motion.div의 속성을 이용해 애니메이션 설정 import React from 'react' import { motion } from 'framer-motion'; const PageAnimation = ({ children }) => { return ( {children} ) } export default PageAnimation 3. 페이지 감싸주기 import React from 'react'; import { PageAnimation } from '../components/components'; import mainImg from '... 공감수 0 댓글수 0 2023. 7. 24.
  • react - 헤더 1. Layout 컴포넌드 생성 import React from 'react' const Layout = () => { return ( Layout ) } export default Layout 2. Header 컴포넌트 생성 import React from 'react' const Header = () => { return ( Header ) } export default Header 3. Layout에 넣어주기 + props 받기 import React from 'react' import Header from './Header'; const Layout = ({ children }) => { return ( {children} ) } export default Layout 4. 페이지 감싸주기 imp.. 공감수 0 댓글수 0 2023. 7. 24.
  • nodejs - address already in use 서버에 nodejs파일을 올리고 실행했는데 "address already in use" 이라는 오류를 뱉어냈다. 3000포트가 어디서 사용중이라는 것이다.. 리버스 프록시로 3000포트를 설정 해줬는데 이것때문에 알아서 포트가 가동된다..? 는 아닌 것 같아서 한번 확인 해보았다. 1. 사용중인 포트의 pid 확인 sudo lsof -i tcp:3000 2. 해당 포트 죽이기 sudo kill -9 {PID} 그래도 계속 3000포트가 살아나는 신기한 현상이 나타났다. 그런데 이름을 보니 node로 되어있었다. nodejs에서 문제가 될만한 것이 있나 찾아보았다. nodemon을 설치하고 node를 실행해서 그런거 같다. nodejs에서 변경사항을 수정하기 위해 nodemon이 돌아다니기 때문에 3000.. 공감수 0 댓글수 0 2023. 7. 24.
  • mariadb - Access denied for user 'wlrn566'@'localhost' (using password: YES)" 서버에 api를 만들어 놓은 nodejs 파일을 넣고 api를 호출해봤다. 분명 로컬에서 돌릴때는 서버의 DB에 접속이 잘됐는데 계속 Access denied for user 'wlrn566'@'localhost' (using password: YES)" 오류가 떳다.. 1. 비밀번호 확인 비밀번호가 틀렸나해서 혹시 몰라 계정을 지우고 다시 만들기도 했다. 8자리 이상 영문 숫자도 넣고 해봤다. 2. 권한 확인 권한이 없나해서 권한도 확인하고 다시 주고 뺏고 다했었다.. 3. mariaDB 재시작.. 이것저것 다 해봤는데도 계속 뜨고 있었고, 로컬 연동은 잘됬다. 워크벤치도 잘 들어가졌다. 'wlrn566'@'localhost' 라는 저 글자가 계속 미심쩍어서 db 계정을 만들 때 localhost도 따.. 공감수 0 댓글수 0 2023. 7. 24.
  • nodejs - controller/service로 분리, Callback function is not available with promise clients. 프로젝트를 위해 api를 만들던 중 route에서 요청과 응답, 비즈니스 로직까지 해버리니 보기가 너무 힘들어서 controller와 service로 나누어 보았다. route -> controller -> service 의 흐름으로 된다. route에서는 경로를 받고 controller에서 응답을 해준다. service는 DB에서 데이터를 가져와 다시 controller로 보내준다. 1. app.js 유저에 관한 route를 등록해준다. import express, { json, urlencoded } from 'express'; // express 모듈 const app = express(); const port = 3000; // 포트 import usersRouter from './routes.. 공감수 0 댓글수 0 2023. 7. 23.
  • nodejs - Cannot use import statement outside a module nodejs에서 나름 MVC패턴으로 구조를 변경하고 있는데 "Cannot use import statement outside a module" 라는 오류가 떴다. import 구문이 commonjs에서는 사용되지 않고 es6에서 사용하는 것이기 때문이었다. package.json 파일에 type필드를 "module"로 지정해줘야 했다. 이 type필드에 값이 없거나 commonjs이면 commonjs이므로 "module"로 명시해주고 es6방식을 사용하면 된다. const express = require('express'); // 아래 import구문으로 변경됨 import { Router } from 'express'; 공감수 0 댓글수 0 2023. 7. 22.
  • nodejs - post요청 시 body값 확인 nodejs 를 사용하면 post 요청으로 body값을 보내면 undefined가 뜬다. body-parser를 사용해야 request에서 body값을 읽을 수 있다. app.js 파일에 body-parser 코드를 추가해주면 된다. const express = require('express'); // express 모듈 const app = express(); const port = 3000; // 포트 const userRouter = require('./routes/user.js'); app.use(express.json()); // body-parser app.use(express.urlencoded({ extended: false })); // body-parser app.use('/users'.. 공감수 0 댓글수 0 2023. 7. 22.
  • nodejs - env파일 1. env 파일 생성 2. dotenv 패키지 추가 npm i dotenv 3. config파일에 사용 require('dotenv').config(); // 선언 필요 공감수 0 댓글수 0 2023. 7. 22.
  • mariaDB - 컬럼 insert, update 시간 데이터 등록 시 시간 : CURRENT_TIMESTAMP 데이터 변경 시 시간 : CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP 공감수 0 댓글수 0 2023. 7. 22.
  • react - 페이지 전환 애니메이션 1. framer-motion 설치 npm i framer-motion 2. App.js를 AnimatePresence 으로 감싸기 function App() { return ( ); } 3. 컴포넌트 생성 inital : 시작 / animate : 등작 / exit : 끝 import React from 'react' import { motion } from 'framer-motion'; const PageAnimation = ({ children }) => { return ( {children} ) } export default PageAnimation 공감수 0 댓글수 0 2023. 7. 22.
  • react - 라우터 1. react-router-dom 설치 npm install react-router-dom 2. App.js 수정 import { Route, Routes } from 'react-router-dom'; import Home from './view/pages/Home'; import './view/styles/App.css'; function App() { return ( ); } export default App; 3. index.js 수정 import React from 'react'; import ReactDOM from 'react-dom/client'; import './view/styles/index.css'; import App from './App'; import reportWebVita.. 공감수 0 댓글수 0 2023. 7. 22.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.