Fomagran 💻

본문 바로가기

728x90

[React Native] 실시간 채팅앱 만들어보기 2 - Websocket 이용하여 프론트 구현하기 (Build a real-time chatapp 1 - Implement frontend with websocket) 안녕하세요 Foma 입니다. 지난 글에 Node.js로 웹소켓 서버를 구현했는데요. 오늘은 React Native에서 해당 서버를 이용하여 실시간으로 채팅을 주고받는 기능을 구현해 보도록 하겠습니다. 바로 시작할게요~ (환경은 React Native CLI + Typescript 입니다.) Tutorial 실시간 채팅앱 만들어보기 1 - Websocket 이용하여 백엔드 구현하기 (feat. Websocket) (Build a real-time chatapp 1 - Implement backend with websocket) 실시간 채팅앱 만들어보기 2 - Websocket 이용하여 프론트 구현하기 (Build a real-time chatapp 1 - Implement frontend with webs.. 2022. 7. 28.

[Node.js] 실시간 채팅앱 만들어보기 1 - Websocket 이용하여 백엔드 구현하기 (feat. Websocket) (Build a real-time chatapp 1 - Implement backend with websocket) 안녕하세요 Foma 입니다. 오늘은 Node.js에서 Websocket을 이용하여 실시간 서버를 구현해 보려고 합니다. 바로 시작할게요~ (백엔드 서버를 초기화 하는 방법은 생략하고 진행합니다. 혹시 모르시는 분들은 여기 에서 확인해 주세요!) Tutorial 실시간 채팅앱 만들어보기 1 - Websocket 이용하여 백엔드 구현하기 (feat. Websocket) (Build a real-time chatapp 1 - Implement backend with websocket) 실시간 채팅앱 만들어보기 2 - Websocket 이용하여 프론트 구현하기 (Build a real-time chatapp 1 - Implement frontend with websocket) Install express 간단하.. 2022. 7. 28.

[React Native] React Native + Node.js + MySQL To do list 만들기 5 - Axios 이용하여 CRUD 구현하기 (Implementing a api with Axios) 안녕하세요 Foma 입니다. 이번 글은 React Native + Node.js + MySQL 튜토리얼의 마지막 단계인 Axios를 활용하여 CRUD를 구현해 실제 서버에 API를 요청하고 데이터베이스에서 데이터를 받아오고, 생성하고, 수정하고 ,삭제하는 방법에 대해 정리하도록 하겠습니다. 바로 시작할게요~ Tutorial React Native + Node.js + MySQL To do list 만들기 1 - 서버 초기 세팅하기 (Initialize server setting) React Native + Node.js + MySQL To do list 만들기 2 - MySQL 테이블 만들기 (Create a MySQL Table) React Native + Node.js + MySQL To do lis.. 2022. 7. 27.

[Node.js] React Native + Node.js + MySQL To do list 만들기 4 - Express로 CRUD 구현하기 (Building a CRUD API with Express) 안녕하세요 Foma 입니다. 오늘은 Node.js에서 Express 프레임워크를 활용하여 MySQL 데이터 베이스에 생성, 조회, 수정, 삭제 (CRUD) 를 구현해 보도록 하겠습니다. 바로 시작할게요~ Tutorial React Native + Node.js + MySQL To do list 만들기 1 - 서버 초기 세팅하기 (Initialize server setting) React Native + Node.js + MySQL To do list 만들기 2 - MySQL 테이블 만들기 (Create a MySQL Table) React Native + Node.js + MySQL To do list 만들기 3 - React Native 화면 구현하기 (Implement frontend) React N.. 2022. 7. 27.

[React Native] React Native + Node.js + MySQL To do list 만들기 3 - React Native 화면 구현하기 (Implement frontend) 안녕하세요 Foma 입니다! 오늘은 React Native + CLI + TS로 투 두 리스트 화면을 구현하는 방법에 대해 정리해 보도록 하겠습니다. 바로 시작할게요~ Tutorial React Native + Node.js + MySQL To do list 만들기 1 - 서버 초기 세팅하기 (Initialize server setting) React Native + Node.js + MySQL To do list 만들기 2 - MySQL 테이블 만들기 (Create a MySQL Table) React Native + Node.js + MySQL To do list 만들기 3 - React Native 화면 구현하기 (Implement frontend) React Native + Node.js + My.. 2022. 7. 26.

[React Native] 함수형 컴포넌트 props 데이터에 따라 업데이트 해주기(Functional Component update on props change) 안녕하세요 Foma 입니다. 오늘은 함수형 컴포넌트에서 props가 바뀔 때마다 화면이 업데이트 되도록 하는 기능을 구현해 보도록 하겠습니다. 바로 시작할게요~ Problem 아래와 같이 추가 버튼을 누르거나 수정 버튼이 눌리면 폼 형식의 모달이 뜨도록 구현 했습니다. 위 과정에서 수정 버튼을 눌렀을 땐 해당 버튼이 눌린 데이터 모델의 값이 인풋 안에 미리 작성돼도록 하고, 추가 버튼이 눌렸을 땐 빈 인풋창이 보이도록 구현하고 싶었습니다. 왼쪽이 추가(+) 버튼을 눌렀을 때, 오른쪽이 수정버튼을 눌렀을 때입니다. TodoList.tsx 위 리스트 화면에서 useState를 구현해 줍니다. const [todos, setTodos] = useState(todoDatas); const [todo, setTo.. 2022. 7. 26.

[React Native] TextInput과 Object를 useState로 바인딩 하는 법 (Binding a textinput with object) 안녕하세요 Foma 입니다. 오늘은 TextInput 값에 따라 Object의 특정 프로퍼티 값이 바뀌는 것을 useState를 이용하여 구현하는 방법에 대해 정리해 보려고 합니다. 바로 시작할게요~ To do list Todolist의 모델인 TodoModel이 있습니다. interface TodoModel { id: number; author: string; title: string; content: string; priority: number; } 해당 Form의 인풋값에 따라 해당하는 TodoModel의 프로퍼티가 바뀌는 것을 구현하고 싶었는데요. 1. useState를 통해 TodoModel을 초기화 해줍니다. const [todo, setTodo] = useState({ author: '', .. 2022. 7. 26.

[iOS 해결법 포함] This operation could not be completed 안녕하세요 Foma 입니다! 오늘은 iOS 프로젝트를 작업하던 중에 git으로 어떤 작업을 했는데 아래와 같이 에러가 나는데 왜 이 오퍼레이션을 완성할 수가 없다는건지... 아무리 구글링 해도 해결법이 나오지 않더라구요.. 그래서 무수한 삽질 끝에 해결한 방법에 대해 정리해 보려고 합니다. 우선 xcodeproj 파일을 실행 시키니깐 잘되고 해당 오류가 xcworkspace 파일을 실행 시킬 때만 발생하더라구요. 그래서 cocoapod에 어떤 오류가 있겠다 싶어서 pod을 삭제하고 xcworkspace도 모두 삭제한 뒤 다시 설치해 주니깐 정상적으로 해결 되었습니다. pod 삭제하는 방법 해당 프로젝트가 있는 경로로 이동 pod deintegrate pod clean 왜 발생한 오류인지는 아직 모르겠어요.. 2022. 7. 25.

[MySQL] React Native + Node.js + MySQL To do list 만들기 2 - MySQL 테이블 만들기 (Create a MySQL Table) Install MySQL MySQL :: Download MySQL Installer Select Operating System: Select Operating System… Microsoft Windows Select OS Version: All Windows (x86, 32-bit) Windows (x86, 32-bit), MSI Installer 8.0.29 2.3M (mysql-installer-web-community-8.0.29.0.msi) MD5: 4f735569267527dec28d9e8d977f33d1 | Signatu dev.mysql.com MySQL Workbench MySQL :: Download MySQL Workbench Select Operating System: Select.. 2022. 7. 23.

[MySQL Error 해결법 포함] Access denied for user '@localhost' (using password: YES) 안녕하세요 Foma 입니다! MySQL 데이터베이스를 접속하는데 아래와 같은 오류를 만났는데요. 오늘은 이 오류를 해결하는 방법에 대해 정리해 보도록 하겠습니다. Error 처음에 해당 오류가 떴을 때 액세스가 디나이 당했다...? 라고 떠서 '아 비번을 틀려서 이제 접근이 제한 됐구나.. 어떡하지' 라고 생각했는데 그냥 비번이 틀렸다는 걸 알려주는 것이었습니다. 올바른 비밀번호를 입력하면 해당 오류가 뜨지 않습니다. Reset Password 하지만 올바른 비밀번호가 뭔지 모르는 경우가 있겠죠? 그럴 떈 비밀번호를 리셋해주는 방법이 있는데요. 가장 먼저 작업 관리자로 들어가 서비스탭을 누른 뒤 MySQL이 실행되고 있다면 중지를 눌러주세요. 그 다음으로 reset 명령어를 입력할 .txt 파일을 만들어.. 2022. 7. 23.

[Node.js] React Native + Node.js + MySQL To do list 만들기 1 - 서버 초기 세팅하기 (Initialize server setting) 안녕하세요 Foma 입니다. 이번 글은 Node.js 서버 초기 세팅하는 방법에 대해 다뤄보도록 하겠습니다. 바로 시작할게요~ Tutorial React Native + Node.js + MySQL To do list 만들기 1 - 서버 초기 세팅하기 (Initialize server setting) React Native + Node.js + MySQL To do list 만들기 2 - MySQL 테이블 만들기 (Create a MySQL Table) React Native + Node.js + MySQL To do list 만들기 3 - React Native 화면 구현하기 (Implement frontend) React Native + Node.js + MySQL To do list 만들기 4 - .. 2022. 7. 23.

[WWDC 2022] Swift로 프로토콜 인터페이스 설계하기 (Design protocol interface in Swift) 안녕하세요 Foma 입니다! 오늘은 저번 글인 Embrace Swift Generics에서 계속 언급하던 Design protocol interface in Swift 세션에 대해서 다뤄보려고 합니다! (저번 글과 많이 연관되어 있으니 안보신 분들은 꼭 여기 에서 보고 와주세요!) 바로 시작할게요~ Understand type erasure 가장 먼저 타입 이레이져에 대해서 알아보도록 하겠습니다. (erasure를 정확히 어떻게 해석해야 할지 모르겠네요.. 삭제? 지움?) 가장 먼저 동물 프로토콜을 살펴보도록 하겠습니다. 동물 프로토콜은 associatedtype으로 먹이타입과 생산품타입이 있고, 메서드로 먹이타입을 파라미터로 받는 eat, 생산품 타입을 반환하는 produce 메서드가 있습니다. pro.. 2022. 7. 11.

이전 1 2 3 4 5 6 ··· 49 다음

728x90

티스토리툴바