[App 개발] 채팅앱 개발일지
·
Project01 [Chat App]
채팅앱을 개발하기 위한 기획부터 진행하고 있다.기획이 전공인데도 졸업후 처음하기도 하지만.. 역시나 기획은 정말 어렵다.(이 게시글은 기획이 추가될때 마다 업데이트를 하기로) TOOL : FIGMA 2024.07.16혼자서 기획, 디자인, 개발까지 하려니까 공부할게 한두개가 아니다.채팅기능을 구현해보려는거 만으로도 차지만..이렇게 시작한거 끝까지 해봐야지 ! 프론트엔드: Next.js, Typescript, socket.io 백엔드: MongoDB 2024.08.16정확하게 한달만에 중간 점검을 해보았는데.. 내가 너무 쉬운 방법을 택했다가 오히려 돌아가는 기분이 들었다.나는 유투브에 올라온 과정에 맞춰 언어를 선택했고, tool을 선택했다.그러다 보니까 동영상 업로드가 끊기면 나의 개발도 거기서 ..
[App 개발] 채팅앱 개발하기 - 개요
·
Project01 [Chat App]
🐰: 회사에서 가장 큰 프로젝트였던React Native 앱을 드디어 오픈했다🎉개발할때는 힘들어 죽겠고, 언제 끝나나 했는데오픈하니까 정말 뿌듯다..✌🏻 그래서 회사에서 또 다른 큰 프로젝트를 기획중이라그 기획이 끝나기 전까지 개발팀은각자의 프로젝트를 작은 규모로 '기획-개발'해보기로 했다. 나는 무엇을 개발할까 고민하다가 채팅앱을 구현해보기로 했다 ! 가장 큰 목표는 채팅 기능...!  사용할 언어는 프론트엔드는 Next.js, Typescript를 사용하고,Next.js: React를 기반으로 한 언어로 백엔드까지 이해할 수 있는 언어라 선택.Typescript: 회사 프로젝트에서 처음 사용해봤는데 굉장히 매력적으로 느껴져 선택. 백엔드는 아직 미정이다! 채팅앱을 개발하는 과정을 하나씩 남겨 보..
[RN] react-native UseEffect (()=> {},[]); 사용법
·
React Native
UseEffect 란?사이드 이펙트(side effects)를 수행하기 위한 훅으로, 데이터 가져오기, 구독설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 작업 등을 수행할때 유용하다. 1. useEffect 기본 사용법useEffect(() => { // Side effects를 수행하세요. return () => { // cleanup 로직이 필요한 경우 여기에 작성합니다. };}, [/* 의존성 배열 */]); Side Effect 부분에 useEffect 동작 시 실행할 로직을 추가한다.그리고 의존성 배열 의 존재 유무 그리고 어떤 값이 들어가있는지에 따라 useEffect가 언제 동작하는지 결정된다. 2. useEffect Side Effect란?함..
[RN] react-native 댓글태그 지우기, Comments Tag remove, Back Space
·
React Native
//키패드 버튼으로 태그 지우기const removeTag = (event) => {if (event.nativeEvent.key === 'Backspace' && comment === '') { onResetReply && onResetReply();}}; {((replyItem?.userName || editTargetUser)) && ( //지우고자 하는 대상에 함수 적용 @{replyItem?.userName || editTargetUser} )} setComment(value)} onKeyPress={removeTag} value={commen..
[RN] react-native Pull Down refresh
·
React Native
import styled from '@emotion/native';import { useQuery } from '@tanstack/react-query';import React, { useCallback, useRef, useState } from 'react';import { RefreshControl } from 'react-native';import { Container, ContentBox, Row} from '../../config/globalStyles';import { BoldText, RegularText } from '../../config/globalTexts';import { queryClient } from '../../react-query/queryClient';functio..
[RN] react-native 'Attempt to invoke virtual method ~' error (Android)
·
React Native
이 오류 메시지는 주로 안드로이드 앱 개발 중에 발생합니다. 이것은 객체가 null인 상태에서 해당 객체의 메소드를 호출하려고 시도할 때 발생하는 오류입니다. 구체적으로 말하면, null로 초기화되지 않은 Path 객체에서 isEmpty() 메소드를 호출하려고 시도한 것입니다. 라고 Caht gpt가 설명해주었다..🤓그래서 에러가 뜨는 파일에서 null을 검색해 봤다. Col컴포넌트에 준 style에서 null을 사용해서 뜨는 에러였다.null을 0으로 바꿨더니 에러가 뜨지 않는다.