Next를 공부하며 가장 먼저 찾았던 디버그 모드 적용하는 방법을 소개합니다. 프로젝트 루트 경로에 ./vscode/launch.json 파일을 추가합니다. 그리고 파일안에 아래 내용을 저장합니다. { "version": "0.2.0", "configurations": [ { "name": "Next.js: debug server-side", "type": "node-terminal", "request": "launch", "command": "npm run dev" }, { "name": "Next.js: debug client-side", "type": "chrome", "request": "launch", "url": "http://localhost:3000" }, { "name": "Next.js..

최근 같이 공부하는 스터디팀에서 영어 단어 앱을 만들어 배포했는데요. Next.js로 웹을 구현하고 Flutter의 웹뷰를 이용해 제작/배포한 앱입니다.영어 단어를 읽어주는 기능을 윈도우 함수 중 speechSynthesis로 구현했는데, 이 함수는 안드로이드 웹뷰에서는 지원되지 않는다고 합니다. iOS에서만 테스트를 하다보니 이런 부분을 체크하지 못한 것 같네요.  기존 코드를 보면 영어 단어 클릭시 아래와 같이 speechSynthesis를 이용해서 음성으로 표시되고 있었습니다.window.speechSynthesis.cancel();const speechMsg = new SpeechSynthesisUtterance();speechMsg.rate = 1;speechMsg.pitch = 1.2;spee..

최근 iOS 버전을 업데이트(17) 하면서 Xcode 버전도 14에서 15로 업데이트를 하게 됐는데요. 역시나 빌드 과정에서 오류를 만났습니다. The iOS deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 11.0, but the range of supported deployment target versions is 12.0 to 17.0.99. 다행히 깃허브 이슈에 여러 글들이 올라와있어 문제를 쉽게 해결할 수 있었습니다. 1. cocoapod 업데이트 brew upgrade cocoapods 2. pod update cd ios rm -rf Podfile.lock pod install --repo-update 참고문서 When will there..

개발 환경에서 npm/yarn은 설치되어 있다는 가정하에 진행됩니다.배포 환경은 shell을 이용한 방법입니다. 원격 서버에 gitlab-runner 설치 후 리액트 프로젝트를 빌드&배포 -> 웹 서버(Nginx) 실행시 빌드된 리액트 프로젝트의 index.html을 실행하는 구조입니다. Nginx 설치는 이전 글을 참고해주세요.※ 테스트 환경AWS EC2 - Amazon Linux 2ReactGitLabNode 171. gitlab-runner 설치GitLab의 CI/CD 파이프라인에 작업을 실행하기 위해 gitlab-runner를 설치합니다. 원격 서버에 접속해 공식 gitlab 레포지토리를 추가합니다.curl -L "https://packages.gitlab.com/install/repositori..

최근 리액트에도 관심이 생겨 공부중인데 프로젝트를 만들어 서버에 올리는 것까지 해보려 합니다.프로젝트는 create react-app으로 설치, 이후에 Gitlab, Gitlab runner를 이용해 빌드, 배포까지하는 과정을 기록해보려 합니다. ※ 테스트 환경AWS EC2 - Amazon Linux21. nginx 외부 저장소 추가리액트 프로젝트를 띄울 웹 서버 Nginx를 설치합니다.*아래와 같이 nginx가 yum 저장소에 없기 때문에 외부 저장소를 추가해야합니다.sudo vim /etc/yum.repos.d/nginx.repo  아래 내용을 입력하고 저장합니다.[nginx]name=nginx repobaseurl=http://nginx.org/packages/centos/7/$basearch/gp..

리액트 프로젝트 실행시 마주칠 수 있는 에러입니다./bin/sh: react-scripts: command not found npm start/yarn start 시에 Package.json에 설정된 react-scripts 명령어가 실행되는데 해당 라이브러리가 없어서 발생하는 에러입니다. 보통 프로젝트를 클론해서 가져온 후 실행하거나 복사 후 실행하는 경우 발생하게 되는데 라이브러리를 설치해주면 해결됩니다. npm 사용시npm install -save react-scripts  yarn 사용시yarn add react-scripts

Flutter로 앱을 개발할 때, 아이콘을 변경할 수 있는 방법 두 가지를 소개합니다. flutter의 플러그인을 사용하면 간편하게 아이콘을 변경할 수 있지만 상세한 사이즈 조절을 위해서는 네이티브 방식을 이용하는게 더 좋습니다. 아래 순서대로 진행하시면 네이티브 방식으로 편하게 변경하실 수 있을거예요. (플러그인 방식 -> 네이티브 방식) 1. 플러그인 방식 flutter_launcher_icons 플러그인을 설치합니다. flutter pub add flutter_launcher_icons dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2 flutter_launcher_icons: ^0.13.1 pubsepc.yaml - dependencies ..

테스트 환경flutter 3.10.5dart 3.0.5flutter_local_notifications ^16.1.0permission_handler ^11.0.1 로컬 푸쉬 기능을 넣기 위해 permission_handler 플러그인을 이용해 권한 설정을 추가하던 중 발생한 에러 내용입니다. 같은 내용으로 플러그인에 이슈가 추가된 것을 확인했습니다.원인이 한가지는 아닐 수 있지만 저의 경우에는 compileSdkVersion과 targetSdkVersion이 상이해서 발생한 것으로 확인됩니다.compileSdkVersion과 targetSdkVersion을 동일하게 맞추니 해결됐습니다. before : build.gradle(:app)android { compileSdkVersion 33 n..