분류 전체보기

프론트엔드와 백엔드 별도로 개발을 진행한다면 백엔드의 api 개발이 모두 완료될 때까지 기다릴 수 없다. 그렇기 때문에 가짜 데이터 서버를 두고 먼저 개발을 진행할 필요가 있다. 특정 Request를 날리면 가짜 데이터를 보내줄 가상 서버를 MockServer라고 하는데 오늘은 api 개발을 위한 툴인 postman을 이용해서 mock server를 구축해보려고 한다! Postman API Platform | Sign Up for Free Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can cre..

✅ JWT란 JWT(JSON Web Token)의 약자로, Json 포맷을 이용해 인증에 필요한 정보를 암호화 한 웹 토큰이다. JWT는 아래 사진 같이 긴 암호화 된 토큰으로, 토큰 자체를 정보로 사용하는 Self-Contained 방식으로 안전성을 보장한다. 주로 회원 인증이나 정보 전달을 위해 쓰이며, Access Token(JWT)을 HTTP 헤더에 넣어 서버와 통신한다. JWT.IO JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties. jwt.io ✅ JWT 구조 JWT 공식 사이트에 들어가면 암호화된 토큰을 볼 수 있다. 위에 사진을 보면 ..

progress로 시간을 설정하는 타이머를 만들어볼 것이다. 1 ~ 60분까지 타이머 설정하기 1초마다 화면 갱신하기 타이머 효과음 넣기 📌 알게 된 점 1. 함수로 빼내 무슨 역할을 하는지 추상화하는 것이 중요하다. 가독성 굿! 2. SoundPool로 효과음을 넣는다. SoundPool | Android Developers developer.android.com 📌 최종 코드 MainActivity.kt package com.example.timer import android.media.SoundPool import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.os.CountDownTimer impor..

📌 학습 목표 - BottomNavigationView을 구성하고 사용할 수 있다. - TabLayout을 구성하고 사용할 수 있다. - ViewPager를 구성하고 사용할 수 있다. ViewPager2 | Android 개발자 | Android Developers 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 스와이프할 수 있는 형식으로 뷰 또는 프래그먼트를 표시합니다. 최근 업데이트 공개 버전 출시 후보 베타 developer.android.com 📝 Standard Mission 1. BottomNavigationView를 이용해서 3개 이상의 Fragment를 오고가는 Activity 구현하기 - 각각 다른 아이콘 적용 - 각각 다른 Fragment로 이동하도록 적..

React의 특징 중 하나는 데이터가 단방향으로 흐른다는 점이다. 즉, 부모 component에서 자식 component로 props가 옮겨오는 식의 형태를 띄고 있다. 따라서 모든 component에서 쓰여야 하는 상태(ex 유저 정보)가 있다면 이 정보를 계속 부모에서 자식으로, 또 그 자식으로 전달해야 하는 어려움이 있다. ❗React의 한계 - 상태 공유를 위해 상위 요소까지 끌어올리면 거대한 트리가 재렌더될 수도... - Context는 단일 값만을 저장할 수 있고, 자체 Consumer를 가지는 여러 값의 집합은 담을 수 없다. - 최상단(state가 존재하는 곳)부터 트리의 잎(state가 사용되는 곳)까지의 코드 분할이 어렵다. 따라서 Redux를 통해 상태관리를 시행했지만 React에 최..

문제 index.js 파일을 수정하고 렌더링 했지만, 화면에 아무것도 나타나지 않음! 콘솔을 보니 아래처럼 에러가 났었다. react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function 원인 여기에 사용한 ReactDOM은 React 18의 최신 가져오기 방법에서 더 이상 사용되지 않는다고 한다. packge.json을 보니 18버전이었다. import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; ReactD..

오류 앱 권한 요청을 하려고 when 조건문을 사용해 1. 앱에 이미 권한이 부여되었는지 확인 2. 교육용 팝업 확인 후 권한 팝업을 띄우는 기능 (shouldShowRequestPermissionRationale) 3. 권한 요청 (requestPermissions) 위와 같은 함수들을 썼는데, 현재 API level이 21이라, 23버전에서만 사용할 수 있다는 오류가 떴다... 앱 권한 요청 | Android 개발자 | Android Developers 앱 권한 요청 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 모든 Android 앱은 액세스가 제한된 샌드박스에서 실행됩니다. 앱이 자체 샌드박스 밖에 있는 리 developer.android.com 해결방법 API l..

📌 모킹(Mocking)이란? Mock(모의 데이터)을 만들어서 활용하는 방식을 말한다. 통상적으로 data fetch를 해야 하는 경우 통신을 통해 응답을 내려주는 서버가 있어야 한다. 서버가 없는 경우, api 요청으로 내려올 데이터를 프론트에서 모킹하거나 서버의 역할을 해주는 무언가가 필요하다. 완전하게 서버가 구축되지 않은 단계에서, 프론트엔드 개발자들은 API 호출과 관련된 테스팅을 진행하기 위해 API를 모킹해주는 과정을 거친다. 📌 MSW.js MSW(Mock Service Worker의 약자)는 API Mocking의 라이브러리로, 서버향의 네트워크 요청을 가로채서 모의 응답을 보내주는 역할을 한다. 따라서, MSW 라이브러리를 통하면, Mock 서버를 구축하지 않아도 API를 네트워크 수..

애플리케이션의 전역 상태를 효과적으로 공유하고 관리하기 위해 redux가 등장했다. redux는 상태를 변화시키는 방법과 상태의 변이를 구독하는 방법을 제공한다. Context를 사용할 경우에 Context가 가지고 있는 전역 데이터를 효과적으로 관리할 것에 대한 라이브러리가 Redux이다. Redux는 기본적으로 Flux 패턴을 따르고 있다. 어떤 Action이 발생하면, Dispatcher에서 이를 받아와 해석한 후 Store에서 저장된 정보에 변경을 가하고, 그 결과가 View로 다시 전달되도록 한다. 그런데 모바일에서 터치를 하는 것처럼, 웹에서도 사용자가 View를 통해서 클릭 같은 액션을 발생시킬 수 있다. 그런 경우도 고려하면 아래와 같은 흐름이 만들어진다. 이러면 뭐가 단방향이냐… 라고 볼..

오늘은 계산했던 기록을 DB에 저장하는 계산기를 만들어볼 것이다. 단, 정수형으로 한정하고 몇 가지 기능을 배제하고 연산자는 1회만 사용할 수 있도록 할 것이다! Thread 사용하기 - 타 Thread 만들어서 사용하기 - runOnUiThread 사용하기 Room 사용하기 📌 알게 된 점 1. TableLayout 속성에 shrinkColumns="*"을 주면 열 간격이 균일하게 적용된다. 2. drawable 누를 때 색상 변하게 하는 것은 ripple 3. Button에 바로 background를 하면 적용되지 않기 때문에 AppCompatButton으로 변경해주거나, stateListAnimator="null"로 설정해줘야 한다. 4. DB table로 사용해주기 위해 @Entity를 추가해준다..