운좋개

🟡 화면 회전이 안되게 하고 싶어요!서비스하고 싶은 어플이 세로 모드만 되게 개발했는데, 화면 회전을 하면서 UI가 깨지거나 버그가 발생하는 경우가 있습니다.이를 막기 위해서, RN 기준으로 화면 회전을 막는 방법을 공유하려고 합니다. 🟡 IOS📱1. ios/.../Info.plist 파일 오픈2. 아래와 같이 설정을 추가UISupportedInterfaceOrientations UIInterfaceOrientationPortrait 🟡  Android 🤖1. android/app/src/main/AndroidManifest.xml 파일 오픈2. 아래와 같이 설정을 추가 ... 위 코드들을 수정해 주고, 어플을 재시작하면 화면 회전이 고정됩니다. 🟡 만약 제품환경에서는 화면 회전을 ..

🟡 구글 캘린더에 있는 데이터를 스프레드 시트로 옮겨서 관리하고 싶어요 🙋🏽‍♀️ 저희 회사는 근태관리 솔루션을 따로 쓰고 있지 않고, 구글 캘린더에 서로 휴가를 공유하고 있는 상태였습니다. 이때 HR팀에서 요청이 들어온 게, "구글 캘린더에 있는 데이터를 스프레드 시트로 옮길 수 있나요?"  저도 처음 해보는 일이라, 좀 찾아보고 답변을 준다고 하고 나서 찾아보니 가능했습니다. 구글에서 제공하는 Apps Script라는 기능을 통해서 구글 워크스페이스에 있는 앱끼리 연동이 가능했습니다. 하지만 개발 언어를 사용해야 하므로 비개발자들에게는 어려울 것 같아 이 글을 쓰게 됐습니다. 🟡 Apps Script란?구글 워크스페이스의 애플리케이션(스프레드시트, 캘린더, 등)을 자동화하고 확장하는 데 사용하..

0 🟡 Forbidden 에러가 발생했어요. 이전 글에서 json-server를 실행할 때, -p를 사용해서 원하는 포트로 서버를 실행시킬 수 있다고 말씀드렸는데, 이때 mac에서는 주의해야 할 점이 있습니다. 5000 - 7000번대(경기좌석버스 같군요..) 포트는 mac OS에서 사용 중 이므로, 사용이 불가능합니다. 저도 오류가 나서 찾아보니, 아래 글을 보고 고쳤습니다! https://stackoverflow.com/questions/70401937/json-server-running-but-cant-access-its-api-due-to-403 📝 정리 mac에서 Forbidden error가 발생 시, 포트를 확인한다. 5000 ~ 7000번대 포트는 사용하지 않는다. 3000번대에서 테스트를..

🟡 1. json-server란? json파일을 사용하여 간단한 시뮬레이션을 위한 REST API Mock server를 구축할 수 있는 툴입니다. 🟡 2. json-server 설치하기. 🟣 2.1 module 설치하기. $ mkdir json-server-exam && cd json-server-exam $ npm init -y $ npm install json-server --save-dev 🟣 2.2 mock.json 파일 생성하기. 위에서 만든 프로젝트 root 경로(package.json과 동일한 위치)에 mock.json(이름은 자기원하는 대로) 만듭니다. // mock.json { "todos": [ { "id": 1, "content": "HTML", "completed": true },..

🟡 1. Sentry이란? - 센트리 더 알아보기 🟡 2. Replay 기능 넣기 ... replaysOnErrorSampleRate: 1.0, replaysSessionSampleRate: 0.1, integrations: [ new Sentry.Replay({ maskAllText: false, blockAllMedia: false, }), ], }) 위 코드를 sentry.client.ts 파일에 위 코드 추가하기. 🟡 3. Replay 확인하기 센트리 사이트에 들어가서 확인해보면, 정상적으로 리플레이가 잘 저장된 것을 볼 수 있습니다. 다만, 리플레이의 기본 생명주기는 앱이 꺼지거나, 백그라운드로 갔을 때 끊어집니다. 그래서 키오스크와 같이 24시간 켜놓는 어플리케이션일 경우 리플레이가 계속 녹화..

