![](http://i1.daumcdn.net/thumb/C200x200/?fname=https://blog.kakaocdn.net/dn/bctWa7/btsC9zpPHZg/zn2eGf5s42eodjTnvOtLvK/img.gif)
이번에도 마찬가지로 front-end 국민 실습 App인 todoList를 만들어 보려고 한다. 나름 CRUD도 다 들어가야 하고, 기본적으로 react-native app이 어떤 '형식'으로 구성이 되어 만들어지는 지를 확인할 수 있는 아주 좋은 실습이라고 생각은 하지만, 조금 지루한 프로젝트인 건 반박할 수 없는 사실이다. App의 데이터는 react를 공부하면서 다뤘던 useState Hook을 기반으로 하며, StyleSheet를 사용하는 것과 아래 코드에서 확인할 수 있겠지만, 버튼과 같은 컴포넌트들을 터치했을 때 그 터치 효과를 정해줄 수 있는 여러 컴포넌트를 을 사용하는 걸 제외하면 react App 제작과 크게 다르지 않다. 바로 한번 확인해보자. ◎App.js import React, {..
![](http://i1.daumcdn.net/thumb/C200x200/?fname=https://blog.kakaocdn.net/dn/s1GDW/btsC9mxfJdm/njJ7aGK0EENMfraznhcu1K/img.png)
React Native에서 StyleSheet의 resizeMode 속성은 이미지의 크기 조정 방식을 결정하는 데 사용되는 것이다. 이 속성에는 여러 옵션이 있는데, 주요 옵션은 다음과 같다. - cover: 이미지가 컨테이너의 경계를 초과하지 않도록 조정되며, 비율은 유지된다. 이미지의 일부가 컨테이너에 맞지 않을 수 있다. - contain: 이미지가 컨테이너 안에 완전히 들어가도록 조정되며, 비율은 유지된다. 이미지의 너비나 높이가 컨테이너의 너비나 높이보다 작아질 수 있다. - stretch: 이미지가 컨테이너의 너비와 높이에 맞도록 늘어난다. 이 때 이미지의 원래 비율은 유지되지 않는다. - repeat: 뷰의 크기대로 이미지를 리사이징한다. 이 과정에서 이미지의 가로 세로 비율이 원본과 달라질..
거의 모든 웹/앱 개발 언어 실습의 고유 첫 프로젝트인 아주 간단히 버튼으로 숫자만 하나씩 증가/감소시킬 수 있는 카운터를 만들어보자. ◎components/Counter.js import React from 'react'; import {Button, StyleSheet, Text, View} from 'react-native'; const Counter = ({count, onIncrease, onDecrease}) => { return ( {count} ); }; const styles = StyleSheet.create({ wrapper: { flex: 1, }, numberArea: { flex: 1, alignItems: 'center', justifyContent: 'center', }, n..
JavaScript의 비구조화 할당은 객체나 배열로부터 속성이나 요소를 변수에 쉽게 할당할 수 있도록 하는 표현식이다. 이 기능은 ES6(ECMAScript 2015)에서 도입되었으며, 코드의 간결성과 가독성을 향상시키는 데 도움이 된다. 객체 비구조화 할당 객체의 비구조화 할당을 사용하면 객체의 속성을 직접 변수로 할당할 수 있다. const obj = { a: 1, b: 2, c: 3 }; // 전통적인 방식 const a = obj.a; const b = obj.b; const c = obj.c; // 비구조화 할당 const { a, b, c } = obj; 추가 기능: 기본값 할당: 객체에 해당 속성이 없을 경우, 기본값을 할당할 수 있다. const { a, b, c, d = 4 } = obj..
react-native를 공부한 지 얼마 지나지 않았지만, 벌써 마음에 든다. 바로 css 파일을 굳이 따로 만들지 않는다는 것! 개인적으로 css 파일을 따로 만들고 각종 셀렉터들을 막 찾아다니는 걸 정말 싫어해서... 이건 좀 반갑다. 간단하게 react-native에서 사용하는 StyleSheet의 특징과 예제 코드를 보자. CSS와 StyleSheet의 차이점 - 셀렉터라는 개념이 존재하지 않는다. - 모든 스타일 속성은 camelCase로 작성해야만 한다. - display 속성은 기본적으로 flex이며, 다른 값은 none 밖에 없다. - flexDirection 속성의 기본값은 웹에서는 row이지만, react-native 에서는 column이다. - react-native에서 스타일링할 때..
js를 많이 사용하는 사람들은 보통 ESLint로 조금 더 까다로운 문법 검사를 하면서 에러를 쉽게 찾는다고 하시길래.. 나도 한번 써보려고 한다. 기본으로 생성되는 config 파일을 그대로 두고 쓰려니까, 세미콜론도 못쓰게 하시길래. 내가 사용할 옵션들을 추가하고, 쓸데없는 옵션은 비활성화한 파일을 저장해두려고 한다. ◎.prettierrc.js module.exports = { arrowParens: 'avoid', bracketSameLine: true, bracketSpacing: false, singleQuote: true, trailingComma: 'all', }; ◎.eslintrc.js module.exports = { root: true, extends: '@react-native',..
![](http://i1.daumcdn.net/thumb/C200x200/?fname=https://blog.kakaocdn.net/dn/RcXt7/btsC86abRBS/0BILt0OTx458Xz61UYBCzk/img.png)
Binary Search Tree(이진 검색 트리)는 널리 사용되는 형태의 이진 트리이다. 부모 노드와 자식 노드 간의 관계는 아래와 같다. 왼쪽 노드 left) current = current->left; /* 가장 작은 노드 반환 */ return current; } private: /* 원소 검색/삽입은 재귀적으로 동작하기 때문에 실제 구현을 impl에서 하고, private으로 지정하여 외부에서 직접 호출을 막는다. */ node* find_impl(node* current, int value) { if(!current) { cout data == value) { cout right) current->right = new node{value, NULL, NULL}; else insert_impl(..
![](http://i1.daumcdn.net/thumb/C200x200/?fname=https://blog.kakaocdn.net/dn/9Iz4C/btsC7mX3jDS/5WPiYdkw01w2CvbvpKMbz0/img.png)
이진 트리는 각 노드가 최대 두 개의 자식 노드(왼쪽과 오른쪽)를 가질 수 있는 계층적 자료 구조이다. 이 구조에서 모든 노드는 데이터를 저장하며, 주로 탐색, 정렬 작업에 효율적이다. 이진 트리는 다양한 형태(예: 이진 탐색 트리, AVL 트리)로 존재한다. 우선 가장 기본적인 형태의 이진 트리로 아래와 같은 조직도를 구현하려고 한다. 코드와 함께 살펴보자. #include #include #include using namespace std; struct node { string position; // 각 노드는 'position'이라는 문자열을 가지며, 직책을 나타낸다. node* first; // 'first' 포인터는 첫 번째 자식 노드를 가리킨다. node* second; // 'second' ..
![](http://i1.daumcdn.net/thumb/C200x200/?fname=https://blog.kakaocdn.net/dn/AJZdb/btsC4JGlgVO/8cdq76BRFk5EkBuTFW6Tpk/img.png)
react를 한창 공부를 하던 때에 같이 했으면 참 좋았을 걸... 그때 괜히 Flutter가 더 좋대!라는 소리를 어디서 봐서 겉멋 부린다고 재낀걸 아주 후회하고 있다... 물론 flutter가 안좋다는 게 아니라, 회사 프로젝트 하나가 모바일을 react-native로 가는 바람에... flutter를 현재 딱히 쓸 곳이 없어졌다. 이제 새해도 왔고, 진짜 본격적으로 나만의 서비스를 하나 가지고 싶어서 리액트 숙련도가 많이 올라온 지금! 리액트 네이티브를 공부하려고 한다. Hello! react-native! 길벗 출판사의 react-native를 다루는 기술을 참고하여 차근차근 하나씩 해보려고 한다. 우선, 첫 프로젝트를 만들어보자! 새 프로젝트 생성 명령어 npx react-native init ..
![](http://i1.daumcdn.net/thumb/C200x200/?fname=https://blog.kakaocdn.net/dn/bwfbL6/btsC2x0crOZ/AnYKH9jmpKeXNHGkSMrUX1/img.png)
누리가 우리 집에 온 지 12일째 되는 날 아침이다. 사실 누리가 집에서 하는 일이라고는 내가 집에 오면 조금 반기고 돌아다니다가 다시 자는 게 전부라서 딱히 올릴 사진을 많이 찍은 건 아닌데, 오늘은 이런저런 누리의 몰랐던 모습이 몇 가지 보여서 거기에 대하여 이야기해볼까 한다. 1. 뒤적뒤적 뭉치가 아주 오래 우리집에서 있어서 아예 신경을 안 쓰고 있었는데, 누리 이 녀석... 쓰레기통을 뒤지는 버릇이 있는 거 같다. 주말에 혼자 집에서 갈비를 한 3줄 구워 먹고는, 그 뼈다귀를 키친타월에 싸서 쓰레기통에 버려놨었다. 다 먹고 거실에 있는데, 뭔가 자꾸 주방에서 뒤적뒤적 이상한 소리가 났다. 설마... 이러고 갔는데, 이미 쓰레기통 주변은 초토화... 뼈다귀에는 다행히 꽁꽁 싸매져 있어서 입을 가져다..
- 정보보안기사 #실기 #정리
- react
- 인천 구월동 맛집
- await
- AsyncStorage
- redux-thunk
- 이탈리안 레스토랑
- redux
- Promise
- 맛집
- Async
- 인천 구월동 이탈리안 맛집
- 파니노구스토
- javascript
- react-native
- Total
- Today
- Yesterday