jineecode

react-native 기준입니다. 기본적인 extends 잘 만들어진 styled-component를 괄호를 사용하여 extends 해준다. // The Button from the last section without the interpolations const Button = styled.button` color: palevioletred; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; // A new component based on Button, but with some override styles const TomatoButton = styled(But..

1. React Native의 Dimensions import {Dimensions} from 'react-native'; const basicDimensions = { width: 360, height: 800, }; const width: any = ( Dimensions.get('screen').width * (1 / basicDimensions.width) ).toFixed(2); const height: any = ( Dimensions.get('screen').height * (1 / basicDimensions.height) ).toFixed(2); const fontSizes = { fontSizes16: width * 16, fontSizes14: width * 14, fontSizes1..

프레임워크(Framework) 프레임워크는 뼈대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술. 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성되어 있습니다. 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의합니다. 컴포넌트들은 재사용이 가능합니다. 높은 수준에서 패턴들을 조작화 할 수 있습니다. 라이브러리(Library) 라이브러리는 단순 활용가능한 도구들의 집합. 즉, 개발자가 만든 클래스에서 호출하여 사용, 클래스들의 나열로 필요한 클래스를 불러서 사용하는 방식을 취하고 있습니다. 프레임워크와 라이브러리의 차이점 라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이 누구에게/어디에 있는가에 있습니다. 즉, 어플리케이션의 Flow(흐름)를 누가 쥐고..

Attempt to invoke interface method 'boolean com.swmansion.reanimated.layoutReanimation.NativeMethodsHolder.isLayoutAnimationEnabled()' on a null object reference 다음 코드로 고친다. https://github.com/software-mansion-labs/reanimated-2-playground/commit/71642dbe7bd96eb41df5b9f59d661ab15f6fc3f8 Android · software-mansion-labs/reanimated-2-playground@71642db This commit does not belong to any branch on th..

Warning: [react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system! 다음과 같은 버전으로 설치해주세요. yarn add react-native-gesture-handler@2.1.1

함수를 만들어 object 데이터를 다루는 이유 옛날식 1. object 자료가 복잡할 때 좋다. var human = { name: 'Park', age: 30, nextAge() { return this.age + 1 } } human.age + 1; // 31 // 불변성을 유지할 수 없다. human.nextAge(); // 꺼내쓰는 법을 미리 정의 // 31 // 불변성을 유지할 수 있다. 2. object 자료 수정 시 편리하다. var human = { name: 'Park', age: 30, nextAge() { return this.age + 1 }, setAge(나이) { this.age = parseInt(나이); }, } human.age = '20'; // 데이터 수정 시 실수 유..

넥스트에서는 기본적으로 .env.local를 사용하여 불러온 환경변수에 대해 브라우저에서는 노출되지 않고 서버에서만 노출되게 설정되어 있음. // .env.local API_URL = http://localhost:3000 yarn dev Loaded env from /Users/niege/practice/next-practice/next-todo/.env.local // pages/index.tsx import React from "react"; import { GetServerSideProps, NextPage } from "next"; import TodoList from "./components/TodoList"; import { TodoType } from "../types/todo"; impo..

Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다. const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.keys(object1)); // ['a', 'b', 'c'] 예) // todo.d.ts // d.ts는 타입스크립트 코드의 타입 추론을 돕는 파일이다. export type TodoType = { id: number; text: string; color: "red" | "orange" | "yellow" | "green" | "blue" | "navy"; checked: boolean; }; // index.tsx import Reac..