티스토리

인생은 비동기

검색하기

블로그 홈

인생은 비동기

blog.asyncwaiter.com/m

내 응답은 언제 올까요

구독자: 16

방명록 방문하기

주요 글 목록

React 배열에서 왜 key를 지정해줘야할까? (+ React Fiber, 고급테크닉) 들어가며React를 개발하다 보면 배열 요소에 key를 넣어야한다는 에러가 뜨곤합니다. 과거엔 단순히 배열에는 key를 넣어야 리렌더링이 발생하지 않는다 정도를 규칙으로 알고 있었습니다. 하지만 이 key의 존재 이유와 동작 방식을 깊이 이해한다면, React의 성능 최적화와 렌더링 과정을 좀 더 효과적으로 다룰 수 있습니다! 리액트 렌더링은 언제 일어날까요?우선 렌더링이 언제 일어나는지부터 알아보겠습니다. React에서 렌더링은 크게 두 가지의 경우에 발생합니다. 바로 최초 렌더링과 리렌더링인데, 이게 React 렌더링의 전부입니다. 최초 렌더링 (Initial Rendering)컴포넌트가 처음 마운트될 때 발생Virtual DOM 트리를 처음으로 생성실제 DOM에 전체 트리를 반영리렌더링 (Re-re.. 공감수 0 댓글수 0 2025. 1. 19.
번들러란? Vite, Webpack 뭐가 다를까? 들어가며현대 웹 개발에서는 번들러가 거의 모든 프로젝트에서 기본적으로 사용됩니다. 하지만 번들러가 정확히 어떤 역할을 하고, 왜 필요한지에 대해 깊이 고민해본 경험은 많지 않았던 것 같습니다. 이전 프로젝트에서도 Webpack이나 다른 도구를 사용했지만, 단순히 "그냥 번들링해주는 도구" 정도로만 생각하고 있었습니다.그러다 이번 프로젝트에서 Vite를 번들러로 선택하게 되었고, 이를 활용해 최적화 작업까지 진행하며 번들러의 중요성과 webpack과의 차이에 대해 제대로 알아보게 되었습니다. Vite는 Webpack과는 다른 방식으로 동작하며, 특히 빠른 개발 환경을 제공한다는 점에서 많은 개발자들이 주목하고 있는 도구입니다. 이번 기회를 통해 Vite를 처음 사용해본 경험과 더불어, 번들러라는 도구 자체.. 공감수 2 댓글수 0 2025. 1. 14.
[2편] 3D 웹게임 렌더링 최적화: 초기 로드 시간 및 커버리지 개선 들어가며[1편] 3D 웹게임 렌더링 최적화에 이은 초기 로드 속도 및 커버리지 개선 방법을 이어 공유하고자 합니다. 1편에서 정리한 대로, scripting 시간은 물리연산 최적화, LOD 적용으로 개선할 수 있었지만, 여전히 사이트 접속 시 초기 로드 시간이 다소 오래걸리는 문제는 해결되지 못했습니다. 이를 해결하기 위해서 어떻게 진단을 했고, 어떤 최적화 작업들을 수행했으며 결과는 얼마나 개선되었는지를 공유하고자 합니다. 저와 같은 문제에 부딪힌 분들께 도움이 되었으면 좋겠습니다. 성능 저하 원인 파악 초기 성능 분석 결과, 다음과 같은 문제점들이 발견되었습니다:LCP(Largest Contentful Paint)가 6초로 매우 느린 로딩 시간코드 커버리지가 약 65%로, 실제 사용되지 않는 코드가 .. 공감수 1 댓글수 0 2024. 12. 21.
[1편] 3D 웹게임 렌더링 최적화: 33FPS -> 61FPS 성능 개선 사례 들어가며기본 게임 기능 개발을 완료하고, Chrome DevTools Performance 탭으로 측정해 본 결과는 암담했습니다. JavaScript 실행 시간이 20.9초로 매우 높았고, 큰 번들 사이즈로 인한 초기 로딩 지연이 있었습니다. JavaScript scripting이 전체 실행 시간의 59.6%를 차지했고, 커버리지 분석 결과 상당수의 미사용 코드가 발견되었습니다.이러한 성능 이슈는 게임플레이에 직접적인 영향을 미쳤습니다. 목표했던 60fps의 부드러운 애니메이션이 30fps 이하로 떨어지는 프레임 드랍 현상이 발생했고, 유저의 게임 경험을 크게 저해했습니다. React Three Fiber, Rapier 물리엔진이 결합된 복잡한 3D 환경에서 이러한 성능 문제를 해결하기 위해 다양한 최적.. 공감수 1 댓글수 0 2024. 12. 18.
멀티플레이 게임에서 물리 연산, 어디서 처리하는 게 맞을까? 들어가며멀티플레이 게임 개발에서 물리 연산과 캐릭터 동작을 어디에서 처리할지를 결정하는 건 프로젝트의 핵심 과제 중 하나였습니다. 초기 설계에서는 백엔드가 모든 물리 연산을 담당하는 구조를 선택했습니다. 이 방식은 데이터 신뢰성과 치팅 방지 측면에서는 유리했지만, 구현 과정에서 여러 한계에 부딪혔는데요.이러한 문제를 해결하기 위해 프론트엔드가 물리 연산을 처리하고, 백엔드는 데이터 검증과 동기화에 집중하는 구조로 전환하게 되었습니다. 이 글에서는 해당 논의의 과정과 최종 결정을 내리게 된 이유를 공유하려 합니다. 백엔드에서의 물리 연산의 한계에 부딪힌 이유[1] 맵 구성과 충돌 판정의 복잡도- 맵 데이터 수작업 문제:프론트엔드에서는 3D 모델링 파일인 GLB를 React Three Fiber의 useGL.. 공감수 3 댓글수 1 2024. 11. 17.
가상 DOM과 실제 DOM의 차이: 정말 성능 향상이 있을까? 들어가며React는 가상 DOM 개념을 도입하여 DOM 업데이트 성능을 향상시킵니다. 실제 DOM과 비교했을 때, 가상 DOM은 UI의 변화 관리를 좀 더 효율적으로 처리할 수 있도록 돕습니다. 그러나 최근 모던 리액트 딥다이브를 읽고, 이러한 최적화가 항상 빠른 속도를 보장하지는 않는다는 사실을 알게되었습니다. 직접 실험한 결과에서도 큰 차이를 느끼기 어려웠을 정도인데, 과연 가상 DOM과 실제 DOM의 차이는 왜 중요하며, 어떤 상황에서 유용할까요? 실제 DOM과 가상 DOM의 역할브라우저의 DOM(Document Object Model)은 화면에 표시되는 최종 결과물입니다. 실제 DOM을 변경할 때마다 브라우저는 이를 렌더링하고, 새로 추가하거나 수정된 요소를 반영합니다. 이러한 과정은 복잡한 트.. 공감수 1 댓글수 1 2024. 11. 10.
palloc과 malloc의 차이점: 메모리 할당 구조 이해하기 들어가며Pintos 프로젝트의 4주간 여정이 마무리되었습니다. 흥미로운 부분도 많았지만, 모르는 것이 너무 많아 OS라는 깊은 바다에 빠져 허우적대는 기분이 들기도 했습니다. 그래서 4주 전으로 돌아가 다시 한 번 해보면 더 많은 것을 배울 수 있었을 텐데 하는 아쉬움도 남습니다. 지금이라도 배운 내용을 정리하며 완전히 내 것으로 만들기 위해, 이번 시간을 활용해 메모리 할당에 대해 글을 작성해보려 합니다. 특히, 처음 Virtual Memory 과제를 접하면서 malloc과 palloc의 개념이 혼동되었던 경험을 다루어 보겠습니다. 위의 함수는 page를 초기화하는 함수입니다. 처음 빨간 줄의 코드를 보았을 때, page는 palloc_get_page()으로 할당하는게 맞다고 생각했지만, malloc.. 공감수 2 댓글수 0 2024. 11. 3.
로그인 상태 유지에 대한 모든 것 : 세션과 JWT 차이 및 장단점🤔 들어가며브라우저에서 사용자의 로그인 상태를 유지하는 방법에는 크게 두 가지가 있습니다. 세션(Session)과 JWT(Json Web Token)입니다. 이 두 방식의 차이점은 무엇일까요? 그리고 SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링) 환경에서 각각 어떤 방식이 적합할까요?또한, 발행된 토큰을 브라우저에 저장할 때 어떤 제약이 있는지도 살펴보겠습니다. 쿠키와 Web Storage는 어떤 차이가 있으며, 각각의 보안 문제는 무엇인지 알아보겠습니다. 이 글은 DFS(개념을 하나씩 깊이 파고들어가는)방식으로 진행될 예정입니다. Stateless HTTP로그인 상태를 유지하는 기술이 왜 필요한지 이해하려면, 먼저 HTTP가 어떤 특성을 가지는지 살펴볼 필요가 있습니다. HTTP는 무상태.. 공감수 2 댓글수 3 2024. 9. 16.
정글 4주차 회고, 꿈과 현실 기술 블로그 글이 아닌 개인 회고는 블로그에 잘 올리려 하지 않는 편인데, 이번주는 꽤나 스트레스가 심한 주였어서 이 생각들을 미래에 보면 어떤 기분을 가질까 싶어 작성해본다. 나는 나이마다 꼭 해야하는 일이나 성취같은걸 믿지 않는 편이다. 그래서 내가 아직까지 꿈을 쫓으며 살고 있는 것인지도. 근데 생각해보면 그렇지 않나? 이 세상에 꼭 그래야하는게 뭐가 있나? 내 인생인데 남의 생각, 사회의 생각 그런걸 따라서 내가 행복할 수가 있나? 내 인생에는 내 생각, 내 결정, 내 마음이 가장 중요하다고 생각하는 편이다. 그러나 이런 가치관에 의심이 자라나는 한 주였다. 꿈을 쫓아다니다보면 나와 같이 꿈을 쫓고 있는 사람들과 어울리게 된다. 어쩌다보니 이제 나는 꿈을 찾는 그룹에서 항상 최고령이 되었다. 실제.. 공감수 5 댓글수 0 2024. 8. 31.
단방향 암호화와 키 파생 함수: 안전한 비밀번호 관리의 핵심 들어가며사실 지금까지 프론트엔드를 작업하면서 Https에 의존하며, 암호화에 대해 깊이 고민해본 적이 없었습니다. 그러나 이번에 정글에서 백엔드 부분도 개발을 맡게 되고, 처음으로 암호화에 대해 진지하게 고민을 하게 되었습니다. 이 글에서는 비밀번호 암호화에 적합한 방식, 사용가능한 라이브러리, 그리고 암호화가 이루어지는 원리에 대해 정리해보았습니다. 단방향 암호화비밀번호를 암호화 할 때는 단방향 암호화를 진행해야 합니다. 그런데 단방향 암호화는 어떤 뜻일까요?단방향 암호화는 데이터를 암호화할 때, 해당 데이터를 다시 복호화할 수 없는 방식의 암호화 기법입니다. 이는 일반적으로 해시 함수를 사용하여 이루어지며, 해시 함수는 입력 데이터를 고정된 크기의 해시 값으로 변환합니다. 이 변환 과정은 비가역적이며.. 공감수 0 댓글수 0 2024. 8. 18.
1주차 회고: 찬찬히 나를 돌아보는 시간 모래성은 언젠가 무너진다 개발을 하면서 나는 종종 파도 앞의 모래성을 쌓는 듯한 기분이 들었다.국비로 개발을 시작하고 운좋게 바로 회사에 입사할 수 있었지만, 사실 나는 프레임워크의 사용법을 익혀 그걸 단순히 키보드로 쳐내는, 개발자가 아닌 기능인에 가까웠다. 물론, 프레임워크만 잘 다뤄도 회사에서 일하는 데는 지장이 없었다.하지만 그 프레임워크를 뛰어넘는 복잡한 문제 해결을 위해선 사고의 기반이 필요한데, 나의 기반은 파도 한 방이면 사라질 수 있는 모래성처럼 불안했다. 내가 사고할 수 있는 기반이 없고, 사용하는 프레임워크와 라이브러리에 스스로를 제한하고 있다는 느낌을 지울 수 없었다. 하지만 난 그런 기능인에 머무르고 싶지 않았다. 좀 더 복잡한 문제를 해결하는 사람이 되고 싶었고, GPT가 간단.. 공감수 3 댓글수 0 2024. 8. 11.
Python Nginx로 배포하고 Certbot으로 HTTPS 도메인까지 연결하기(+EC2) 들어가며Nginx로 파이썬을 배포하고 Certbot을 사용하여 Https 도메인 연결을 설정하는 설명하려 합니다. 정글에서 2박3일로 진행한 유사 해커톤 서비스😅를 배포했던 방법을 정리하는 글입니다. 파이썬 배포 및 AWS 콘솔을 활용하지 않은 Https 연결과 관련된 글이 없어 배포하는데 어려움을 겪었기에, 그런 분들을 위한 글이기도 하고, 저 스스로도 다시 하나 하나 뜯어보며 체화시키기 위한 개념 설명 및 적용 글입니다. NginxNginx란 무엇일까요? chatGPT를 통해 확인해보면 아래와 같이 나옵니다.Nginx는 웹 서버 소프트웨어로, HTTP 서버뿐만 아니라 리버스 프록시, 로드 밸런서, 메일 프록시 등의 역할을 할 수 있습니다. 높은 성능과 낮은 메모리 사용량을 자랑하며, 특히 정적 콘텐.. 공감수 1 댓글수 0 2024. 8. 9.
Next14 로컬폰트(LocalFont) 로딩으로 인한 LCP 문제 개선하기 들어가며웹 성능을 최적화하는 과정에서 중요한 측면 중 하나는 효율적인 폰트 로딩입니다. 이 글에서는 비효율적인 폰트 로딩으로 인해 발생한 LCP(Largest Contentful Paint) 문제를 해결하는 과정을 안내합니다. 다양한 폰트 형식 간의 차이점, 서브셋 사용의 장점, 그리고 이러한 개선 사항이 Next.js 14 버전을 사용하여 어떻게 구현되었는지 살펴보겠습니다. 문제 현상처음 성능 분석에서 웹사이트의 폰트 로딩에 큰 지연이 발생한다는 것을 확인했습니다. 아래의 성능 분석 스크린샷에서 볼 수 있듯이, LCP가 약 7초에 달해 전체 사용자 경험에 큰 영향을 미쳤습니다. 이러한 지연의 주원인은 비효율적인 폰트 파일 로딩이었습니다. 원인 분석 및 해결 과정부끄럽지만 저는 폰트 확장자에 대해 제대로.. 공감수 0 댓글수 0 2024. 6. 24.
리액트 네이티브 테스팅: Maestro E2E 테스트와 유닛 테스트 이 글에선처음 접해보는 리액트 네이티브에서는 어떻게 테스팅을 진행해야할까 고민했고, 참여하고 있는 번역 활동에서 리액트 네이티브 테스팅에 관한 공식 문서를 번역하기도 했습니다. 이에 기초하여 리액트 네이티브에서 E2E테스트와 유닛테스트를 하는 방법을 소개하고자 합니다. 자동화 테스트 라이브러리 비교부터 Sentry, Maestro, Appium 중 Maestro을 선택한 이유, 실제 예제 코드 그리고 유닛 테스트 작성까지의 과정을 다룹니다. 자동화 테스트 라이브러리 비교리액트 네이티브 앱의 E2E 테스트를 위해 여러 라이브러리를 고려해볼 수 있습니다. 그 중 저는 Sentry, Appium, Maestro를 표로 비교해보겠습니다. SentryAppiumMaestro주 용도애플리케이션 모니터링 및 오류 추.. 공감수 0 댓글수 0 2024. 5. 31.
React Native에서 딥링크 처리 및 푸시 알림 최적화하기 이 글에선React Native에서 딥링크 처리와 푸시 알림 기능을 최적화하는 방법에 대해 알아볼 것입니다. 특히, Firebase의 Messaging과 Notifee를 함께 사용한 이유에 대해서도 다루고 있습니다. 딥링크 설정, 푸시 알림 설정, 그리고 최적화된 코드 구조를 통해 효율적인 리액트 네이티브 link routing과 푸시 알림을 구축하는 방법을 설명해보겠습니다. 1. 딥링크 처리하기딥링크는 사용자에게 특정 콘텐츠를 제공하기 위해 앱의 특정 화면으로 직접 이동할 수 있도록 도와줍니다. React Native에서 딥링크를 처리하려면 @react-navigation/native의 LinkingOptions를 설정하고, 앱이 열릴 때 해당 URL을 처리하도록 구성해야 합니다. 우선, 딥링크를 설정.. 공감수 0 댓글수 0 2024. 5. 28.
창업하기전 꼭 고려해야할 것들(=쉬운게 없다) 원래 오늘은 테크글을 쓰려고 했지만, 2월 회고겸 복잡하고 속상한 마음을 정리할 겸, 일상글(MoA프로젝트 상황)을 쓴다. MoA 작년 가을쯤 시작했었던 프로젝트, 모아가 드디어 개발이 끝이 났다. 하지만 출시는 할 수 있을지 모르겠다. 너무 너무 마음이 아프고 속상하다. 가을부터 설문 조사, 기획, UI/UX를 끝내고 제대로 된 개발은 1월부터 진행했다. 사실 이 프로젝트는 내가 멱살을 끌고 가는 중이었다. 분명 같이 함께 해나가고 싶어서 시작했는데, 어쩌다보니 혼자 기획하고, 요구사항을 짜고, API 상세 명세까지도 도맡게 되었고, 다들 회사일과 병행하기 어렵다는 말로 나가게 되었다. 그러다 1월에 백엔드를 담당하게 된 귀인들을 만나서 여기까지 개발을 끝낼 수 있게 되었고, 이제 출시만을 앞두고 있었.. 공감수 2 댓글수 0 2024. 3. 10.
[ReactNative] react-query refetch가 안되는 문제와 해결 방법 문제 상황 리액트 쿼리는 기본적으로 화면이 focus될 경우, refetch되는 속성을 가지고 있다. 그래서 화면을 이탈했다 돌아오면, stale시간과 상관없이 다시 새로운 데이터로 fetching 되게 된다. 하지만 리액트 네이티브에선 화면의 focusing 여부를 알지 못했다. 그래서 아무리 다른 페이지에 갔다 돌아와도, 데이터가 변경이 되어도, 리액트 쿼리는 계속해서 이전의 데이터만을 보여주게 된다. 이를 어떻게 해결할 수 있을까? 해결 방법 직접 custom hook을 구현하는 것으로 해결할 수 있다! 스크린이 focus 될 때마다, react query의 refetch 함수를 실행시키는 훅을 만들 수 있다. 커스텀 훅에 원하는 refetch 함수를 파라미터로 넘겨주도록 만들어주면 된다. impo.. 공감수 2 댓글수 2 2024. 3. 6.
1월 회고, 생활습관 모임/MOA🎁 1월에 목표한 것 생활 습관 모임인 FOCUS의 공동 목표는 일찍 일어나는 습관과 꾸준한 운동이었다. 난 이번 기회로 [1] 재미있게 즐길 수 있는 운동 취미를 만들고, 매번 실패했던 [2] 미라클 모닝에 다시 도전해보고 싶었다. 그리고 이러한 생활 습관을 바탕으로 내가 이루고 싶었던 것은 [3] MoA 개발 진척도를 향상 시키고, 좀 더 [4] 깊어진 프론트엔드 지식을 가지는 것이었다. 그렇다면 현실은? 실제로 일어난 결과 [1] 생활 습관부터 돌아보자! 결론부터 말하자면 반은 성공, 반은 실패다. 운동은 코난 덕분에 클라이밍이라는 새로운 종목을 시도해보게 되었는데, 완전히 빠져들어서 즐겁게 운동을 하고 있다. 나는 성취에 대한 강박관념이 있는데, 이는 운동에서도 크게 다르지 않다🥲 만약 어제 뛴 러닝.. 공감수 5 댓글수 1 2024. 1. 31.
[ReactNative] ios .env파일 수정 후 적용이 안되는 현상 XCode -> Product -> Clean Build Folder 후, 재빌드하면 해결됩니다⭐️ 공감수 1 댓글수 0 2023. 12. 15.
React Native에서 웹뷰(react-native-webview)를 사용할 때, 고려해야할 것들(#삽질, #Next.js) 들어가며 이 글은 리액트 네이티브에서 웹뷰만으로 서비스 개발을 하다가 큰 문제에 부딪혀 프레임워크 자체를 변경하게된 일을 작성한 회고록입니다. Web-View만으로 리액트 네이티브 개발을 생각중인 분들에게 도움이 될 것이라 생각합니다. 아래부턴 간결한 문장을 위해 평어로 진행하겠습니다. Web-View 개발을 선택한 이유 내가 만들고자 하는 서비스는 소셜로그인으로 회원가입이 되고, 카카오톡처럼 핸드폰의 연락처를 가져와 친구를 만들고, 쇼핑에 결제까지 되는 서비스이다. 그래서 SSR, CSR 등 각 페이지에 맞는 렌더링 기법을 선택할 수 있는 Next.js를 활용하면, 빠른 속도 경험을 유저에게 제공할 수 있을 거라 생각했고, Next.js를 웹 프레임워크로 선택했다. 이렇게 web을 만들고, 해당 web.. 공감수 6 댓글수 0 2023. 12. 14.
프론트엔드 테스트는 어디서부터 어디까지, 어떻게, 꼭 해야할까? (+Jest, Puppeteer, Cypress) 들어가며 이 글에선 프론트엔드의 테스트 코드에는 어떤 것들이 있으며, 테스트 코드 작성법, 좋은 테스트란 어떤 것인지, 나아가 리액트에서는 어떻게 적용할 수 있는지를 설명할 것입니다. 저와 같은 문제를 겪은 분들께 도움이 되는 글이 될 것이라 생각합니다. 간결한 문장을 위해 평어체로 진행하겠습니다. 내가 겪은 문제 나는 테스트 코드를 작성하려고 할 때면, 어디까지 Mocking을 해야하는지, 파라미터 테스트 범위는 어느 정도가 적합한지, 테스트 단위를 얼마나 나눠야하는지 막막했다. 그리고 이렇게 짜는게 맞는건지, 생각할 수 있는 케이스는 다 해본 것 같은데도 불구하고 테스트 커버리지가 높지 않아 고민하기도 했다. 그러다 최근 우테코에 지원해 4주간의 프리코스를 진행 중인데, 여기서 또 테스트와 만나게 되.. 공감수 2 댓글수 5 2023. 11. 2.
OAuth 로그인 요청의 주체는 어디일까? (클라이언트(React)? 서버(Spring)?) 들어가며 이번에 프로젝트를 진행하면서 서버측 친구와 의견이 맞지 않았던 적이 있다. 바로 OAuth 요청의 주체가 누가 되느냐였다. 나는 클라이언트에서 해야한다는 입장이었고, 서버측 친구는 서버에서 요청을 해야한다는 입장이었다. 서버는 spring으로 개발을 하고 있는데, spring security의 OAuth를 제대로 쓰려면 서버에서 진행을 해야한다는게 친구의 주장이었다. 나도 초반에는 오히려 OAuth 서버 요청을 프론트에서 노출하지 않고, 우리 서버로 한 번 감싸서 진행하는게 더 안전할 것 같다는 생각에 동의를 하고 진행을 했었다. 하지만 뭔가 개발을 해나갈수록 끼워맞추기로 개발을 해나가게 되는 느낌이었다. 서버가 주체가 되면 끼워 맞추기가 되는 이유? 그 이유는 첫 번째, [1]프론트에서 우리측.. 공감수 1 댓글수 1 2023. 10. 5.
[Agile, 스토리포인트] 일정을 추정하는 것이란 얼마나 어려운 일인가. 들어가며 이 글은 애자일 방법론을 팀에 도입했으나 생각대로 되지 않은, 저의 이야기를 담은 일종의 회고록이자 스토리 포인트(story point)에 대한 개념을 정리한 글입니다. 저처럼 스토리 포인트를 제대로 알지 못하고 쓰고 계셨던 분들에게 도움이 될 것이라 생각합니다. 간결한 문장을 위해 평어체로 진행하겠습니다. 팀이 겪은 문제 부끄럽지만 프로젝트를 진행한지 6주 째, 지금껏 한 번도 제대로 스프린트의 태스크를 전부 끝내본 적이 없다. 처음에는 욕심을 많이 냈던 것 같다. "이 정도는 할 수 있을거야" 라는 마음으로 제대로 된 팀의 velocity(팀의 생산성, 추후 설명 예정) 측정도 하지 않은채로 개개인의 일감을 관리했다. 하지만 이렇게 6주가 진행되자 문제가 보이기 시작했다. 뭔가 일은 하는 것.. 공감수 1 댓글수 2 2023. 9. 25.
[React Native] WebView 적용하는 방법(localhost 안될때,nsurlerrordomain) WebView를 어떻게 App에서 적용할 수 있는 건지 항상 궁금했었는데, 이번 프로젝트를 통해서 알게됐다. WebView란 웹 프로젝트 그 자체를 그냥 앱에서 띄우는 것이다. Naver도 WebView로 만들어진 앱으로 유명한데, 웹뷰는 즉, naver.com을 치면 나오는 화면을 그대로 앱에서 보여주는 것이다. React Native에서 적용하는 방법은 엄청 간단하다! import React from 'react'; import {WebView} from 'react-native-webview'; export default function Home() { return ( ); } 이렇게 해주면? 나도 네이버앱 완성이다!ㅋㅋㅋㅋ 다만 WebView를 보여줄 때, 고려해야할 점은 바로 Stack이다. A.. 공감수 0 댓글수 0 2023. 5. 19.
[Network] 5계층 Transport Layer(+TCP, UDP차이) 전세계에서 유일하게 특정지을 수 있는 컴퓨터 주소는 바로 IP이다. 그럼 그 안에서 프로그램을 특정지을 수 있는 번호는 무엇일까? 그것은 바로 PORT 번호이다. 참고로 이 둘을 합친 것을 Socket Address라고 한다. 그리고 Transport Layer에서의 주소는 포트번호로 쓰인다. 무슨 말인지 자세히 알아보자! 우리는 운영체제의 구멍(포트번호)을 통해서 그 프로그램과 대화를 시도한다. 하나의 컴퓨터 안에 여러 개의 소프트웨어가 있을 것이고, 여기서 운영체제는 어느 소프트웨어로 전송할지를 이 포트 번호(Transport Layer의 주소)를 보고 결정을 하게되는 것이다. TCP/UDP의 포트번호는 16비트로0~65,535안에 존재한다. 웹브라우저가 웹서버 접속할때 80번에 주로 접속하는데, 이.. 공감수 0 댓글수 0 2021. 11. 17.
[Network] Network Layer에 대한 깊은 이해하기(+IPv4, NAT, PAT, UDP, TCP) 저번 2계층에 이어 3계층 네트워크 레이어중에 가장 유명하고 인터넷의 근간이 되는 IP네트워크에 대해 알아보려한다. IP네트워크는 위처럼 패킷 단위로 전송된다. 1, 2, 3, 4의 순서로 패킷이 전송되지만 속도에 따라 도착하는 순서는 위처럼 달라질 수 있다. 이 순서를 맞춰주는 것이 TCP이고, UDP는 순서를 맞춰주지 않는다. TCP를 쓴다면 1,2,3,4로 도착할 것이고 UDP를 쓴다면 위의 그림과 같은 순서로 도착을 할 것이다. R들은 Router로서 특정 포트에서 받은 패킷을 다른 특정 포트에 전달한다. 라우터의 인터페이스란(inteface) 라우터 장치에서 줄이 꽂혀있는 포트를 뜻한다. 네트워크 계층에는 가장 기본이 되는 IP외에도 이를 도와주는 IGMP, ICMP, ARP 등이 있다. 게임을.. 공감수 0 댓글수 0 2021. 11. 11.
[Server] 2계층 MAC Layer (CSMA/CD, CSMA/CA 개념정리) OSI 2계층의 데이터링크는 LLC(Logical Link Control)와 MAC Layer(Media Access Control)로 나뉘게 된다. 그 중 MAC 계층의 네트워크 방식에 대해 알아보자. Channeliztion 프로토콜은 주파수를 이용한 복잡한 방법, 물리계층에 가까운 기법이다. Controlled-access 프로토콜은 소프트웨어적인 기법으로 예약방식 등이 있다. Random-access 프로토콜은 통상적으로 가장 많이 쓰이는 프로토콜이다. Random access 방식을 쉽게 설명해보자면 수많은 사람들이 동일 시간대에 인터넷을 쓴다. 하지만 동시에 그 많은 사람들의 데이터를 처리할 수 없기에 사람들이 데이터를 보낼 때마다 수학적으로 구간대를 주고 그 안에서 수가 배정되어 전송되는 통.. 공감수 2 댓글수 0 2021. 11. 10.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.