Home

2022
frontendReactNative

React native QRcode scanner 사용하기

시작하기react-native 앱에서 QR코드를 스캔할 수 있는 스캐너를 라이브러리를 이용하여 구현해보도록 하겠습니다.사용한 버전은 다음과 같습니다. Xcode: 12.5 1234{ "react": "17.0.2", "react-native": "0.66.4"} 라이브러리 정하기수많은 라이브러리 중 결론부터 말하자면 react-nat

frontendReactNative

iOS 빌드시 xcode doesn't support project's IOS 에러 해결하기

시작하기아이폰에서 시뮬레이션하기 위해서 빌드하기 버튼을 클릭했는데, xcode doesn't support project's IOS 15.1(19B74)라는 에러가 발생했습니다. 이것은 xcode가 아이폰의 소프트웨어 버전인 15.1을 호환하지 않는다는 이야기 입니다.그렇다면 xcode를 설치해야겠죠?아이폰의 최신버전 15.0 이상에서 빌드

frontendReactNative

React native 아이폰에 빌드해서 테스트하기

환경설정시뮬레이터가 아니라 카메라나 실제로 아이폰에 옮겨서 테스트를 해보기 위한 방법입니다. 애플 계정등록이전에는 애플 개발자 계정으로만 가능했었는데, 현재는 일반 애플 사용자 계정으로 로그인을 해서 빌드 할 수 있게 되었습니다. accounts에 들어가서 애플 계정을 추가해줍니다. 이후 프로젝트가 열려있는 Xcode에 들어가서 targets > 내

2021
frontendReactNative

M1 mac에서 React native 초기 설치시 에러 해결하기

시작하기리액트 네이티브 초기 설정하는 방법은 다음 링크에서 확인할 수 있습니다.초기 설정초기 설정 방법 대로 했는데 ios에서 에러가 날 경우 해결 방법입니다. m1 맥미니, Big sur, node v14.17.0버전에서 테스트를 했습니다. ios 에러처음에 설치를 하고 npx react-native init MyApp --template react-na

etcetc

사용중인 포트 프로세스 찾아서 종료시키기

문제프로젝트에서 서버를 npm run dev npm run start를 통해서 실행했을때, 사용하지 않아도 실행되어있는 경우가 있다.일반적으로 8080과 3000을 많이 사용하는데, 실행이 안된다면, 포트 프로세스를 종료시키는 방법을 사용하면 된다. 해결책8080포트가 접속중인지 확인해 본다. 1lsof -i tcp:8080 다음 명령어소 8080포트를

frontendreact

Nextjs typescript 절대경로 설정하기

시작하기상대경로를 사용할 시 패키지 구조가 깊어질 경우 import시에 많이 번거로워지게 됩니다.작은 규모의 어플리케이션이라면 상관없지만 규모가 커질수록 꼬이기 쉬워집니다. 상대경로 1import Acomponent from ‘../../../../component/Acomponent’; 절대경로 1import Acomponent from ‘src/com

backendnode

package.json에 종속되어있는 패키지 최신화하기

시작하기npm-check-updates을 사용해서 package.json의 devDependencies, dependencies에 종속되어 있는 패키지를 간편하게 최신화 할 수 있다. 패키지 설치npm-check-updates 패키지를 설치합니다. 1npm install -g npm-check-updates 버전확인하기다음 명령어를 입력해서 구버전들을 확

backenddevOps

heroku node 서버 배포하기(typescript)

node js 를 이용해서 heroku 서버 배포하기프로젝트 생성12mkdir heroku-nodejs-typescriptcd heroku-nodejs-typescript 초기 설정npm 기본 설정값을 생성합니다. 1npm init -y npm 패키지 설치타입스크립트를 포함하여 express를 설치하여 줍니다. 1npm i @types/express @

style

Styled-components Typescript 적용하기 (+Media query)

시작하기기존에 styled-components 반응형 및 스타일 리셋 설정하기 포스트을 통해서 스타일 최초 설정해보았습니다. theme를 입력했을때 typescript로 자동으로 연결해주는 부분이 미흡했습니다. 타입스크립트를 styled-components 와 제대로 사용해보도록 하겠습니다. 설치하기1npm i styled-components &&a