Jacob's Development Blog

상태 관리라는 주제는 RN에 국한된 내용은 아니다. typescript를 기반으로 여러 방법을 복습겸 테스트 해보자. 더 나아가 아직 사용해보지 않는 recoil 라이브러리도 경험해 보자. 아래에서 배운 내용은 대부분 생략한다. 설치 및 할일 만들기 내비게이션, Hooks 다이어리 앱 만들기 React Native With Typescript Getting Start $ npx react-native init StateManagementInReactNative --template react-native-template-typescript 1. Redux Toolkit (RTK) typescript에서 redux를 사용하려고 하니, 너무 많은 타이핑과 구조체들이 필요해서 실제로 프로덕션 환경에서 도입하여 ..

Recoil 페이스북에서 만든 상태관리 라이브러리로, useState를 사용하는 것만큼 사용이 간단하면서 상태 관리를 효과적으로 할 수 있게 도와준다. Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components. 위에 말이 리코일의 핵심 개념으로 Recoil은 원자(atom, 공유 상태)에서 selector(순수 함수)를 거쳐 React Componenets로 흐르는 데이터 흐름 그래프를 만들 수 있게 해준다. 여기서 원자(atom)는 리액트 컴포넌트가 구독(subscribe)할 수 있는 상태 단위이..

Diary 앞에서 배운 내용을 토대로 다이어리 앱을 만든다. 배운 내용에 대한 것들은 많이 생략한다. 설치 및 할일 만들기 내비게이션, Hooks 참고 npx pod-install 기존에는 ios 폴더로 이동하여 pod install을 해주었다. 위 명령어는 동일한 기능이자만, 루트 폴더에서도 pod를 설치할 수 있게 해주는 명령어다. 설치 $ yarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context react-native-vector-icons info.plist 파일 업데이트(아이콘 관련) buil..

이전글 참고하기 2021.11.29 - [React] - [React Native] 설치 및 할일 목록 만들기 [React Native] 설치 및 할일 목록 만들기 첫 회사에서 RN으로 프로젝트를 했었으나, 사실 기억도 안나고 그 이후로 딱히 웹뷰 이외에 직접 RN을 사용하거나 코드를 작성할 일이 없어 새 실리콘 맥북에 적응도 해볼겸 공부해 본다. React-Na code-masterjung.tistory.com 앞써 공부한 내용(설치 및 할일목록 만들기)를 토대로, 내비게이션(navigation)을 공부한다. 참고 IOS 애뮬레이터 리로딩: 커맨드 + R Android 애뮬레이터 리로딩: R 두번 (키보드 입력이 한글인 상태에서는 해당 커맨드가 안먹는다.) https://reactnavigation.o..

첫 회사에서 RN으로 프로젝트를 했었으나, 사실 기억도 안나고 그 이후로 딱히 웹뷰 이외에 직접 RN을 사용하거나 코드를 작성할 일이 없어 새 실리콘 맥북에 적응도 해볼겸 공부해 본다. React-Native apple slicon mac에서 RN 프로젝트 처음부터 셋업 및 공부용 프로젝트. 설치 xcode android studio $ brew install --cask adoptopenjdk/openjdk/adoptopenjdk8 $ brew install watchman $ sudo gem install cocoapods 안드로이드 스튜디오 환경변수 설정 # zsh 사용시 $ vi ~/.zshrc # 맨 아래에 추가 # export ANDROID_HOME=$HOME/Library/Android/sd..

2021/01/23 - [React] - React로 Threejs 예제 따라 구현하기 React로 Threejs 예제 따라 구현하기 css를 공부하다 보니 자연스레 WebGL에 관심이 생겨 기본 개념을 익힐 겸 공식 문서를 따라 만들어 보았다(openGL은 일단 조금 나중에 다시 보는 걸로..). 사실 문서가 너무 잘 돼있어 예제를 단순히 code-masterjung.tistory.com 2번째 구현이다. 처음 예제에서 광원을 줘서 조금 더 3D 다운 개체를 만들었다. 용어가 생소한 부분이 많아 일단 무작정 외울 작정이다. 용어의 이질감을 없애고 이해를 하자(발음도 안되는데 자꾸 이해를 하려고 하니 시간만 낭비했다..) // https://threejsfundamentals.org/threejs/les..

