HA젠옹의 프리랜서의 일상

오늘날 빠르게 변화하는 디지털 세계에서 작업 공간을 효율적으로 확장하는 능력은 생산성을 크게 향상하고 멀티태스킹 능력을 향상시킬 수 있습니다. DisplayLink 기술은 집에서 일하든, 사무실에서 일하든, 게임 세션을 위한 명령 센터를 설정하든 상관없이 여러 디스플레이를 Mac에 연결할 수 있는 원활한 방법을 제공합니다. DisplayLink 사용을 고려해야 하는 이유를 자세히 설명하고 Mac에서 이를 설정하는 방법에 대한 간단한 가이드를 알려드리겠습니다. DisplayLink를 사용하는 이유 다중 디스플레이 지원: DisplayLink 기술은 Mac에 다중 모니터 연결을 지원하여 데스크탑을 여러 화면으로 확장합니다. 사용 편의성: DisplayLink의 주요 장점 중 하나는 플러그 앤 플레이 기능입니..

JavaScript 개발 환경에서 패키지 관리자는 프로젝트 설정, 모듈 관리 및 효율적인 패키지 설치를 촉진하는 데 중요한 역할을 합니다. 가장 유명한 패키지 관리자 중에는 yarn과 npm(노드 패키지 관리자)이 있으며 각각 고유한 기능과 사용 사례가 있습니다. 장단점을 살펴보기 전에 yarn과 npm이 무엇인지 간략하게 알아보겠습니다. Yarn과 Npm은 무엇인가? Npm: npm은 2010년에 도입된 Node.js의 기본 패키지 관리자입니다. 이는 개발자가 패키지를 쉽게 공유하고 사용할 수 있도록 방대한 JavaScript 패키지 저장소를 제공합니다. npm은 Node.js 설치와 함께 번들로 제공되어 프로젝트 내에서 패키지를 관리하기 위한 포괄적인 CLI를 제공합니다. Yarn: yarn은 당시..

서론 끊임없이 진화하는 웹 개발 세계에서 React는 사용자 인터페이스 구축을 위한 가장 인기 있고 강력한 JavaScript 라이브러리 중 하나로 부상했습니다. 2013년 Facebook에서 개발한 React를 사용하면 개발자는 페이지를 다시 로드하지 않고도 데이터를 변경할 수 있는 대규모 웹 애플리케이션을 만들 수 있습니다. 주요 목표는 빠르고 확장 가능하며 단순하다는 것입니다. React를 처음 접하거나 개발 툴킷에 React를 추가하는 것을 고려하고 있다면 이 가이드는 React가 무엇인지, React를 설치하는 데 필요한 프로그램은 무엇인지, 설치 방법 및 React 파일을 생성하는 방법을 안내합니다. 리액트란 무엇인가요? React는 사용자 인터페이스 구축을 위한 선언적이고 효율적이며 유연한 ..

뻘소리를 작성하기 위한 곳이라 굳이 신경은 안쓸 것 같은 글입니다. 이번에 개인적인 사정으로 기존에 사용하던 작업용 컴퓨터를 보내고 새로운 컴퓨터를 얻게 되어 때마침 잘 되었다고 생각하여 초기 세팅 관련하여 글을 작성해볼려고 합니다. 아마 당장 세팅을 위해 React-Native와 React로 시작할 것 같으며, 추가적으로 제가 개발을 진행할 때 사용하는 프로그램 툴 관련하여 소개하지 않을까 싶어요. 이런식으로 그저 하고 싶은 말을 쓸려고 만든 카테고리라 크게 신경 안쓰셔도 될 것 같아요...

ReactNative에 대한 캘린더 관련 라이브러리들은 다양하게 존재합니다. 하지만 일반적인 캘린더 형식으로 버튼 클릭시 이전달과 다음달을 표기 되는 캘린더들이 아닌 이번에는 가져온 라이브러리는 슬라이드 형식으로 구성된 라이브러리를 가져왔습니다. 그렇다면?? 해당 캘린더를 이용하여 무엇을 할 수 있으며, 기존 캘린더들과 다른 점과 좋은점에 대해 이야기를 해보겠습니다. 주요 특징들 날짜 선택: 단일, 다중 및 범위 날짜 선택을 지원합니다. 사용자 지정: 앱 디자인에 맞게 색상, 텍스트, 스타일에 대한 광범위한 사용자 지정 옵션을 제공합니다. locale 지원: 로케일 지원이 내장되어 있어 다양한 언어와 지역에 쉽게 적응할 수 있습니다. 경량: 가볍고 효율적으로 설계되어 여러 장치에서 원활한 성능을 보장합니..

