Hello Kitty Eyes Shut
본문 바로가기

분류 전체보기

 (128)
[Frontend] React Native에서 자연스러운 scroll fade 구현하기 - MaskedView 📑 들어가며동아리에서 React Native로 프로젝트를 진행하면서연도와 월을 선택할 수 있는 컴포넌트를 구현해야 하는 상황이었다. 디자인 시안은 위와 같았다.연도와 월 리스트는 각각 세로로 스크롤된다.한 화면에서는 약 6개의 항목이 보인다.가장 아래 항목은 은은하게 페이드아웃 되어야 한다. 그래서 처음엔 리스트 아래에 LinearGradient를 하나 깔고,그라데이션으로 가리는 방법을 생각했었다. 하지만 실제로 구현해보니, 여러 문제들이 있었다 ..😭글자만 자연스럽게 사라지는 게 아니라 배경까지 함께 흐려짐스크롤이 끝났을 때, 더 내려갈 항목이 없어도 그라데이션이 계속 남아있음특히 1월의 경우 0월 같은 건 없으니까 이게 마지막 요소일텐데,그렇다보니 계속해서 그라데이션이 남아있게 돼서 글씨가 잘 ..
[Frontend] React Native + ESLINT v9 Flat Config 목차 (OPEN)📑 들어가며🟥 MODULE_TYPELESS_PACKAGE_JSON 경고🟧 A config object is using the "extends" key 에러🟨 React version not specified 경고🟩 babel.config.js: 'module' is not defined🟦 React Hooks / Refresh가 Flat Config에서 동작 안 함🟪 lint 실행했는데 아무 규칙이 적용되지 않음⬛ 최종 설정 파일 📑 들어가며앞선 포스팅에서 알아봤듯이ESLint v9부터 기존의 .eslintrc는 정식 지원이 종료되고,새로운 Flat Config 방식 (eslint.config.js)을 사용해야 한다. 이번에 동아리에서 새 프로젝트를 시작하면서Expo..
[컴퓨터통신] 디지털 데이터를 신호로 목차 (OPEN)📑 들어가며🟥 Modulation (인코딩)🟧 디지털 전송 방식🟨 PCM (Pulse Code Modulation)🟩 디지털 신호를 아날로그로 변조하는 3가지 방법🟦 통신 속도를 높이는 방법📚 결론 📑 들어가며우리가 인터넷으로 메시지를 보내거나 전화를 하는 과정에서 실제로 전송되는 것은 0과 1의 디지털 데이터이다.하지만 이 디지털 데이터는 케이블이나 공기 중을 그대로 흐를 수 없기 때문에, 반드시 “신호”라는 물리적 형태로 바뀌어야 한다. 이번 포스팅에서는 디지털 데이터를 신호로 바꾸는 방법(변조), 아날로그 데이터를 디지털로 바꾸는 방법(PCM),그리고 통신 속도를 높이는 원리가 무엇인지에 대해서 하나씩 정리해보고자 한다. 🟥 Modulation (인코딩)앞선 ..
[컴퓨터통신] 네트워크 접속 기술 목차 (OPEN)📑 들어가며🟥 가입자 선로 (Subscriber Loop)🟧 무선 링크 (Wireless Link)🟨 이동통신 (Cellular Networks)🟩 고정 무선 통신 (Fixed Wireless)🟦 무선 가입자망 (Wireless Local Loop)🟪 위성 통신 (Satellite Networks)⬛ 단거리 무선 통신 (PAN / LAN / WAN 비교)📚 결론 📑 들어가며우리가 인터넷에 접속하는 방식은 매우 다양하다.같은 인터넷이더라도 어떤 선로를 쓰는지, 어떤 장비를 거치는지,얼마나 먼 거리까지 전송해야 하는지에 따라 기술이 완전히 달라진다. 따라서 오늘의 포스팅에서는 가입자 선로(xDSL)부터 무선 링크, 이동통신(Cellular), 위성 통신,그리고 PAN·L..
[컴퓨터통신] 노드, 링크, 신호 목차 (OPEN)📑 들어가며🟥 노드(Node)🟧 노드 내부 구조🟨 링크(Link)🟩 신호(Signal)🟦 주파수와 파장📚 결론 📑 들어가며네트워크를 공부하다 보면 ‘노드(node)’, ‘링크(link)’, ‘신호(signal)’ 같은 단어가 계속 등장한다.하지만 막상 이게 구체적으로 무엇을 가리키는지,그리고 서로 어떻게 연결되어 동작하는지는 직관적으로 떠올리기 어려운 경우가 많다. 따라서 이번 포스팅에서는 노드, 링크, 신호란 무엇인지를 시작으로,단말과 스위치의 역할, 노드 내부에서 데이터가 어떻게 움직이는지,0과 1이 어떻게 실제 전파나 전선 위의 신호로 바뀌는지를 정리해보고자 한다. 🟥 노드(Node)네트워크를 하나의 커다란 그래프로 본다면,노드(node)는 그 그래프 위에 찍..
[컴퓨터통신] 네트워크의 성능 평가 기준 목차 (OPEN)📑 들어가며🟥 대역폭(Bandwidth) ― 단위 시간 동안 보낼 수 있는 데이터의 양🟧 지연 시간(Delay) ― 데이터가 도착하는 데 걸리는 시간🟨 네트워크 파이프 개념: Delay × Bandwidth🟩 망 관점 vs 사용자 관점🟦 병목📚 결론 📑 들어가며인터넷을 사용할 때 “빠르다”, “느리다”라는 표현을 자주 쓰는데, 이러한 인터넷 성능은 무엇으로 결정될까? 많은 사람들이 단순히 “속도”라고 생각하지만,사실 네트워크 성능은 대역폭과 지연 시간이라는 두 가지 핵심 요소로 평가할 수 있다. 따라서 이번 포스팅에서는 대역폭, 소요 시간(지연 시간), 그리고 네트워크가데이터를 어떻게 처리하는지에 대해서 단계별로 알아보고자 한다.. 🟥 대역폭(Bandwidth) ―..
[Frontend] 3D 로고 페이드인 최적화 목차 (OPEN)📑 들어가며🟥 초기 페이드인 코드🟧 수정 과정🟨 결과 화면 📑 들어가며나는 지금 스크롤을 내리면서 내 소개와 프로젝트 등을 볼 수 있는개인 포트폴리오 사이트를 만드는 중이다. 그중에서도 가장 첫 번째 섹션인 히어로 섹션에서는이전에 블렌더로 3D 모델링했던 내 이름 로고를 렌더링해서 보여주고 싶었다 🤧 그리고 이때, 단순히 3D 모델을 올리고 끝나는 것이 아니라,기본적으로는 자동으로 살짝살짝 회전을 하고 있되,사용자가 마우스로 드래그하면, 그 회전을 사용자 입력에 따라 반영하고,마우스를 놓는 순간, 그 상태를 기준으로 다시 자동 회전이 이어지는 것을 원했다. 또한, 처음엔 사이트를 들어오는 순간 로고가 바로 등장하게 했더니 너무 부자연스러워서자연스러움을 위해 부드럽게 페이드..
[Frontend] 블렌더에서 모델 제작하고 웹으로 띄우기 목차 (OPEN)📑 들어가며🟥 블렌더로 제작한 모델🟧 Material Properties🟨 React Three Fiber 환경 구축🟩 블렌더 모델을 R3F로 가져오기📚 결론 📑 들어가며요즘 컴퓨터 그래픽스 수업을 들으면서 너무 재밌어서'혹시 지금 만들려고 하는 내 개인 웹 페이지에도 3D 모델을 넣을 수 있지 않을까?' 라는 궁금증이 생겼었다. 아직 프론트엔드 입문 중이었던 나는 모르는 것이 많았기에 ,,GPT 한테도 물어보고, 티스토리 등도 참고해봤더니보통 블렌더로 모델링한 후 Three.js로 웹에 올린다고 해서 바로 도전해보기로 했다 🤩 🟥 블렌더로 제작한 모델나는 간단하게 내 이름을 모델링해보고 싶었고, 결과물은 다음과 같다. 굳이 보여주는 이유는 그냥 자랑하고 싶었다 ..

티스토리툴바