개발
NextJS란
ProductionNext.js Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크입니다. React도 SSR을 고려하여 설계되었기 때문에 자체적으로도 구현이 가능하긴 하지만, 개발환경을 만들기 위해서는 생각보다 복잡합니다. 그래서 이러한 문제를 해결한 Next가 나왔고, 사용법도 꽤 간편합니다. SSR은 무엇인가요? SSR은 Server Side Rendering 약자로 처음 클라이언트가 접속했을때 브라우저에서 자바스크립트 코드를 다운로드 받아 해석 할 때까지 기다리지 않고 서버에서 보여질 HTML을 미리 준비해 클라이언트한테 응답해주는 방식을 서버 사이드 랜더링이라고 합니다. 줄여서 SSR이라고 표현합니다. SPA에서 SSR을..
VSCode, Babel환경에 Jest 세팅 하기
babel 환경에서 jest를 이용할 경우 jest-babel을 같이 설치한다. npm i -D jest jest-babel VSCode상에서 자동완성을 편리하기 위해서는 아래도 설치해주도록 하자. npm i -D @types/jest 아래를 통해 jest를 실행할 수 있고 npx jest 아래를 통해 스크립트를 저장할 때마다 자동으로 모든 jest 테스트 코드를 자동으로 실행시켜준다. npx jest -watchAll 리액트 컴포넌트를 테스트 하기 위해서 render를 테스트 하는 라이브러리를 설치해준다. (리액트 공식 홈펭지에서도 권장하고 있음) npm i -D @testing-library/react render를 통해 그려준 결과물은 DOM 형태로 브라우저 상에 표현되기 때문에 Matcher를 확..
안드로이드 AWS Amplify + S3에 파일 업로드 Android uploads files with AWS Amplify + S3 (3/3) S3+앱 연동
이제 S3와 앱만 연동하면 끝난다. 안드로이드 프로젝트에서 앱 레벨 그레들에 아래와 같이 추가한다. dependencies { ... implementation 'com.amplifyframework:aws-storage-s3:1.6.11' implementation 'com.amplifyframework:aws-auth-cognito:1.6.11' ... } 그리고 메니페스트에 관련 퍼미션을 추가해준다. 그리고 이전글에서 생성한 클래스에 Amplify.addPlugin(AWSCognitoAuthPlugin()) Amplify.addPlugin(AWSS3StoragePlugin()) 이 두줄을 추가해준다. (S3에 접근하기 위한 Conginito와 S3 Storage Plugin) class MyAmpl..
안드로이드 AWS Amplify + S3에 파일 업로드 Android uploads files with AWS Amplify + S3 (2/3) S3버킷 생성
이번 포스팅의 과정은 아래와 같다. 1. S3버킷 생성 2. AWS Cognito 생성 3. IAM 설정 안드로이드에서 Amplify SDK 세팅을 끝냈다면. S3 Console (s3.console.aws.amazon.com/s3/home?region=ap-northeast-2 에 들어가서 새 버킷을 만들어주자. (리전 선택은 자유~) 생성 방법은 매우 단순해서 생략 하도록 한다. AWS Cognito 설정하기 원래 AWS 를 연동하려면 AccessKey, SecretKey 로 접근해야 하지만 어디선가 보기에는 인증서가 앱에 탑재되므로 보안성이 낮아져, AWS 자체에서 제공하는 Cognito 서비스를 이용하여 인증 권한자를 추가하고, 이 정보를 앱에 탑재하는 방법을 사용한다. 아래 링크에서 Manage..
안드로이드 AWS Amplify + S3에 파일 업로드 Android uploads files with AWS Amplify + S3 (1/3) 환경 세팅
회사에서 안드로이드 클라이언트에서 S3에 파일을 업로드 기능을 구현했는데 Amplify 공식 문서가 매우 빈약하여 포스팅을 남겨본다. 크게 구현 과정은 아래와 같다. 1. 안드로이드 프로젝트에 Amplify SDK 세팅 2. S3 버킷 생성. 3. S3 버킷의 권한 설정. 4. S3 버킷과 안드로이드 프로젝트 연동. (공식문서에서 위 과정을 매끄럽게 설명하지 않고 있다;;) 아래와 같은 개발 환경이 필요하다. Node.js v10.x or later npm v5.x or later git v2.14.1 or later Android Studio version 4.0 or higher Android SDK API level 16 (Jelly Bean) or higher 터미널에서 npm을 통해 amplif..
Android S3연동 하기(0) - S3란?
AWS Amplify 스토리지 모듈은 퍼블릭, 보호 또는 프라이빗 스토리지 버킷에서 앱의 사용자 콘텐츠를 관리하기위한 간단한 메커니즘을 제공합니다. 스토리지 범주에는 다음에 대한 기본 지원이 제공됩니다. Amplify Storage 카테고리는 공개, 보호 또는 비공개 스토리지 버킷에서 앱의 사용자 콘텐츠를 관리하기위한 인터페이스를 제공합니다. 스토리지 범주에는 Amazon Simple Storage Service (S3)에 대한 기본 기본 지원이 제공됩니다. (단, Android API 레벨 16 (Android 4.1) 이상이어야만 한다.) Amplify란 ? AWS Amplify는 모바일 및 프런트 엔드 웹 개발자가 AWS에서 구동되는 안전하고 확장 가능한 풀 스택 애플리케이션을 개발하도록 지원하는 ..
TDD란
TDD (Test-Driven Development) 매우 짧은 개발 사이클을 반복하는 소프트웨어 개발 프로세스 중 하나로, 개발자느 먼저 요구 사항을 검증하는 자동화된 테스트 케이스를 작성 하고 그 후 테스트 케이스를 통과하기 위한 최소한의 코드를 생성한다. 마지막으로 작성한 코드를 표준에 맞도록 리팩토링한다. 위의 사진과 같이 TDD는 요구사항을 받은 후 세가지 절차가 반복된다. 실패 : 첫번째 절차는 실패, 실패하는 테스트 케이스를 만든다. 성공 : 두번째 절차는 성공, 우리가 작성하는 실패하는 테스트 케이스를 통과시키기 위해 코드를 작성하여 테스트를 통과시키는 것이다. 리팩토링 : 세번째 절차는 리팩토링, 우리가 구현한 코드를 더 개선시킬 방법이 생긴다면 리팩토링을 진행한다. 리팩토리을 진행하고 ..
Toast 메세지가 뜨지 않을 때.
결론 : Handler(Looper.getMainLooper()).post(Runnable { Toast.makeText( this@MainActivity, "로그인 후에 이용하실수 있습니다.", Toast.LENGTH_LONG ).show() }) 안드로이드는 반드시 UI Thread에서 화면에 대한 조작을 해야한다. 프로그래밍을 하다보면 간혹 UI Thread가 아닌 Background Thread상에서 Toast를 호출하게 되는데 위와 같이 Handler를 이용해서 명시적으로 UI Thread 상에서 호출되도록 할 수 있다.
React 테스트 도입기 (0), Jest란?
jestjs.io/ Jest · 🃏 Delightful JavaScript Testing 🃏 Delightful JavaScript Testing jestjs.io 공식홈페이지에서 "간결한 자바스크립트 테스팅 프레임워크." 바벨, 타입스크립트, 노드, 리액트, 앵귤러, 뷰 등의 환경을 지원한다고 소개하고 있다. 35k 스타를 받아서 어느정도 공신력 있는 프레임워크다. 또한 리액트 공식 홈페이지에서도 Jest를 권장하고 있다 추가적으로 아래와 같은 특징들이 있다. 간단한 설정만으로도 테스트를 실행할 수 있습니다. 풍부한 matcher를 제공하여 별도의 모듈 없이 테스트를 더 풍부하게 표현할 수 있습니다. Coverage도 별도의 설치 없이 확인할 수 있습니다. Mocking 등을 지원하여 테스트를 더 쉽게..
뷰페이거(ViewPager)에 인디케이터(Indicator) 추가 하기
외부 라이브러리 없이 ViewPager의 인디케이터 추가하기 1.TabLayout을 ViewPager가 있는 xml에 추가한다. 2. ViewPager와 Tablayout을 연결한다. val viewPager = findViewById(R.id.viewPager) val tabLayout = findViewById(R.id.tabLayout) viewPager.adapter = adapter tabLayout.setupWithViewPager(viewPager) (ViewPager2의 경우 TabLayoutMediator를 이용한다.) val viewPager2 = findViewById(R.id.viewPager2) val tabLayout = findViewById(R.id.tabLayout) vie..