IOS Xcode 15.3 버전 현재 해당 문제로 인하여 IOS 실행이 안되시는 분들을 위해 해결방안에 관련하여 전달해보고자 합니다. 갑자기 해당 이슈로 앱이 실행이 되지 않아 무엇이 문제일까? 알아보니 Xcode 15.3 버전으로 업데이트가 되며 실행 문제가 발생하였습니다. 허나 수많은 작업자들로 인하여 해당 이슈 관련하여 1시간전에 올라온 해결방안을 알리고자 작성합니다. 해결 방식은 Xcode로 해당 프로젝트를 실행 후 Pods 파일을 여신 뒤 Pods/FlipperTransportTypes.h에 9번째줄 #include 를 추가 시키면 됩니다. 자세한 내용은 해당 링크를 참고해주세요. upgrade xcode 15.3 run error · Issue #43335 · facebook/react-nat..

이전 글에서 React Native Calendars 라이브러리를 활용한 캘린더를 구현하는 글을 작성하였습니다. 이번에는 제가 직접 순수 React Native 코드로 활용하여 캘린더 구현 방법에 대해 작성할려고 합니다. 이렇게 한번 작성하는 이유는 이전글을 보고 오신 분들을 아시겠지만, 우선적으로 커스텀에 대한 불편함과 공휴일을 표기하기 위해 결국 해당 라이브러리 또한 직접 코드를 작성해야한다는 점 때문에 문득 생각이 들었습니다. 그렇다면? 결국 해당 라이브러리 분석할 시간에 차라리 직접 만들어서 사용하는게 더 효율이 있지 않을까? 그래서 이번 글에서는 React Native를 사용하여 캘린더를 직접 구현하는 방법에 대해 설명해볼려고 합니다. 초기 상태 설정 우선 초기 상태를 위해 useState와 u..

React Native Calendars란? React Native Calendars는 React Native 애플리케이션을 위한 다양한 캘린더 컴포넌트를 제공하는 오픈 소스 라이브러리입니다. 월간 뷰, 주간 뷰, 날짜 마킹, 사용자 정의 일 컴포넌트와 같은 다양한 캘린더 레이아웃과 기능을 제공하여 쉽게 React Native Calendars라이브러리를 활용하여 캘린더를 만들어줍니다. React Native Calendars 사용 방법 설치 프로젝트에 React Native Calendars를 사용하기 시작하려면, 먼저 라이브러리를 설치해야 합니다. $ npm install react-native-calendars #or $ yarn add react-native-calendars Calendar 속성..

React Native 개발에서 안드로이드 기기의 하드웨어 백 버튼을 관리하는 것은 기초적인 작업입니다. 종종 백 버튼의 동작을 사용자 정의하고 싶어하며, 특히 앱의 실수로 나가는 것을 방지하거나 네비게이션 흐름을 제어하고 싶어합니다. 하나의 전형적인 흐름도를 볼땐, 사용자가 앱을 종료하기 전에 확인 메시지를 표시하는 것입니다. 그러나 이 동작을 특정 화면에서만 활성화되도록 올바르게 구현하려면, 특히 React Navigation과 같은 네비게이션 라이브러리를 사용할 때 미묘한 접근 방식이 필요합니다. 기초 이해하기 React Native의 BackHandler API는 안드로이드 기기에서 하드웨어 백 버튼 누름을 감지하고 처리할 수 있게 해줍니다. useEffect(() => { const backAc..

서론 웹 애플리케이션 개발에서 사용자 경험은 매우 중요합니다. 이를 위한 핵심 요소 중 하나가 바로 '라우팅'입니다. React Router는 React 애플리케이션에서 라우팅을 쉽고 효율적으로 관리할 수 있는 강력한 라이브러리로 React를 하게 된다면 우선적으로 사용하게 될 라이브러리이기도 합니다. 그렇기 때문에 오늘은 Router에 대해 얘기를 해보도록 하겠습니다. Router란? Router는 애플리케이션 내에서 네비게이션을 관리하기 위해 설계된 오픈 소스 라우팅 라이브러리입니다. React 애플리케이션에서 동적 라우팅 환경을 만들 수 있으며, 해당 내용은 URL 경로에 따라 다른 콘텐츠를 표시할 수 있습니다. 예를 들어 보겠습니다. 일반적으로 URL 주소는 작성한 파일명칭을 따라 표시가 되는걸 ..