🟡 1. Sentry이란? Sentry는 소프트웨어 버그 및 에러 추적을 위한 오픈 소스 오류 모니터링 도구입니다. 개발자들이 실시간으로 애플리케이션에서 발생한 버그, 예외, 크래시 등을 모니터링하고 이를 추적하여 디버깅할 수 있게 해줍니다. Sentry는 웹 애플리케이션, 모바일 앱 및 다양한 플랫폼에서 사용할 수 있습니다. 🟡 2. Next.js 프로젝트에 Sentry 도입하기. 🟣 2.1 Senty 웹사이트에서 프로젝트 만들기. 회원가입 및 로그인 -> Project탭 -> 우측 상단에 Create Project 버튼 Next.js 클릭 -> Project name은 자신의 next.js 프로젝트 이름 입력(같지 않아도 됨) -> 활성화된 Create Project 클릭 🟣 2.2 Next.js 프..

🟡 1. TypeScript란? 타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. - 위키백과 위키백과에서는 위와 같이 설명하고 있지만, TypeSript(이하 TS)는 타입이 있는 JS라고 생각하면 이해하기 쉽습니다. 위키백과 설명 중 슈퍼셋이라는 단어가 있는데, 이는 JS의 개념을 포함하고 확장된 개념이라고 생각하면 됩니다. 그래서 JS를 알고 있다면, TS는 쉽게 배울 수 있습니다. 🟣 1.1 타입이란? 위 설명에서 TS는 타입이 있는 JS라고 말씀드렸는데요. 여기서 말하는 타입은 프로그래밍 언어에서 쓰이는 String, Number, Boolean 등과 같은 타입을 얘기합니다. 🟡 2. VSCode에서 TS 세팅하..

🟡 1. Vercel이란? vercel은 Next.js에서 공식적으로 제공하는 호스팅 사이트입니다. Next.js에 최적화되어 있다 보니 이번에 만든 포트폴리오 사이트를 vercel을 통해서 배포해보겠습니다. 🟡 2. 배포하기 🟣 2.1 deploy 추가하기 "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "vercel-deploy": "next build && next export" } 배포하고자 하는 프로젝트의 package.json파일에 script부분을 위와 같이 변경해줍니다. 보통은 vercel-deploy만 추가해주면 됩니다. 🟣 2.2 Git에 Push 하기 기존에..

🟡 1. Strict mode function func(){ x = 1; } func(); - 위 코드를 실행을 시키면 실행이 잘 됩니다. 그러한 이유는 자바스크립트는 x가 어디에서 선언이 되었는지 처음에는 함수 내에서 찾아봅니다. 함수 안에서 없으면 함수 밖으로 나와 전역 변수에서 찾아봅니다. 만약 전역 변수에서도 없으면 에러는 내는 것이 아니라, 암묵적으로 전역 객체에 x라는 변수 동적으로 생성합니다. 이러한 변수를 암묵적 전역 변수(implicit global)라 합니다. 개발자의 의도와는 상관없이 암묵적 전역 변수가 생성이 되고 실행되는 것을 막기 위해 ES5부터는 strict mode가 추가되었습니다. 'use strict' function func(){ x = 10; // Uncaught Re..

🟡 1. next js 시작 전 세팅 🟣 Node.js 버전 10.13 이상 설치 Node.js 설치 후 설치가 정상적으로 되었는지 확인하기 위해서 터미널을 여신 후 'node -v'를 입력하여 확인. //노드 버전 확인 node -v 🟣 npm 혹은 yarn npm (Node Package manager)은 노드 설치 시 자동적으로 같이 설치가 됩니다. // npm 버전 확인 npm -v 터미널에서 'npm -v'를 입력하면 설치 버전이 나옵니다. yarn은 페이스북에서 만든 자바스크립트 패키지 매니저입니다. npm과 기능은 동일하고, 페이스북 측에서 npm보다 보안이 뛰어나고 성능이 빠르다고 주장은 하고 있습니다 ㅎㅎ.. (사실 npm, yarn 둘 다 좋습니다.) yarn 설치 방법은 터미널에서 n..