내맘대로 개발일지

😢 내가 겪은 문제 나는 원래 Spring JAVA 개발을 했다. 짝꿍인 jQuery 와 함께 웹 프론트 개발을 처음 시작했었다. 대한민국은 자바 공화국이라 스프링만 할줄 알아도 밥굶을일은 없다고 들었다. 근데 React 가 프론트 개발에서 엄청난 인기를 받고 있다고 해서 궁금했다. React 는 어떤 강점이 있는지 간단하게 확인해보고 이런게 있구나 ~ 하고 내가 쓰는 React 가 어떤 강점이 있는지 확인해보려고 한다. 가상 DOM (Virtual DOM): React는 가상 DOM을 사용하여 효율적으로 UI를 업데이트할 수 있다. 단방향 데이터 흐름: React는 단방향 데이터 흐름을 지원한다. 이로 인해 데이터의 흐름을 예측 가능하고 관리하기 쉽게 만든다. 컴포넌트 기반 아키텍처: React는 컴포..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 React 로 개발할 때는 그냥 props 전달해주면 바로바로 사용할 수 있었던 것 같은데 .. Nextjs + Typescript 로 개발하려니 props 가 전달이 안된다 .. 계속 없는 오버러드라고 사용할 수가 없단다. 난 정말 타입스크립트가 너무 어렵다 .. ㅠ width: ${(props) => props.similarPercentage}%; 해서 해결방법은 인터페이스를 만들고 사용하는 방법이다. 생각보다 간단하긴 한데 타입스크립트를 알고 쓰기 위해서는 많은 공부가 필요할 것 같다 .. 해당 코드는 % 막대기를 만들면서 작성한 코드이다. export ..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 나는 개발할 때 CSS 작성하는게 제일 햇갈리고 어렵다... 원래 필요할때마다 찾아쓰라고는 하는데 할때마다 멈칫멈칫 하는게 아주 기분이 나쁘다. 그래서 그냥 기록해놓는게 편하겠다 싶어서 기록하기로 하였다. 아주아주 간단하고 복사해서 붙여놓으면 바로 쓸 수 있다. 아주 좋다고 할 수 있다. left: 50%; transform: translate(-50%, -50%); 중요한건 2번째 줄 코드인데 translate(-50%, -50%): 백분율 값을 사용하여 요소를 수평 및 수직으로 이동 -50% 값은 요소의 너비의 반만큼을 왼쪽(수평)으로, 높이의 반만큼을 위..

📱테스트 환경 MacBook Pro 13 ( M2 ) 😢 내가 겪은 문제 신규 프로젝트를 진행할때마다 NextJS + TypeScript 프로젝트를 생성하려고 하는데 명령어가 익숙하지가 않아서 맨날 검색해서 사용했는데 .. 이럴꺼면 그냥 기록해놓고 필요할때마다 긁어와서 사용해야겠다 ^^ 해당 명령어를 터미널에서 사용하면 Typescript 가 적용된 Next 프로젝트를 생성 할 수 있다. @latest latest 는 번역해도 "최신의" 라는 뜻인데 말 그대로 최신버전을 설치한다는 말이다. npx create-next-app@latest --typescript Ok to proceed ? 계속 진행 할꺼냐고 묻는말에 y 를 해답해주고 What is your Project named ? 프로젝트 이름을 설..

📱테스트 환경 Samsung Galaxy Android 13 • Android 10 😢 내가 겪은 문제 이미지 뷰어를 만들고있었는데, Room 에서 가져온 ByteArray 형식의 이미지를 intent.putExtra 를 통해 이미지를 보여주고 있었다. 테스트 할 때는 딱히 크러시가 발생하는 일이 없었는데 3000x4000 해상도의 JPEG 형식의 이미지를 뷰어로 만드려고 했을 때 에러가 발생했다. 이유는 이미지 크기가 너무 커서 Extra 로는 보낼 수 없다는게 주요 내용이였다. intent.putExtra("imageBitmap", imageByteArray) 오류를 해결하기 위해서는 외부 저장소에 파일을 저장하고, 저장 경로를 전송해 주는 방식으로 해결 했는데 이 방법의 문제점은 저장소에 파일이 계..

