티스토리

Jacob's Development Blog

검색하기

블로그 홈

Jacob's Development Blog

code-masterjung.tistory.com/m

제이콥의 개발 블로그

구독자: 29

방명록 방문하기

주요 글 목록

React Native에서 상태 관리 상태 관리라는 주제는 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를 사용하려고 하니, 너무 많은 타이핑과 구조체들이 필요해서 실제로 프로덕션 환경에서 도입하여 .. 공감수 1 댓글수 0 2021. 12. 10.
Recoil 기초 개념 및 사용법 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)할 수 있는 상태 단위이.. 공감수 3 댓글수 0 2021. 12. 10.
[React Native] 다이어리 만들기 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.. 공감수 3 댓글수 0 2021. 12. 7.
[React Native] 내비게이션 및 Hooks 익히기 이전글 참고하기 2021.11.29 - [React] - [React Native] 설치 및 할일 목록 만들기 [React Native] 설치 및 할일 목록 만들기 첫 회사에서 RN으로 프로젝트를 했었으나, 사실 기억도 안나고 그 이후로 딱히 웹뷰 이외에 직접 RN을 사용하거나 코드를 작성할 일이 없어 새 실리콘 맥북에 적응도 해볼겸 공부해 본다. React-Na code-masterjung.tistory.com 앞써 공부한 내용(설치 및 할일목록 만들기)를 토대로, 내비게이션(navigation)을 공부한다. 참고 IOS 애뮬레이터 리로딩: 커맨드 + R Android 애뮬레이터 리로딩: R 두번 (키보드 입력이 한글인 상태에서는 해당 커맨드가 안먹는다.) https://reactnavigation.o.. 공감수 10 댓글수 0 2021. 12. 3.
[React Native] 설치 및 할일 목록 만들기 첫 회사에서 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.. 공감수 1 댓글수 0 2021. 11. 29.
React로 Threejs 예제 따라 구현하기 2 2021/01/23 - [React] - React로 Threejs 예제 따라 구현하기 React로 Threejs 예제 따라 구현하기 css를 공부하다 보니 자연스레 WebGL에 관심이 생겨 기본 개념을 익힐 겸 공식 문서를 따라 만들어 보았다(openGL은 일단 조금 나중에 다시 보는 걸로..). 사실 문서가 너무 잘 돼있어 예제를 단순히 code-masterjung.tistory.com 2번째 구현이다. 처음 예제에서 광원을 줘서 조금 더 3D 다운 개체를 만들었다. 용어가 생소한 부분이 많아 일단 무작정 외울 작정이다. 용어의 이질감을 없애고 이해를 하자(발음도 안되는데 자꾸 이해를 하려고 하니 시간만 낭비했다..) // https://threejsfundamentals.org/threejs/les.. 공감수 3 댓글수 0 2021. 1. 31.
React로 줄바꿈에 따라 늘어나는 textarea 구현하기(+ caret 색상 변경) 요구 사항에 따라 자동으로 늘어나는 textarea를 구현해야 될 때가 있다. 그전에 textarea에서(input도 동일) caret의 색상을 변경하고 싶다면 아래의 속성을 변경해 주면 된다. caret-color: lightskyblue; 하지만 두께 등도 변경하고 싶다면 기본 제공해 주는 것으로는 불가능하며, 따로 만들어야 한다. 이 글을 쓰는 시점에서는 위 속성만 커스텀이 가능하다. 높이가 변하는 textarea를 구현하는 건 어렵지 않다. 바닐라나 react나 크게 다른 건 사실 없긴 하다. input에 데이터가 입력될 때마다 ref를 가져와서 scrollHeight의 높이만 더해주면 되기 때문이다. const handleResizeHeight = useCallback(() => { if (re.. 공감수 3 댓글수 0 2021. 1. 29.
React로 Threejs 예제 따라 구현하기 css를 공부하다 보니 자연스레 WebGL에 관심이 생겨 기본 개념을 익힐 겸 공식 문서를 따라 만들어 보았다(openGL은 일단 조금 나중에 다시 보는 걸로..). 사실 문서가 너무 잘 돼있어 예제를 단순히 따라 하면서 react로 구현한 거 이외에는 별다른 게 없기 때문에 이 글에서는 쓸 내용은 많지 않았다. 하지만 시작한 기록을 남기기 위해 조금만 적어본다. Three.js란? Three.js는 웹에 3D 객체를 쉽게 렌더링하도록 WebGL을 근간에 둔 자바스크립트 3D 라이브러리이다. 사실상 WebGL이지만, WebGL의 경우 점, 섬, 삼각형만 그리는 단순한 자바스크립트 API이기 때문에, 3D 객체를 조금 더 편하고 효율적으로 짤 수 있게 도움을 주는 Three.js 같은 라이브러리를 사용한다.. 공감수 2 댓글수 0 2021. 1. 23.
[React] 간단하게 예제 코드로 구현해 보는 Drag and Drop (드래그앤드롭) 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.. 공감수 2 댓글수 0 2021. 1. 10.
[React Dot Notation] 리액트 컴포넌트 점 표기법 왜 이런 방법을 찾아봤을까? 이번에 현재 회사로 이직하면서 디자인 시스템을 만들고 싶다는 디자이너 분과 함께 일하게 되었다. 그분은 이미 다 갖춰진 대기업에서 디자이너로 일하셨었고 실무는 많이 안 해보셨다. 전에 있던 개발자가 모든 페이지마다 컴포넌트를 따로 만들어서 개발했다고 하시며, 그렇게 안 하면 좋겠다는 의사를 보이셨다. 그래서 미리 컴포넌트를 정의하고 그걸 여러 군데에서 사용하면 좋겠다고 했는데, 결국 디자인 시스템을 만드는 방향으로 갔다. 나 역시 동의했고 앞으로 계속 진행될 신규 프로젝트나 레거시 프로젝트 리뉴얼 등 많은 곧에서 재사용되며 우리 회사의 브랜딩을 일관화하며 개발 속도까지 높일 수 있다고 판단했기 때문이다. 여튼 그래서 피그마에 여러 컴포넌트들이 정의되었고, 나는 그것을 기반으로.. 공감수 3 댓글수 0 2020. 12. 25.
[React Dynamic Component] 동적으로 컴포넌트를 보여주는 방법 실제 프로덕션 환경에서 컴포넌트를 만들다 보면, 여러 경우에 따라 다른 컴포넌트를 보여줘야 하는 경우가 많다. 예를 들어 파일 다운로드 관련하여 준비, 진행, 완료라는 세 가지 타입을 가진 데이터를 내려준다고 해보자. export enum DownLoadStatus { "ready" = "ready", "progress" = "progress", "complete" = "complete" } 그리고 프론트에서는 이 상태에 따라 다른 컴포넌트를 보여줘야 한다. 그럼 아래와 같이 코드를 작성할 수 있을 것이다. import React from 'react'; export function DownLoad({ status }) { ...logic if (DownLoadStatus.ready === status).. 공감수 5 댓글수 0 2020. 12. 22.
React + Styled-components로 항상 보이는 스크롤 구현하기 오늘은 정말 간단한 항상 보이는 스크롤바를 구현하려고 한다. 위와 같이 일반적인 웹사이트에서는 사실 사용할 일이 많지 않다. 오히려 스크롤이 계속 남으면 거슬리기만 하고, 사용자 경험을 높이진 않을 것이다. 그럼 언제 필요할까? 나 같은 경우는 관리자 페이지를 구현할 때 사용했다. 커머스 어드민의 경우 Table을 그린다고 했을 때 컬럼이 정말 많다. 가격, 상품명, 상품번호, 쿠폰 적용, 할인가, 공급가, 전시 여부 등 나열하면 끝도 없다. 조금 극단적으로 보여준다면 아래와 같은 그림이 된다. 1번 영역은 이미 화면 밖으로 벗어난거라고 생각하면 되고, 2번 영역이 우리가 보면서 디자인이 완성된 카드 부분이라고 생각하면 된다. 저 밖으로 벗어나가면 가로 스크롤을 통해서 내용을 볼 수가 있겠지만, 어드민 .. 공감수 3 댓글수 0 2020. 7. 26.
React + Styled-components로 구현해본 아코디언(Accordion) 간단하게 아코디언(Accordion)을 구현해 보려고 한다. 사실 Bootstrap, Material-ui 등 이미 많이 구현되어 있어서 직접 구현할 일은 많지 않겠지만, 자체 디자인 시스템을 만들기 시작한 지 얼마 안 되었다면 가끔은 직접 구현할 일도 있다. 사실 내 이야기이다... 뭐 여하튼... 어려운 것은 아니니깐 살짝만 구현해 보려고 한다. Accordion이 뭔데? Accordion은 접었다 펼수 있는 카드 컴포넌트라고 생각하면 쉽다. 예를 들어 실제 우리 홈페이지에서 내가 구현한 컴포넌트를 본다면 아래와 같은 모습이다. 결제 페이지인만큼 애니메이션은 과하지 않은 선에서 자연스럽게 적용해봤다. Typescript와 styled-components를 이용해서 만들어 봤는데, 사실 성능을 생각한다.. 공감수 14 댓글수 1 2020. 7. 26.
CSS in 리액트 - Inline Style 글을 시작하기 전에 넋두리... 며칠 전 나는 간단한(?) 카드를 만드는 미니 프로젝트를 만들었다. 메인 라이브러리로는 평소 자주 사용하던 React를 사용했고, UI 라이브러리는 이뻐서 사용해 보고 싶었지만 기회가 없어 못 사용해봤던 antd를 사용했다. 그리고 다른 언어와 기술들을 조합하여 프로젝트를 완성했다. 사실 antd를 사용했더라도 당연히 내가 구현하고 싶은 방향과 UI/UX가 있기 때문에 CSS를 수정했다. 물론 리액트를 사용하며 inline CSS, *. css 방식, styled components, CSS-in-JS, scss (이건 조금?) 사용해본 경험은 있었지만, 빠르게 구현하자는 생각에 inline CSS를 통해 장바구니 앱을 구현했다. "그런데 이렇게 구현하면 어떤 일이 일어났.. 공감수 6 댓글수 0 2020. 2. 1.
[React] 리액트 (리)렌더링, React.memo React는 어떻게 작동할까? 먼저 아래 있는 앱과 부모, 자식 컴포넌트로 구성된 예제를 보자. // App.js import React, { useEffect } from "react"; import { Parent } from "./Parent"; import { Child } from "./Child"; function App() { console.log("자식 렌더링 시작"); useEffect(() => { console.log("자식 리렌더링!"); }); return ( ); } export default App; 더보기 // 부모 컴포넌트(Parent.js) import React, { useEffect, useState } from "react"; export const Parent = .. 공감수 10 댓글수 5 2020. 1. 31.
react-intl 적용하기 이 글에서 사용한 코드(깃 저장소) - https://github.com/JungKyuHyun/react-intl-test 오랜만에 올리는 React 관련 포스팅. 최근 react-native 프로젝트에 react-intl을 적용하면서 찾아본 것들을 적어보려고 한다. 사실 이전에도 react를 이용하여 관리자 페이지를 만들었을 때도 react-intl을 적용하는 이슈를 할당받아 해결했었다. (TMI: Jira를 사용하고 회사라는 곳에서 받은 생애 첫 이슈여서, 평생 기억에 남을거 같다.) 하여튼 react로 만든 웹이건, react-native로 만든 앱이건 둘다 사용 가능하다는 말을 하고 싶었다. 국제화라는 게 생각보다 어렵지 않으니 관련하여 참고하면 좋을 거 같다. react-intl 사실 이 라이브.. 공감수 7 댓글수 1 2020. 1. 11.
DOM과 Virtual DOM DOM 돔(DOM)이란 Document Object Model의 약자이며, HTML 및 XML 문서를 위한 API이다. 돔은 객체 간의 관계를 지정하지 않았기 때문에 논리적 구조라고 하며, 개발자는 DOM을 사용하여 문서를 작성하고 구조를 탐색하며, 돔에 요소 또는 내용을 추가, 수정, 삭제할 수 있다. Dom을 조금 더 이해하려면 Data Structure Tree(데이터 트리 구조)에 대해 이해 해야 한다. Data Structure Tree 트리의 최상위 데이터(Root, 루트)는 매우 중요하거나 그 아래 다른 요소를 포함하기 위해 존재한다. 루트는 매우 중요한 역할을 하며, 트리에서 추출할 정보를 검색할 수 있는 공간을 제공한다. DOM Parser 모든 브라우저에는 HTML 문서를 DOM으로 구.. 공감수 9 댓글수 2 2019. 12. 13.
[React Hooks] useMemo 사용하기 먼저 간단하게 `메모제이션`에 대해 알고 넘어가자. 메모제이션(Memoization) → 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법. → 적절히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 더 사용하는 경향이 있어도 성능 측면에서 큰 이점이 있어서 알고리즘 성능 최적화에 많이 사용된다. 컴퓨터프로그래밍용어로, 동일한 계산을 반복해야 할 경우 한 번 계산한 결과를 메모리에 저장해 두었다가 꺼내 씀으로써 중복 계산을 방지할 수 있게 하는 기법이다.동적 계획법의 핵심이 되는 기술로써 결국 메모리라는 공간 비용을 투입해 계산에 소요되는 시간 비용을 줄이는 방식이다. - 나무위키 - → 시간복잡도를 O(N)으로 줄인다. useMemo 일반적으로 Re.. 공감수 2 댓글수 0 2019. 12. 10.

반응형

문의안내

티스토리
로그인
고객센터

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