본문 바로가기

전체 글

 (134)
CSS position CSS position 프로퍼티는 해당 요소가 화면에 어떻게 위치할 것인지를 결정한다. static: 요소의 default 값이며, top, right, bottom, left, z-index와 같은 값에 영향을 받지 않는다. relative: 초기 요소의 위치는 static인 경우와 같지만 top, right, bottom, left, z-index와 같은 프로퍼티로 오프셋을 설정할 수 있다. z-index의 값이 auto가 아닌 경우에는 stacking context를 생성한다. absolute: 해당 요소는 일반적인 레이아웃 구성에서 벗어나 특정 공간을 부여받지 않는다. 해당 요소는 가장 가까운 위치를 가진 부모요소를 기준으로 위치가 결정된다. 해당 요소 역시 z-index값이 auto가 아니라면 ..
2021-07-18 :: React Native; Interaction Navigating Between Screens 모바일 앱은 보통 여러개의 화면으로 구성이 되어 있다. 여러개의 화면에 대한 표현과 전환은 navigator를 통해 컨트롤 한다. React Native Navigation installation npm install @react-navigation/native @react-navigation/stack npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view for iOS cd ios pod install cd .. react-native-g..
2021-07-17 :: React Native; Design Style 리액트 네이티브에서는 JS를 이용해 어플리케이션을 스타일링한다. 모든 컴포넌트는 style이라는 prop을 가진다. style의 이름과 값은 카멜 표기법이 적용된다는 점을 제외하면 CSS와 흡사하다. 컴포넌트가 복잡해지면 아래 코드 컨벤션과 같이 StyleSheet.create를 이용하는 것이 편리하다. import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; const LotsOfStyles = () => { return ( just red just bigBlue bigBlue, then red red, then bigBlue ); }; const styles = StyleSheet.create({ co..
2021-07-17 :: React Native Official; The Basics https://reactjs.org/docs/forms.html#controlled-components Forms – React A JavaScript library for building user interfaces reactjs.org The Basics view 컴포넌트 안에 Text 컴포넌트를 삽입해서 사용한다. Using a ScrollView 스크롤링이 가능한 컨테이너이다. 스와이핑 제스쳐를 통해서 컨트롤이 가능하다. 데이터의 양이 스크린의 크기를 넘는다면 FlatList를 사용하자. FlatList는 데이터를 동적으로 로딩하여 최적화된 사용자 경험을 제공한다. FlatList의 사용 예시는 아래와 같다. } keyExtractor={(item, index)=> item.id} ItemSepa..
Git Clone으로 프로젝트 시작하기 클론을 하기 위해서 먼저 Git repo의 주소를 알아야한다. repo의 초록색 코드 버튼을 클릭하면 HTTPS, SSH 두 가지 형태의 주소를 확인할 수 있다. 기본적인 git clone 명령어의 사용 방식은 다음과 같다. git clone [REPO_URL] [DIR] 여기서 DIR은 클론할 디렉터리를 의미한다. 또한 DIR 부분은 생략이 가능하며 생략하는 것이 일반적이다. 클론을 하면 로컬 git에 자동으로 remote repo가 origin으로 저장이 되어 있다.
DECK.GL Deck.GL은 WebGL 기반의 데이터 시각화, 분석 프레임워크이다. deck.gl은 visual layers의 스택으로 데이터(JSON 객체)를 표현한다. 리액트의 패러다임을 공유하며 react, mapbox GL와 상성이 좋다. 데이터를 자체적으로 가공한 뒤 렌더링 할 수 있다. interactive한 이벤트를 처리할 수 있다. Mapbox, Google Maps와 함께 사용할 수 있다. 데이터를 여러층으로 설정하여 표현할 수 있다. webGL에 대한 지식이 있으면 커스터마이징 할 수 있다. 2D 지도 위에 3D로 데이터를 표현할 수 있다. 많은 양의 데이터를 처리하기에 용이하다. GeoJSON으로 작업하기 https://deck.gl/playground/ deck.gl Playground deck..
2021-07-08 :: 메뉴와 모달 만들기3 라우터 주소 설계 콜론(:)기호를 이용해 라우터에서 URL 파라미터로 이용할 수 있다. Route역시 우선순위가 존재한다. 높은 우선순위를 가진 라우트를 항상 맨 위에 두도록 URL파라미터와 절대 경로를 같은 경로에 혼용하는 경우, 반드시 절대경로를 위쪽에 두어야 한다. 특정 조건을 만족하는 경우 특정 라우터로 이동하는 로직을 짤 때 if(isSatisfied) 와 같이 구현할 수 있다. create 요청을 Post를 통해 수행할 때. 3번째 인자 객체에 설정을 넣어 전달할 수 있다. 해당 설정에 withCredentials를 통해 쿠키를 공유할 수 있고, 해당 쿠키는 이 요청을 누가 했는지에 대한 정보가 담겨있다. URL 파라미터는 useParams();라는 훅을 통해 접근할 수 있다. URL 파라미터..
history, location, match History 히스토리 API는 여러 자바스크립트 환경에서 세션 히스토리를 관리할 수 있는 패키지이다. 히스토리의 종류로는 다음 3가지가 있다. 보통 히스토리 객체는 browser history를 의미한다. browser history란 HTML5의 history API가 지원되는 브라우저에서 사용되는 히스토리 객체이다. history 객체는 또한 다음과 같은 속성을 가진다. length: 히스토리 스택의 사이즈 action: 현재 액션 push, replace, pop location: 현재 location. location은 아래 속성을 가질 수 있다. pathname: (문자열)URL의 경로 search: (문자열)URL의 쿼리 문자열 hash: (문자열)URL의 해시부분 state: (객체) pu..

티스토리툴바