열정 도토리

💠 Intro 💠1. 학습 목표     이번 글에서는 React Native와 TypeScript를 사용해 WebSocket 기반의 채팅 기능을 단계별로 구현하는 방법을 소개하려고 한다. 현재 필자가 진행하고 있는 프로젝트인 FoodieBuddy를 활용해 실시간 채팅 시스템이 어떻게 동작하는지 설명해보겠다. 직접 실습을 하며 따라해 볼 수 있도록 과정을 단계별로 정리하였다. 실습 과정은 아래와 같은 단계를 따른다. 마지막까지 따라가면 채팅 앱 서비스가 완성된다:)Step 1: 기본 UI 설계 및 구현Step 2: 메시지 상태 관리 및 화면 렌더링Step 3: WebSocket 기본 코드 작성Step 4~5: WebSocket을 활용한 실시간 통신 추가Step 6~7: 텍스트와 이미지 데이터 처리 구현..

해결 1. 저장공간에서 Developer 선택 후 캐시 삭제2. dotnet nuget locals all --clear 3. 위에 방법 다 작동 안 해서 결국 새로 설치했다. https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/sdk-9.0.100-macos-arm64-installer

1. 터미널에 차례대로 입력cd iossudo gem update cocoapods --pre pod updatepod update 2. Finder 에서 (프로젝트명). xcworkspace 열어서 xcode 실행 3. Clean Build Folder

https://github.com/oblador/react-native-vector-icons?tab=readme-ov-file#installation GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source and full styling.Customizable Icons for React Native with support for image source and full styling. - oblador/react-native-vector-iconsgithub.com Step 1. 패키지 설치npm install --save react-native-vector-ico..

스크린에서 스크린으로 이동하는 방법을 알아보자.  Step 0. 공식 문서를 참고하여 설치 https://reactnavigation.org/docs/getting-startedhttps://reactnavigation.org/docs/stack-navigator  Step 1. navigation 폴더와 screens 폴더 각각 생성Step 2. screens 폴더 안에 스크린 2개 만들기온보딩스크린에서 버튼을 누르면 로그인 스크린으로 넘어가는 것을 만들어보자. 온보딩 화면에는 버튼을 추가해준다. function OnboardingScreen({navigation}) { return ( );} Step 3. App.tsx 파일에 NavigationC..

프로젝트를 깃허브에 연결하고 파일을 다시 실행하려니 에러가 났다.  에러 메시지 Command `run-ios` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project. ➡️ 1번 error Unable to open base configuration reference file '/error Unable to load contents of file list: 'error Unable to load contents of file list: error Unable to load contents of file list: 'error Failed to build ios project...

# 방법 1cd ~/Library/Developer/Xcoderm -rf DerivedData# 방법 21. Xcode 에서 Setting 들어가기2. Locations 에서 Derieved Data 부분의 '->' 아이콘 눌러주기 3. Xcode 창 종료 4. Derived Data 폴더 삭제5. 휴지통까지 지워주기 6. npm run ios

에러 메시지npm error code EACCESnpm error syscall opennpm error path /Users/doh/.npm/_cacache/index-v5/2c/7c/c9815551da12cffdca41aeb03709231e9d009cc383ac90a2148780c3e753npm error errno EACCESnpm errornpm error Your cache folder contains root-owned files, due to a bug innpm error previous versions of npm which has since been addressed.npm errornpm error To permanently fix this problem, please run:npm ..

🧵 프로젝트 만들기 1. 터미널 열고 프로젝트를 생성하고 싶은  폴더로 이동cd (폴더 경로)  2. expo app 만들기npx create-expo-app (프로젝트명) 3. 프로젝트 파일로 이동cd (프로젝트명) 4. expo app 실행npx expo start 5. 핸드폰에 expo go 라는 앱 다운로드 받고 QR코드 촬영 🧵 깃허브 연결하기1. 초기화git init 2. 업로드할 파일 추가git add . 3. 커밋git commit -m "커밋 메시지" 4. 깃허브 레파지토리와 연결하기git remote add origin (레파지토리 주소) 5. pushgit push origin (브랜치 이름)

https://www.youtube.com/watch?v=m7wsrVQsVjI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=11 유튜브 드림코딩으로 공부한 내용입니다. 🐚 기본 형식 ! + tab 🐚 div 태그 빠르게 작성 .className 후 tab #idNum 후 tab div 가 아닌 태그는 . 과 # 앞에 H1, p 등을 적어주면 된다. 🐚 부모,자식, 형제 노드 div 안에 ul 안에 li 부모 > div>ul>li 형제 + div>ul+li 반복 * ul>li*5 🐚 태그 안에 텍스트 입력 {} p{hello} hello 🐚 더미용 텍스트 생성 p>lorem 🐚 숫자 자동 생성 $ p.class${item $}*5 item 1 item 2 item 3 ..

https://www.youtube.com/watch?v=jWh3IbgMUPI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=8 유튜브 드림코딩으로 공부한 내용입니다. 🌈 Display - Inline , Inline-block , block 차이 Block (ex. ) 은 한 줄에 하나씩, Inline (ex. ) 은 한 줄에 나란히 배치된다. 이 속성을 바꾸고 싶으면 각각의 태그에 다음과 같은 css 를 설정하면 된다. div{ background:red; display:inline-block; } span{ display:block; } 이 때 inline-block 대신 inline 을 쓸 경우, content, 즉 글자 크기에 맞춰서 배경색이 칠해진다. 🌈 P..

https://www.youtube.com/watch?v=gGebK7lWnCk&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=7 유튜브 드림코딩으로 공부한 내용입니다. 🌈 공식문서 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference 🌈 셀렉터 HTML에서 어떤 태그들을 고를 것인지 규정하는 문법이다. 구체적인 조건일수록 우선순위가 높아진다. 가령 universal 로 초록색, li tag 로 파란색을 부여했다면, 더 구체적인 tag 의 설정 즉 파란색이 적용된다. 1. * 모두 * { color:green; } 2. Tag 태그 타입 li { color: blue; ] 3. #id id First #special {..

https://www.youtube.com/watch?v=i0FN-OwJ7QI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=5 유튜브 드림코딩으로 공부한 내용입니다. 🐚 기초 - 기본 코드를 자동완성 시키려면 ! 후 enter - 기본적으로 head 와 body 두 부분으로 나뉘어져 있다. head 에는 기본 정보가 들어있고 사용자에게 노출되는 부분은 body 이다. - 웹사이트는 대개 header, nav, aside, main, footer 로 나뉜다. 🐚 태그 - 아래 공식 문서를 참고하자 HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN - 태그는 box 와 item 이렇게 두 가지로 분류할 수 있다. Box는 hea..