📱테스트 환경 Samsung Galaxy Android 13 • Android 10 😢 내가 겪은 문제 앱 버전을 변경하려고 보니 .. 부끄럽게도 어디있는지 찾지를 못했다 ... 자존심이 상해서 검색하지 않고 온 파일을 뒤졌는데 AppVersion 으로 파일마다 다 검색하고 다녔는데 없었다 ^^ 진짜 너무 부끄럽게도 versionName 으로 있다. build.gradle (Module :app) Android 에서 Gradle Scripts 에 있다. ^^ defaultConfig { applicationId "..." minSdk 21 targetSdk 33 versionCode 1 versionName "1.0.0" testInstrumentationRunner "androidx.test.runne..

📱테스트 환경 Samsung Galaxy Android 13 • Android 10 😢 내가 겪은 문제 스퀘어클(Squicle) 디자인에 대해 처음들어봤다. 스퀘어클 디자인을 적용해달라는데 처음에 뭔말인가 싶었는데 ... 카카오톡 프로필에 적용된 디자인을 생각하면 된다. 모서리가 둥근 정사각형 스퀘어(Squre) + 써클(Circle) 의 합성어라고 한다. 말을 처음들어서 그렇지 익숙한 디자인의 형태였다. 그래서 쓸일이 많아서 기록해 두고 언제든지 복사 • 붙여넣기해서 쓰려고 한다 ^^ Squicle.xml 코드도 워낙 간단해서 알겠지만 한줄씩 설명을 적어보자면, 도형 내부를 채우는 색을 정의 여기서는 흰색으로 설정 도형의 테두리 선을 정의 선의 두께를 2dp로, 색을 흰색(#ffffff)으로 설정 줄은..

📱테스트 환경 Samsung Galaxy Android 13 • Android 10 😢 내가 겪은 문제 화면 정 가운데 배치하는 것 쯤은 쉽게 할 수 있게 기록을 해두려고 한다. 언제든지 복사해서 쓸 수 있도록 ImageView 를 여기다가 옮겨놓도록 해야겠어 ....!! 다 필요없고 밑에 코드만 넣어두면 전체화면 가운데에 정렬된다. ImageView 가 됐든 TextView 가 됐든 동일하다 !! app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="par..

📱테스트 환경 Samsung Galaxy Android 13 • Android 10 😢 내가 겪은 문제 알림을 통해서 앱을 실행시켰을 때와 평범하게 앱을 실행시켰을 때 차이를 두고 싶었다. 그래서 알림에 .putExtra() 를 통해서 데이터를 보내주고 데이터가 있을 경우와 없을 경우를 나누웠는데 .. 문제는 Back Key 를 통해서 앱을 종료했다가, 백그라운드에 있는 앱을 눌러서 다시 실행시켰더니 .. Intent 값이 계속 남아있는것이다 !! 그래서 removeExtra() 를 해주면 된다고 해서 해줬는데 ... 값은 없는데 계속 똑같은 상황이 발생하니 .. 답답해 미치겠는 와중에 ... !! Kotlin 개발을 도와주시는 S 선생님께서 flags 항목에 해당 코드를 추가하라고 말씀해주셨다 ㅎㅎ I..

📱테스트 환경 Mac 에서 Android Studio > About Android Studio 에서 확인하면 된다 : ) 😢 내가 겪은 문제 앱 빌드를 하는데, .apk 만 빌드를 해서 실제 핸드폰에서 설치해서 테스트 해보고 했는데 플레이 스토어에 올릴려고 보니 ... .aab 파일이 필요하단다 ... 나는 이번에 앱개발도 처음이고 .. 아이폰을 쓰다 보니 .apk 는 어렸을 때 불법다운로드(?) 하면서 몇번 설치해봤지만 .aab 확장자도 처음들어봤다 ㅋㅋ 아무튼 !! 그래서 이번기회에 .apk 와 .aab 확장자를 가진 파일을 빌드하는 방법을 기록해두려고 한다 !! .apk Build 1. 아주 친절하게 Build > Build Bundle(s) / APK(s) 라고 적힌 곳 클릭 ! 2. 아주 친절하..