본문 바로가기

전체 글

 (138)
NGINX + HTTPS + NodeJS + PM2 도커로 만들기 github repository 최근에 정부과제(예비창업패키지)로 윈도우용 특허 검색 프로그램인 CCPatents를 만들었습니다. CCPatents의 인터페이스는 기획할 때부터 단순함을 추구했기 때문에 매우 간단하지만, 내부적으로는 가용성과 보안에 많이 신경썼습니다. 그 중에 사용자가 키워드별로 동의어를 입력하면 자동으로 수집해서 중앙 서버로 전송하는 기능이 있는데요. 최초 구성도는 다음과 같습니다. 여담 처음에 AWS EC2와 RDS를 사용한 것은 자동으로 Scale-out이 가능하고, Scale-up도 손쉽게 할 수 있었기 때문입니다. 그리고 NGINX와 아파치 중에서 NGINX를 선택한 것은 성능때문이었고, NodeJS를 선택한 것은 최근에 자바스크립트를 많이 다뤄왔기 때문입니다. NodeJS의 멀..
[인스타그램 클론코딩] 관련 포스트 목록 ★ 채팅기능 추가: [인스타그램 클론코딩] 채팅기능 추가 ★ 개요 [Lambda + Prisma2+리액트] 인스타그램 클론 코딩 소스코드 웹 (리액트) 앱 (리액트 네이티브) 백앤드 Cognito Pre-SignUp 이벤트 핸들러 인증 [인스타그램 클론코딩] 회원가입 구조 [인스타그램 클론코딩] API 인증 구조 AWS Amplify란? Amplify 초기화 Cognito 소셜 로그인 추가 (이론) Cognito 소셜 로그인 추가 (실전) - 구글 Cognito Pre-SignUp 트리거 서버리스 프레임워크란? 서버리스 프레임워크 초기화 및 AWS에 연결 [인스타그램 클론코딩] Cognito Pre-SignUp 람다 함수 AWS Lambda 핸들러 구조 리액트 [인스타그램 클론코딩] 웹 로그인 구조 [인..
[인스타그램 클론코딩] 댓글 UI 구현3 - 원하는 컴포넌트 위치로 스크롤 상용 앱을 만들 때 이런 UI는 FlatList를 사용해야 합니다. FlatList에도 비슷한 기능이 있지만 추가로 고려해야 할 것이 더 있어보입니다. [인스타그램 클론코딩] 댓글 UI 구현1 - 여러가지 대안들.. 그리고 문제점 포스트에서 ScrollView 안에서 TextInput을 사용하는 여라가지 방법을 테스트해 본 결과, 이 방법을 포기하고, 결국 인스타그램의 댓글창 표시 방법을 카피해 보기로 했습니다. 내부 로직은 다르겠지만, 비슷하게 구현해 봤습니다. 댓글 달기... 버튼이 스크롤뷰의 어디에 있든지 댓글 입력창과 겹쳐지는 위치로 오게 만들어야 합니다. 댓글 입력창과 겹쳐지는 위치는 어떻게 구할 수 있을까요? onLayout 속성을 사용해서 구할 수 있습니다. onLayout 속성으로 부터 컴..
[인스타그램 클론코딩] 댓글 UI 구현2 - 스택 네비게이션을 이용한 댓글창 스크롤뷰 안에서 댓글 달기.. 버튼을 클릭하면 화면 밑에서 키보드와 함께 댓글 입력창이 나오도록 구성해 보겠습니다. [인스타그램 클론코딩] 앱 로그인 구조 포스트에서 로그인에 성공하면 DummyNavigation으로 이동한다고 했었습니다. DummyNavigation은 스택 네비게이션이면서 NavController 네비게이션의 스크린입니다. 그리고 다음과 같이 MainNavigation과 Comment 두 개의 스크린을 포함하고 있습니다. MainNavigation 안에서 다음 코드를 실행하면 Comment 스크린이 생성되면서 MainNavigation 스크린 위로 올라옵니다. 이때 파라미터로 me과 postId에 대한 정보도 함께 넘겨줍니다. const GoComment = () => { navigat..
[인스타그램 클론코딩] 댓글 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은 데이터베이스를 변형시킨다는 것을 의미합니다. 클라이언트 (리액트 네이티브, 리액트 ..

티스토리툴바