요구 사항에 따라 자동으로 늘어나는 textarea를 구현해야 될 때가 있다. 그전에 textarea에서(input도 동일) caret의 색상을 변경하고 싶다면 아래의 속성을 변경해 주면 된다. caret-color: lightskyblue; 하지만 두께 등도 변경하고 싶다면 기본 제공해 주는 것으로는 불가능하며, 따로 만들어야 한다. 이 글을 쓰는 시점에서는 위 속성만 커스텀이 가능하다. 높이가 변하는 textarea를 구현하는 건 어렵지 않다. 바닐라나 react나 크게 다른 건 사실 없긴 하다. input에 데이터가 입력될 때마다 ref를 가져와서 scrollHeight의 높이만 더해주면 되기 때문이다. const handleResizeHeight = useCallback(() => { if (re..

css를 공부하다 보니 자연스레 WebGL에 관심이 생겨 기본 개념을 익힐 겸 공식 문서를 따라 만들어 보았다(openGL은 일단 조금 나중에 다시 보는 걸로..). 사실 문서가 너무 잘 돼있어 예제를 단순히 따라 하면서 react로 구현한 거 이외에는 별다른 게 없기 때문에 이 글에서는 쓸 내용은 많지 않았다. 하지만 시작한 기록을 남기기 위해 조금만 적어본다. Three.js란? Three.js는 웹에 3D 객체를 쉽게 렌더링하도록 WebGL을 근간에 둔 자바스크립트 3D 라이브러리이다. 사실상 WebGL이지만, WebGL의 경우 점, 섬, 삼각형만 그리는 단순한 자바스크립트 API이기 때문에, 3D 객체를 조금 더 편하고 효율적으로 짤 수 있게 도움을 주는 Three.js 같은 라이브러리를 사용한다..

atlassian에서 만든 react-beautiful-dnd를 이것저것 궁금해져, 내부 코드를 보기 전에 기본 구현 학습을 위해 먼저 만들어 봤다. 자연스러운 애니메이션이나 특별한 기능은 없지만, 기본 드래그 앤 드롭이 어떻게 동작하는지 학습하는 데에는 나쁘지 않은 경험이었다(쉽지 않아~~). 기본적인 이벤트에 대한 설명은 이미 정리해놓은 블로그가 많고 더 특이하거나 추가된 내용도 없기 때문에 생략한다. HTML Drag and Drop API - Web APIs | MDN HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers. The user may select draggable elemen..

왜 이런 방법을 찾아봤을까? 이번에 현재 회사로 이직하면서 디자인 시스템을 만들고 싶다는 디자이너 분과 함께 일하게 되었다. 그분은 이미 다 갖춰진 대기업에서 디자이너로 일하셨었고 실무는 많이 안 해보셨다. 전에 있던 개발자가 모든 페이지마다 컴포넌트를 따로 만들어서 개발했다고 하시며, 그렇게 안 하면 좋겠다는 의사를 보이셨다. 그래서 미리 컴포넌트를 정의하고 그걸 여러 군데에서 사용하면 좋겠다고 했는데, 결국 디자인 시스템을 만드는 방향으로 갔다. 나 역시 동의했고 앞으로 계속 진행될 신규 프로젝트나 레거시 프로젝트 리뉴얼 등 많은 곧에서 재사용되며 우리 회사의 브랜딩을 일관화하며 개발 속도까지 높일 수 있다고 판단했기 때문이다. 여튼 그래서 피그마에 여러 컴포넌트들이 정의되었고, 나는 그것을 기반으로..