[JS] Object에 객체 추가 - Object Assign, ES6 spread

React.js 에서는 object를 수정하면 안된다. 수정하고 싶을 땐 기존 object에 요소를 추가/삭제한 새로운 object를 반환해야 한다. 객체 추가할 때 두 가지 방법으로 코드를 작성할 수 있다. key: 작성 일시, value: todo list의 할 일 인 Object를 선언하고, 요소를 추가하는 방법을 공부해보려 한다. 배열로 하는 것에 익숙한데, Object로도 연습하고 정리해보고자 한다. 1. Object Assign const newToDos = Object.assign({}, toDos, {[Date.now()]: { text, done: false }); Object.assign() - JavaScript | MDN Object.assign() 메서드는 출처 객체들의 모든 열거..
프로그래밍 2022. 8. 16. 01:41
[React Native 태그] Touchable 요소들, TextInput

TouchableOpacity TouchableOpacity - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev Press Here TouchableOpacity 태그로 감싼 컴포넌트를 터치할 경우 해당 컴포넌트가 잠시 투명도를 갖게 된다. onPress 외에도 onPressIn, onPressOut, onLongPress 속성을 추가할 수 있다. activeOpacity={0.6} 투명도를 설정할 수 있다. TouchableHighlight TouchableHighlight -..
프로그래밍/React Native 2022. 8. 16. 01:21
React Native - (2) 기본 문법, Styling, Third Party Packages, Flex Layout

Component - 화면에 렌더링되는 것 - return () 내에 태그 형태로 작성됨 API - 운영체제와 소통 - JS 코드로 작성됨 더보기 기본 App.js 코드 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( Hello world! ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, text : { fo..
프로그래밍/React Native 2022. 8. 15. 20:03
[React] Heroku 배포 시 이슈 정리 (경험 기록)

1. Build pack 정의 CRA(Create-React-App) 로 만든 리액트 앱은 Build Pack을 세팅해주어야 한다. Settings > BuildPacks에서 추가해준다. node.js를 선택해주고, 아래 링크는 직접 add 해주자. https://github.com/mars/create-react-app-buildpack.git 2. Package.json 수정 engine으로 node, npm의 권장 버전을 명시해주고, scripts 안에 heroku-prebuild, heroku-postbuild도 명시하였다. "version": "0.1.0", "private": true, "engine": { "node": "16.x", "npm": "8.x" }, "scripts": { "st..
프로그래밍/React 2022. 8. 15. 00:34
React Native - (1) 작동원리, Expo 활용 개발, 설치 (Mac 기준)

React Native 작동 원리 React Native 앱 = 그림의 모든 structure + JS 코드(Javascript, Markup/Styling) = Bridge를 통해서 JS 코드가 운영체제와 통신을 할 수 있도록 하는 infra structure React Native = 인터페이스 : JS 코드(Javascript, Markup/Styling)와 운영체제(iOS, 안드로이드) 사이에 있는 인터페이스 React Native는 bridge를 통해 JS 코드를 운영체제에 전달해준다. 이런 면에서 React Native는 shell과 유사하다. 상세 작동방식 1. Event 2. Collect data and notify iOS, Andriod가 발생하는 이벤트들 수집 (ex. 화면 클릭) 3..
프로그래밍/React Native 2022. 8. 13. 03:07
[Redux 기초 공부]

Introduction 결론부터 말하자면, 아래와 같은 이유들로 상태관리 라이브러리에 대해 반드시 공부해야겠다고 생각했다. 1. 여러 개의 component에 props를 반복 전달하는 것이 복잡하고 귀찮기 때문 2. context API보다 전역 관리 변수를 효율적으로 관리할 수 있다. 3. (이건 공부하다가 알게 된 것인데) subscribe로 변경사항이 생긴 컴포넌트만 리렌더링할 수 있다. - Redux가 필요한 이유 내가 생각하기에 Redux가 필요한 이유를 가장 간단하게 잘 설명하는 영상이다. React Hooks로 충분히 커버가 가능하다고 생각했던 나의 어리석음을 바로잡아 주었던 글. React Hooks와 Redux에 대한 개념을 바로잡기에 좋은 글이다. [번역] React Hooks가 Re..
프로그래밍/React 2022. 8. 4. 19:58
[프로그래머스 Lv2. 메뉴 리뉴얼 - 파이썬] extend, append 차이, Combinations, Counter 내장함수

코딩테스트 연습 - 메뉴 리뉴얼 레스토랑을 운영하던 스카피는 코로나19로 인한 불경기를 극복하고자 메뉴를 새로 구성하려고 고민하고 있습니다. 기존에는 단품으로만 제공하던 메뉴를 조합해서 코스요리 형태로 재구성해서 programmers.co.kr 처음 짠 코드 (틀린 코드) 문제를 푼 시점에서 생각해보니, 문제를 제대로 이해하지 않고 짜면서 접근을 바꾸려다보니 시작부터 틀어졌다. course 개수마다 가장 많은 것들을 answer로 내놓아야 한다는 점을 간과하고, 처음엔 모든 조합을 생성해서 table이라는 딕셔너리에 넣고, 개수가 많은 것들을 컷하면 되는 간단한 문제라고 생각했었다. 그래서 모든 가능한 경우를 table ={} 에 넣고 course 개수로 정렬하고, 전체 조합이 다 있는 딕셔너리 안에서 ..
알고리즘, 코딩테스트/프로그래머스 문제풀이 2022. 6. 30. 18:10
[프로그래머스 Lv1. 신고 결과 받기 - 파이썬] dictionary 이용 문제 풀이 (내 풀이, 모범 풀이 비교)

미국여행 후 정말 오랜만에 푸는 거라 dictionary 문법도 다 까먹어서 구글링을 통해 고심하며 푼 나의 코드.. 시간초과 날 것 같은데 걱정하며 돌렸지만 그래도 통과는 했다. 그치만 아무리 봐도 맘에 들지 않는 코드 모범 답안을 분석해봐야겠다. 나도 저렇게 효율적인 코드를 짤 수 있도록..! 내 풀이 def solution(id_list, report, k): answer = [] p_dict = {} # {'신고한 유저': ['신고 당한 유저']} declared = {} # 신고 당한 유저 {'name': num} for idl in id_list: p_dict[idl] = '' declared[idl] = 0 for r in report: p1, p2 = r.split() if p2 in p_..
알고리즘, 코딩테스트/프로그래머스 문제풀이 2022. 6. 30. 01:26
1 2 3 4 5 6 7 8 ··· 12