본문 바로가기

전체 글

(134)
[인스타그램 클론코딩] 댓글 UI 구현1 - 여러가지 대안들.. 그리고 문제점 댓글을 입력하기 위해 가장 기본적인 텍스트 입력기인 TextInput을 사용해 보기로 했습니다. TextInput은 Home 스크린에 있는 ScrollView 안에서 랜더링되는 다수의 Post 컴포넌트마다 포함되어 있습니다. Home.js 결과 및 문제점 iOS에서 키보드가 나타날 때 TextInput을 가립니다. 영상의 스크롤은 모두 직접한 것입니다. TextInput이 화면 상단에 있어서 키보드와 겹치지 않더라도 뭔가 어색합니다. 영상으로 확인할 수는 없지만 실제 ScrollView의 높이는 키보드 만큼 작아졌습니다. 그렇다고 ScrollView 내부 높이까지 작아지는 것은 아니고, 스크롤 좌표에도 영향이 없기 때문에, 키보드가 TextInput을 가립니다. 멀티라인이 지원되지 않습니다. 다음줄로 넘..
[인스타그램 클론코딩] 사진 업로드 구현2 - AWS S3에 비동기 업로드 (Promise 이용) 여담 처음엔 백앤드로 이미지를 전송한 다음 백앤드에서 다시 AWS S3에 저장하는 것이 비효율적이라고 느껴졌지만, S3의 접속 경로가 그대로 노출될 수도 있기 때문에 인증 기능이 포함된 백앤드를 경유하는 것이 맞다고 생각합니다. 아니면 제가 사용한 인증 방법은 AWS Cognito로 부터 인증 토큰을 받아오는 방식이기 때문에, S3 버킷을 Cognito에서 인증된 사용자만 접근하도록 설정한다면, 로컬 디바이스에서도 충분히 업로드할 수도 있을 것 같습니다. 예전에 AWS LED Button 프로젝트를 진행할 때 비슷한 작업을 해봤었는데, 다시 한 번 살펴봐야 겠습니다. 참조: [AWS LED Button] 어플리케이션 (1) : 시스템 흐름 전 S3에 그냥 업로드 했습니다. 실제 서비스에서는 수정되어야 할..
[인스타그램 클론코딩] 사진 업로드 구현1 - SelectablePhoto 그냥 react-native-image-picker 사용하는게 편합니다. 메인 화면에서 + 버튼을 터치했을 때 나타나는 사진 선택기(SelectPhoto.js) 화면입니다. 사진 선택기는 2개의 컴포넌트로 구성되어 있습니다. Image 가장 최근에 터치한 이미지가 표시됩니다. ScrollView 기기의 모든 사진을 읽어들여서 각각의 사진을 SelectablePhoto에 표시합니다. 직접 만들어 볼 SelectablePhoto의 요건은 다음과 같습니다. 선택(이미지), 미선택(회색 음영 + 체크 아이콘) 2가지 상태를 나타날 수 있어야 합니다. 선택되었을 때 실행할 핸들러와 선택이 해제되었을 때 실행할 핸들러를 부모 컴포넌트로 부터 입력받아야 합니다. 지금부터 SelectablePhoto 컴포넌트를 만들어..
[인스타그램 클론코딩] upload GraphQL을 아직 잘 모르겠다면? 나의 첫번째 GraphQL서버 만들기 upload Resolver는 AWS S3 서비스와 연계되어 사용됩니다. S3에 관한 내용은 사진 업로드 구현 포스트에서 설명하겠습니다. 다음은 업로드 영상입니다. upload.graphql caption(내용) 문자열과 files 문자열 배열을 필수로 받아서 포스트를 생성하고, 생성된 포스트의 정보를 반환하는 Resolver입니다. files 배열의 요소는 사진 웹 경로입니다. type Mutation { upload(caption: String!, files:[String!]!, location: String): Post! } Mutation은 데이터베이스를 변형시킨다는 것을 의미합니다. 클라이언트 (리액트 네이티브, 리액트 ..
[인스타그램 클론코딩] toggleFollow ※ prisma의 upsert를 사용하면 더 간단히 구현할 수 있습니다. GraphQL을 아직 잘 모르겠다면? 나의 첫번째 GraphQL서버 만들기 팔로우 버튼은 특정 사용자와의 팔로우 상태를 반전시키는 버튼입니다. 그리고 toggleFollow는 클라이언트에서 팔로우 버튼을 눌렀을 때 백앤드에서 실행되는 Resolver입니다. 클라이언트에서 피드를 요청하면 백앤드는 요청자와 팔로우 상태인 사용자의 포스트만 백앤드에 요청합니다. 위의 동영상에서 팔로우가 해제됨에 따라 용 그림의 포스트가 사라지는 것을 확인할 수 있습니다. toggleFollow.graphql 팔로우되거나 언팔로우될 다른 사용자의 ID를 필수로 받아서 해당 사용자의 정보를 반환하는 Resolver입니다. Boolean 타입을 반환하도록 해..
[인스타그램 클론코딩] toggleLike GraphQL을 아직 잘 모르겠다면? 나의 첫번째 GraphQL서버 만들기 좋아요 버튼은 각각의 포스트에 포함된 하트(♥) 모양의 버튼입니다. 그리고 toggleLike는 포스트의 좋아요 버튼을 눌렀을 때, 백앤드에서 실행되는 Resolver입니다. toggleLike.graphql 요청자의 Like 레코드가 연결(등록)되거나 해제될 포스트의 ID를 필수로 받아서 해당 포스트의 정보를 반환하는 Resolver입니다. Boolean 타입을 반환하도록 해도 상관없습니다. 저는 ApolloClient의 캐시에 영향을 미치는지 테스트하기 위해서 Post 타입을 반환하도록 설정했습니다. type Mutation { toggleLike(postId: Int!): Post! } Mutation은 데이터베이스를 변형시..
[인스타그램 클론코딩] createAccount GraphQL을 아직 잘 모르겠다면? 나의 첫번째 GraphQL서버 만들기 createAccount는 클라이언트에서 직접 호출하지 않고, 사용자가 Cognito에 가입하면 Cognito의 Pre-SignUp 트리거에서 호출됩니다. 참조: [인스타그램 클론코딩] Cognito Pre-SignUp 람다 함수 createAccount.graphql userName과 email을 필수 매개값으로 받아서 문자열을 반환하는 Resolver입니다. type Mutation { createAccount( userName: String!, email: String!, firstName: String, lastName: String, name: String, bio: String, picture: String ): Str..
[인스타그램 클론코딩] Prisma2를 활용한 GraphQL Resolvers src/api 폴더에 카테고리 및 API별로 폴더를 만들어서 각 폴더에 graphql 파일(타입 및 Resolver 정의)과 js 파일(Resolver 구현)을 짝지어 위치시켰습니다. 그리고 src/api 폴더에 있는 모든 graphql 파일과 js 파일은 한 개씩의 타입 객체와 Resolvers 객체로 변환됩니다. 참조: GraphQL 데이터 모델링 도구 (@graphql-tools, nexus-prisma) 여러가지 API 중에서 createAccount, toggleLike, toggleFollow, upload 4개의 API만 알아보겠습니다. 각 타입 폴더의 compued.js 파일에서 해당 타입의 Computed 필드의 Resolvers를 구현했습니다.