공부하자

Bookmark 프로젝트에서 채팅 기능을 구현하게 되었다.이런 느낌의 댕근 채팅 스타일... 을 구현해야 했당React와 WebSocket을 사용해서 실시간 채팅을 구현해봤고 그 과정에서 얻은 경험과 삽질 일대기를 ㅜㅜ 공유하려고 한다. 1. 서버와의 사전 논의사항먼저 알아둘 점! 채팅 기능은 일반적인 REST API와는 달리 Swagger에서 확인할 수 없다. 실시간 양방향 통신이 필요한 채팅의 특성상 WebSocket을 사용하기 때문이다. 그래서 백엔드 개발자와 미리 논의해야 할 사항들이 꽤 있다. 스웨거만 보고 api 연결을 할 수 없기 때문에 소통이 진짜 중요한 기술 구현이었다. 백엔드 개발자분도 나도 둘 다 웹소켓 채팅 기능 구현이 처음이라 무슨 정보와 내용을 서로 주고받아야 할지 몰랐고 이 때..

문제 상황웹과 앱 환경에서 하단바를 다르게 표시해야 했다const BottomNav = () => { return 하단 내비게이션;}; 이걸 어떻게 웹/앱 환경에 따라 다르게 보여줄까?  1. 환경 감지 방법1.1 User-Agent 활용 User-Agent 문자열을 분석하여 앱 환경인지 확인하는 방법이다.iOS나 Android 앱의 웹뷰에서 접속 시 특정 문자열(MyCustomApp)을 추가하도록 설정해 감지한다.const useCheckEnvironment = () => { const [isApp, setIsApp] = useState(false); useEffect(() => { // User-Agent 문자열 가져오기 const userAgent = navigator.userAge..

최근에 루키톤을 하고있다! 같이 하는 제롬이 리액트 라우터 돔을 많이 싫어해서... TanStack Router를 도입했다.React Router를 사용하다가 TanStack Router를 사용해보면서 겪은 경험과 장점들을 정리해봤다. TanStack Router이란? 🤔TanStack Router는 React Router v7이라고도 불린다.파일 시스템 기반 라우팅과 타입 안전성이 특징인 라우터 라이브러리이다. Next의 파일 기반 라우터를 좋아했던 사람들이라면 이것 역시 좋아할 듯주요 특징1. 파일 시스템 기반 라우팅2. 완벽한 타입스크립트 지원3. 자동 코드 분할4. 성능 최적화시작하기 👶먼저 필요한 패키지를 설치해준다.pnpm add @tanstack/react-router 설치 후에 vite..

https://www.tistory.com/event/write-challenge-2024 작심삼주 오블완 챌린지오늘 블로그 완료! 21일 동안 매일 블로그에 글 쓰고 글력을 키워보세요.www.tistory.com 티스토리 블챌이 생겼습니다!!! 혜택이 타사 블챌보다 더 알차고 현실적인 구성이라 맘에 듭니다  다들 티스토리 블챌 참여햅봅시다 1일 1개발 아티클 해봅쉬다~~~

문제 상황 및 구현해야 할 것이런 느낌의 스크롤을 감지해서 상황마다 버튼이 달라지는 컴포넌트를 만들어야 했다. 스타일은 전부 비슷할 듯 하니 맨 처음에 두겠음import styled, { css } from 'styled-components';export const StyledButton = styled.button` display: flex; align-items: center; justify-content: center; border: none; border-radius: 1000px; color: white; background-color: #2f774d; transition: all 0.3s ease; font-weight: ${({ theme }) => theme.fonts.se..

XV6를 설치하는 운영체제 과제를 하기 위해 인텔의 x86 아키텍쳐를 구성해야 했다.여기서 잠깐 차이를 짚고 넘어가자면x86은 하드웨어 아키텍처이고, XV6는 소프트웨어(운영체제)이다. x86 아키텍처에서 XV6 운영체제가 실행된다고 이해하면 된다.보통의 Mac 유저라면 UTM이나 Parallels를 사용해 가상환경을 구성한 후 ubuntu 환경을 만들곤 하는데그렇게 구성한 ubuntu도 사실은 ARM 기반 아키텍처이기 때문에 일반적인 윈도우 환경, 즉 AMD64와는 차이가 있다.사진은 내가 utm에 ubuntu를 설치해 사용하는 모습이다.얘도 어차피 arm 기반이라 인텔의 x86과는 완전히 똑같지 않다.웬만하면 이걸로 쓰면 전부 되지만 이번 운영체제 과제 환경 구성은,,,, 안된다 ;;; Packag..